tweak(styles): header back button hovers micro-interaction

Co-authored-by: ux-git <ux-git@users.noreply.github.com>

Author: ux-git

src/components/button/index.tsx

@@ -202,7 +202,7 @@ const Button: FC<ButtonPropsType> = (props) => {
       href={props.href}
       sx={{
         cursor: 'pointer',
-        minHeight: props.minHeight ? `${props.minHeight}px` : '44px',
+        minHeight: props.minHeight ? `${props.minHeight}px` : '40px',
         fontFeatureSettings: '"cv05"',
         padding: variant === 'small' ? '4px 8px' : '8px 16px',
         backgroundColor: getBackgroundColor(),

src/components/page_title/index.tsx

@@ -1,12 +1,12 @@
 import { NavBarOptionsType } from '@definition/app';
 import { navBarOptionsState } from '@states/app';
 import { useSetAtom } from 'jotai';
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 
 const PageTitle = (props: NavBarOptionsType) => {
   const setNavBarOptions = useSetAtom(navBarOptionsState);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setNavBarOptions(props);
   }, [props, setNavBarOptions]);
 

src/features/app_start/shared/page_header/index.tsx

@@ -22,7 +22,22 @@ const PageHeader = ({
         }}
       >
         {onClick && (
-          <IconButton sx={{ margin: 0, padding: 0 }} onClick={onClick}>
+          <IconButton
+            sx={{
+              margin: 0,
+              marginLeft: '-8px',
+              '&:hover': {
+                backgroundColor: 'var(--accent-200)',
+                '& svg': {
+                  transform: 'translateX(4px)',
+                },
+              },
+              '& svg': {
+                transition: 'transform 0.2s ease-in-out',
+              },
+            }}
+            onClick={onClick}
+          >
             <IconArrowBack color="var(--black)" />
           </IconButton>
         )}

src/layouts/navbar/index.tsx

@@ -94,7 +94,7 @@ const NavBar = ({ isSupported }: NavBarType) => {
         sx={{
           backgroundColor: 'var(--accent-100)',
           borderBottom: '1px solid var(--accent-200)',
-          minHeight: '56px',
+          minHeight: '62px',
           position: 'fixed',
           top: 0,
           left: 0,
@@ -104,15 +104,15 @@ const NavBar = ({ isSupported }: NavBarType) => {
           boxShadow: 'none',
         }}
       >
-        <Toolbar sx={{ padding: 0 }}>
+        <Toolbar sx={{ padding: 0, minHeight: '62px', alignItems: 'center' }}>
           <Container
             maxWidth={false}
             sx={{
               maxWidth: '1440px',
               padding:
                 navBarOptions.title !== null
-                  ? { mobile: '4px 16px', tablet: '4px 32px' }
-                  : { mobile: '8px 16px', tablet: '8px 32px' },
+                  ? { mobile: '4px 16px', tablet: '6px 32px' }
+                  : { mobile: '8px 16px', tablet: '6px 32px' },
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'space-between',
@@ -452,14 +452,26 @@ const NavBar = ({ isSupported }: NavBarType) => {
                   <IconButton
                     aria-label={t('tr_back')}
                     onClick={handleBack}
-                    disableHover
+                    sx={{
+                      marginLeft: '-10px',
+                      '&:hover': {
+                        backgroundColor: 'var(--accent-200)',
+                        '& svg': {
+                          transform: 'translateX(4px)',
+                        },
+                      },
+                      '& svg': {
+                        transition: 'transform 0.2s ease-in-out',
+                      },
+                    }}
                   >
                     <IconArrowBack color="var(--black)" />
                   </IconButton>
                   <Box
                     sx={{
                       display: 'flex',
                       flexDirection: 'column',
+                      marginLeft: '-8px',
                     }}
                   >
                     <Typography
@@ -489,6 +501,13 @@ const NavBar = ({ isSupported }: NavBarType) => {
                     <IconButton
                       onClick={handleQuickSettings}
                       aria-label={t('tr_quickSettings')}
+                      sx={{
+                        marginRight: '-8px',
+                        transition: 'background-color 50ms ease-in-out',
+                        '&:hover': {
+                          backgroundColor: 'var(--accent-200)',
+                        },
+                      }}
                     >
                       <IconSettings color="var(--black)" />
                     </IconButton>
@@ -498,15 +517,15 @@ const NavBar = ({ isSupported }: NavBarType) => {
                     )
                   )}
                 </Box>
-                {!!tablet688Up && (
+                {!!tablet688Up && navBarOptions.buttons && (
                   <Box
                     sx={{
                       display: 'flex',
                       gap: '8px',
                       padding: '4px',
                       flexDirection: 'row',
                       backgroundColor: 'var(--accent-150)',
-                      borderRadius: 'var(--radius-l)',
+                      borderRadius: 'var(--radius-xl)',
                     }}
                   >
                     {navBarOptions.buttons}

src/layouts/navbar/useNavbar.tsx

@@ -106,7 +106,7 @@ const useNavbar = () => {
     await userSignOut();
     disconnectCongAccount();
 
-    location.reload();
+    globalThis.location.reload();
   };
 
   return {