Welcome Page: Move from brave-ui to brave-core (#2896)

Welcome Page: Move from brave-ui to brave-core

Co-authored-by: Nejc Zdovc <[email protected]>
Co-authored-by: Ross Moody <[email protected]>
Co-authored-by: Pete Miller <[email protected]>
Co-authored-by: Peter Xu <[email protected]>

Author: 4 people

components/brave_welcome_ui/brave_welcome.tsx

@@ -11,7 +11,7 @@ import Theme from 'brave-ui/theme/brave-default'
 import { ThemeProvider } from 'brave-ui/theme'
 
 // Components
-import App from './components/app'
+import App from './containers/app'
 
 // Utils
 import store from './store'

components/brave_welcome_ui/components/button/index.ts

@@ -0,0 +1,79 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License. v. 2.0. If a copy of the MPL was not distributed with this file.
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { ComponentType } from 'react'
+import styled, { css } from 'brave-ui/theme'
+import Button, { Props as ButtonProps } from 'brave-ui/components/buttonsIndicators/button'
+
+interface BaseButtonProps {
+  active?: boolean
+}
+
+const BaseButton = styled<BaseButtonProps, 'button'>('button')`
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  display: block;
+  line-height: 1;
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: inherit;
+`
+
+export const FooterButton = styled(Button as ComponentType<ButtonProps>)`
+  outline: none;
+  border: 1px solid ${p => p.theme.palette.grey400};
+  color: ${p => p.theme.color.text};
+
+  &:hover {
+    opacity: .9;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px rgba(255,80,0,0.2);
+  }
+`
+
+export const SkipButton = styled(BaseButton)`
+  color: ${p => p.theme.color.text};
+  text-decoration: underline;
+  font-weight: 300;
+  letter-spacing: 0;
+
+  &:hover {
+    opacity: .9;
+  }
+`
+
+export const PrimaryButton = styled(Button as ComponentType<ButtonProps>)`
+  outline: none;
+
+  &:hover {
+    opacity: .9;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px rgba(255,80,0,0.2);
+  }
+`
+
+export const Bullet = styled(BaseButton as ComponentType<any>)`
+  padding: 0 7px;
+  font-size: 36px;
+  color: #7C7D8C;
+  letter-spacing: 0;
+
+  &:hover {
+    color: #343546;
+  }
+
+  ${p => p.active && css`
+    color: #FB542B;
+
+    &:hover {
+      color: #C72E03;
+    }
+  `}
+`

components/brave_welcome_ui/components/images/index.ts

@@ -0,0 +1,81 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License. v. 2.0. If a copy of the MPL was not distributed with this file.
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled, { keyframes } from 'styled-components'
+
+import LionImage from './lion_logo.svg'
+import ImportImage from './welcome_import.svg'
+import RewardsImage from './welcome_rewards.svg'
+import SearchImage from './welcome_search.svg'
+import ShieldsImage from './welcome_shields.svg'
+import ThemeImage from './welcome_theme.svg'
+import WelcomeImage from './welcome_bg.svg'
+
+const BaseImage = styled<{}, 'img'>('img')`
+  box-sizing: border-box;
+  display: block;
+  max-width: 100%;
+`
+
+export const WelcomeLionImage = styled(BaseImage).attrs({ src: LionImage })`
+  height: 140px;
+`
+
+export const WelcomeImportImage = styled(BaseImage).attrs({ src: ImportImage })`
+  height: 190px;
+`
+
+export const WelcomeRewardsImage = styled(BaseImage).attrs({ src: RewardsImage })`
+  height: 190px;
+`
+
+export const WelcomeSearchImage = styled(BaseImage).attrs({ src: SearchImage })`
+  height: 190px;
+`
+
+export const WelcomeShieldsImage = styled(BaseImage).attrs({ src: ShieldsImage })`
+  height: 190px;
+`
+
+export const WelcomeThemeImage = styled(BaseImage).attrs({ src: ThemeImage })`
+  height: 190px;
+`
+
+interface BackgroundProps {
+  position: string
+}
+
+export const topToBottom = keyframes`
+  from {
+    transform: translateY(-100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+`
+
+export const BackgroundContainer = styled<{}, 'div'>('div')`
+  box-sizing: border-box;
+  width: inherit;
+  height: inherit;
+  position: absolute;
+  animation-delay: 0s;
+  animation-name: ${topToBottom};
+  animation-duration: 2000ms;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  overflow: hidden;
+`
+
+export const Background = styled<BackgroundProps, 'div'>('div')`
+  box-sizing: border-box;
+  background: url('${WelcomeImage}') repeat-x;
+  width: 500%;
+  height: inherit;
+  will-change: transform;
+  transform: translateX(${p => p.position});
+  transition: transform ease-in-out 1200ms;
+`