OCT-2259: Improve visibility of exit button in allocation edit mode

client/src/components/shared/Layout/LayoutTopBar/LayoutTopBar.module.scss

@@ -223,3 +223,42 @@
     }
   }
 }
+
+.customCloseButton {
+  width: 13.2rem;
+  height: 3.2rem;
+  border-radius: $border-radius-10;
+  background: $color-octant-grey8;
+  display: flex;
+  align-items: center;
+  padding: 0 1.1rem;
+  cursor: pointer;
+  overflow: hidden;
+  justify-content: end;
+
+  .customCloseButtonText {
+    color: $color-octant-grey5;
+    text-align: right;
+    margin-top: -0.2rem;
+    white-space: nowrap;
+    font-size: $font-size-12;
+    font-weight: $font-weight-bold;
+    margin-right: 0.4rem;
+  }
+
+  .customCloseButtonSvg {
+    path {
+      transition: all 0.5s;
+      transition-delay: 0.25s;
+      stroke: $color-octant-grey5;
+    }
+  }
+
+  &.isCloseButtonExpanded {
+    .customCloseButtonSvg {
+      path {
+        stroke: $color-octant-dark;
+      }
+    }
+  }
+}

client/src/components/shared/Layout/LayoutTopBar/LayoutTopBar.tsx

@@ -1,6 +1,6 @@
 import cx from 'classnames';
-import { useAnimate, motion } from 'framer-motion';
-import React, { FC, Fragment, useEffect, useMemo, useRef } from 'react';
+import { useAnimate, motion, AnimatePresence } from 'framer-motion';
+import React, { FC, Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useAccount } from 'wagmi';
@@ -23,7 +23,7 @@ import useAllocationsStore from 'store/allocations/store';
 import useDelegationStore from 'store/delegation/store';
 import useLayoutStore from 'store/layout/store';
 import { octant } from 'svg/logo';
-import { chevronBottom } from 'svg/misc';
+import { chevronBottom, cross } from 'svg/misc';
 import { allocate, settings } from 'svg/navigation';
 import truncateEthAddress from 'utils/truncateEthAddress';
 
@@ -61,10 +61,14 @@ const LayoutTopBar: FC<LayoutTopBarProps> = ({ className }) => {
   const { allocations } = useAllocationsStore(state => ({
     allocations: state.data.allocations,
   }));
+  const [isCloseButtonExpanded, setIsCloseButtonExpanded] = useState(true);
+
   const allocationsPrevRef = useRef(allocations);
 
   const tabs = useNavigationTabs(true);
   const [scope, animate] = useAnimate();
+  const [closeButtonRef, animateCloseButton] = useAnimate();
+
   const isTestnet = window.Cypress ? !!window.isTestnetCypress : networkConfig.isTestnet;
 
   const buttonWalletText = useMemo(() => {
@@ -135,6 +139,20 @@ const LayoutTopBar: FC<LayoutTopBarProps> = ({ className }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allocations]);
 
+  useEffect(() => {
+    if (!closeButtonRef?.current) {
+      return;
+    }
+    animateCloseButton(
+      closeButtonRef?.current,
+      {
+        width: isCloseButtonExpanded ? '13.2rem' : '3.2rem',
+      },
+      { delay: 0.25 },
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCloseButtonExpanded]);
+
   return (
     <div className={cx(styles.root, className)} data-test={dataTestRoot}>
       <div className={styles.logoWrapper}>
@@ -250,9 +268,37 @@ const LayoutTopBar: FC<LayoutTopBarProps> = ({ className }) => {
             <Settings />
           </Drawer>
           <Drawer
+            CustomCloseButton={
+              <div
+                ref={closeButtonRef}
+                className={cx(
+                  styles.customCloseButton,
+                  isCloseButtonExpanded && styles.isCloseButtonExpanded,
+                )}
+                data-test="AllocationDrawer__closeButton"
+                onClick={() => setIsAllocationDrawerOpen(false)}
+              >
+                <AnimatePresence>
+                  {isCloseButtonExpanded && (
+                    <motion.div
+                      animate={{ opacity: 1 }}
+                      className={styles.customCloseButtonText}
+                      exit={{ opacity: 0 }}
+                      initial={{ opacity: 0 }}
+                      transition={{ delay: 0.25 }}
+                    >
+                      {t('closeDrawerWithArrow')}
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+                <Svg classNameSvg={styles.customCloseButtonSvg} img={cross} size={1} />
+              </div>
+            }
             dataTest="AllocationDrawer"
             isOpen={isAllocationDrawerOpen && !isTimeoutListPresenceModalOpen?.value}
             onClose={() => setIsAllocationDrawerOpen(false)}
+            onMouseLeave={() => setIsCloseButtonExpanded(false)}
+            onMouseOver={() => setIsCloseButtonExpanded(true)}
           >
             <Allocation />
           </Drawer>

client/src/components/ui/Drawer/Drawer.module.scss

@@ -9,7 +9,7 @@
   z-index: $z-index-6;
   box-shadow: 0 0 5rem 0 $color-black-08;
 
-  .buttonClose {
+  .buttonCloseWrapper {
     position: absolute;
     top: 4rem;
     right: 4rem;

client/src/components/ui/Drawer/Drawer.tsx

@@ -10,7 +10,15 @@ import { cross } from 'svg/misc';
 import styles from './Drawer.module.scss';
 import DrawerProps from './types';
 
-const Drawer: FC<DrawerProps> = ({ children, isOpen, onClose, dataTest = 'Drawer' }) =>
+const Drawer: FC<DrawerProps> = ({
+  children,
+  isOpen,
+  onClose,
+  dataTest = 'Drawer',
+  CustomCloseButton,
+  onMouseOver,
+  onMouseLeave,
+}) =>
   createPortal(
     <Fragment>
       {isOpen && (
@@ -26,15 +34,20 @@ const Drawer: FC<DrawerProps> = ({ children, isOpen, onClose, dataTest = 'Drawer
             data-test={dataTest}
             exit={{ x: '100%' }}
             initial={{ x: '100%' }}
+            onMouseLeave={onMouseLeave}
+            onMouseOver={onMouseOver}
             transition={{ duration: DRAWER_TRANSITION_TIME, ease: 'easeInOut' }}
           >
-            <Button
-              className={styles.buttonClose}
-              dataTest={`${dataTest}__closeButton`}
-              Icon={<Svg img={cross} size={1} />}
-              onClick={onClose}
-              variant="iconOnly"
-            />
+            <div className={styles.buttonCloseWrapper}>
+              {CustomCloseButton || (
+                <Button
+                  dataTest={`${dataTest}__closeButton`}
+                  Icon={<Svg img={cross} size={1} />}
+                  onClick={onClose}
+                  variant="iconOnly"
+                />
+              )}
+            </div>
             {children}
           </motion.div>
         )}

client/src/components/ui/Drawer/types.ts

@@ -1,8 +1,11 @@
-import { ReactNode } from 'react';
+import { ReactNode, MouseEventHandler } from 'react';
 
 export default interface DrawerProps {
+  CustomCloseButton?: ReactNode;
   children: ReactNode;
   dataTest?: string;
   isOpen: boolean;
   onClose: () => void;
+  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+  onMouseOver?: MouseEventHandler<HTMLDivElement>;
 }

client/src/locales/en/translation.json

@@ -373,6 +373,7 @@
       "allocate": "Allocate"
     },
     "topBar": {
+      "closeDrawerWithArrow": "Close drawer ->",
       "epochAllocationOpensIn": "Epoch {{epoch}} allocation opens in {{duration}}",
       "epochAllocationOpensInShort": "{{duration}} to allocation",
       "epochAllocationClosesIn": "Epoch {{epoch}} allocation closes in {{duration}}",
@@ -586,4 +587,4 @@
       "information": "We're synchronizing things to prepare the<br/>next epoch, so the app will be unavailable<br/>for a little while. Please check back soon."
     }
   }
-}
+}