styling

brave · Jul 23, 2019 · 49acf31 · 49acf31
1 parent 16bbcc6
commit 49acf31
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 43 deletions.
diff --git a/src/features/welcome/images/index.ts b/src/features/welcome/images/index.ts
@@ -35,20 +35,16 @@ export const WelcomeSearchImage = styled(BaseImage).attrs({ src: SearchImage })`
 `
 
 export const WelcomeShieldsImage = styled(BaseImage).attrs({ src: ShieldsImage })`
-  height: 190px;
+  height: 210px;
 `
 
 export const WelcomeThemeImage = styled(BaseImage).attrs({ src: ThemeImage })`
   height: 190px;
 `
 
-interface BackgroundProps {
-  position: string
-}
-
 export const topToBottom = keyframes`
   from {
-    transform: translateY(-100%);
+    transform: translateY(100%);
   }
 
   to {
@@ -70,12 +66,14 @@ export const BackgroundContainer = styled<{}, 'div'>('div')`
   overflow: hidden;
 `
 
-export const Background = styled<BackgroundProps, 'div'>('div')`
+export const Background = styled<{}, '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;
+  background: url('${WelcomeImage}');
+  width: 100%;
+  height: 136px;
+  background-size: cover;
+  background-position-x: center;
+  position: absolute;
+  bottom: 0;
+  overflow: hidden;
 `
diff --git a/src/features/welcome/text/index.ts b/src/features/welcome/text/index.ts
@@ -2,24 +2,26 @@
  * 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 from 'styled-components'
-import { Heading } from '../../../index'
+import styled from '../../../theme'
 
-export const Title = styled(Heading)`
-  font-size: 28px;
-  color: #212121;
-  margin: 10px 0 0;
+export const Title = styled.h1`
+  font-family: ${p => p.theme.fontFamily.body};
+  color: ${p => p.theme.color.text};
+  font-size: 34px;
+  margin: 24px 0 0;
   text-align: center;
   line-height: 44px;
+  font-weight: 600;
 `
 
-export const Paragraph = styled<{}, 'p'>('p')`
+export const Paragraph = styled.p`
+  color: ${p => p.theme.color.text};
+  font-family: ${p => p.theme.fontFamily.body};
   display: block;
   -webkit-font-smoothing: antialiased;
-  font-size: 17px;
-  color: #76777A;
-  line-height: 32px;
+  font-size: 18px;
+  opacity: 0.65;
+  line-height: 36px;
   text-align: center;
-  margin: 10px 0 20px;
-  font-family: Muli, sans-serif;
+  margin: 12px 0 32px;
 `
diff --git a/src/features/welcome/wrapper/index.ts b/src/features/welcome/wrapper/index.ts
@@ -2,7 +2,7 @@
  * 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, { css, keyframes } from 'styled-components'
+import styled, { css, keyframes } from '../../../theme'
 
 const fadeIn = keyframes`
   from {
@@ -37,13 +37,14 @@ export const SelectGrid = styled(BaseGrid)`
 
 export const Footer = styled(BaseGrid.withComponent('footer'))`
   grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 1fr;
-  padding: 0 50px 40px;
+  grid-template-rows: 52px;
+  max-width: 540px;
+  margin: 24px 0 0 0;
 `
 
 export const FooterLeftColumn = styled(BaseColumn)`
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
 `
 
 export const FooterMiddleColumn = styled(BaseColumn)`
@@ -53,7 +54,7 @@ export const FooterMiddleColumn = styled(BaseColumn)`
 
 export const FooterRightColumn = styled(BaseColumn)`
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
 `
 
 interface ContentProps {
@@ -67,15 +68,16 @@ export const Content = styled<ContentProps, 'section'>('section')`
   opacity: 0;
   will-change: transform;
   transform: translateX(${p => p.isPrevious ? '-' + p.screenPosition : p.screenPosition}) scale(0.8);
-  transition: opacity 700ms, transform 700ms ease-in-out;
+  transition: opacity 600ms, transform 600ms ease-in-out;
   position: absolute;
   z-index: ${p => p.zIndex};
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   flex: 1;
-  padding: 0 60px;
+  max-width: 580px;
+  padding: 24px;
 
   ${p => p.active && css`
     opacity: 1;
@@ -84,11 +86,13 @@ export const Content = styled<ContentProps, 'section'>('section')`
 `
 
 export const Page = styled<{}, 'div'>('div')`
-  width: inherit%;
+  width: inherit;
   height: inherit;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
+  background: ${p => p.theme.color.panelBackground};
+  overflow: hidden;
 `
 
 export const Panel = styled('div')`
@@ -104,23 +108,20 @@ export const Panel = styled('div')`
   /* end of animation stuff */
   box-sizing: border-box;
   position: relative;
-  overflow: hidden;
-  margin: 0;
-  background-color: rgba(255,255,255,0.99);
-  border-radius: 20px;
-  box-shadow: 0 6px 12px 0 rgba(39, 46, 64, 0.2);
-  max-width: 600px;
+  overflow: visible;
+  max-width: 800px;
   width: 100%;
-  min-height: 540px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   padding: 0;
+  margin: 64px 0 0 0;
   font-size: inherit;
+  align-items: center;
 `
 
 export const SlideContent = styled<{}, 'div'>('div')`
   max-width: inherit;
+  width: inherit;
   min-height: 540px;
   display: flex;
   justify-content: center;

diff --git a/stories/features/welcome/page/index.tsx b/stories/features/welcome/page/index.tsx
@@ -128,7 +128,7 @@ export default class WelcomePage extends React.PureComponent<Props, State> {
     return (
       <>
         <BackgroundContainer>
-          <Background position={`-${currentScreen}0%`} />
+          <Background />
         </BackgroundContainer>
         <Page>
           <Panel>