From caf8b5e080e6fddcdcd18c9a8e72c1a3cdcf5c07 Mon Sep 17 00:00:00 2001
From: Mikhail Mikheev <mmvsha73@gmail.com>
Date: Thu, 29 Aug 2019 17:42:31 +0400
Subject: [PATCH] Welcome screen, Load Safe improvements rebranding WIP

---
 .../component/ProviderDetails/ConnectDetails.jsx    |  4 ++--
 .../component/ProviderDetails/UserDetails.jsx       |  4 ++--
 src/components/Stepper/Controls/index.jsx           |  1 +
 src/components/Stepper/OpenPaper/index.jsx          |  3 ---
 src/components/Stepper/index.jsx                    | 10 +++++-----
 src/components/layout/Button/index.jsx              |  2 +-
 src/components/layout/Hairline/index.js             |  4 ++--
 src/components/layout/Heading/index.scss            | 10 +++++-----
 src/components/layout/Paragraph/index.scss          |  1 +
 src/routes/load/components/DetailsForm/index.jsx    |  2 +-
 src/routes/welcome/components/Layout.jsx            | 12 ++++++------
 src/theme/mui.js                                    |  8 +++++++-
 src/theme/variables.js                              | 13 +++++++------
 13 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/src/components/Header/component/ProviderDetails/ConnectDetails.jsx b/src/components/Header/component/ProviderDetails/ConnectDetails.jsx
index 6e613caf..b3df6f7a 100644
--- a/src/components/Header/component/ProviderDetails/ConnectDetails.jsx
+++ b/src/components/Header/component/ProviderDetails/ConnectDetails.jsx
@@ -36,7 +36,7 @@ const styles = () => ({
 })
 
 const ConnectDetails = ({ classes, onConnect }: Props) => (
-  <React.Fragment>
+  <>
     <div className={classes.container}>
       <Row margin="lg" align="center">
         <Paragraph className={classes.text} size="lg" noMargin weight="bolder">
@@ -54,7 +54,7 @@ const ConnectDetails = ({ classes, onConnect }: Props) => (
         </Paragraph>
       </Button>
     </Row>
-  </React.Fragment>
+  </>
 )
 
 export default withStyles(styles)(ConnectDetails)
diff --git a/src/components/Header/component/ProviderDetails/UserDetails.jsx b/src/components/Header/component/ProviderDetails/UserDetails.jsx
index 13d43c85..912a396e 100644
--- a/src/components/Header/component/ProviderDetails/UserDetails.jsx
+++ b/src/components/Header/component/ProviderDetails/UserDetails.jsx
@@ -167,8 +167,8 @@ const UserDetails = ({
       <Hairline margin="xs" />
       <Row className={classes.disconnect}>
         <Button onClick={onDisconnect} size="medium" variant="contained" color="primary" fullWidth>
-          <Paragraph className={classes.disconnectText} size="sm" weight="bold" color="white" noMargin>
-            DISCONNECT
+          <Paragraph className={classes.disconnectText} size="md" color="white" noMargin>
+            Disconnect
           </Paragraph>
         </Button>
       </Row>
diff --git a/src/components/Stepper/Controls/index.jsx b/src/components/Stepper/Controls/index.jsx
index b8423f8e..0a77d573 100644
--- a/src/components/Stepper/Controls/index.jsx
+++ b/src/components/Stepper/Controls/index.jsx
@@ -8,6 +8,7 @@ import { sm, boldFont } from '~/theme/variables'
 const controlStyle = {
   backgroundColor: 'white',
   padding: sm,
+  borderRadius: sm,
 }
 
 const firstButtonStyle = {
diff --git a/src/components/Stepper/OpenPaper/index.jsx b/src/components/Stepper/OpenPaper/index.jsx
index c1730241..951096af 100644
--- a/src/components/Stepper/OpenPaper/index.jsx
+++ b/src/components/Stepper/OpenPaper/index.jsx
@@ -11,9 +11,6 @@ const styles = () => ({
     maxWidth: '870px',
     boxShadow: '0 0 10px 0 rgba(33,48,77,0.10)',
   },
-  container: {
-    letterSpacing: '-0.5px',
-  },
   padding: {
     padding: lg,
   },
diff --git a/src/components/Stepper/index.jsx b/src/components/Stepper/index.jsx
index 2b2bae41..d256c24f 100644
--- a/src/components/Stepper/index.jsx
+++ b/src/components/Stepper/index.jsx
@@ -118,7 +118,7 @@ const GnoStepper = (props: Props) => {
   const penultimate = isLastPage(page + 1)
 
   return (
-    <React.Fragment>
+    <>
       <GnoForm
         onSubmit={handleSubmit}
         initialValues={values}
@@ -129,7 +129,7 @@ const GnoStepper = (props: Props) => {
         {(submitting: boolean, validating: boolean, ...rest: any) => {
           const disabled = disabledWhenValidating ? submitting || validating : submitting
           const controls = (
-            <React.Fragment>
+            <>
               <Hairline />
               <Controls
                 disabled={disabled}
@@ -138,12 +138,12 @@ const GnoStepper = (props: Props) => {
                 lastPage={lastPage}
                 penultimate={penultimate}
               />
-            </React.Fragment>
+            </>
           )
 
           return (
             <Stepper classes={{ root: classes.root }} activeStep={page} orientation="vertical">
-              {steps.map(label => (
+              {steps.map((label) => (
                 <FormStep key={label}>
                   <StepLabel>{label}</StepLabel>
                   <StepContent TransitionProps={transitionProps}>{activePage(controls, ...rest)}</StepContent>
@@ -153,7 +153,7 @@ const GnoStepper = (props: Props) => {
           )
         }}
       </GnoForm>
-    </React.Fragment>
+    </>
   )
 }
 
diff --git a/src/components/layout/Button/index.jsx b/src/components/layout/Button/index.jsx
index 18994954..d2c00343 100644
--- a/src/components/layout/Button/index.jsx
+++ b/src/components/layout/Button/index.jsx
@@ -15,7 +15,7 @@ const calculateStyleBased = (minWidth, minHeight) => ({
 })
 
 const GnoButton = ({
-  minWidth, minHeight = 27, testId = '', style = {}, ...props
+  minWidth, minHeight = 35, testId = '', style = {}, ...props
 }: Props) => {
   const calculatedStyle = calculateStyleBased(minWidth, minHeight)
 
diff --git a/src/components/layout/Hairline/index.js b/src/components/layout/Hairline/index.js
index 223244f0..44648fe4 100644
--- a/src/components/layout/Hairline/index.js
+++ b/src/components/layout/Hairline/index.js
@@ -5,8 +5,8 @@ import { border } from '~/theme/variables'
 
 const calculateStyleFrom = (color?: string, margin?: Size) => ({
   width: '100%',
-  minHeight: '1px',
-  height: '1px',
+  minHeight: '2px',
+  height: '2px',
   backgroundColor: color || border,
   margin: `${getSize(margin)} 0px`,
 })
diff --git a/src/components/layout/Heading/index.scss b/src/components/layout/Heading/index.scss
index 69c2960c..bea0eba6 100644
--- a/src/components/layout/Heading/index.scss
+++ b/src/components/layout/Heading/index.scss
@@ -6,15 +6,15 @@
 
 .h1 {
   line-height: 36px;
-  font-weight: $bolderFont;
-  letter-spacing: -1px;
+  font-weight: $extraBoldFont;
+  letter-spacing: 1.13px;
   font-size: $(fontSizeHeadingLg)px;
 }
 
 .h2 {
-  line-height: 28px;
-  font-weight: $bolderFont;
-  letter-spacing: -0.5px;
+  line-height: 26px;
+  letter-spacing: normal;
+  line-height: 1.3;
   font-size: $(fontSizeHeadingMd)px;
 }
 
diff --git a/src/components/layout/Paragraph/index.scss b/src/components/layout/Paragraph/index.scss
index 2d00bdb2..ad7c6709 100644
--- a/src/components/layout/Paragraph/index.scss
+++ b/src/components/layout/Paragraph/index.scss
@@ -1,6 +1,7 @@
 .paragraph {
   text-overflow: ellipsis;
   overflow-x: inherit;
+  line-height: 1.38;
 }
 
 .soft {
diff --git a/src/routes/load/components/DetailsForm/index.jsx b/src/routes/load/components/DetailsForm/index.jsx
index aabd1320..28caf11e 100644
--- a/src/routes/load/components/DetailsForm/index.jsx
+++ b/src/routes/load/components/DetailsForm/index.jsx
@@ -85,7 +85,7 @@ export const safeFieldsValidation = async (values: Object) => {
 const Details = ({ classes, errors, form }: Props) => (
   <>
     <Block margin="sm">
-      <Paragraph noMargin size="md" color="primary">
+      <Paragraph noMargin size="lg" color="primary">
         Adding an existing Safe only requires the Safe address. Optionally you can give it a name. In case your
         connected client is not the owner of the Safe, the interface will essentially provide you a read-only view.
       </Paragraph>
diff --git a/src/routes/welcome/components/Layout.jsx b/src/routes/welcome/components/Layout.jsx
index b8897be9..42e44d0c 100644
--- a/src/routes/welcome/components/Layout.jsx
+++ b/src/routes/welcome/components/Layout.jsx
@@ -58,19 +58,19 @@ export const LoadSafe = ({ size, provider }: SafeProps) => (
 
 const Welcome = ({ provider }: Props) => (
   <Block className={styles.safe}>
-    <Heading tag="h1" align="center" margin="lg">
+    <Heading tag="h1" weight="bold" align="center" margin="lg">
       Welcome to the Gnosis
       <br />
       Safe Team Edition
     </Heading>
-    <Heading tag="h4" align="center" margin="xl">
-      The Gnosis Safe Team Edition is geared towards teams managing
+    <Heading tag="h3" align="center" margin="xl">
+      The Gnosis Safe for Teams is geared towards teams managing shared
       <br />
-      shared crypto funds. It is an improvement of the existing Gnosis
+      crypto funds. It is an improvement of the existing Gnosis MultiSig
       <br />
-      MultiSig wallet with redesigned smart contracts, cheaper setup and
+      wallet with redesigned smart contracts, cheaper setup and transaction
       <br />
-      transaction costs as well as an enhanced user experience.
+      costs as well as an enhanced user experience.
     </Heading>
     <Block className={styles.safeActions} margin="md">
       <CreateSafe size="large" provider={provider} />
diff --git a/src/theme/mui.js b/src/theme/mui.js
index ed61fe38..c3843d34 100644
--- a/src/theme/mui.js
+++ b/src/theme/mui.js
@@ -8,6 +8,7 @@ import {
   primary,
   secondary,
   error,
+  sm,
   md,
   lg,
   bolderFont,
@@ -54,6 +55,7 @@ export default createMuiTheme({
           color: disabled,
         },
         color: disabled,
+        textTransform: 'none',
         borderRadius: '8px',
       },
       contained: {
@@ -75,7 +77,6 @@ export default createMuiTheme({
         padding: `${md} ${lg}`,
         minHeight: '52px',
         fontSize: buttonLargeFontSize,
-        fontWeight: boldFont,
       },
       sizeSmall: {
         minWidth: '130px',
@@ -87,6 +88,11 @@ export default createMuiTheme({
         },
       },
     },
+    MuiPaper: {
+      rounded: {
+        borderRadius: sm,
+      },
+    },
     MuiStepper: {
       root: {
         padding: '24px 0 0 15px',
diff --git a/src/theme/variables.js b/src/theme/variables.js
index ebdc3dc1..b3813f65 100644
--- a/src/theme/variables.js
+++ b/src/theme/variables.js
@@ -36,18 +36,19 @@ module.exports = {
   border,
   marginButtonImg,
   fontSizeHeadingXs: 13,
-  fontSizeHeadingSm: 18,
-  fontSizeHeadingMd: 21,
+  fontSizeHeadingSm: 16,
+  fontSizeHeadingMd: 20,
   fontSizeHeadingLg: 32,
-  buttonLargeFontSize: '12px',
+  buttonLargeFontSize: '16px',
   lightFont: 300,
   regularFont: 400,
   bolderFont: 500,
   boldFont: 700,
+  extraBoldFont: 800,
   smallFontSize: '11px',
-  mediumFontSize: '13px',
-  largeFontSize: '15px',
-  extraLargeFontSize: '18px',
+  mediumFontSize: '12px',
+  largeFontSize: '16px',
+  extraLargeFontSize: '20px',
   xxlFontSize: '32px',
   screenXs: 480,
   screenXsMax: 767,