Minor fixes + Updates to color manipulator

packages/common-components/package.json

@@ -43,6 +43,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-image": "^2.0.6",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@storybook/addon-actions": "^5.3.21",
     "@storybook/addon-contexts": "^5.3.19",

packages/common-components/rollup.config.js

@@ -6,6 +6,7 @@ import svgr from "@svgr/rollup"
 import url from "rollup-plugin-url"
 import babel from "rollup-plugin-babel"
 import postcss from "rollup-plugin-postcss"
+import image from "@rollup/plugin-image"
 
 export default {
   input: "./src/index.ts",
@@ -14,30 +15,31 @@ export default {
     dir: "dist/",
     exports: "named",
     sourcemap: true,
-    strict: true,
+    strict: true
   },
   plugins: [
+    image(),
     peerDepsExternal(),
     resolve(),
     commonjs(),
     typescript(),
     postcss({
-      plugins: [],
+      plugins: []
     }),
     url(),
     svgr(),
     babel({
       exclude: "node_modules/**",
       presets: ["@babel/preset-react", "@babel/preset-env"],
-      plugins: ["emotion"],
-    }),
+      plugins: ["emotion"]
+    })
   ],
   external: [
     "react",
     "react-dom",
     "@material-ui/styles",
     "formik",
     "react-toast-notifications",
-    "@chainsafe/common-theme",
-  ],
+    "@chainsafe/common-theme"
+  ]
 }

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

@@ -1,6 +1,7 @@
 import React from "react"
 import { makeStyles, createStyles, ITheme } from "@chainsafe/common-theme"
 import clsx from "clsx"
+import ChainSafePng from "./logo.png"
 
 const useStyles = makeStyles(({ overrides }: ITheme) =>
   createStyles({
@@ -17,7 +18,7 @@ const ChainsafeFilesLogo: React.FC<{ className?: string }> = ({
   const classes = useStyles()
   return (
     <img
-      src="ChainSafe-logo.png"
+      src={ChainSafePng}
       alt="Chainsafe Logo"
       className={clsx(classes.root, className)}
     />

packages/common-components/src/types.d.ts

@@ -0,0 +1 @@
+declare module "*.png"

packages/common-themes/src/Defaults/GlobalStyling.ts

@@ -3,6 +3,7 @@ import { DefaultThemeConfig, defaultFontFamilyStack } from "./ThemeConfig"
 
 export const DefaultGlobalStyling = {
   ":root": {
+    "--ready": "true",
     ...DefaultPalette.root
   },
   html: {

packages/common-themes/src/Defaults/ThemeConfig.ts

@@ -191,8 +191,8 @@ const DefaultThemeConfig: IThemeConfig = {
     blocker: 10000
   },
   shadows: {
-    shadow1: `0px 1px 4px ${fade(DefaultPalette.additional.gray[10], 0.15)}`,
-    shadow2: `0px 2px 8px ${fade(DefaultPalette.additional.gray[10], 0.25)}`
+    shadow1: `0px 1px 4px ${fade("#000000", 0.15)}`, // Gray[10] // TODO: #875
+    shadow2: `0px 2px 8px ${fade("#000000", 0.25)}` // Gray[10] // TODO: #875
   }
 }
 

packages/common-themes/src/utils/colorManipulator.ts

@@ -88,22 +88,38 @@ export function decomposeColor(color: string): IColorObject {
 
   if (["rgb", "rgba", "hsl", "hsla", "var"].indexOf(type) === -1) {
     throw new Error(
-      "Material-UI: Unsupported `%s` color.\n" +
+      `ChainSafe themes: Unsupported ${type} color.\n` +
         "We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), var()."
     )
   }
 
   let colorToParse = `${color}`
 
   if (type === "var") {
-    colorToParse = getComputedStyle(document.documentElement).getPropertyValue(color.substr(marker + 1, color.length - 1))
+    // Check if loaded
+    if (!getComputedStyle(document.documentElement).getPropertyValue("--ready")) {
+      // throw new Error(
+      //   "Css variable not loaded yet"
+      // )
+      // TODO: #875: Resolve variables not being loaded in time issue
+      console.debug("Css variable not loaded yet")
+    }
+
+    colorToParse = getComputedStyle(document.documentElement).getPropertyValue(color.replace("var(", "").replace(")", ""))
+    if (colorToParse.charAt(0) === "#") {
+      return decomposeColor(
+        hexToRgb(
+          colorToParse
+        )
+      )
+    }
   }
 
   const valuesStrings = colorToParse
     .substring(marker + 1, colorToParse.length - 1)
     .split(",")
-  const values = valuesStrings.map((value) => parseFloat(value))
 
+  const values = valuesStrings.map((value) => parseFloat(value))
   return { type: type as ColorFormat, values: values as ColorValues }
 }
 

packages/files-ui/craco.config.js

@@ -6,7 +6,7 @@ module.exports = {
     plugins: ["macros"],
     loaderOptions: (babelLoaderOptions, { env, paths }) => {
       return babelLoaderOptions
-    },
+    }
   },
   webpack: {
     configure: (webpackConfig) => ({
@@ -17,32 +17,32 @@ module.exports = {
           new TerserPlugin({
             terserOptions: {
               parse: {
-                ecma: 8,
+                ecma: 8
               },
               compress: {
                 ecma: 5,
                 warnings: false,
                 comparisons: false,
                 inline: 2,
-                drop_console: true,
+                drop_console: true
               },
               mangle: {
-                safari10: true,
+                safari10: true
               },
               output: {
                 ecma: 5,
                 comments: false,
-                ascii_only: true,
-              },
+                ascii_only: true
+              }
             },
             parallel: 2,
             cache: true,
             sourceMap: true,
-            extractComments: false,
-          }),
-        ],
+            extractComments: false
+          })
+        ]
       },
-      devtool: "source-map",
-    }),
-  },
+      devtool: "source-map"
+    })
+  }
 }

packages/files-ui/src/Components/Modules/LoginModule/SignInMethods.tsx

@@ -199,7 +199,7 @@ const SignInMethods = ({ goToComplete, goToMnemonic, goToPassword, goToSkip, cla
     <div className={clsx(classes.root, className)}>
       <Typography className={classes.title} variant={desktop ? "h2" : "h4"} component="h1">
         <Trans>
-          Sign-in Methods
+          Sign-in methods
         </Trans>
       </Typography>
 
@@ -287,7 +287,7 @@ const SignInMethods = ({ goToComplete, goToMnemonic, goToPassword, goToSkip, cla
           <>
             <Typography className={classes.additionalMethods} variant={desktop ? "h2" : "h4"} component="p">
               <Trans>
-                Add sign-in Methods
+                Add sign-in methods
               </Trans>
             </Typography>
             <Typography component="p">

packages/files-ui/src/Components/Pages/LoginPage.tsx

@@ -127,6 +127,10 @@ const useStyles = makeStyles(
           justifyContent: "center",
           width: "100%"
         }
+      },
+      logo: {
+        height: 60,
+        width: 60
       }
     })
 )
@@ -239,7 +243,7 @@ const LoginPage = () => {
         target="_blank"
         rel="noopener noreferrer"
       >
-        <ChainsafeFilesLogo />
+        <ChainsafeFilesLogo className={classes.logo} />
         <Typography>
           <Trans>
             Learn more about ChainSafe

packages/files-ui/src/Themes/DarkTheme.ts

@@ -338,7 +338,7 @@ export const darkTheme = createTheme<CsfColors>({
         },
         loginModule: {
           explainerBg: "var(--gray2)",
-          background: "var(--gray3)",
+          background: "var(--gray2)",
           itemBackground: "var(--gray4)",
           iconColor: "#9E9E9E", // Gray 7.5
           textColor: "var(--gray9)",

packages/files-ui/src/Themes/LightTheme.ts

@@ -25,7 +25,7 @@ export const lightTheme = createTheme<CsfColors>({
         },
         loginModule: {
           explainerBg: "var(--gray2)",
-          background: "var(--gray3)",
+          background: "var(--gray2)",
           itemBackground: "var(--gray4)",
           iconColor: "#9E9E9E", // Gray 7.5
           textColor: "var(--gray9)",
@@ -36,7 +36,7 @@ export const lightTheme = createTheme<CsfColors>({
           completeText: "var(--gray3)"
         },
         modalDefault: {
-          fadeBackground: "var(--gray1)",
+          fadeBackground: "var(--gray10)",
           background: "var(--gray1)"
         },
         header: {

yarn.lock

@@ -3046,6 +3046,14 @@
     magic-string "^0.25.7"
     resolve "^1.17.0"
 
+"@rollup/plugin-image@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-2.0.6.tgz#2e6d7a72b25df81aa80c8c0866d45a45c1e6a265"
+  integrity sha512-bB+spXogbPiFjhBS7i8ajUOgOnVwWK3bnJ6VroxKey/q8/EPRkoSh+4O1qPCw97qMIDspF4TlzXVBhZ7nojIPw==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    mini-svg-data-uri "^1.2.3"
+
 "@rollup/plugin-json@^4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.1.0.tgz#54e09867ae6963c593844d8bd7a9c718294496f3"
@@ -14531,6 +14539,11 @@ mini-css-extract-plugin@^0.7.0:
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
+mini-svg-data-uri@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
+  integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"