review comments

src/components/DropdownMenu.stories.tsx

@@ -8,27 +8,27 @@ export const DropdownMenuStory: Story<Parameters<typeof DropdownMenu>> = (args)
   const exampleItems = [
     {
       value: '1',
-      label: 'Item 1',
+      label: 'Item 1 (accent)',
       onSelect: () => alert('Item 1 action'),
+      highlightColor: 'accent',
     },
     {
       value: '2',
-      label: 'Item 2',
+      label: 'Item 2 (create)',
       onSelect: () => alert('Item 2 action'),
+      highlightColor: 'create',
     },
     {
       value: '3',
-      label: 'Item 3',
+      label: 'Item 3 (destroy)',
       onSelect: () => alert('Item 3 action'),
+      highlightColor: 'destroy',
     },
   ];
 
   return (
     <StoryWrapper>
-      <DropdownMenu
-        {...args}
-        items={exampleItems}
-      >
+      <DropdownMenu {...args} items={exampleItems}>
         <span>Menu</span>
       </DropdownMenu>
     </StoryWrapper>

src/components/DropdownMenu.tsx

@@ -13,7 +13,7 @@ export type DropdownMenuItem<T> = {
   label: React.ReactNode;
   onSelect?: () => void;
   separator?: boolean;
-  highlightColor?: 'accent' | 'positive' | 'negative';
+  highlightColor?: 'accent' | 'create' | 'destroy';
 };
 
 type StyleProps = {
@@ -82,7 +82,7 @@ Styled.Separator = styled(Separator)`
   margin: 0.25rem 1rem;
 `;
 
-Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'positive' | 'negative' }>`
+Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'create' | 'destroy' }>`
   ${popoverMixins.item}
   --item-font-size: var(--dropdownMenu-item-font-size);
   ${({ $highlightColor }) =>
@@ -90,10 +90,10 @@ Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'positive' | 'negative'
       ['accent']: `
         --item-highlighted-textColor: var(--color-accent);
       `,
-      ['positive']: `
+      ['create']: `
         --item-highlighted-textColor: var(--color-success);
       `,
-      ['negative']: `
+      ['destroy']: `
         --item-highlighted-textColor: var(--color-error);
       `,
     }[$highlightColor])}

src/views/dialogs/DisplaySettingsDialog.tsx

@@ -12,10 +12,8 @@ import { layoutMixins } from '@/styles/layoutMixins';
 import { Themes } from '@/styles/themes';
 
 import { STRING_KEYS } from '@/constants/localization';
-import { NumberSign } from '@/constants/numbers';
 
 import { Dialog } from '@/components/Dialog';
-import { DiffArrow } from '@/components/DiffArrow';
 import { Icon, IconName } from '@/components/Icon';
 import { HorizontalSeparatorFiller } from '@/components/Separator';
 
@@ -99,20 +97,18 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
             }}
           >
             <Styled.ColorPreferenceLabel>
-              <Styled.DiffArrowContainer>
-                <Styled.DiffArrow
+              <Styled.ArrowIconContainer>
+                <Styled.Icon
+                  iconName={IconName.Arrow}
                   direction="up"
-                  sign={
-                    colorMode === AppColorMode.GreenUp ? NumberSign.Positive : NumberSign.Negative
-                  }
+                  color={colorMode === AppColorMode.GreenUp ? 'green' : 'red'}
                 />
-                <Styled.DiffArrow
+                <Styled.Icon
+                  iconName={IconName.Arrow}
                   direction="down"
-                  sign={
-                    colorMode === AppColorMode.GreenUp ? NumberSign.Negative : NumberSign.Positive
-                  }
+                  color={colorMode === AppColorMode.GreenUp ? 'red' : 'green'}
                 />
-              </Styled.DiffArrowContainer>
+              </Styled.ArrowIconContainer>
               {stringGetter({ key: label })}
             </Styled.ColorPreferenceLabel>
             <Styled.DotIndicator $selected={currentColorMode === colorMode} />
@@ -241,19 +237,31 @@ Styled.ColorPreferenceLabel = styled.div`
   gap: 1ch;
 `;
 
-Styled.DiffArrowContainer = styled.div`
+Styled.ArrowIconContainer = styled.div`
   ${layoutMixins.column}
   gap: 0.5ch;
 `;
 
-Styled.DiffArrow = styled(DiffArrow)`
-  --diffArrow-color-positive: var(--color-success);
-  --diffArrow-color-negative: var(--color-error);
+Styled.Icon = styled(Icon)<{ direction: 'up' | 'down'; color: 'green' | 'red' }>`
+  ${({ direction }) =>
+    ({
+      ['up']: css`
+        transform: rotate(-90deg);
+      `,
+      ['down']: css`
+        transform: rotate(90deg);
+      `,
+    }[direction])}
 
-  svg {
-    width: 0.75em;
-    height: 0.75em;
-  }
+  ${({ color }) =>
+    ({
+      ['green']: css`
+        color: var(--color-success);
+      `,
+      ['red']: css`
+        color: var(--color-error);
+      `,
+    }[color])}
 `;
 
 const indicatorStyle = css`

src/views/menus/AccountMenu.tsx

@@ -203,7 +203,7 @@ export const AccountMenu = () => {
                 value: 'MnemonicExport',
                 icon: <Icon iconName={IconName.ExportKeys} />,
                 label: <span>{stringGetter({ key: STRING_KEYS.EXPORT_SECRET_PHRASE })}</span>,
-                highlightColor: 'negative',
+                highlightColor: 'destroy',
                 onSelect: () => dispatch(openDialog({ type: DialogTypes.MnemonicExport })),
               },
             ].filter(isTruthy)
@@ -212,7 +212,7 @@ export const AccountMenu = () => {
           value: 'Disconnect',
           icon: <Icon iconName={IconName.BoxClose} />,
           label: stringGetter({ key: STRING_KEYS.DISCONNECT }),
-          highlightColor: 'negative',
+          highlightColor: 'destroy',
           onSelect: () => dispatch(openDialog({ type: DialogTypes.DisconnectWallet })),
         },
       ].filter(isTruthy)}