feat: improve design system architecture and overall styling

packages/yoroi-extension/app/App.js

@@ -17,7 +17,7 @@ import MaintenancePage from './containers/MaintenancePage';
 import CrashPage from './containers/CrashPage';
 import { Logger } from './utils/logging';
 import { LayoutProvider } from './styles/context/layout';
-import { ThemeProvider } from '@mui/material/styles';
+import { ColorModeProvider } from './styles/context/mode';
 import { CssBaseline } from '@mui/material';
 import { globalStyles } from './styles/globalStyles';
 import Support from './components/widgets/Support';
@@ -96,15 +96,15 @@ class App extends Component<Props, State> {
     return (
       <div style={{ height: '100%' }}>
         <LayoutProvider layout={currentTheme}>
-          <ThemeProvider theme={muiTheme}>
+          <ColorModeProvider currentTheme={currentTheme}>
             <CssBaseline />
             {globalStyles(muiTheme)}
             <ThemeManager cssVariables={themeVars} />
             {/* Automatically pass a theme prop to all components in this subtree. */}
             <IntlProvider {...{ locale, key: locale, messages: mergedMessages }}>
               {this.getContent()}
             </IntlProvider>
-          </ThemeProvider>
+          </ColorModeProvider>
         </LayoutProvider>
       </div>
     );

packages/yoroi-extension/app/components/common/AmountInput.scss

@@ -10,12 +10,11 @@
     border: none;
     outline: none;
     width: 100%;
-    color: #242838;
     font-family: Rubik;
     font-size: 24px;
     letter-spacing: 0;
     line-height: 32px;
-    background-color: #ffffff;
+
     &:focus {
         outline: none;
     }

packages/yoroi-extension/app/components/common/NumericInputRP.js

@@ -490,7 +490,7 @@ class AmountInput extends Component<AmountInputProps> {
               right: '10px',
               fontWeight: 400,
               fontSize: '0.75rem',
-              color: 'var(--yoroi-comp-input-text)',
+              color: 'grayscale.900',
             }}
           >
             {intl.formatMessage(messages.feesLabel, { amount: fees })}
@@ -503,7 +503,7 @@ class AmountInput extends Component<AmountInputProps> {
             position: 'absolute',
             bottom: '45px',
             right: error != null && error !== '' ? '45px' : '10px',
-            color: 'var(--yoroi-comp-input-text)',
+            color: 'grayscale.900',
             textTransform: 'uppercase',
           }}
         >
@@ -529,9 +529,9 @@ class AmountInputRevamp extends Component<AmountInputProps> {
     const { intl } = this.context;
 
     return (
-      <div className={styles.component}>
+      <Box className={styles.component} sx={{ '& input::placeholder': { color: 'grayscale.400' } }}>
         <NumericInputRP {...this.props} />
-      </div>
+      </Box>
     );
   }
 }

packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.scss

@@ -1,17 +1,16 @@
 .component {
   height: 100%;
   width: 100%;
-  background-color: #f0f3f5;
+  background-color: #fff;
   display: flex;
   justify-content: center;
 
   .container {
     width: 750px;
-    height: 600px;
+    height: 500px;
     overflow-y: scroll;
     background-color: white;
-    margin-top: 40px;
-    margin-bottom: 40px;
+    border: 1px solid #DCE0E9;
     border-radius: 8px;
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -29,7 +28,7 @@
     & > p {
       padding-left: 40px;
       padding-top: 28px;
-      color: #a7afc0;
+      color: #000;
       font-family: Rubik;
       font-size: 14px;
       letter-spacing: 0;

packages/yoroi-extension/app/components/dapp-connector/Layout/DappConnectorNavbar.scss

@@ -1,6 +1,6 @@
 .component {
     background-color: #FFFFFF;
-    box-shadow: 0 2px 5px 3px rgba(0, 0, 0, 0.06);
+    border-bottom: 1px solid #DCE0E9;
 
     .header {
         color: #38393D;
@@ -9,6 +9,6 @@
         font-weight: 500;
         letter-spacing: 0;
         line-height: 28px;
-        padding: 32px 40px;
+        padding: 20px 24px;
     }
 }

packages/yoroi-extension/app/components/layout/BackgroundColoredLayout.js

@@ -5,16 +5,17 @@ import { Box } from '@mui/system';
 
 type Props = {|
   +children: Node,
+  +isRevamp?: boolean,
 |};
 
-function BackgroundColoredLayout({ children }: Props): Node {
+function BackgroundColoredLayout({ children, isRevamp = false }: Props): Node {
   return (
     <Box
       sx={{
         overflow: 'auto',
         height: '100%',
-        padding: '30px',
-        background: 'var(--yoroi-palette-gray-50)',
+        padding: isRevamp ? 0 : '30px',
+        backgroundColor: isRevamp ? 'common.white' : 'var(--yoroi-palette-gray-50)',
       }}
     >
       {children}

packages/yoroi-extension/app/components/layout/TopBarLayout.js

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
 import styles from './TopBarLayout.scss';
 import { withLayout } from '../../styles/context/layout';
 import { Box } from '@mui/system';
+import { THEMES } from '../../styles/utils';
 
 type Props = {|
   +banner?: Node,
@@ -19,7 +20,7 @@ type Props = {|
   +bgcolor?: string,
 |};
 
-type InjectedProps = {| isRevampLayout: boolean |};
+type InjectedProps = {| isRevampLayout: boolean, currentTheme: string |};
 /** Adds a top bar above the wrapped node */
 function TopBarLayout({
   banner,
@@ -31,10 +32,13 @@ function TopBarLayout({
   languageSelectionBackground,
   showInContainer,
   showAsCard,
+  currentTheme,
   isRevampLayout,
   asModern,
   bgcolor,
 }: Props & InjectedProps) {
+  const isModern = currentTheme === THEMES.YOROI_MODERN;
+
   const getContentUnderBanner: void => Node = () => {
     const topbarComponent = <Box sx={{ zIndex: 2 }}>{topbar}</Box>;
     const navbarComponent = <Box sx={{ zIndex: 2 }}>{navbar}</Box>;
@@ -52,10 +56,9 @@ function TopBarLayout({
               height: '7px',
               display: 'block',
             },
-            boxShadow: showAsCard === true && '0 2px 12px 0 rgba(0, 0, 0, 0.06)',
-            borderRadius: showAsCard === true && '8px',
+            boxShadow: !isRevampLayout && showAsCard === true && '0 2px 12px 0 rgba(0, 0, 0, 0.06)',
+            borderRadius: !isRevampLayout && showAsCard === true && '8px',
             ...(showInContainer === true && {
-              marginTop: '4px',
               background: 'var(--yoroi-palette-common-white)',
               width: '100%',
               overflow: 'hidden',
@@ -66,11 +69,18 @@ function TopBarLayout({
             }),
           }}
         >
-          {isRevampLayout && asModern !== true ? (
-            <Box sx={{ background: bgcolor || 'var(--yoroi-palette-gray-50)', height: '100%' }}>
+          {isRevampLayout && asModern !== true && !isModern ? (
+            <Box
+              sx={{
+                bgcolor: bgcolor || 'common.white',
+                height: '100%',
+                width: '100%',
+                maxWidth: '1872px',
+                mx: 'auto',
+              }}
+            >
               <Box
                 sx={{
-                  maxWidth: 'calc(1366px - 90px)',
                   height: '100%',
                   width: '100%',
                   margin: 'auto',
@@ -80,9 +90,8 @@ function TopBarLayout({
                   sx={{
                     height: '100%',
                     minHeight: '200px',
-                    padding: '40px',
-                    backgroundColor: bgcolor || 'var(--yoroi-palette-gray-50)',
-                    overflow: 'auto',
+                    padding: '24px',
+                    backgroundColor: bgcolor || 'common.white',
                   }}
                 >
                   {children}
@@ -96,7 +105,24 @@ function TopBarLayout({
       </>
     );
     if (showInContainer === true) {
-      return isRevampLayout && asModern !== true ? (
+      const boxProperties = {
+        height: '100%',
+        minHeight: '200px',
+        backgroundColor: 'grey.50',
+        maxWidth: '1295px',
+        paddingLeft: '40px',
+        paddingRight: '40px',
+        width: '100%',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        maxHeight: 'calc(100vh - 110px)',
+      };
+      if (isRevampLayout && asModern !== true && !isModern) {
+        boxProperties.backgroundColor = 'common.white';
+      }
+      return isRevampLayout && asModern !== true && !isModern ? (
         <Box
           sx={{
             maxWidth: '100%',
@@ -105,28 +131,14 @@ function TopBarLayout({
             margin: 0,
             display: 'flex',
             flexDirection: 'column',
-            height: 'calc(100vh - 100px)',
+            height: 'calc(100vh - 92px)',
           }}
         >
           {content}
         </Box>
       ) : (
         <Box
-          sx={{
-            height: '100%',
-            minHeight: '200px',
-            ...(showInContainer === true && {
-              maxWidth: '1295px',
-              paddingLeft: '40px',
-              paddingRight: '40px',
-              width: '100%',
-              marginLeft: 'auto',
-              marginRight: 'auto',
-              display: 'flex',
-              flexDirection: 'column',
-              maxHeight: 'calc(100vh - 110px)',
-            }),
-          }}
+          sx={boxProperties}
         >
           {content}
         </Box>
@@ -140,8 +152,8 @@ function TopBarLayout({
   return (
     <Box
       sx={{
-        backgroundColor: 'var(--yoroi-palette-common-white)',
-        boxShadow: '0 0 70px 0 rgba(0, 0, 0, 0.75)',
+        backgroundColor: 'common.white',
+        boxShadow: isModern ? '0 0 70px 0 rgba(0, 0, 0, 0.75)' : 'none',
         display: 'flex',
         flexDirection: 'column',
         height: '100%',
@@ -168,7 +180,15 @@ function TopBarLayout({
             display: 'flex',
             flexDirection: 'column',
             position: 'relative',
-            background: showInContainer === true && 'var(--yoroi-palette-gray-50)',
+            backgroundColor:
+              showInContainer === true && isRevampLayout
+                ? 'common.white'
+                : 'var(--yoroi-palette-gray-50)',
+            ...(isRevampLayout &&
+              asModern !== true &&
+              !isModern && {
+                backgroundColor: 'common.white',
+              }),
           }}
         >
           {banner}

packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss

@@ -4,7 +4,8 @@
 .component {
   max-width: 650px;
   margin: 0 auto;
-  margin-top: 65px;
+  margin-top: 24px;
+
   .header {
     color: var(--yoroi-palette-gray-600);
     text-align: center;
@@ -42,7 +43,7 @@
     margin-right: 30px;
     border-radius: 8px;
     background-color: var(--yoroi-palette-common-white);
-    box-shadow: 0 5px 20px 0 rgba(24, 26, 30, 0.08);
+    border: 1px solid #DCE0E9;
     overflow: hidden;
     &:last-child {
       margin-right: 0;