Focus colors on buttons

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

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

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

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}

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>

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>

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"
  >

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

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>

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"

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

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}

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

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>

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

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}