add color palette (ChainSafe#226)

dj-pundir · Jun 27, 2023 · 580e4e3 · 580e4e3
1 parent 63442b3
commit 580e4e3
Show file tree

Hide file tree

Showing 13 changed files with 127 additions and 65 deletions.
diff --git a/packages/ui/src/components/IdenticonBadge.tsx b/packages/ui/src/components/IdenticonBadge.tsx
@@ -36,10 +36,12 @@ export const IdenticonBadge = ({ className, badge, address }: Props) => {
   )
 }
 
-export default styled(IdenticonBadge)(
-  ({ theme }) => `
-    &.red > .MuiBadge-badge {
-        background-color: ${theme.custom.identity.red}
-    }
+export default styled(IdenticonBadge)`
+  .MuiBadge-badge {
+    box-shadow: ${({ theme }) => theme.custom.boxShadow};
+  }
+
+  &.red > .MuiBadge-badge {
+    background-color: ${({ theme }) => theme.custom.identity.red};
+  }
 `
-)
diff --git a/packages/ui/src/components/Toasts/ToastContent.tsx b/packages/ui/src/components/Toasts/ToastContent.tsx
@@ -72,7 +72,7 @@ export default styled(ToastContent)(
     }
 
     .errorIcon {
-        color: ${theme.custom.text.errorColor}
+        color: ${theme.custom.error}
     }
 `
 )
diff --git a/packages/ui/src/components/Transactions/Transaction.tsx b/packages/ui/src/components/Transactions/Transaction.tsx
@@ -130,7 +130,7 @@ export default styled(Transaction)(
 
   .callIcon {
     font-size: 7rem;
-    background-color: ${theme.custom.background.backgroundColorLightGray};
+    background-color: ${theme.custom.background.primary};
     margin: 0.5rem;
     padding: 1rem;
     height: auto;
@@ -144,6 +144,7 @@ export default styled(Transaction)(
   }
 
   .badge.red > .MuiBadge-badge {
+    box-shadow: ${theme.custom.boxShadow};
     background-color: ${theme.custom.identity.red};
   }
 `

diff --git a/packages/ui/src/components/Transactions/TransactionList.tsx b/packages/ui/src/components/Transactions/TransactionList.tsx
@@ -252,7 +252,7 @@ export default styled(TransactionList)(
   }
 
   .noCall {
-    background-color: ${theme.custom.background.backgroundColorLightGray};
+    background-color: ${theme.custom.background.primary};
     display: flex;
     flex-direction: column;
     align-content: center;

diff --git a/packages/ui/src/components/library/Button.tsx b/packages/ui/src/components/library/Button.tsx
@@ -14,41 +14,41 @@ export const Button = styled('button')<ButtonProps>`
   border-radius: 10px;
   border: none;
   cursor: pointer;
-  background: ${(props) => props.theme.palette.primary.white};
-  color: #334155;
-  box-shadow: 0 1.21622px 2.43243px rgba(0, 0, 0, 0.1), 0 1.21622px 3.64865px rgba(0, 0, 0, 0.25);
+  background: ${({ theme }) => theme.palette.primary.white};
+  color: ${({ theme }) => theme.custom.text.primary};
+  box-shadow: ${({ theme }) => theme.custom.boxShadow};
   transition: background 0.2s ease-in-out;
 
   &:disabled {
     cursor: not-allowed;
-    color: #d7d7d7;
+    color: ${({ theme }) => theme.custom.button.secondaryDisabledColor};
     background: #f4f4f4;
     box-shadow: none;
   }
 
-  ${(props) =>
-    props.variant === 'primary' &&
+  ${({ variant, theme }) =>
+    variant === 'primary' &&
     `
-    background: ${props.theme.palette.primary.main};
-    color: ${props.theme.palette.primary.white};
+    background: ${theme.palette.primary.main};
+    color: ${theme.palette.primary.white};
     
     &:hover, &:focus {
       filter: brightness(1.1);
     }
   
     &:disabled {
       cursor: not-allowed;
-      background: #e3e9ff;
-      color: #a8b3dc;
+      background: ${theme.custom.button.primaryDisabledBackground};
+      color: ${theme.custom.button.primaryDisabledColor};
       box-shadow: none;
     }
   `}
 
-  ${(props) =>
-    props.variant === 'secondary' &&
+  ${({ variant, theme }) =>
+    variant === 'secondary' &&
     `
-    background: ${props.theme.palette.primary.white};
-    color: #18191A;
+    background: ${theme.custom.gray[100]};
+    color: ${theme.custom.text.black};
   
     &:focus,
     &:hover {
@@ -58,25 +58,25 @@ export const Button = styled('button')<ButtonProps>`
     &:disabled {
       cursor: not-allowed;
       background: #F4F4F4;
-      color: #D7D7D7;
+      color: ${theme.custom.button.secondaryDisabledColor};
       box-shadow: none;
     }
   `}
 
-  ${(props) =>
-    props.variant === 'link' &&
+  ${({ variant, theme }) =>
+    variant === 'link' &&
     `
     background: none;
     box-shadow: none;
-    color: #18191A;
+    color: ${theme.custom.text.black};
     
     &:focus {
-      background: #E6ECF1;
+      background: ${theme.custom.gray[400]};
     }
     
     &:disabled {
       cursor: not-allowed;
-      color: #A8B3DC
+      color: ${theme.custom.button.primaryDisabledColor};
     }
   `}
 `

diff --git a/packages/ui/src/components/library/InputField.tsx b/packages/ui/src/components/library/InputField.tsx
@@ -1,5 +1,6 @@
 import { css, styled } from '@mui/material/styles'
 import React from 'react'
+import { theme } from '../../styles/theme'
 
 interface InputFieldProps {
   value?: string
@@ -40,22 +41,22 @@ const LabelStyled = styled('label')`
     margin-bottom: 4px;
     font-size: 1.125rem;
     font-weight: 500;
-    color: #334155;
+    color: ${(props) => props.theme.custom.text.primary};
   }
 `
 export const InputStyledBaseCss = css`
   width: 100%;
   min-height: 41px;
-  color: #18191a;
+  color: ${theme.custom.text.black};
   padding: 0.5rem 1.25rem;
   border: none;
-  outline: 1.5px solid #e0e2e8;
+  outline: 1.5px solid ${theme.custom.text.borderColor};
   border-radius: 8px;
   font-size: 1rem;
   font-family: 'Jost', sans-serif;
 
   &:focus-visible {
-    outline: 3px solid #e0e2e8;
+    outline: 3px solid ${theme.custom.text.borderColor};
   }
 
   &:disabled {

diff --git a/packages/ui/src/components/library/TextFieldStyled.tsx b/packages/ui/src/components/library/TextFieldStyled.tsx
@@ -10,10 +10,10 @@ export const TextFieldStyled = styled(TextField)`
     margin-bottom: 4px;
     font-size: 1.125rem;
     font-weight: 500;
-    color: #334155;
+    color: ${({ theme }) => theme.custom.text.primary};;
 
     &.Mui-focused {
-      color: #334155;
+      color: ${({ theme }) => theme.custom.text.primary};
     }
   }
 
@@ -39,11 +39,11 @@ export const TextFieldStyled = styled(TextField)`
     }
 
     &.Mui-focused {
-      outline: 3px solid #e0e2e8;
+      outline: 3px solid ${({ theme }) => theme.custom.text.borderColor}};
     }
 
     &.Mui-error {
-      outline: 3px solid #ff8a65;
+      outline: 3px solid ${({ theme }) => theme.custom.error};
     }
   }
 

diff --git a/packages/ui/src/components/modals/ProposalSigning.tsx b/packages/ui/src/components/modals/ProposalSigning.tsx
@@ -378,7 +378,7 @@ export default styled(ProposalSigning)(
 
   .errorMessage {
     margin-top: 0.5rem;
-    color: ${theme.custom.text.errorColor};
+    color: ${theme.custom.error};
   }
 `
 )
diff --git a/packages/ui/src/components/modals/Send.tsx b/packages/ui/src/components/modals/Send.tsx
@@ -443,7 +443,7 @@ export default styled(Send)(
 
   .errorMessage {
     margin-top: 0.5rem;
-    color: ${theme.custom.text.errorColor};
+    color: ${theme.custom.error};
   }
 `
 )
diff --git a/packages/ui/src/pages/Creation/index.tsx b/packages/ui/src/pages/Creation/index.tsx
@@ -378,7 +378,7 @@ export default styled(MultisigCreation)(
 
   .errorMessage {
     margin-top: 0.5rem;
-    color: ${theme.custom.text.errorColor};
+    color: ${theme.custom.error};
   }
 
   .buttonWrapper {

diff --git a/packages/ui/src/pages/Home.tsx b/packages/ui/src/pages/Home.tsx
@@ -409,7 +409,7 @@ export default styled(Home)(
   }
 
   .threshold {
-    background-color: ${theme.custom.background.backgroundColorLightGray};
+    background-color: ${theme.custom.background.primary};
   }
 
   .addressList {

diff --git a/packages/ui/src/styles/App.css b/packages/ui/src/styles/App.css
@@ -13,21 +13,6 @@
   }
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
 .MuiAutocomplete-popper {
   margin-top: 3px !important;
 }

diff --git a/packages/ui/src/styles/theme.ts b/packages/ui/src/styles/theme.ts
@@ -13,12 +13,36 @@ declare module '@mui/material/styles' {
       }
     }
     custom: {
+      boxShadow: string
+      error: string
       text: {
+        primary: string
+        secondary: string
+        placeholder: string
         addressColorLightGray: string
-        errorColor: string
+        borderColor: string
+        black: string
+      }
+      gray: {
+        100: string
+        200: string
+        300: string
+        400: string
+        500: string
+        600: string
+        700: string
+        800: string
+        900: string
+      }
+      button: {
+        primaryDisabledColor: string
+        primaryDisabledBackground: string
+        secondaryDisabledColor: string
+        secondaryDisabledBackground: string
       }
       background: {
-        backgroundColorLightGray: string
+        primary: string
+        secondary: string
       }
       identity: {
         green: string
@@ -29,14 +53,38 @@ declare module '@mui/material/styles' {
   }
   interface ThemeOptions {
     custom: {
-      text?: {
+      boxShadow: string
+      error: string
+      text: {
+        primary: string
+        secondary: string
+        placeholder: string
         addressColorLightGray: string
-        errorColor: string
+        borderColor: string
+        black: string
+      }
+      gray: {
+        100: string
+        200: string
+        300: string
+        400: string
+        500: string
+        600: string
+        700: string
+        800: string
+        900: string
       }
-      background?: {
-        backgroundColorLightGray: string
+      button: {
+        primaryDisabledColor: string
+        primaryDisabledBackground: string
+        secondaryDisabledColor: string
+        secondaryDisabledBackground: string
       }
-      identity?: {
+      background: {
+        primary: string
+        secondary: string
+      }
+      identity: {
         green: string
         grey: string
         red: string
@@ -60,12 +108,37 @@ export const theme = createTheme({
     fontFamily: ['Jost', 'sans-serif', 'Roboto'].join(',')
   },
   custom: {
+    boxShadow:
+      '0 1.21622px 2.43243px rgba(0, 0, 0, 0.1), 0 1.21622px 3.64865px rgba(0, 0, 0, 0.25)',
+    error: '#ff8a65',
     text: {
+      primary: '#334155',
+      secondary: '#64748B',
+      placeholder: '#83878B',
       addressColorLightGray: '#777575',
-      errorColor: '#ff8a65'
+      borderColor: '#E0E2E8',
+      black: '#18191A'
+    },
+    gray: {
+      100: '#FFFFFF',
+      200: '#FAFCFD',
+      300: '#F1F5F9',
+      400: '#E6ECF1',
+      500: '#C6CDE0',
+      600: '#94A3B8',
+      700: '#64748B',
+      800: '#485568',
+      900: '#020617'
+    },
+    button: {
+      primaryDisabledColor: '#A8B3DC',
+      primaryDisabledBackground: '#E3E9FF',
+      secondaryDisabledColor: '#D7D7D7',
+      secondaryDisabledBackground: '#F1F5F9'
     },
     background: {
-      backgroundColorLightGray: '#ebebeb'
+      primary: '#F1F5F9',
+      secondary: '#F8FAFC'
     },
     identity: {
       green: 'green',