refactor(extension): rename files names and components properties

input-output-hk · Jun 2, 2023 · 0a2be22 · 0a2be22
1 parent 83002ec
commit 0a2be22
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 51 deletions.
diff --git a/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.module.scss b/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.module.scss
@@ -2,9 +2,9 @@
 @import '../../../../../packages/common/src/ui/styles/abstracts/mixins';
 
 .pill {
-  margin-left: size_unit(1.5);
+  margin-left: 12px;
   border-radius: size_unit(2);
-  padding: size_unit(1) size_unit(1.5);
+  padding: 8px 12px;
 }
 
 .networkPill {
@@ -18,20 +18,20 @@
   @extend .pill;
   border: 1px solid var(--color-pink, #ff5470);
   color: var(--color-pink, #ff5470);
-  font-size: size_unit(1.5);
+  font-size: 12px;
   font-weight: 400;
-  line-height: size_unit(1.75);
+  line-height: 14px;
 }
 
 .offlinePillText {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: size_unit(0.5);
+  gap: 4px;
   white-space: nowrap;
 
   .dot {
-    font-size: size_unit(3.75);
+    font-size: 30px;
     transform: translate(0, -18%);
   }
 }
@@ -52,9 +52,9 @@
   }
 
   &:hover {
-    margin-left: size_unit(1.5);
+    margin-left: 12px;
     border-radius: size_unit(2);
-    padding: size_unit(1) size_unit(1.5);
+    padding: 8px 12px;
     width: auto;
     height: auto;
     transition: all 0.25s ease-in-out;

diff --git a/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.tsx b/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.tsx
@@ -7,10 +7,10 @@ import { Tooltip } from 'antd';
 import { useTranslation } from 'react-i18next';
 
 interface NetworkPillProp {
-  isExpandablePill?: boolean;
+  isExpandable?: boolean;
 }
 
-export const NetworkPill = ({ isExpandablePill }: NetworkPillProp): ReactElement => {
+export const NetworkPill = ({ isExpandable }: NetworkPillProp): ReactElement => {
   const { environmentName } = useWalletStore();
   const { t } = useTranslation();
   const { isOnline, isBackendFailing } = useNetwork();
@@ -19,18 +19,18 @@ export const NetworkPill = ({ isExpandablePill }: NetworkPillProp): ReactElement
     if (isOnline && !isBackendFailing && environmentName !== 'Mainnet') {
       return (
         <div
-          className={classnames(styles.networkPill, { [styles.expandablePill]: isExpandablePill })}
+          className={classnames(styles.networkPill, { [styles.expandablePill]: isExpandable })}
           data-testid="network-pill"
         >
-          <span className={classnames({ [styles.networkPillText]: isExpandablePill })}>{environmentName}</span>
+          <span className={classnames({ [styles.networkPillText]: isExpandable })}>{environmentName}</span>
         </div>
       );
     }
     if (!isOnline) {
       return (
         <Tooltip title={t('general.networks.error')} placement="rightBottom">
           <div
-            className={classnames(styles.offlinePill, { [styles.expandablePill]: isExpandablePill })}
+            className={classnames(styles.offlinePill, { [styles.expandablePill]: isExpandable })}
             data-testid="network-pill"
           >
             <div className={styles.offlinePillText}>
@@ -45,7 +45,7 @@ export const NetworkPill = ({ isExpandablePill }: NetworkPillProp): ReactElement
       return (
         <Tooltip title={t('general.networks.connectionUnavailable.error')} placement="rightBottom">
           <div
-            className={classnames(styles.offlinePill, { [styles.expandablePill]: isExpandablePill })}
+            className={classnames(styles.offlinePill, { [styles.expandablePill]: isExpandable })}
             data-testid="backend-pill"
           >
             <div className={styles.offlinePillText}>
@@ -57,5 +57,5 @@ export const NetworkPill = ({ isExpandablePill }: NetworkPillProp): ReactElement
       );
     }
     return <></>;
-  }, [isOnline, isBackendFailing, environmentName, t, isExpandablePill]);
+  }, [isOnline, isBackendFailing, environmentName, t, isExpandable]);
 };
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.module.scss b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.module.scss
@@ -1,6 +1,5 @@
 @import '../../../../../../../packages/common/src/ui/styles/theme.scss';
 @import '../../../../../../../packages/common/src/ui/styles/abstracts/mixins';
-@import '../../../../../../../packages/common/src/ui/styles/abstracts/mixins';
 
 $col-width-small: 60px;
 $col-width-medium: 70px;

diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.tsx
@@ -10,7 +10,7 @@ import { BrowserViewSections, ChangeThemeData, Message, MessageTypes } from '@li
 import { useDrawer } from '../../stores';
 import { DrawerContent, DrawerUIContainer } from '../Drawer';
 import { useNetworkError } from '@hooks/useNetworkError';
-import { VerticalNavigationBar } from '../VerticalNavigationBar';
+import { LeftSidePanel } from '../LeftSidePanel';
 import styles from './Layout.module.scss';
 
 interface LayoutProps {
@@ -63,7 +63,7 @@ export const Layout = ({ children, drawerUIDefaultContent, isFullWidth }: Layout
       id="main"
       className={classnames(styles.layoutGridContainer, isFullWidth && styles.fullWidth, isFlexible && styles.flexible)}
     >
-      <VerticalNavigationBar theme={theme.name} />
+      <LeftSidePanel theme={theme.name} />
       {children}
       <DrawerUIContainer defaultContent={drawerUIDefaultContent} />
     </div>

diff --git a/...tionBar/VerticalNavigationBar.module.scss → ...s/LeftSidePanel/LeftSidePanel.module.scss b/...tionBar/VerticalNavigationBar.module.scss → ...s/LeftSidePanel/LeftSidePanel.module.scss
@@ -3,14 +3,8 @@
 $navigation-col-width: 215px;
 
 @mixin concealable-menu-label($display) {
-  // without the global there is no way to target SideMenuLabel inside this module
-  // this is done in the scope of this file, so the entire navigation container handles the hover behaviour and hides and shows the side menu labels on hover
-  :global {
-    .ant-menu-title-content {
-      .concealable-menu-label {
-        display: $display !important;
-      }
-    }
+  .concealableMenuLabel {
+    display: $display !important;
   }
 }
 
@@ -43,11 +37,15 @@ $navigation-col-width: 215px;
   }
 }
 
+.navigationShadow {
+  box-shadow: var(--bg-color-body) 18px 0px 32px 12px;
+}
+
 .stickyMenuInner {
   position: sticky;
   display: flex;
   flex-direction: column;
-  gap: size_unit(6.5);
+  gap: 52px;
   top: 0;
 }
 

diff --git a/...alNavigationBar/VerticalNavigationBar.tsx → ...omponents/LeftSidePanel/LeftSidePanel.tsx b/...alNavigationBar/VerticalNavigationBar.tsx → ...omponents/LeftSidePanel/LeftSidePanel.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { useHistory } from 'react-router';
 import { walletRoutePaths } from '@routes';
-import { NetworkPill } from '../../../../components/NetworkPill';
 import { SideMenu } from '../SideMenu';
 import { useIsSmallerScreenWidthThan } from '@hooks/useIsSmallerScreenWidthThan';
 import { BREAKPOINT_XSMALL } from '@src/styles/constants';
-import laceLogo from '../../../../assets/branding/lace-logo.svg';
-import laceLogoDarkMode from '../../../../assets/branding/lace-logo-dark-mode.svg';
-import LaceLogoMark from '../../../../assets/branding/lace-logo-mark.component.svg';
-import styles from './VerticalNavigationBar.module.scss';
+import { NetworkPill } from '@components/NetworkPill';
+import laceLogo from '@assets/branding/lace-logo.svg';
+import laceLogoDarkMode from '@assets/branding/lace-logo-dark-mode.svg';
+import LaceLogoMark from '@assets/branding/lace-logo-mark.component.svg';
+import styles from './LeftSidePanel.module.scss';
 
 export interface VerticalNavigationBarProps {
   theme: string;
@@ -19,19 +19,21 @@ const logoExtended: Record<string, string> = {
   light: laceLogo
 };
 
-export const VerticalNavigationBar = ({ theme }: VerticalNavigationBarProps): React.ReactElement => {
+export const LeftSidePanel = ({ theme }: VerticalNavigationBarProps): React.ReactElement => {
   const history = useHistory();
-  const isSmallerVersion = useIsSmallerScreenWidthThan(BREAKPOINT_XSMALL);
+  const isNarrowWindow = useIsSmallerScreenWidthThan(BREAKPOINT_XSMALL);
 
-  const logo = isSmallerVersion ? (
-    <LaceLogoMark className={styles.shortenedLogo} onClick={() => history.push(walletRoutePaths.assets)} />
+  const handleLogoRedirection = () => history.push(walletRoutePaths.assets);
+
+  const logo = isNarrowWindow ? (
+    <LaceLogoMark className={styles.shortenedLogo} onClick={handleLogoRedirection} />
   ) : (
     <img
       className={styles.logo}
       src={logoExtended[theme]}
       alt="LACE"
       data-testid="header-logo"
-      onClick={() => history.push(walletRoutePaths.assets)}
+      onClick={handleLogoRedirection}
     />
   );
 
@@ -40,15 +42,15 @@ export const VerticalNavigationBar = ({ theme }: VerticalNavigationBarProps): Re
       <div className={styles.stickyMenuInner}>
         <div className={styles.logoContainer}>
           {logo}
-          {isSmallerVersion ? (
+          {isNarrowWindow ? (
             <div className={styles.networkPillContainer}>
-              <NetworkPill isExpandablePill />
+              <NetworkPill isExpandable />
             </div>
           ) : (
             <NetworkPill />
           )}
         </div>
-        <SideMenu />
+        <SideMenu menuItemLabelClassName={styles.concealableMenuLabel} />
       </div>
     </nav>
   );

diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/index.ts b/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/index.ts
@@ -0,0 +1 @@
+export * from './LeftSidePanel';
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenu.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenu.tsx
@@ -12,9 +12,13 @@ import { sideMenuConfig } from './side-menu-config';
 import { SideMenuContent } from './SideMenuContent';
 import { walletRoutePaths as routes } from '@routes/wallet-paths';
 
+export interface SideMenuProps {
+  menuItemLabelClassName?: string;
+}
+
 const isPathAvailable = (path: string) => Object.values(routes).includes(path);
 
-export const SideMenu = (): React.ReactElement => {
+export const SideMenu = ({ menuItemLabelClassName }: SideMenuProps): React.ReactElement => {
   const {
     push,
     location: { pathname },
@@ -77,6 +81,7 @@ export const SideMenu = (): React.ReactElement => {
       onClick={handleRedirection}
       onMouseEnter={onMouseEnterItem}
       onMouseLeave={onMouseLeaveItem}
+      menuItemLabelClassName={menuItemLabelClassName}
     />
   );
 };
diff --git a/...r-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuContent.module.scss b/...r-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuContent.module.scss
@@ -1,5 +1,12 @@
 @import '../../../../../../../packages/common/src/ui/styles/theme.scss';
 
+.menuContainer {
+  padding-left: 12px;
+  @media (min-width: $breakpoint-xsmall) {
+    padding-left: 0;
+  }
+}
+
 :global {
   ul.ant-menu-inline {
     border: none !important;
@@ -19,10 +26,3 @@
     font-size: var(--body, 16px) !important;
   }
 }
-
-.menuContainer {
-  padding-left: 12px;
-  @media (min-width: $breakpoint-xsmall) {
-    padding-left: 0;
-  }
-}
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuContent.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuContent.tsx
@@ -15,6 +15,7 @@ export interface SideMenuContentProps {
   onClick: MenuProps['onClick'];
   onMouseEnter: (item: MenuItemList) => void;
   onMouseLeave: () => void;
+  menuItemLabelClassName?: string;
   // required for desktop-specific styling
   menuItemClassName?: string;
 }
@@ -38,7 +39,8 @@ export const SideMenuContent = ({
   onClick,
   onMouseEnter,
   onMouseLeave,
-  menuItemClassName
+  menuItemClassName,
+  menuItemLabelClassName
 }: SideMenuContentProps): React.ReactElement => {
   const { t } = useTranslate();
 
@@ -61,7 +63,7 @@ export const SideMenuContent = ({
           {React.createElement(getIcon(menuItem, activeItemId, hoveredItemId), {
             className: classnames(styles.icon, menuItem.iconClassName)
           })}
-          <SideMenuLabel>{t(menuItem.label)}</SideMenuLabel>
+          <SideMenuLabel className={menuItemLabelClassName}>{t(menuItem.label)}</SideMenuLabel>
         </SideMenuItem>
       ))}
     </Menu>

diff --git a/...browser-extension-wallet/src/views/browser-view/components/VerticalNavigationBar/index.ts b/...browser-extension-wallet/src/views/browser-view/components/VerticalNavigationBar/index.ts