ChainSafe · FSM1 · Apr 27, 2021 · Apr 27, 2021 · Apr 27, 2021
diff --git a/packages/common-components/src/MenuDropdown/MenuDropdown.tsx b/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}

diff --git a/packages/files-ui/.linguirc b/packages/files-ui/.linguirc
@@ -9,6 +9,6 @@
    "formatOptions": { 
       "origins": false
    },
-   "locales": ["en"],
+   "locales": ["en", "fr"],
    "sourceLocale": "en"
 } 
diff --git a/packages/files-ui/src/App.tsx b/packages/files-ui/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import React, { useCallback, useEffect } from "react"
 import { init as initSentry, ErrorBoundary, showReportDialog } from "@sentry/react"
 import { Web3Provider } from "@chainsafe/web3-context"
 import { ImployApiProvider, UserProvider, BillingProvider } from "@chainsafe/common-contexts"
@@ -25,13 +25,42 @@ if (
     environment: process.env.REACT_APP_SENTRY_ENV
   })
 }
+
+const availableLanguages = [
+  { id: "en", label: "English" },
+  { id: "fr", label: "Français" }
+]
+
+const onboardConfig = {
+  dappId: process.env.REACT_APP_BLOCKNATIVE_ID || "",
+  walletSelect: {
+    wallets: [
+      { walletName: "coinbase" },
+      {
+        walletName: "trust",
+        rpcUrl:
+          "https://mainnet.infura.io/v3/a7e16429d2254d488d396710084e2cd3"
+      },
+      { walletName: "metamask", preferred: true },
+      { walletName: "authereum" },
+      { walletName: "opera" },
+      { walletName: "operaTouch" },
+      { walletName: "torus" },
+      { walletName: "status" },
+      {
+        walletName: "walletConnect",
+        infuraKey: "a7e16429d2254d488d396710084e2cd3",
+        preferred: true
+      }
+    ]
+  }
+}
+
 const App: React.FC<{}> = () => {
   const { initHotjar } = useHotjar()
   const { canUseLocalStorage } = useLocalStorage()
   const hotjarId = process.env.REACT_APP_HOTJAR_ID
-  const apiUrl =
-    process.env.REACT_APP_API_URL || "https://stage.imploy.site/api/v1"
-
+  const apiUrl = process.env.REACT_APP_API_URL || "https://stage.imploy.site/api/v1"
   // This will default to testnet unless mainnet is specifically set in the ENV
   const directAuthNetwork = (process.env.REACT_APP_DIRECT_AUTH_NETWORK === "mainnet") ? "mainnet" : "testnet"
 
@@ -41,64 +70,43 @@ const App: React.FC<{}> = () => {
     }
   }, [hotjarId, initHotjar])
 
+  const fallBack = useCallback(({ error, componentStack, eventId, resetError }) => (
+    <Modal
+      active
+      closePosition="none"
+      setActive={resetError}
+    >
+      <Typography>
+        An error occurred and has been logged. If you would like to
+        provide additional info to help us debug and resolve the issue,
+        click the `&quot;`Provide Additional Details`&quot;` button
+      </Typography>
+      <Typography>{error?.message.toString()}</Typography>
+      <Typography>{componentStack}</Typography>
+      <Typography>{eventId}</Typography>
+      <Button
+        onClick={() => showReportDialog({ eventId: eventId || "" })}
+      >
+      Provide Additional Details
+      </Button>
+      <Button onClick={resetError}>Reset error</Button>
+    </Modal>
+  ), [])
+
   return (
     <ThemeSwitcher
       storageKey="csf.themeKey"
       themes={{ light: lightTheme, dark: darkTheme }}
     >
       <ErrorBoundary
-        fallback={({ error, componentStack, eventId, resetError }) => (
-          <Modal
-            active
-            closePosition="none"
-            setActive={resetError}
-          >
-            <Typography>
-              An error occurred and has been logged. If you would like to
-              provide additional info to help us debug and resolve the issue,
-              click the `&quot;`Provide Additional Details`&quot;` button
-            </Typography>
-            <Typography>{error?.message.toString()}</Typography>
-            <Typography>{componentStack}</Typography>
-            <Typography>{eventId}</Typography>
-            <Button
-              onClick={() => showReportDialog({ eventId: eventId || "" })}
-            >
-              Provide Additional Details
-            </Button>
-            <Button onClick={resetError}>Reset error</Button>
-          </Modal>
-        )}
+        fallback={fallBack}
         onReset={() => window.location.reload()}
       >
-        <LanguageProvider availableLanguages={[{ id: "en", label: "English" }]}>
-          <CssBaseline />
+        <CssBaseline />
+        <LanguageProvider availableLanguages={availableLanguages}>
           <ToasterProvider autoDismiss>
             <Web3Provider
-              onboardConfig={{
-                dappId: process.env.REACT_APP_BLOCKNATIVE_ID || "",
-                walletSelect: {
-                  wallets: [
-                    { walletName: "coinbase" },
-                    {
-                      walletName: "trust",
-                      rpcUrl:
-                        "https://mainnet.infura.io/v3/a7e16429d2254d488d396710084e2cd3"
-                    },
-                    { walletName: "metamask", preferred: true },
-                    { walletName: "authereum" },
-                    { walletName: "opera" },
-                    { walletName: "operaTouch" },
-                    { walletName: "torus" },
-                    { walletName: "status" },
-                    {
-                      walletName: "walletConnect",
-                      infuraKey: "a7e16429d2254d488d396710084e2cd3",
-                      preferred: true
-                    }
-                  ]
-                }
-              }}
+              onboardConfig={onboardConfig}
               checkNetwork={false}
               cacheWalletSelection={canUseLocalStorage}
             >

diff --git a/packages/files-ui/src/Components/Elements/MnemonicForm.tsx b/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>

diff --git a/packages/files-ui/src/Components/FilesRoutes.tsx b/packages/files-ui/src/Components/FilesRoutes.tsx
@@ -16,7 +16,7 @@ export const ROUTE_LINKS = {
   Terms: "https://files.chainsafe.io/terms-of-service",
   ChainSafe: "https://chainsafe.io/",
   // TODO: update link
-  ApplyCryptography: "https://chainsafe.io/",
+  ApplyCryptography: "https://medium.com/chainsafe-systems/major-improvement-to-chainsafe-files-ab489d3e52a2",
   Home: (path?: string) => `/home${path ? `?path=${path}` : ""}`,
   Search: (search?: string) => `/search${search ? `?search=${search}` : ""}`,
   Bin: "/bin",

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx
@@ -206,7 +206,7 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                 >
                   <Trans>General</Trans>
                 </Typography>
-                {fullFileInfo.persistent?.uploaded ? (
+                {fullFileInfo.persistent?.uploaded && (
                   <div className={classes.subInfoBox}>
                     <Typography
                       variant="body1"
@@ -222,8 +222,8 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                       {fullFileInfo.persistent?.uploaded}
                     </Typography>
                   </div>
-                ) : null}
-                {fullFileInfo.content?.size !== undefined ? (
+                )}
+                {fullFileInfo.content?.size !== undefined && (
                   <div className={classes.subInfoBox}>
                     <Typography
                       variant="body1"
@@ -239,7 +239,7 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                       {formatBytes(fullFileInfo.content?.size)}
                     </Typography>
                   </div>
-                ) : null}
+                )}
               </div>
               <div className={classes.technicalContainer}>
                 <Typography
@@ -249,7 +249,7 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                 >
                   <Trans>Technical</Trans>
                 </Typography>
-                {fullFileInfo.persistent?.stored_cid !== undefined ? (
+                {fullFileInfo.persistent?.stored_cid !== undefined && (
                   <div className={classes.subInfoBox}>
                     <Typography
                       variant="body1"
@@ -265,8 +265,8 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                       {fullFileInfo.persistent?.stored_cid}
                     </Typography>
                   </div>
-                ) : null}
-                {fullFileInfo.persistent?.stored_cid !== undefined ? (
+                )}
+                {fullFileInfo.persistent?.stored_cid !== undefined && (
                   <div className={classes.subInfoBox}>
                     <Typography
                       variant="body1"
@@ -282,7 +282,7 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                       {fullFileInfo.persistent?.stored_cid}
                     </Typography>
                   </div>
-                ) : null}
+                )}
                 <div className={classes.subInfoBox}>
                   <Grid
                     item
@@ -294,7 +294,7 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                     >
                       <Trans>CID (Content Identifier)</Trans>
                     </Typography>
-                    {copied ? (
+                    {copied && (
                       <Typography
                         variant="body2"
                         component="p"
@@ -303,9 +303,9 @@ const FileInfoModal: React.FC<IFileInfoModuleProps> = ({
                           classes.copiedContainer
                         )}
                       >
-                        <Trans>copied !</Trans>
+                        <Trans>copied!</Trans>
                       </Typography>
-                    ) : null}
+                    )}
                   </Grid>
                   <Typography
                     className={classes.subSubtitle}

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx
@@ -741,7 +741,7 @@ const FilesTableView = ({
                     </TableCell>
                     <TableCell align="left">
                       {uploadInProgress.noOfFiles > 1
-                        ? `Uploading ${uploadInProgress.noOfFiles} files`
+                        ? t`Uploading ${uploadInProgress.noOfFiles} files`
                         : uploadInProgress.fileName}
                     </TableCell>
                     <TableCell />

diff --git a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx
@@ -303,37 +303,37 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, path }:
           menuItems={[
             // {
             //   contents: (
-            //     <Fragment>
+            //     <>
             //       <ExportIcon className={classes.menuIcon} />
             //       <span>Move</span>
-            //     </Fragment>
+            //     </>
             //   ),
             //   onClick: () => console.log,
             // },
             // {
             //   contents: (
-            //     <Fragment>
+            //     <>
             //       <ShareAltIcon className={classes.menuIcon} />
             //       <span>Share</span>
-            //     </Fragment>
+            //     </>
             //   ),
             //   onClick: () => console.log,
             // },
             // {
             //   contents: (
-            //     <Fragment>
+            //     <>
             //       <EditIcon className={classes.menuIcon} />
             //       <span>Rename</span>
-            //     </Fragment>
+            //     </>
             //   ),
             //   onClick: () => console.log,
             // },
             // {
             //   contents: (
-            //     <Fragment>
+            //     <>
             //       <DeleteIcon className={classes.menuIcon} />
             //       <span>Delete</span>
-            //     </Fragment>
+            //     </>
             //   ),
             //   onClick: () => console.log,
             // },

diff --git a/packages/files-ui/src/Components/Modules/LoginModule/AuthenticationFactors.tsx b/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

diff --git a/packages/files-ui/src/Components/Modules/LoginModule/Complete.tsx b/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.

diff --git a/packages/files-ui/src/Components/Modules/LoginModule/ConciseExplainer.tsx b/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
@@ -158,7 +158,7 @@ const ConciseExplainer: React.FC<IConciseExplainerProps> = ({ className, onConti
               alt="password and keys"
             />
             <Typography component="p">
-              <Trans>Enter a password</Trans>
+              <Trans>Enter password</Trans>
             </Typography>
           </div>
           <div className={classes.imageBox}>