Header buttons and icons alignments (#1712)

* word wraps added * lingui extract * shared folder button icon * new folder text * lingui extract Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: GitHub Actions <actions@github.com>
ChainSafe · Nov 10, 2021 · c9ad5ad · c9ad5ad
1 parent 4e2c771
commit c9ad5ad
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 43 deletions.
diff --git a/packages/files-ui/src/Components/Elements/SharedUsers.tsx b/packages/files-ui/src/Components/Elements/SharedUsers.tsx
@@ -3,11 +3,15 @@ import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-th
 import UserBubble from "./UserBubble"
 import { BucketKeyPermission, RichUserInfo } from "../../Contexts/FilesContext"
 import { getUserDisplayName } from "../../Utils/getUserDisplayName"
+import { CSFTheme } from "../../Themes/types"
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles(({ constants }: CSFTheme) => {
   return createStyles({
     root: {
       display: "flex"
+    },
+    bubble: {
+      marginRight: constants.generalUnit
     }
   })
 })
@@ -55,6 +59,7 @@ const SharedUsers = ({ bucket }: Props) => {
     <div className={classes.root}>
       <UserBubble
         tooltip={userLabels[0]}
+        className={userLabels.length > 1 ? classes.bubble : undefined}
       />
       {userLabels.length > 2 && (
         <UserBubble

diff --git a/packages/files-ui/src/Components/Elements/UserBubble.tsx b/packages/files-ui/src/Components/Elements/UserBubble.tsx
@@ -19,9 +19,6 @@ const useStyles = makeStyles(({ zIndex, animation, constants, palette }: CSFThem
       justifyContent: "center",
       "& svg": {
         fill: palette.common.white.main
-      },
-      "&:first-child": {
-        marginRight: constants.generalUnit
       }
     },
     text : {
@@ -66,9 +63,10 @@ const useStyles = makeStyles(({ zIndex, animation, constants, palette }: CSFThem
 interface Props {
   text?: string
   tooltip: string | string[]
+  className?: string
 }
 
-const UserBubble = ({ text, tooltip }: Props) => {
+const UserBubble = ({ text, tooltip, className }: Props) => {
   const classes = useStyles()
   const [showTooltip, setShowTooltip] = useState(false)
 
@@ -80,7 +78,7 @@ const UserBubble = ({ text, tooltip }: Props) => {
     <div
       onMouseEnter={() => setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
-      className={classes.bubble}
+      className={clsx(classes.bubble, className)}
       onClick={toggleTooltip}
     >
       <div className={clsx(classes.tooltip, { "active": showTooltip })}>

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx
@@ -144,7 +144,7 @@ const CreateFolderModal = ({ modalOpen, close }: ICreateFolderModalProps) => {
                   variant="h5"
                   component="h5"
                 >
-                  <Trans>Create Folder</Trans>
+                  <Trans>New folder</Trans>
                 </Typography>
               </Grid>
             )}

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx
@@ -27,12 +27,11 @@ import SharingExplainerModal from "../../SharingExplainerModal"
 import { useSharingExplainerModalFlag } from "./hooks/useSharingExplainerModalFlag"
 import { usePageTrack } from "../../../Contexts/PosthogContext"
 
-export const desktopSharedGridSettings = "69px 3fr 120px 190px 150px 45px !important"
+export const desktopSharedGridSettings = "50px 3fr 90px 140px 140px 45px !important"
 export const mobileSharedGridSettings = "3fr 80px 45px !important"
 
 const useStyles = makeStyles(
   ({ animation, breakpoints, constants, palette }: CSFTheme) => {
-
     return createStyles({
       root: {
         position: "relative",
@@ -99,6 +98,9 @@ const useStyles = makeStyles(
       },
       confirmDeletionDialog: {
         top: "50%"
+      },
+      buttonWrap: {
+        whiteSpace: "nowrap"
       }
     })
   }
@@ -188,7 +190,9 @@ const SharedFolderOverview = () => {
               data-cy="button-create-a-shared-folder"
             >
               <PlusIcon />
-              <Trans>Create a Shared Folder</Trans>
+              <span className={classes.buttonWrap}>
+                <Trans>Create a Shared Folder</Trans>
+              </span>
             </Button>
           </div>
         </header>

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
@@ -293,6 +293,15 @@ const useStyles = makeStyles(
         width: 20,
         marginRight: constants.generalUnit * 1.5,
         fill: constants.previewModal.menuItemIconColor
+      },
+      fileNameHeader: {
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        marginRight: constants.generalUnit * 2
+      },
+      buttonWrap: {
+        whiteSpace: "nowrap"
       }
     })
   }
@@ -628,7 +637,7 @@ const FilesList = ({ isShared = false }: Props) => {
         <>
           <PlusCircleSvg className={classes.menuIcon} />
           <span>
-            <Trans>Create folder</Trans>
+            <Trans>New folder</Trans>
           </span>
         </>
       ),
@@ -691,6 +700,7 @@ const FilesList = ({ isShared = false }: Props) => {
           variant="h1"
           component="h1"
           data-cy="files-app-header"
+          className={classes.fileNameHeader}
         >
           {heading}
         </Typography>
@@ -722,7 +732,7 @@ const FilesList = ({ isShared = false }: Props) => {
                       size="large"
                     >
                       <PlusCircleIcon />
-                      <span>
+                      <span className={classes.buttonWrap}>
                         <Trans>New folder</Trans>
                       </span>
                     </Button>
@@ -733,7 +743,7 @@ const FilesList = ({ isShared = false }: Props) => {
                       size="large"
                     >
                       <UploadIcon />
-                      <span>
+                      <span className={classes.buttonWrap}>
                         <Trans>Upload</Trans>
                       </span>
                     </Button>

diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po
@@ -154,9 +154,6 @@ msgstr ""
 msgid "Create"
 msgstr "Erstellen"
 
-msgid "Create Folder"
-msgstr ""
-
 msgid "Create Shared Folder"
 msgstr ""
 
@@ -166,9 +163,6 @@ msgstr ""
 msgid "Create a new shared folder"
 msgstr ""
 
-msgid "Create folder"
-msgstr "Ordner erstellen"
-
 msgid "Create new link"
 msgstr ""
 

diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po
@@ -154,9 +154,6 @@ msgstr "Copying files"
 msgid "Create"
 msgstr "Create"
 
-msgid "Create Folder"
-msgstr "Create Folder"
-
 msgid "Create Shared Folder"
 msgstr "Create Shared Folder"
 
@@ -166,9 +163,6 @@ msgstr "Create a Shared Folder"
 msgid "Create a new shared folder"
 msgstr "Create a new shared folder"
 
-msgid "Create folder"
-msgstr "Create folder"
-
 msgid "Create new link"
 msgstr "Create new link"
 

diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po
@@ -155,9 +155,6 @@ msgstr ""
 msgid "Create"
 msgstr "Crear"
 
-msgid "Create Folder"
-msgstr ""
-
 msgid "Create Shared Folder"
 msgstr ""
 
@@ -167,9 +164,6 @@ msgstr ""
 msgid "Create a new shared folder"
 msgstr ""
 
-msgid "Create folder"
-msgstr "Crear Carpeta"
-
 msgid "Create new link"
 msgstr ""
 

diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
@@ -155,9 +155,6 @@ msgstr "Copie de fichiers"
 msgid "Create"
 msgstr "Créer"
 
-msgid "Create Folder"
-msgstr "Créer un dossier"
-
 msgid "Create Shared Folder"
 msgstr "Créer un dossier partagé"
 
@@ -167,9 +164,6 @@ msgstr "Créer un dossier partagé"
 msgid "Create a new shared folder"
 msgstr "Créer un nouveau dossier partagé"
 
-msgid "Create folder"
-msgstr "Créer un dossier"
-
 msgid "Create new link"
 msgstr "Créer un nouveau lien"
 

diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po
@@ -154,9 +154,6 @@ msgstr ""
 msgid "Create"
 msgstr "Opprett"
 
-msgid "Create Folder"
-msgstr ""
-
 msgid "Create Shared Folder"
 msgstr ""
 
@@ -166,9 +163,6 @@ msgstr ""
 msgid "Create a new shared folder"
 msgstr ""
 
-msgid "Create folder"
-msgstr "Opprett mappe"
-
 msgid "Create new link"
 msgstr ""