Welcome screen, Load Safe improvements rebranding WIP

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)

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>
+          <Paragraph className={classes.disconnectText} size="md" color="white" noMargin>
-            DISCONNECT
+            Disconnect
           </Paragraph>
         </Button>
       </Row>

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 = {

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,
   },

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>
+    </>
   )
 }
 

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)
 

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',
+  minHeight: '2px',
-  height: '1px',
+  height: '2px',
   backgroundColor: color || border,
   margin: `${getSize(margin)} 0px`,
 })

src/components/layout/Heading/index.scss

@@ -6,15 +6,15 @@
 
 .h1 {
   line-height: 36px;
-  font-weight: $bolderFont;
+  font-weight: $extraBoldFont;
-  letter-spacing: -1px;
+  letter-spacing: 1.13px;
   font-size: $(fontSizeHeadingLg)px;
 }
 
 .h2 {
-  line-height: 28px;
+  line-height: 26px;
-  font-weight: $bolderFont;
+  letter-spacing: normal;
-  letter-spacing: -0.5px;
+  line-height: 1.3;
   font-size: $(fontSizeHeadingMd)px;
 }
 

src/components/layout/Paragraph/index.scss

@@ -1,6 +1,7 @@
 .paragraph {
   text-overflow: ellipsis;
   overflow-x: inherit;
+  line-height: 1.38;
 }
 
 .soft {

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>

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">
+    <Heading tag="h3" align="center" margin="xl">
-      The Gnosis Safe Team Edition is geared towards teams managing
+      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} />

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',

src/theme/variables.js

@@ -36,18 +36,19 @@ module.exports = {
   border,
   marginButtonImg,
   fontSizeHeadingXs: 13,
-  fontSizeHeadingSm: 18,
+  fontSizeHeadingSm: 16,
-  fontSizeHeadingMd: 21,
+  fontSizeHeadingMd: 20,
   fontSizeHeadingLg: 32,
-  buttonLargeFontSize: '12px',
+  buttonLargeFontSize: '16px',
   lightFont: 300,
   regularFont: 400,
   bolderFont: 500,
   boldFont: 700,
+  extraBoldFont: 800,
   smallFontSize: '11px',
-  mediumFontSize: '13px',
+  mediumFontSize: '12px',
-  largeFontSize: '15px',
+  largeFontSize: '16px',
-  extraLargeFontSize: '18px',
+  extraLargeFontSize: '20px',
   xxlFontSize: '32px',
   screenXs: 480,
   screenXsMax: 767,