fix: add close button on mobile (#119)

* fix: add close button on mobile * fix: fixed ui based on comments * fix: fixed ui for split subvariant * fix: fixed ui placements * fix: minor change * fix: minor cosmetic changes * fix: minor changes to icon placement * chore: fix icons --------- Co-authored-by: Eugene Chybisov <[email protected]>
lifinance · Sep 13, 2023 · 8c2ab60 · 8c2ab60
1 parent 1721688
commit 8c2ab60
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 9 deletions.
diff --git a/packages/widget/src/AppDrawer.style.tsx b/packages/widget/src/AppDrawer.style.tsx
@@ -1,4 +1,4 @@
-import { Button, Typography } from '@mui/material';
+import { Button, IconButton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
 const getButtonTransformWidth = (
@@ -96,3 +96,14 @@ export const DrawerButtonTypography = styled(Typography)(({ theme }) => ({
   transform: 'rotateZ(180deg)',
   writingMode: 'vertical-rl',
 }));
+
+export const CloseButtonLayout = styled(IconButton)(() => ({
+  position: 'absolute',
+  top: '12px',
+  right: '26px',
+  zIndex: 1,
+  height: '40px',
+  width: '40px',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
diff --git a/packages/widget/src/AppDrawer.tsx b/packages/widget/src/AppDrawer.tsx
@@ -1,3 +1,4 @@
+import CloseIcon from '@mui/icons-material/CloseRounded';
 import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import { Drawer } from '@mui/material';
@@ -11,7 +12,11 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AppDefault } from './App';
-import { DrawerButton, DrawerButtonTypography } from './AppDrawer.style';
+import {
+  CloseButtonLayout,
+  DrawerButton,
+  DrawerButtonTypography,
+} from './AppDrawer.style';
 import { AppProvider } from './AppProvider';
 import type { WidgetConfig, WidgetProps, WidgetSubvariant } from './types';
 import { HiddenUI } from './types';
@@ -103,6 +108,9 @@ export const AppDrawer = forwardRef<WidgetDrawer, WidgetProps>(
           }}
           keepMounted
         >
+          <CloseButtonLayout onClick={closeDrawer} edge="end">
+            <CloseIcon />
+          </CloseButtonLayout>
           <AppDefault />
         </Drawer>
       </AppProvider>

diff --git a/packages/widget/src/components/Header/Header.style.ts b/packages/widget/src/components/Header/Header.style.ts
@@ -47,3 +47,13 @@ export const WalletButton = styled(Button)(({ theme }) => ({
     fontSize: '24px',
   },
 }));
+
+export const DrawerWalletContainer = styled(Box)(() => ({
+  width: '100%',
+  display: 'flex',
+  justifyItems: 'start',
+
+  '& > button': {
+    marginLeft: '-0.5rem',
+  },
+}));
diff --git a/packages/widget/src/components/Header/NavigationHeader.tsx b/packages/widget/src/components/Header/NavigationHeader.tsx
@@ -19,7 +19,7 @@ import { WalletMenuButton } from './WalletHeader';
 
 export const NavigationHeader: React.FC = () => {
   const { t } = useTranslation();
-  const { subvariant, hiddenUI } = useWidgetConfig();
+  const { subvariant, hiddenUI, variant } = useWidgetConfig();
   const { navigate, navigateBack } = useNavigateBack();
   const { account } = useWallet();
   const { element, title } = useHeaderStore((state) => state);
@@ -115,7 +115,11 @@ export const NavigationHeader: React.FC = () => {
           <Route
             path={navigationRoutes.home}
             element={
-              <>
+              <Box
+                paddingRight={
+                  variant === 'drawer' && subvariant === 'split' ? 5 : 0
+                }
+              >
                 {account.isActive && !hiddenUI?.includes(HiddenUI.History) ? (
                   <Tooltip
                     title={t(`header.transactionHistory`)}
@@ -144,7 +148,7 @@ export const NavigationHeader: React.FC = () => {
                     <SettingsIcon />
                   </IconButton>
                 </Tooltip>
-              </>
+              </Box>
             }
           />
           <Route path="*" element={element || <Box width={28} height={40} />} />

diff --git a/packages/widget/src/components/Header/WalletHeader.tsx b/packages/widget/src/components/Header/WalletHeader.tsx
@@ -10,7 +10,11 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useChain } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes, shortenAddress } from '../../utils';
-import { HeaderAppBar, WalletButton } from './Header.style';
+import {
+  DrawerWalletContainer,
+  HeaderAppBar,
+  WalletButton,
+} from './Header.style';
 import { WalletMenu } from './WalletMenu';
 
 export const WalletHeader: React.FC = () => {
@@ -23,13 +27,22 @@ export const WalletHeader: React.FC = () => {
 
 export const WalletMenuButton: React.FC = () => {
   const { account } = useWallet();
+  const { variant } = useWidgetConfig();
+
+  if (variant === 'drawer') {
+    return (
+      <DrawerWalletContainer>
+        {account.isActive ? <ConnectedButton /> : <ConnectButton />}
+      </DrawerWalletContainer>
+    );
+  }
   return account.isActive ? <ConnectedButton /> : <ConnectButton />;
 };
 
 const ConnectButton = () => {
   const { t } = useTranslation();
   const { pathname } = useLocation();
-  const { walletManagement, subvariant } = useWidgetConfig();
+  const { walletManagement, subvariant, variant } = useWidgetConfig();
   const { connect: connectWallet } = useWallet();
   const navigate = useNavigate();
   const connect = async () => {
@@ -41,8 +54,16 @@ const ConnectButton = () => {
   };
   return (
     <WalletButton
-      endIcon={subvariant !== 'split' ? <WalletIcon /> : undefined}
-      startIcon={subvariant === 'split' ? <WalletIcon /> : undefined}
+      endIcon={
+        variant !== 'drawer' && subvariant !== 'split' ? (
+          <WalletIcon />
+        ) : undefined
+      }
+      startIcon={
+        variant === 'drawer' || subvariant === 'split' ? (
+          <WalletIcon sx={{ marginLeft: -0.25 }} />
+        ) : undefined
+      }
       onClick={
         !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined
       }