Fix design nits

packages/common-components/src/MenuDropdown/MenuDropdown.tsx

@@ -218,7 +218,7 @@ const MenuDropdown: React.FC<IMenuDropdownProps> = ({
         {title && (
           <Typography
             component="p"
-            variant="body2"
+            variant="body1"
             className={classNames?.titleText}
           >
             {title}

packages/files-ui/src/Components/Elements/MnemonicForm.tsx

@@ -78,7 +78,7 @@ const useStyles = makeStyles(({ animation, constants, palette, zIndex }: CSFThem
       width: 35,
       marginLeft: constants.generalUnit * 3,
       "&.active": {
-        fill: palette.success.main
+        fill: palette.primary.main
       }
     },
     loader: {
@@ -160,7 +160,7 @@ const MnemonicForm = ({ buttonLabel, onComplete }: Props) => {
                   <div className={clsx(classes.copiedFlag, { "active": copied })}>
                     <span>
                       <Trans>
-                      Copied!
+                        Copied!
                       </Trans>
                     </span>
                   </div>

packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx

@@ -303,7 +303,7 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                           classes.copiedContainer
                         )}
                       >
-                        <Trans>copied !</Trans>
+                        <Trans>copied!</Trans>
                       </Typography>
                     )}
                   </Grid>

packages/files-ui/src/Components/Modules/LoginModule/AuthenticationFactors.tsx

@@ -89,6 +89,13 @@ const useStyles = makeStyles(({ breakpoints, constants, typography, palette, zIn
       [breakpoints.down("md")]: {
         marginTop: constants.generalUnit * 3
       }
+    },
+    title: {
+      fontWeight: 400,
+      marginBottom: constants.generalUnit * 2.5,
+      [breakpoints.down("md")]: {
+        ...typography.h4
+      }
     }
   })
 )
@@ -109,8 +116,9 @@ const AuthenticationFactors = ({ goToComplete, goToMnemonic, goToPassword, goToS
   return (
     <div className={clsx(classes.root, className)}>
       <Typography
-        variant={desktop ? "h2" : "h4"}
-        component="h1"
+        variant="h2"
+        component="h2"
+        className={classes.title}
       >
         <Trans>
           Your Authentication Factors

packages/files-ui/src/Components/Modules/LoginModule/Complete.tsx

@@ -67,8 +67,8 @@ const useStyles = makeStyles(({ breakpoints, constants, palette, zIndex }: CSFTh
       color: constants.loginModule.completeBg,
       backgroundColor: constants.loginModule.completeText,
       "&:hover": {
-        backgroundColor: palette.success.main,
-        color: constants.loginModule.completeBg
+        backgroundColor: palette.primary.main,
+        color: palette.common.white.main
       }
     }
   })
@@ -99,7 +99,7 @@ const Complete = ({ className }: IComplete) => {
       </Typography>
       <Typography
         component="p"
-        variant="body2"
+        variant="body1"
       >
         <Trans>
           Thanks for taking care of that. You can <br/> adjust these anytime in security settings.

packages/files-ui/src/Components/Modules/LoginModule/ConciseExplainer.tsx

@@ -129,7 +129,7 @@ const ConciseExplainer: React.FC<IConciseExplainerProps> = ({ className, onConti
           className={classes.subtitle}
         >
           <Trans>
-            For security reasons, upon signing in we’ll ask you for one of the following to confirm your identity.
+            For security reasons, each time you sign in we’ll ask you for one of the following to confirm your identity.
           </Trans>
           &nbsp;
           <a

packages/files-ui/src/Components/Modules/LoginModule/ConfirmSkip.tsx

@@ -24,6 +24,8 @@ const useStyles = makeStyles(({ breakpoints, constants, typography }: CSFTheme)
       }
     },
     warning: {
+      fontSize: 16,
+      lineHeight: "24px",
       [breakpoints.up("md")]: {
         marginTop: constants.generalUnit * 2.5,
         marginBottom: constants.generalUnit * 14.5
@@ -50,6 +52,9 @@ const useStyles = makeStyles(({ breakpoints, constants, typography }: CSFTheme)
         position: "relative",
         left: -constants.generalUnit
       }
+    },
+    importantText:{
+      textDecorationLine: "underline"
     }
   })
 )
@@ -72,7 +77,7 @@ const ConfirmSkip = ({ cancel, confirm, className }: IConfirmSkip) => {
         component="p"
       >
         <Trans>
-          Are you sure?
+          Setup incomplete
         </Trans>
       </Typography>
 
@@ -81,10 +86,8 @@ const ConfirmSkip = ({ cancel, confirm, className }: IConfirmSkip) => {
         component="p"
       >
         <Trans>
-          Without setting up at least three authentication factors,
-          you risk getting locked out of your account.
-          <br/><br/>Remember, you need a minimum of two factors to sign in.
-          If you only have one, you’ll lose access to your account forever.
+          <span className={classes.importantText}>You’re at risk of getting locked out of your account
+          because you only have two auth factors set up.</span> Add at least one more to ensure account recovery.
         </Trans>
       </Typography>
 
@@ -96,7 +99,7 @@ const ConfirmSkip = ({ cancel, confirm, className }: IConfirmSkip) => {
           variant="outline"
         >
           <Trans>
-            Yes I understand
+            I understand the risk
           </Trans>
         </Button>
         <Button
@@ -106,7 +109,7 @@ const ConfirmSkip = ({ cancel, confirm, className }: IConfirmSkip) => {
           variant="primary"
         >
           <Trans>
-            Set up sign in methods
+            Set up auth factors
           </Trans>
         </Button>
       </section>

packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx

@@ -12,7 +12,7 @@ import clsx from "clsx"
 import { IdentityProvider } from "@chainsafe/files-api-client"
 
 const useStyles = makeStyles(
-  ({ constants, palette, breakpoints }: CSFTheme) =>
+  ({ constants, palette, breakpoints, typography }: CSFTheme) =>
     createStyles({
       root: {
         backgroundColor: constants.loginModule.background,
@@ -64,7 +64,11 @@ const useStyles = makeStyles(
       },
       button: {
         width: 240,
+        fontWeight: typography.fontWeight.medium,
         marginBottom: constants.generalUnit * 2,
+        "& .icon" : {
+          fontSize: 25
+        },
         "&:last-child": {
           marginBottom: 0
         }
@@ -122,6 +126,9 @@ const useStyles = makeStyles(
         textDecoration: "underline",
         cursor: "pointer",
         textAlign: "center"
+      },
+      web3Button: {
+        minHeight: 41
       }
     })
 )
@@ -251,7 +258,7 @@ const InitialScreen = ({ className }: IInitialScreen) => {
                     setLoginMode("web3")
                     handleSelectWalletAndConnect()
                   }}
-                  className={classes.button}
+                  className={clsx(classes.button, classes.web3Button)}
                   variant="primary"
                   size="large"
                   disabled={maintenanceMode || isConnecting || status !== "initialized"}
@@ -260,35 +267,35 @@ const InitialScreen = ({ className }: IInitialScreen) => {
                 </Button>
                 <Button
                   className={classes.button}
-                  variant="primary"
                   size="large"
                   onClick={() => handleLogin("github")}
                   disabled={maintenanceMode || isConnecting || status !== "initialized"}
                   loading={isConnecting && loginMode === "github"}
+                  variant="secondary"
                 >
-                  <GithubLogoIcon />
+                  <GithubLogoIcon className="icon"/>
                   <Trans>Continue with Github</Trans>
                 </Button>
                 <Button
                   className={classes.button}
-                  variant="primary"
                   size="large"
                   onClick={() => handleLogin("google")}
                   disabled={maintenanceMode || isConnecting || status !== "initialized"}
                   loading={isConnecting && loginMode === "google"}
+                  variant="secondary"
                 >
-                  <GoogleLogoIcon />
+                  <GoogleLogoIcon className="icon"/>
                   <Trans>Continue with Google</Trans>
                 </Button>
                 <Button
                   className={classes.button}
                   size="large"
-                  variant="primary"
                   onClick={() => handleLogin("facebook")}
                   disabled={maintenanceMode || isConnecting || status !== "initialized"}
                   loading={isConnecting && loginMode === "facebook"}
+                  variant="secondary"
                 >
-                  <FacebookLogoIcon />
+                  <FacebookLogoIcon className="icon"/>
                   <Trans>Continue with Facebook</Trans>
                 </Button>
               </section>

packages/files-ui/src/locales/en/messages.po

@@ -16,6 +16,9 @@ msgstr ""
 msgid "(Change)"
 msgstr "(Change)"
 
+msgid "<0>You’re at risk of getting locked out of your account because you only have two auth factors set up.</0> Add at least one more to ensure account recovery."
+msgstr "<0>You’re at risk of getting locked out of your account because you only have two auth factors set up.</0> Add at least one more to ensure account recovery."
+
 msgid "A backup phrase will be generated and used for your account.<0/>We do not store it and <1>it can only be displayed once</1>. Save it somewhere safe!"
 msgstr "A backup phrase will be generated and used for your account.<0/>We do not store it and <1>it can only be displayed once</1>. Save it somewhere safe!"
 
@@ -34,9 +37,6 @@ msgstr "Add more files"
 msgid "Approve"
 msgstr "Approve"
 
-msgid "Are you sure?"
-msgstr "Are you sure?"
-
 msgid "Backup phrase"
 msgstr "Backup phrase"
 
@@ -217,8 +217,8 @@ msgstr "Folder created successfully"
 msgid "Folders"
 msgstr "Folders"
 
-msgid "For security reasons, upon signing in we’ll ask you for one of the following to confirm your identity."
-msgstr "For security reasons, upon signing in we’ll ask you for one of the following to confirm your identity."
+msgid "For security reasons, each time you sign in we’ll ask you for one of the following to confirm your identity."
+msgstr "For security reasons, each time you sign in we’ll ask you for one of the following to confirm your identity."
 
 msgid "Forget this browser"
 msgstr "Forget this browser"
@@ -256,6 +256,9 @@ msgstr "Hold on, we are logging you in..."
 msgid "Home"
 msgstr "Home"
 
+msgid "I understand the risk"
+msgstr "I understand the risk"
+
 msgid "Info"
 msgstr "Info"
 
@@ -457,15 +460,18 @@ msgstr "Set up"
 msgid "Set up a password"
 msgstr "Set up a password"
 
+msgid "Set up auth factors"
+msgstr "Set up auth factors"
+
 msgid "Set up password"
 msgstr "Set up password"
 
-msgid "Set up sign in methods"
-msgstr "Set up sign in methods"
-
 msgid "Settings"
 msgstr "Settings"
 
+msgid "Setup incomplete"
+msgstr "Setup incomplete"
+
 msgid "Share"
 msgstr "Share"
 
@@ -601,12 +607,6 @@ msgstr "What a fine day it is."
 msgid "What a fine night it is."
 msgstr "What a fine night it is."
 
-msgid "Without setting up at least three authentication factors, you risk getting locked out of your account.<0/><1/>Remember, you need a minimum of two factors to sign in. If you only have one, you’ll lose access to your account forever."
-msgstr "Without setting up at least three authentication factors, you risk getting locked out of your account.<0/><1/>Remember, you need a minimum of two factors to sign in. If you only have one, you’ll lose access to your account forever."
-
-msgid "Yes I understand"
-msgstr "Yes I understand"
-
 msgid "Yes, save it"
 msgstr "Yes, save it"
 
@@ -625,8 +625,8 @@ msgstr "Your Authentication Factors"
 msgid "Your recovery key can be used to restore your account in place of your backup phrase."
 msgstr "Your recovery key can be used to restore your account in place of your backup phrase."
 
-msgid "copied !"
-msgstr "copied !"
+msgid "copied!"
+msgstr "copied!"
 
 msgid "deleted successfully"
 msgstr "deleted successfully"