feat: update color scheme and logo (#301)

* feat: update color scheme

* fix: update favicon

* fix: remove drawer title container padding and font size

frontend/src/assets/icons/logo_wbg.svg

@@ -0,0 +1 @@
+<svg id="bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 251.43 251.03"><defs><style>.cls-1{fill:#1a4049;}.cls-2{fill:#fff;}.cls-3{fill:#817afe;}</style></defs><circle class="cls-1" cx="125.71" cy="125.31" r="80"/><polygon class="cls-2" points="137.14 91.03 137.14 113.88 137.14 136.74 160 136.74 160 113.88 160 91.03 137.14 91.03"/><polygon class="cls-2" points="114.29 113.88 114.29 91.03 91.43 91.03 91.43 113.88 91.43 136.74 91.43 159.6 114.29 159.6 137.14 159.6 137.14 136.74 114.29 136.74 114.29 113.88"/><rect class="cls-3" x="137.14" y="136.74" width="22.86" height="22.86"/></svg>

frontend/src/component/common/NotFound/NotFound.tsx

@@ -1,7 +1,7 @@
 import { Button, Typography } from '@material-ui/core';
 import { useHistory } from 'react-router';
 
-import logo from '../../../assets/img/logo.png';
+import { ReactComponent as LogoIcon } from '../../../assets/icons/logo_wbg.svg';
 
 import { useStyles } from './NotFound.styles';
 
@@ -20,7 +20,7 @@ const NotFound = () => {
     return (
         <div className={styles.container}>
             <div>
-                <img src={logo} alt="unleash logo" className={styles.logo} />
+                <LogoIcon className={styles.logo} />
                 <div className={styles.content}>
                     <Typography variant="h1" style={{ fontSize: '2rem' }}>
                         Ooops. That's a page we haven't toggled on yet.

frontend/src/component/menu/drawer.jsx

@@ -8,7 +8,7 @@ import styles from './drawer.module.scss';
 
 import { baseRoutes as routes } from './routes';
 
-import logo from '../../assets/img/logo.png';
+import { ReactComponent as LogoIcon } from '../../assets/icons/logo_wbg.svg';
 
 const filterByFlags = flags => r => {
     if (r.flag && !flags[r.flag]) {
@@ -76,15 +76,10 @@ export const DrawerMenu = ({
         onClose={() => toggleDrawer()}
     >
         <div className={styles.drawerContainer}>
-            <div className={styles.drawerTitleContainer}>
+            <div>
                 <span className={[styles.drawerTitle].join(' ')}>
-                    <img
+                    <LogoIcon className={styles.drawerTitleLogo} />
-                        alt="Unleash Logo"
+
-                        src={logo}
-                        width="32"
-                        height="32"
-                        className={styles.drawerTitleLogo}
-                    />
                     <span className={styles.drawerTitleText}>{title}</span>
                 </span>
             </div>

frontend/src/component/menu/drawer.module.scss

@@ -4,7 +4,6 @@
 }
 
 .drawerTitle {
-    font-size: var(--h1-size);
     display: flex;
     align-items: center;
 }
@@ -13,13 +12,14 @@
     width: var(--drawer-width);
 }
 
-.drawerTitleContainer {
+.drawerTitleLogo {
-    padding: var(--drawer-padding);
+    width: 65px;
+    height: 65px;
 }
 
-.drawerTitleLogo {
+.drawerTitleText {
-    padding-right: 16px;
+    font-size: 1.1rem;
-    width: 48px;
+    margin-left: 0.25rem;
 }
 
 .drawerList {

frontend/src/themes/main-theme.js

@@ -3,12 +3,12 @@ import { createMuiTheme } from '@material-ui/core/styles';
 const theme = createMuiTheme({
     palette: {
         primary: {
-            main: '#607d8b',
+            main: '#1A4049',
-            light: '#8eacbb',
+            light: '#B3DAED',
-            dark: '#34515e',
+            dark: '#0A1A1d',
         },
         secondary: {
-            main: '#0b5644',
+            main: '#122D33',
             light: '#40836f',
             dark: '#002c1d',
         },
@@ -59,8 +59,8 @@ const theme = createMuiTheme({
         },
         cards: {
             gradient: {
-                top: '#617D8B',
+                top: '#265f6d',
-                bottom: '#31627C',
+                bottom: '#1A4049',
             },
             container: {
                 bg: '#f1f1f1',