From 062ae7eddb8d1ab276c4327c86bcad2998db7894 Mon Sep 17 00:00:00 2001
From: Tanmoy Basak Anjan <tanmoy3399@gmail.com>
Date: Mon, 13 Jun 2022 23:28:04 +0600
Subject: [PATCH] style fixes ready

---
 .../src/Components/Layouts/AppNav.tsx         | 88 +++++++++++++------
 .../src/Components/Pages/BucketsPage.tsx      |  2 +-
 packages/storage-ui/src/Themes/Constants.ts   |  1 +
 packages/storage-ui/src/Themes/LightTheme.ts  |  3 +-
 4 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/packages/storage-ui/src/Components/Layouts/AppNav.tsx b/packages/storage-ui/src/Components/Layouts/AppNav.tsx
index a40d58f803..df6a7b3d02 100644
--- a/packages/storage-ui/src/Components/Layouts/AppNav.tsx
+++ b/packages/storage-ui/src/Components/Layouts/AppNav.tsx
@@ -143,30 +143,40 @@ const useStyles = makeStyles(
         borderRadius: "4px",
         transitionDuration: `${animation.transform}ms`,
         "& span": {
-          color: constants.nav.itemColor,
+          [breakpoints.up("md")]: {
+            color: constants.nav.itemColor
+          },
           [breakpoints.down("md")]: {
-            color: palette.additional["gray"][3]
+            color: constants.nav.itemColorHover
           }
         },
         "& svg": {
+          "& path": {
+            fill: constants.nav.headingColor
+          },
           width: Number(constants.svgWidth),
           marginRight: constants.generalUnit * 2,
-          fill: constants.nav.itemIconColor,
+          [breakpoints.up("md")]: {
+            fill: constants.nav.itemIconColor
+          },
           [breakpoints.down("md")]: {
-            fill: palette.additional["gray"][3]
+            fill: constants.nav.itemIconColorHover
           }
         },
         "&:hover": {
-          backgroundColor: palette.additional["gray"][5]
+          backgroundColor: palette.additional["gray"][5],
+          [breakpoints.down("md")]: {
+            color: constants.nav.backgroundColor
+          }
         },
         "&.selected": {
           backgroundColor: palette.additional["gray"][5],
           [breakpoints.down("md")]: {
             "& span": {
-              color: palette.additional["gray"][9]
+              color: constants.nav.mobileSelectedBackground
             },
             "& svg": {
-              fill: palette.additional["gray"][9]
+              fill: constants.nav.mobileSelectedBackground
             }
           }
         }
@@ -176,17 +186,42 @@ const useStyles = makeStyles(
         display: "flex",
         flexDirection: "row",
         alignItems: "center",
+        color: constants.header.menuItemTextColor,
         "& svg": {
           width: constants.generalUnit * 2,
           height: constants.generalUnit * 2,
-          marginRight: constants.generalUnit
+          marginRight: constants.generalUnit,
+          fill: palette.additional["gray"][7],
+          stroke: palette.additional["gray"][7]
+        }
+      },
+      spaceUsedText: {
+        marginBottom: constants.generalUnit,
+        [breakpoints.down("md")]: {
+          color: palette.additional["gray"][5]
         }
       },
       spaceUsedMargin: {
-        marginBottom: constants.generalUnit
+        marginBottom: constants.generalUnit * 2
       },
       betaCaption: {
         marginBottom: constants.generalUnit * 0.5
+      },
+      bottomSection: {
+        [breakpoints.down("md")]: {
+          marginBottom: constants.generalUnit * 2
+        }
+      },
+      logoutButton: {
+        backgroundColor: palette.additional["gray"][5],
+        "& span": {
+          marginRight: constants.generalUnit * 0.5
+        },
+        "& svg": {
+          width: constants.generalUnit * 2,
+          height: constants.generalUnit * 2,
+          fill: palette.additional["gray"][9]
+        }
       }
     })
   }
@@ -309,16 +344,14 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
               </a>
             </nav>
           </div>
-          <section>
-            <div
-              data-cy="label-space-used"
-            >
+          <section className={classes.bottomSection}>
+            <div data-cy="label-space-used">
               {
                 storageSummary && (
                   <>
                     <Typography
                       variant="body2"
-                      className={classes.spaceUsedMargin}
+                      className={classes.spaceUsedText}
                       component="p"
                     >{`${formatBytes(storageSummary.used_storage, 2)} of ${formatBytes(
                         storageSummary.total_storage, 2
@@ -334,21 +367,18 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
               }
             </div>
             {!desktop && (
-
-              <div style={{ display: "flex" }}>
-                <Button
-                  data-cy="button-sign-out"
-                  variant='secondary'
-                  onClick={() => {
-                    handleOnClick()
-                    signOut()
-                  }}
-                  size='small'
-                >
-                  <PowerDownIcon />
-                  <Trans>Log out</Trans>
-                </Button>
-              </div>
+              <Button
+                data-cy="button-sign-out"
+                onClick={() => {
+                  handleOnClick()
+                  signOut()
+                }}
+                className={classes.logoutButton}
+                variant="tertiary"
+              >
+                <PowerDownIcon />
+                <Trans>Log out</Trans>
+              </Button>
             )}
           </section>
           {!desktop && (
diff --git a/packages/storage-ui/src/Components/Pages/BucketsPage.tsx b/packages/storage-ui/src/Components/Pages/BucketsPage.tsx
index 4380f62ba2..78db85622f 100644
--- a/packages/storage-ui/src/Components/Pages/BucketsPage.tsx
+++ b/packages/storage-ui/src/Components/Pages/BucketsPage.tsx
@@ -83,7 +83,7 @@ const useStyles = makeStyles(({ breakpoints, animation, constants, typography }:
       justifyContent: "space-between",
       alignItems: "center",
       [breakpoints.down("md")]: {
-        marginTop: constants.generalUnit
+        margin: `${constants.generalUnit}px ${constants.generalUnit * 2}px 0`
       }
     },
     modalRoot: {
diff --git a/packages/storage-ui/src/Themes/Constants.ts b/packages/storage-ui/src/Themes/Constants.ts
index 16d1bec237..65fb602d20 100644
--- a/packages/storage-ui/src/Themes/Constants.ts
+++ b/packages/storage-ui/src/Themes/Constants.ts
@@ -59,6 +59,7 @@ export interface CsSColors extends IConstants {
     itemColorHover: string
     itemIconColor: string
     itemIconColorHover: string
+    mobileSelectedBackground: string
     profileButtonShadow: string
   }
   createFolder: {
diff --git a/packages/storage-ui/src/Themes/LightTheme.ts b/packages/storage-ui/src/Themes/LightTheme.ts
index c923495824..9176a40cf2 100644
--- a/packages/storage-ui/src/Themes/LightTheme.ts
+++ b/packages/storage-ui/src/Themes/LightTheme.ts
@@ -64,9 +64,10 @@ export const lightTheme = createTheme<CsSColors>({
           mobileBackgroundColor: "var(--gray9)",
           headingColor: "inherit",
           itemColor: "inherit",
-          itemColorHover: "var(--gray7)",
           itemIconColor: "inherit",
+          itemColorHover: "var(--gray6)",
           itemIconColorHover: "var(--gray7)",
+          mobileSelectedBackground: "var(--gray9)",
           profileButtonShadow: "0px 1px 2px rgba(0, 0, 0, 0.25)"
         },
         createFolder: {