feat: added rounded corners

hirosystems · Jan 31, 2025 · f97bc9d · f97bc9d
1 parent ec7419e
commit f97bc9d
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 1 deletion.
diff --git a/src/app/_components/NewNavBar/CurrencySetting.tsx b/src/app/_components/NewNavBar/CurrencySetting.tsx
@@ -20,7 +20,7 @@ function getCurrencyIcon(currency: Currency) {
   ) : null;
 }
 
-export const CurrencySetting = ({ isMobile }: { isMobile: boolean }) => {
+export const CurrencySetting = ({ isMobile }: { isMobile?: boolean }) => {
   const dispatch = useAppDispatch();
   const selectedCurrency = useCurrency();
   return (

diff --git a/src/app/_components/NewNavBar/FeePopover.tsx b/src/app/_components/NewNavBar/FeePopover.tsx
@@ -1,6 +1,7 @@
 import { PopoverContent, PopoverRoot, PopoverTrigger } from '@/components/ui/popover';
 import { Text } from '@/ui/Text';
 import { Tooltip } from '@/ui/Tooltip';
+import { CurvedCorner } from '@/ui/icons/CurvedCorner';
 import StxIcon from '@/ui/icons/StxIcon';
 import { Box, Flex, Icon, Separator, Stack, Tabs } from '@chakra-ui/react';
 import { CaretDown, CaretUp, Info, Lightning } from '@phosphor-icons/react';
@@ -144,11 +145,22 @@ export const FeePopover = () => {
           h={10}
           alignItems="center"
           justifyContent="center"
+          position="relative"
         >
           <Text fontSize="xs" fontFamily="var(--font-matter-mono)">
             Fees: 0.18 STX
           </Text>
           <Icon>{open ? <CaretUp /> : <CaretDown />}</Icon>
+          {open && (
+            <CurvedCorner
+              color="var(--stacks-colors-surface-primary)"
+              position="absolute"
+              bottom={'-1px'}
+              left={`${-4 * 4 + 1}px`}
+              h={4}
+              w={4}
+            />
+          )}
         </Flex>
       </PopoverTrigger>
       <PopoverContent

diff --git a/src/app/_components/NewNavBar/SettingsPopover.tsx b/src/app/_components/NewNavBar/SettingsPopover.tsx
@@ -6,6 +6,7 @@ import { useState } from 'react';
 import { CurrencySetting } from './CurrencySetting';
 import { NetworkSetting } from './NetworkSetting';
 import { ThemeSetting } from './ThemeSetting';
+import { CurvedCorner } from '@/ui/icons/CurvedCorner';
 
 export const SettingsPopover = () => {
   const [open, setOpen] = useState(false);
@@ -37,6 +38,16 @@ export const SettingsPopover = () => {
               {open ? <X /> : <GearFine />}
             </Icon>
           </Flex>
+          {open && (
+            <CurvedCorner
+              color="var(--stacks-colors-surface-primary)"
+              position="absolute"
+              bottom={'-1px'}
+              left={`${-4 * 4 + 1}px`}
+              h={4}
+              w={4}
+            />
+          )}
         </Box>
       </PopoverTrigger>
       <PopoverContent

diff --git a/src/ui/icons/CurvedCorner.tsx b/src/ui/icons/CurvedCorner.tsx
@@ -0,0 +1,14 @@
+import { Icon, IconProps } from '@chakra-ui/react';
+
+export const CurvedCorner = ({ color, ...rest }: IconProps) => {
+  return (
+    <Icon {...rest}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="none">
+        <path
+          d="M16.4597 15.9019C21.0891 11.2725 21.7683 0 21.7683 0V21.2105H0.5578C0.5578 21.2105 11.8303 20.5313 16.4597 15.9019Z"
+          fill={(color as string) ?? '#EAE8E6'}
+        />
+      </svg>
+    </Icon>
+  );
+};