feat: wp

hirosystems · Jan 31, 2025 · 40acc0c · 40acc0c
1 parent ecf30b2
commit 40acc0c
Showing 1 changed file with 29 additions and 9 deletions.
diff --git a/src/app/_components/NewNavBar/MobileNavPage.tsx b/src/app/_components/NewNavBar/MobileNavPage.tsx
@@ -291,7 +291,7 @@ const Top = ({
 };
 
 const bottomOpacityDuration = 0.3;
-const bottomXYDuration = 0.2;
+const bottomXYDuration = 0.3;
 const Bottom = ({
   isFeesMenuOpen,
   isSettingsMenuOpen,
@@ -335,13 +335,15 @@ const Bottom = ({
                 onClick={toggleFeesMenu}
               >
                 <Flex alignItems="center">
-                  <Text fontSize="md">Fees:</Text>
+                  <Text fontSize="md" color="textSecondary">
+                    Fees:
+                  </Text>
                   &nbsp;
                   <Text fontSize="md" fontFamily="var(--font-matter-mono)">
                     0.18 STX
                   </Text>
                 </Flex>
-                <motion.div // this is for sending the caret right icon to the left when the menu is open
+                <motion.div // this is for sending the caret right icon to the left when the menu is opened
                   key={'fees-menu-button-caret-right'}
                   animate={{ x: isFeesMenuOpen ? -200 : 0, opacity: isFeesMenuOpen ? 0 : 1 }}
                   transition={{
@@ -362,8 +364,10 @@ const Bottom = ({
                 justifyContent="space-between"
                 onClick={toggleSettingsMenu}
               >
-                <Text fontSize="md">Settings</Text>
-                <motion.div // this is for sending the caret right icon to the left when the menu is open
+                <Text fontSize="md" color="textSecondary">
+                  Settings
+                </Text>
+                <motion.div // this is for sending the caret right icon to the left when the menu is opened
                   key={'settings-menu-button-caret-right'}
                   animate={{
                     x: isSettingsMenuOpen ? -200 : 0,
@@ -414,10 +418,26 @@ const Bottom = ({
             alignItems="center"
             onClick={isFeesMenuOpen ? toggleFeesMenu : toggleSettingsMenu}
           >
-            <Icon>
-              <CaretLeft />
-            </Icon>
-            <Text fontSize="md">Back</Text>
+            <motion.div
+              key={'go-back-button-caret-left'}
+              animate={{
+                x: isSettingsMenuOpen || isFeesMenuOpen ? 0 : 200,
+                opacity: isSettingsMenuOpen || isFeesMenuOpen ? 1 : 0,
+              }}
+              transition={{
+                opacity: { duration: bottomOpacityDuration },
+                x: { duration: bottomXYDuration },
+              }}
+            >
+              <Flex alignItems="center">
+                <Icon color="textSecondary">
+                  <CaretLeft />
+                </Icon>
+              </Flex>
+            </motion.div>
+            <Text fontSize="md" color="textSecondary">
+              Back
+            </Text>
           </Flex>
         </motion.div>
       </Box>