Merge branch 'dev' of github.com:ChainSafe/ui-monorepo into feat/cids…

…-page-1325

.github/workflows/test-files-on-demand.yml

@@ -15,7 +15,7 @@ jobs:
             **/node_modules
             ~/.cache/Cypress
             **/build
-          key: ${{ runner.os }}-node_modules-files-build-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-node_modules-files-build-${{ hashFiles('./yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-node_modules-build-
 

.github/workflows/test-files.yml

@@ -8,6 +8,7 @@ on:
     - package.json
     - .eslintrc.json
     - tsconfig.json
+    - yarn.lock
 jobs:
   cypress-run:
     runs-on: ubuntu-latest
@@ -23,7 +24,7 @@ jobs:
             **/node_modules
             ~/.cache/Cypress
             **/build
-          key: ${{ runner.os }}-node_modules-files-build-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-node_modules-files-build-${{ hashFiles('./yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-node_modules-build-
 

.github/workflows/test-storage.yml

@@ -8,6 +8,7 @@ on:
     - package.json
     - .eslintrc.json
     - tsconfig.json
+    - yarn.lock
 jobs:
   cypress-run:
     runs-on: ubuntu-latest
@@ -23,7 +24,7 @@ jobs:
             **/node_modules
             ~/.cache/Cypress
             **/build
-          key: ${{ runner.os }}-node_modules-build-storage-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-node_modules-build-storage-${{ hashFiles('./yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-node_modules-build-
 

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

@@ -2,7 +2,6 @@ import React, { ReactNode } from "react"
 import clsx from "clsx"
 import { ITheme, makeStyles, createStyles } from "@chainsafe/common-theme"
 import { Loading } from "../Spinner"
-import { Typography } from "../Typography"
 
 const useStyles = makeStyles(
   ({ constants, typography, animation, palette, overrides }: ITheme) =>
@@ -20,7 +19,6 @@ const useStyles = makeStyles(
         border: "none",
         outline: "none",
         "& svg": {
-          transitionDuration: `${animation.transform}ms`,
           margin: `${0}px ${constants.generalUnit / 2}px 0`
         },
         "&.large": {
@@ -47,13 +45,13 @@ const useStyles = makeStyles(
         justifyContent: "center",
         textAlign: "center",
         alignItems: "center",
+        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`
         }
       },
@@ -93,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
         },
@@ -113,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
@@ -331,19 +332,7 @@ const Button: React.FC<IButtonProps> = ({
 }: IButtonProps) => {
   const classes = useStyles()
 
-  return variant === "link" ? (<Typography
-    className={clsx(
-      classes.root,
-      className,
-      classes[variant],
-      fullsize && classes.fullsize,
-      disabled && classes.disabled,
-      iconButton && classes.icon,
-      `${size}`
-    )}
-  >
-    {loading && loadingText ? loadingText : children}
-  </Typography>) : (
+  return (
     <button
       className={clsx(
         classes.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/common-components/src/Icons/icons/CaretCircleLeft.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as CaretCircleLeftSvg } from "../svgs/caret-circle-left.svg"
+
+export { CaretCircleLeftSvg }
+
+export default createSvgIcon(<CaretCircleLeftSvg />)

packages/common-components/src/Icons/icons/CaretCircleRight.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as CaretCircleRightSvg } from "../svgs/caret-circle-right.svg"
+
+export { CaretCircleRightSvg }
+
+export default createSvgIcon(<CaretCircleRightSvg />)

packages/common-components/src/Icons/icons/CaretLeft.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as CaretLeftSvg } from "../svgs/caret-left.svg"
+
+export { CaretLeftSvg }
+
+export default createSvgIcon(<CaretLeftSvg />)

packages/common-components/src/Icons/icons/File.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as FileSvg } from "../svgs/file.svg"
+
+export { FileSvg }
+
+export default createSvgIcon(<FileSvg />)

packages/common-components/src/Icons/icons/FileAudio.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as FileAudioSvg } from "../svgs/file-audio.svg"
+
+export { FileAudioSvg }
+
+export default createSvgIcon(<FileAudioSvg />)

packages/common-components/src/Icons/icons/FileVideo.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as FileVideoSvg } from "../svgs/file-video.svg"
+
+export { FileVideoSvg }
+
+export default createSvgIcon(<FileVideoSvg />)

packages/common-components/src/Icons/icons/Link.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as LinkSvg } from "../svgs/link.svg"
+
+export { LinkSvg }
+
+export default createSvgIcon(<LinkSvg />)

packages/common-components/src/Icons/index.ts

@@ -8,7 +8,10 @@ export { default as ArrowRightIcon, ArrowRightSvg } from "./icons/ArrowRight.ico
 export { default as BellIcon, BellSvg } from "./icons/Bell.icon"
 export { default as BitcoinIcon, BitcoinSvg } from "./icons/Bitcoin.icon"
 export { default as BulbIcon, BulbSvg } from "./icons/Bulb.icon"
+export { default as CaretCircleLeftIcon, CaretCircleLeftSvg } from "./icons/CaretCircleLeft.icon"
+export { default as CaretCircleRightIcon, CaretCircleRightSvg } from "./icons/CaretCircleRight.icon"
 export { default as CaretDownIcon, CaretDownSvg } from "./icons/CaretDown.icon"
+export { default as CaretLeftIcon, CaretLeftSvg } from "./icons/CaretLeft.icon"
 export { default as CaretUpIcon, CaretUpSvg } from "./icons/CaretUp.icon"
 export { default as CaretRightIcon, CaretRightSvg as CaretRightSvg } from "./icons/CaretRight.icon"
 export { default as CheckIcon, CheckSvg } from "./icons/Check.icon"
@@ -39,9 +42,12 @@ export { default as EyeClosedIcon, EyeClosedSvg } from "./icons/EyeClosed.icon"
 export { default as EyeIcon, EyeSvg } from "./icons/Eye.icon"
 export { default as EyeOpenIcon, EyeOpenSvg } from "./icons/EyeOpen.icon"
 export { default as FacebookLogoIcon, FacebookLogoSvg } from "./icons/FacebookLogo.icon"
+export { default as FileAudioIcon, FileAudioSvg } from "./icons/FileAudio.icon"
+export { default as FileIcon, FileSvg } from "./icons/File.icon"
 export { default as FileImageIcon, FileImageSvg } from "./icons/FileImage.icon"
 export { default as FilePdfIcon, FilePdfSvg } from "./icons/FilePdf.icon"
 export { default as FileTextIcon, FileTextSvg } from "./icons/FileText.icon"
+export { default as FileVideoIcon, FileVideoSvg } from "./icons/FileVideo.icon"
 export { default as FolderIcon, FolderSvg } from "./icons/Folder.icon"
 export { default as FolderFilledIcon, FolderFilledSvg } from "./icons/FolderFilled.icon"
 export { default as FullscreenIcon, FullscreenSvg } from "./icons/Fullscreen.icon"
@@ -56,6 +62,7 @@ export { default as MastercardCardIcon, MastercardCardSvg } from "./icons/Master
 export { default as MoonIcon, MoonSvg } from "./icons/Moon.icon"
 export { default as MoonStarIcon, MoonStarSvg } from "./icons/MoonStar.icon"
 export { default as MoreIcon, MoreSvg } from "./icons/More.icon"
+export { default as LinkIcon, LinkSvg } from "./icons/Link.icon"
 export { default as LockIcon, LockSvg } from "./icons/Lock.icon"
 export { default as KeyIcon, KeySvg } from "./icons/Key.icon"
 export { default as PaperclipIcon, PaperclipSvg } from "./icons/Paperclip.icon"