feat: wp

hirosystems · Jan 29, 2025 · 55cff6b · 55cff6b
1 parent 51fba38
commit 55cff6b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 17 deletions.
diff --git a/src/app/_components/NewNavBar/Logo.tsx b/src/app/_components/NewNavBar/Logo.tsx
@@ -25,10 +25,9 @@ const StacksIcon = (iconProps: IconProps) => {
   );
 };
 
-export function Logo({ size, ...iconProps }: IconProps & { size: number }) {
-  const outerRingSize = size + 4;
-  const innerRingSize = size + 2;
-  const logoSize = size;
+export function Logo({ logoSize, ...iconProps }: IconProps & { logoSize: number }) {
+  const outerRingSize = logoSize + 4;
+  const innerRingSize = logoSize + 2;
 
   const [outerRingVisible, setOuterRingVisible] = useState(false);
   const [innerRingVisible, setInnerRingVisible] = useState(false);

diff --git a/src/app/_components/NewNavBar/MobileNav.tsx b/src/app/_components/NewNavBar/MobileNav.tsx
@@ -57,7 +57,7 @@ export function MobileNav({
       overflow="scroll"
     >
       <Flex justifyContent={'space-between'} alignItems={'center'} height={10}>
-        <Logo color="surfaceOpposite" size={10} />
+        <Logo color="surfaceOpposite" logoSize={10} />
         <IconButton onClick={close} aria-label={'Close menu'}>
           <Icon h={6} w={6} color="surfaceOpposite">
             <X />

diff --git a/src/app/_components/NewNavBar/NavBar.tsx b/src/app/_components/NewNavBar/NavBar.tsx
@@ -13,7 +13,7 @@ export function NavBar({ tokenPrice }: { tokenPrice: TokenPrice }) {
   return (
     <Flex width="full" h={10} alignItems="center" justifyContent="space-between">
       <Flex alignItems="center" gap={6}>
-        <Logo size={10} />
+        <Logo logoSize={10} />
         <PagesSlidingMenu width={50} />
       </Flex>
       <Box flexGrow={1} flexShrink={1} maxWidth="474px">

diff --git a/src/app/_components/NewNavBar/SettingsPopover.tsx b/src/app/_components/NewNavBar/SettingsPopover.tsx
@@ -1,5 +1,5 @@
 import { PopoverContent, PopoverRoot, PopoverTrigger } from '@/components/ui/popover';
-import { Flex, Icon, Separator, Stack } from '@chakra-ui/react';
+import { Box, Flex, Icon, Separator, Stack } from '@chakra-ui/react';
 import { GearFine, X } from '@phosphor-icons/react';
 import { useState } from 'react';
 
@@ -15,26 +15,29 @@ export const SettingsPopover = () => {
       id="settings-popover"
       positioning={{
         placement: 'bottom-end',
-        gutter: 4,
+        offset: {
+          mainAxis: 4,
+        },
       }}
       open={open}
       onOpenChange={e => setOpen(e.open)}
       unstyled
     >
       <PopoverTrigger>
-        <Flex
-          alignItems="center"
-          justifyContent="center"
+        <Box
+          position="relative"
+          height={open ? 12 : 10}
+          transform={open ? 'translateY(4px)' : 'none'}
           bg="surfacePrimary"
           borderRadius="lg"
           borderBottomRadius={open ? 'none' : 'lg'}
-          h={10}
-          w={10}
         >
-          <Icon h={4} w={4} color="iconPrimary">
-            {open ? <X /> : <GearFine />}
-          </Icon>
-        </Flex>
+          <Flex alignItems="center" justifyContent="center" top={0} h={10} w={10}>
+            <Icon h={4} w={4} color="iconPrimary">
+              {open ? <X /> : <GearFine />}
+            </Icon>
+          </Flex>
+        </Box>
       </PopoverTrigger>
       <PopoverContent
         w="fit-content"