From 1765b7d825260e82ea989c86cbcb3edea672d5a8 Mon Sep 17 00:00:00 2001
From: J Caso <jcaso@protonmail.com>
Date: Mon, 21 Aug 2023 15:55:20 +0200
Subject: [PATCH] feat: set header style for mobile

---
 ui/summit-2023/src/App.scss                   |  5 +-
 ui/summit-2023/src/App.tsx                    | 25 ++++----
 ui/summit-2023/src/common/styles/colors.scss  | 30 ++++-----
 .../src/components/common/Header/Header.scss  | 31 ++++++++-
 .../src/components/common/Header/Header.tsx   | 64 +++++++++++--------
 5 files changed, 100 insertions(+), 55 deletions(-)

diff --git a/ui/summit-2023/src/App.scss b/ui/summit-2023/src/App.scss
index ad67544c2..71aded4e7 100644
--- a/ui/summit-2023/src/App.scss
+++ b/ui/summit-2023/src/App.scss
@@ -28,11 +28,10 @@ html,
   top: -231px;
   border-radius: 100px;
   transform: rotate(21.27deg);
-  opacity: 0.60;
+  opacity: 0.6;
   z-index: -1;
 
-  @media (max-width: 420px)  {
+  @media (max-width: 420px) {
     display: none;
   }
 }
-
diff --git a/ui/summit-2023/src/App.tsx b/ui/summit-2023/src/App.tsx
index 58d50202f..81becdcc0 100644
--- a/ui/summit-2023/src/App.tsx
+++ b/ui/summit-2023/src/App.tsx
@@ -10,19 +10,22 @@ import BackgroundPolygon1 from './common/resources/images/polygon1.svg';
 function App() {
   return (
     <>
-        <div className="main-container">
-            <img src={BackgroundPolygon1} alt="Background Shape" className="background-shape-1"/>
-            <div className="App">
-                <Router>
-                    <Header />
-                    <div className="content">
-                        <PageRouter />
-                    </div>
-                    <Footer />
-                </Router>
+      <div className="main-container">
+        <img
+          src={BackgroundPolygon1}
+          alt="Background Shape"
+          className="background-shape-1"
+        />
+        <div className="App">
+          <Router>
+            <Header />
+            <div className="content">
+              <PageRouter />
             </div>
+            <Footer />
+          </Router>
         </div>
-
+      </div>
     </>
   );
 }
diff --git a/ui/summit-2023/src/common/styles/colors.scss b/ui/summit-2023/src/common/styles/colors.scss
index 6af03953a..49d7ac573 100644
--- a/ui/summit-2023/src/common/styles/colors.scss
+++ b/ui/summit-2023/src/common/styles/colors.scss
@@ -5,33 +5,33 @@
   --color-secondary: #363c4a;
   --color-secondary-rgb: 54, 60, 74;
 
-  --color-light: #F6F9FF;
+  --color-light: #f6f9ff;
 
   --text-color: var(--color-primary);
   --text-color-rgb: var(--color-primary-rgb);
 
-  --color-ultra-light-grey: #FFF;
-  --color-light-grey: #6C6F89;
+  --color-ultra-light-grey: #fff;
+  --color-light-grey: #6c6f89;
   --color-medium-grey: #434656;
-  --color-dark-grey: #24262E;
+  --color-dark-grey: #24262e;
 
-  --color-ultra-light-green: #EBFEF1;
-  --color-light-green: #ACFCC5;
-  --color-medium-green: #75FA9F;
+  --color-ultra-light-green: #ebfef1;
+  --color-light-green: #acfcc5;
+  --color-medium-green: #75fa9f;
   --color-dark-green: #056122;
 
-  --color-ultra-light-blue: #F5F9FF;
-  --color-light-blue: #DAEEFB;
-  --color-medium-blue: #1894D6;
+  --color-ultra-light-blue: #f5f9ff;
+  --color-light-blue: #daeefb;
+  --color-medium-blue: #1894d6;
   --color-dark-blue: #106593;
-  --color-ultra-dark-blue: #03021F;
+  --color-ultra-dark-blue: #03021f;
 
-  --color-ultra-light-orange: #FFF1EB;
-  --color-light-orange: #FD873C;
+  --color-ultra-light-orange: #fff1eb;
+  --color-light-orange: #fd873c;
   --color-medium-orange: #652701;
 
-  --color-ultra-light-red: #FFEBEE;
-  --color-light-red: #C20024;
+  --color-ultra-light-red: #ffebee;
+  --color-light-red: #c20024;
 
   --color-accent: #92ffc0;
 }
diff --git a/ui/summit-2023/src/components/common/Header/Header.scss b/ui/summit-2023/src/components/common/Header/Header.scss
index 5960ed5da..3b4165a8c 100644
--- a/ui/summit-2023/src/components/common/Header/Header.scss
+++ b/ui/summit-2023/src/components/common/Header/Header.scss
@@ -24,7 +24,6 @@
 
 .connect-button.MuiButton-root {
   display: inline-flex;
-  margin-top: 15px;
   padding: 16px 24px 16px 16px;
   align-items: flex-start;
   gap: 8px;
@@ -42,3 +41,33 @@
 .connect-button.MuiButton-root:hover {
   transform: scale(1.02);
 }
+
+.menuButton.MuiButtonBase-root {
+  width: 51px;
+  height: 51px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: 1px solid var(--color-ultra-dark-blue);
+  background: var(--color-ultra-light-blue);
+}
+
+.closeIcon.MuiSvgIcon-root {
+  width: 29px;
+  height: 29px;
+  flex-shrink: 0;
+  color: var(--color-ultra-dark-blue);
+}
+
+.listItem.MuiListItem-root {
+  display: flex;
+  margin-left: 20px;
+  width: 335px;
+  padding: 16px 24px;
+  align-items: flex-start;
+  gap: 10px;
+  color: #434656;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
\ No newline at end of file
diff --git a/ui/summit-2023/src/components/common/Header/Header.tsx b/ui/summit-2023/src/components/common/Header/Header.tsx
index 3ffb03f88..31898af66 100644
--- a/ui/summit-2023/src/components/common/Header/Header.tsx
+++ b/ui/summit-2023/src/components/common/Header/Header.tsx
@@ -14,8 +14,9 @@ import {
   Divider,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
+import CloseIcon from '@mui/icons-material/Close';
 import './Header.scss';
-import {i18n} from '../../../i18n';
+import { i18n } from '../../../i18n';
 
 const Header: React.FC = () => {
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -24,34 +25,44 @@ const Header: React.FC = () => {
 
   const drawerItems = (
     <List>
-      <ListItem>
-        <img
-          src="/static/cardano-ballot.png"
-          alt="Cardano Logo"
-          style={{ flexGrow: 1, height: '40px' }}
-        />
+      <ListItem style={{ justifyContent: 'space-between' }}>
+        <Button
+          className="connect-button"
+          color="inherit"
+        >
+          {i18n.t('header.connectWalletButton')}
+        </Button>
+        <IconButton
+          className="menuButton"
+          onClick={() => setDrawerOpen(false)}
+        >
+          <CloseIcon className="closeIcon" />
+        </IconButton>
       </ListItem>
-      <Divider style={{ marginTop: '3px' }} />
       <ListItem
         onClick={() => setDrawerOpen(false)}
         component={NavLink}
         to="/categories"
+        className="listItem"
+        style={{marginTop: '20px'}}
       >
-          {i18n.t('header.menu.categories')}
+        {i18n.t('header.menu.categories')}
       </ListItem>
       <ListItem
         onClick={() => setDrawerOpen(false)}
         component={NavLink}
         to="/leaderboard"
+        className="listItem"
       >
-          {i18n.t('header.menu.leaderboard')}
+        {i18n.t('header.menu.leaderboard')}
       </ListItem>
       <ListItem
         onClick={() => setDrawerOpen(false)}
         component={NavLink}
         to="/user-guide"
+        className="listItem"
       >
-          {i18n.t('header.menu.userGuide')}
+        {i18n.t('header.menu.userGuide')}
       </ListItem>
     </List>
   );
@@ -65,20 +76,20 @@ const Header: React.FC = () => {
         <Toolbar>
           {isMobile ? (
             <>
+              <img
+                src="/static/cardano-ballot.png"
+                alt="Cardano Logo"
+                style={{ height: isMobile ? '29px' : '40px' }}
+              />
+              <div style={{ flexGrow: 1 }}></div>
               <IconButton
-                edge="start"
+                edge="end"
                 color="inherit"
+                className="menuButton"
                 onClick={() => setDrawerOpen(true)}
               >
-                <MenuIcon />
+                <MenuIcon className="closeIcon" />
               </IconButton>
-              <div style={{ flexGrow: 1 }}></div>
-              <Button
-                className="connect-button"
-                color="inherit"
-              >
-                  {i18n.t('header.connectWalletButton')}
-              </Button>
             </>
           ) : (
             <Grid
@@ -98,19 +109,19 @@ const Header: React.FC = () => {
                   to="/categorias"
                   className="nav-link"
                 >
-                    {i18n.t('header.menu.categories')}
+                  {i18n.t('header.menu.categories')}
                 </NavLink>
                 <NavLink
                   to="/leaderboard"
                   className="nav-link"
                 >
-                    {i18n.t('header.menu.leaderboard')}
+                  {i18n.t('header.menu.leaderboard')}
                 </NavLink>
                 <NavLink
                   to="/user-guide"
                   className="nav-link"
                 >
-                    {i18n.t('header.menu.userGuide')}
+                  {i18n.t('header.menu.userGuide')}
                 </NavLink>
               </Grid>
               <Grid item>
@@ -118,7 +129,7 @@ const Header: React.FC = () => {
                   className="connect-button"
                   color="inherit"
                 >
-                    {i18n.t('header.connectWalletButton')}
+                  {i18n.t('header.connectWalletButton')}
                 </Button>
               </Grid>
             </Grid>
@@ -127,9 +138,12 @@ const Header: React.FC = () => {
       </AppBar>
 
       <Drawer
-        anchor="left"
+        anchor="right"
         open={drawerOpen}
         onClose={() => setDrawerOpen(false)}
+        PaperProps={{
+          style: isMobile ? { width: '100%' } : {},
+        }}
       >
         {drawerItems}
       </Drawer>