Focus colors on buttons (#1978)

* removed conditional buttons * removed conditional buttons * added text focus colors * sorted out buttons * preview buttons * lingui extract * colors fixed * button colors update * theme preview colors Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
ChainSafe · Feb 28, 2022 · 8ca7639 · 8ca7639
1 parent 88d9a00
commit 8ca7639
Show file tree

Hide file tree

Showing 25 changed files with 117 additions and 96 deletions.
diff --git a/packages/common-components/src/Button/Button.tsx b/packages/common-components/src/Button/Button.tsx
@@ -19,7 +19,6 @@ const useStyles = makeStyles(
         border: "none",
         outline: "none",
         "& svg": {
-          transitionDuration: `${animation.transform}ms`,
           margin: `${0}px ${constants.generalUnit / 2}px 0`
         },
         "&.large": {
@@ -49,12 +48,10 @@ const useStyles = makeStyles(
         color: "inherit",
         textDecoration: "underline",
         cursor: "pointer",
-        transitionDuration: `${animation.transform}ms`,
         border: "none",
         background: "none",
         outline: "none",
         "& svg": {
-          transitionDuration: `${animation.transform}ms`,
           margin: `${0}px ${constants.generalUnit / 2}px 0`
         }
       },
@@ -94,7 +91,7 @@ const useStyles = makeStyles(
           fill: palette.common.white.main
         },
         "&:hover": {
-          backgroundColor: palette.primary.hover,
+          backgroundColor: palette.primary.main,
           color: palette.common.white.main,
           ...overrides?.Button?.variants?.secondary?.hover
         },
@@ -114,12 +111,15 @@ const useStyles = makeStyles(
         backgroundColor: "transparent",
         color: palette.additional["gray"][9],
         "&:hover": {
+          color: palette.primary.main,
           ...overrides?.Button?.variants?.text?.hover
         },
         "&:focus": {
+          color: palette.primary.main,
           ...overrides?.Button?.variants?.text?.focus
         },
         "&:active": {
+          color: palette.primary.main,
           ...overrides?.Button?.variants?.text?.active
         },
         ...overrides?.Button?.variants?.text?.root

diff --git a/packages/common-components/src/Icons/SvgIcon.tsx b/packages/common-components/src/Icons/SvgIcon.tsx
@@ -4,15 +4,14 @@ import { capitalize } from "../utils/stringUtils"
 import { ITheme, makeStyles, createStyles } from "@chainsafe/common-theme"
 
 const useStyles = makeStyles(
-  ({ animation, palette, constants, overrides }: ITheme) =>
+  ({  palette, constants, overrides }: ITheme) =>
     createStyles({
       root: {
         userSelect: "none",
         width: "1em",
         height: "1em",
         display: "inline-block",
         fontSize: "1.5em",
-        transition: `all ${animation.transform}ms`,
         ...overrides?.Icons?.root
       },
       colorPrimary: {

diff --git a/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx b/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx
@@ -14,7 +14,7 @@ const useStyles = makeStyles(({ animation, palette, constants, breakpoints, over
       height: constants.generalUnit * 4,
       padding: `0 ${constants.generalUnit}px !important`,
       backgroundColor: palette.additional["gray"][3],
-      color: palette.common.black.main,
+      color: palette.additional["gray"][10],
       borderRadius: `${constants.generalUnit / 4}px`,
       display: "flex",
       justifyContent: "center",

diff --git a/packages/files-ui/src/Components/Elements/ShareTransferRequestModal.tsx b/packages/files-ui/src/Components/Elements/ShareTransferRequestModal.tsx
@@ -1,5 +1,5 @@
 import { Button, Loading, Typography } from "@chainsafe/common-components"
-import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
+import { createStyles, makeStyles } from "@chainsafe/common-theme"
 import { Trans } from "@lingui/macro"
 import dayjs from "dayjs"
 import React, { useCallback, useEffect, useMemo, useState } from "react"
@@ -49,7 +49,6 @@ const useStyles = makeStyles(({ constants }: CSFTheme) =>
 
 const ShareTransferRequestModal = ({ requests }: Props) => {
   const { approveShareTransferRequest, rejectShareTransferRequest, clearShareTransferRequests } = useThresholdKey()
-  const { desktop } = useThemeSwitcher()
   const classes = useStyles()
   const [isLoadingApprove, setIsLoadingApprove] = useState(false)
   const [isLoadingReject, setIsLoadingReject] = useState(false)
@@ -103,7 +102,7 @@ const ShareTransferRequestModal = ({ requests }: Props) => {
         <div className={classes.buttonWrapper}>
           <Button
             className={classes.button}
-            variant={desktop ? "primary" : "outline"}
+            variant="primary"
             size="large"
             loading={isLoadingApprove}
             disabled={isLoadingReject || isLoadingApprove || isClearing}
@@ -112,7 +111,7 @@ const ShareTransferRequestModal = ({ requests }: Props) => {
           </Button>
           <Button
             className={classes.button}
-            variant={desktop ? "primary" : "outline"}
+            variant="outline"
             size="large"
             loading={isLoadingReject}
             disabled={isLoadingApprove || isLoadingReject || isClearing}

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx
@@ -162,7 +162,7 @@ const CreateFolderModal = ({ modalOpen, close }: ICreateFolderModalProps) => {
                 data-cy="button-cancel-create-folder"
                 onClick={onCancel}
                 size="medium"
-                variant={desktop ? "outline" : "gray"}
+                variant="outline"
                 type="button"
               >
                 <Trans>Cancel</Trans>

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx
@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  debounce,
-  makeStyles,
-  useThemeSwitcher
-} from "@chainsafe/common-theme"
+import { createStyles, debounce, makeStyles } from "@chainsafe/common-theme"
 import React, { useState, useEffect } from "react"
 import CustomModal from "../../Elements/CustomModal"
 import CustomButton from "../../Elements/CustomButton"
@@ -152,7 +147,6 @@ const FileInfoModal = ({ filePath, close }: IFileInfoModuleProps) => {
   const [loadingFileInfo, setLoadingInfo] = useState(false)
   const [fullFileInfo, setFullFullInfo] = useState<FileFullInfo | undefined>()
   const { bucket } = useFileBrowser()
-  const { desktop } = useThemeSwitcher()
 
   useEffect(() => {
     if (!bucket) return
@@ -425,7 +419,7 @@ const FileInfoModal = ({ filePath, close }: IFileInfoModuleProps) => {
             <CustomButton
               onClick={() => close()}
               size="large"
-              variant={desktop ? "outline" : "gray"}
+              variant="outline"
               type="button"
             >
               <Trans>Close</Trans>

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/ManageSharedFolder.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/ManageSharedFolder.tsx
@@ -1,5 +1,5 @@
 import { Button, ShareAltSvg, Typography, Grid, TextInput, CrossIcon } from "@chainsafe/common-components"
-import { createStyles, debounce, makeStyles, useOnClickOutside, useThemeSwitcher } from "@chainsafe/common-theme"
+import { createStyles, debounce, makeStyles, useOnClickOutside } from "@chainsafe/common-theme"
 import React, { useState, useCallback, useRef } from "react"
 import { CSFTheme } from "../../../Themes/types"
 import { BucketKeyPermission } from "../../../Contexts/FilesContext"
@@ -90,7 +90,7 @@ const useStyles = makeStyles(
       suggestionsDropDown: {
         position: "absolute",
         width: "100%",
-        backgroundColor: palette.common.white.main,
+        backgroundColor: palette.additional["gray"][1],
         border: `1px solid ${palette.additional["gray"][5]}`,
         zIndex: zIndex?.layer1
       },
@@ -178,7 +178,6 @@ interface ICreateOrManageSharedFolderProps {
 
 const CreateOrManageSharedFolder = ({ onClose, bucketToEdit }: ICreateOrManageSharedFolderProps) => {
   const classes = useStyles()
-  const { desktop } = useThemeSwitcher()
   const { handleEditSharedFolder, isEditingSharedFolder, isCreatingSharedFolder } = useCreateOrEditSharedFolder()
   const { sharedFolderReaders,
     sharedFolderWriters,
@@ -410,7 +409,7 @@ const CreateOrManageSharedFolder = ({ onClose, bucketToEdit }: ICreateOrManageSh
           <CustomButton
             onClick={handleClose}
             size="large"
-            variant={desktop ? "outline" : "gray"}
+            variant="outline"
             type="button"
             data-cy="button-cancel-create-shared-folder"
           >

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx
@@ -243,7 +243,7 @@ const MoveFileModule = ({ filesToMove, onClose, onCancel, mode }: IMoveFileModul
           <CustomButton
             onClick={onCancel}
             size="medium"
-            variant={desktop ? "outline" : "gray"}
+            variant="outline"
             type="button"
             data-cy={isInBin ? "button-cancel-recovery" : "button-cancel-move"}
           >

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/ReportFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/ReportFileModal.tsx
@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  debounce,
-  makeStyles,
-  useThemeSwitcher
-} from "@chainsafe/common-theme"
+import { createStyles, debounce, makeStyles } from "@chainsafe/common-theme"
 import React, { useState, useEffect } from "react"
 import CustomModal from "../../Elements/CustomModal"
 import CustomButton from "../../Elements/CustomButton"
@@ -183,7 +178,6 @@ const ReportFileModal = ({ filePath, close }: IReportFileModalProps) => {
   const { encryptForPublicKey } = useThresholdKey()
   const [copied, setCopied] = useState(false)
   const { filesApiClient } = useFilesApi()
-  const { desktop } = useThemeSwitcher()
 
   useEffect(() => {
     filesApiClient.abuseUser()
@@ -382,7 +376,7 @@ const ReportFileModal = ({ filePath, close }: IReportFileModalProps) => {
             onClick={() => close()}
             size="large"
             className={classes.closeButton}
-            variant={desktop ? "outline" : "gray"}
+            variant="outline"
             type="button"
           >
             <Trans>Close</Trans>

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx
@@ -206,7 +206,7 @@ const SharedFolderOverview = () => {
           <div className={classes.loadingContainer}>
             <Loading
               size={24}
-              type="light"
+              type="initial"
             />
             <Typography
               variant="body2"

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
@@ -214,7 +214,7 @@ const useStyles = makeStyles(
         zIndex: zIndex?.layer4,
         bottom: 0,
         transform: "translateX(-50%)",
-        backgroundColor: palette.common.black.main,
+        backgroundColor: palette.additional["gray"][10],
         color: constants.filesTable.uploadText,
         opacity: 0,
         visibility: "hidden",

diff --git a/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx b/packages/files-ui/src/Components/Modules/FilePreviewModal.tsx
@@ -80,13 +80,12 @@ const useStyles = makeStyles(
       },
       closePreviewButton: {
         marginRight: constants.generalUnit * 2,
-        cursor: "pointer",
-        "& > * > svg":{
-          stroke: constants.previewModal.closeButtonColor
+        "& svg":{
+          stroke: constants.previewModal.headerButtonColor
         }
       },
       downloadIcon: {
-        fill: constants.previewModal.closeButtonColor
+        fill: constants.previewModal.headerButtonColor
       },
       fileName: {
         width: "100%",
@@ -104,9 +103,32 @@ const useStyles = makeStyles(
         alignItems: "center"
       },
       prevNextButton: {
-        backgroundColor: palette.common.black.main,
+        backgroundColor: constants.previewModal.controlsBackgroundColor,
+        color: constants.previewModal.controlsButtonColor,
         padding: `${constants.generalUnit * 2}px !important`,
-        borderRadius: constants.generalUnit * 4
+        borderRadius: constants.generalUnit * 4,
+        border: "none",
+        "& svg": {
+          fill: constants.previewModal.controlsButtonColor
+        },
+        "&:hover": {
+          backgroundColor: constants.previewModal.controlsBackgroundHoverColor,
+          "& svg": {
+            fill: constants.previewModal.controlsButtonColor
+          }
+        },
+        "&:active": {
+          backgroundColor: constants.previewModal.controlsBackgroundHoverColor,
+          "& svg": {
+            fill: constants.previewModal.controlsButtonColor
+          }
+        },
+        "&:focus": {
+          backgroundColor: constants.previewModal.controlsBackgroundHoverColor,
+          "& svg": {
+            fill: constants.previewModal.controlsButtonColor
+          }
+        }
       },
       previewContent: {
         color: constants.previewModal.message,
@@ -277,8 +299,9 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath
           onClick={handleDownload}
           variant="text"
           data-cy="button-download-previewed-file"
+          className={classes.downloadIcon}
         >
-          <DownloadIcon className={classes.downloadIcon}/>
+          <DownloadIcon />
         </Button>
         <Button
           onClick={closePreview}

diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx
@@ -44,7 +44,13 @@ const useStyles = makeStyles(
         borderRadius: 2
       },
       imageControlButton: {
-        borderRadius: 0
+        borderRadius: 0,
+        backgroundColor: "#262626",
+        color: "#D9D9D9",
+        border: "none",
+        "& svg": {
+          fill: "#D9D9D9"
+        }
       }
     })
 )

diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/PDFPreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/PDFPreview.tsx
@@ -25,7 +25,11 @@ const useStyles = makeStyles(({ constants, zIndex }: ITheme) =>
     pageButton: {
       borderRadius: 0,
       backgroundColor: "#262626",
-      border: "none"
+      color: "#D9D9D9",
+      border: "none",
+      "& svg": {
+        fill: "#D9D9D9"
+      }
     },
     paginationInfo: {
       paddingLeft: constants.generalUnit * 2,
@@ -75,6 +79,7 @@ const PdfPreview: React.FC<IPreviewRendererProps> = ({ contents }) => {
         <Button
           onClick={prevPage}
           className={classes.pageButton}
+          variant="secondary"
         >
           <CaretCircleLeftIcon />
         </Button>
@@ -84,6 +89,7 @@ const PdfPreview: React.FC<IPreviewRendererProps> = ({ contents }) => {
         <Button
           onClick={nextPage}
           className={classes.pageButton}
+          variant="secondary"
         >
           <CaretCircleRightIcon />
         </Button>

diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/TextPreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/TextPreview.tsx
@@ -49,7 +49,13 @@ const useStyles = makeStyles(({ palette, constants, typography, zIndex }: CSFThe
       borderColor: palette.additional["gray"][8]
     },
     controlButton: {
-      borderRadius: 0
+      borderRadius: 0,
+      backgroundColor: "#262626",
+      color: "#D9D9D9",
+      border: "none",
+      "& svg": {
+        fill: "#D9D9D9"
+      }
     }
   })
 )

diff --git a/packages/files-ui/src/Components/Modules/Settings/SecurityTab/SavedBrowsers/BrowserPanel.tsx b/packages/files-ui/src/Components/Modules/Settings/SecurityTab/SavedBrowsers/BrowserPanel.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react"
-import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme"
+import { makeStyles, createStyles } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../../../Themes/types"
 import { Button, ExpansionPanel, Typography } from "@chainsafe/common-components"
 import clsx from "clsx"
@@ -105,7 +105,6 @@ const BrowserPanel = ({ dateAdded, shareIndex, browser, os }: BrowserShare) => {
   const [loadingDeleteShare, setLoadingDeleteShare] = useState(false)
   const [loadingDownloadKey, setLoadingDownloadKey] = useState(false)
   const [isModalConfirmationOpen, setIsModalConfirmationOpen] = useState(false)
-  const { desktop } = useThemeSwitcher()
 
   const onDeleteShare = useCallback(() => {
     setLoadingDeleteShare(true)
@@ -211,7 +210,7 @@ const BrowserPanel = ({ dateAdded, shareIndex, browser, os }: BrowserShare) => {
                   </Typography>
                   <div className={classes.modalFooter}>
                     <CustomButton
-                      variant={desktop ? "outline" : "gray"}
+                      variant="outline"
                       onClick={() => setIsModalConfirmationOpen(false)}
                       className={classes.cancelButton}
                       disabled={loadingDeleteShare}