diff --git a/src/design-system/profile-dropdown/profile-dropdown-wallet-icon.component.tsx b/src/design-system/profile-dropdown/profile-dropdown-wallet-icon.component.tsx index 75232b3..48f8e1d 100644 --- a/src/design-system/profile-dropdown/profile-dropdown-wallet-icon.component.tsx +++ b/src/design-system/profile-dropdown/profile-dropdown-wallet-icon.component.tsx @@ -20,6 +20,8 @@ const icons: Record>> = { hot: HotWallet, cold: ColdWallet, shared: SharedWallet, + midnight: HotWallet, + bitcoin: HotWallet, }; export const WalletIcon = ({ type, testId }: Readonly): JSX.Element => { diff --git a/src/design-system/profile-dropdown/profile-dropdown-wallet-icon.css.ts b/src/design-system/profile-dropdown/profile-dropdown-wallet-icon.css.ts index 2551f05..fb49062 100644 --- a/src/design-system/profile-dropdown/profile-dropdown-wallet-icon.css.ts +++ b/src/design-system/profile-dropdown/profile-dropdown-wallet-icon.css.ts @@ -35,6 +35,12 @@ export const container = recipe({ fontSize: '24px', }, ]), + midnight: sx({ + background: '$data_bright_blue', + }), + bitcoin: sx({ + background: '$data_orange', + }), }, }, diff --git a/src/design-system/profile-dropdown/profile-dropdown-wallet-option.stories.tsx b/src/design-system/profile-dropdown/profile-dropdown-wallet-option.stories.tsx index e38adfc..1ba6ea7 100644 --- a/src/design-system/profile-dropdown/profile-dropdown-wallet-option.stories.tsx +++ b/src/design-system/profile-dropdown/profile-dropdown-wallet-option.stories.tsx @@ -84,6 +84,20 @@ export const Overview = (): JSX.Element => ( type="shared" /> + + + + + + @@ -122,6 +136,22 @@ export const Overview = (): JSX.Element => ( onOpenEditWallet={action('onOpenEditWallet')} /> + + + + + + diff --git a/src/design-system/profile-dropdown/profile-dropdown.data.ts b/src/design-system/profile-dropdown/profile-dropdown.data.ts index 1e6671c..7896dba 100644 --- a/src/design-system/profile-dropdown/profile-dropdown.data.ts +++ b/src/design-system/profile-dropdown/profile-dropdown.data.ts @@ -1 +1 @@ -export type WalletType = 'cold' | 'hot' | 'shared'; +export type WalletType = 'cold' | 'hot' | 'shared' | 'midnight' | 'bitcoin'; diff --git a/src/design-tokens/colors.data.ts b/src/design-tokens/colors.data.ts index feb867b..768282b 100644 --- a/src/design-tokens/colors.data.ts +++ b/src/design-tokens/colors.data.ts @@ -209,6 +209,7 @@ export const colors = { $data_yellow: '', $data_orange: '', $white: '', + $data_bright_blue: '', $educational_card_root_container_bgColor: '', $educational_card_root_container_borderColor: '', @@ -329,6 +330,7 @@ export const lightColorScheme = { $secondary_cream: '#FCF5E3', $secondary_data_green: '#2CB67D', $secondary_data_blue: '#3489F7', + $secondary_data_bright_blue: '#0000FE', } as const; export const darkColorScheme = { @@ -355,4 +357,5 @@ export const darkColorScheme = { $secondary_lace_yellow: '#FDC300', $secondary_data_green: '#2CB67D', $secondary_data_blue: '#3489F7', + $secondary_data_bright_blue: '#0000FE', } as const; diff --git a/src/design-tokens/theme/dark-theme.css.ts b/src/design-tokens/theme/dark-theme.css.ts index 75a42d7..6b7d31c 100644 --- a/src/design-tokens/theme/dark-theme.css.ts +++ b/src/design-tokens/theme/dark-theme.css.ts @@ -167,7 +167,7 @@ const colors: Colors = { $assets_table_container_bgColor_hover: darkColorScheme.$primary_mid_grey, - $assets_table_badge_bgColor: '#0000FE', + $assets_table_badge_bgColor: lightColorScheme.$secondary_data_bright_blue, $assets_table_badge_textColor: lightColorScheme.$primary_white, $dialog_container_bgColor: darkColorScheme.$primary_light_black, @@ -296,6 +296,7 @@ const colors: Colors = { $data_yellow: darkColorScheme.$secondary_lace_yellow, $data_orange: darkColorScheme.$secondary_data_orange, $white: darkColorScheme.$primary_white, + $data_bright_blue: darkColorScheme.$secondary_data_bright_blue, $educational_card_root_container_bgColor: darkColorScheme.$primary_mid_black, $educational_card_root_container_borderColor: colorTransparent, diff --git a/src/design-tokens/theme/light-theme.css.ts b/src/design-tokens/theme/light-theme.css.ts index 80726e6..735116d 100644 --- a/src/design-tokens/theme/light-theme.css.ts +++ b/src/design-tokens/theme/light-theme.css.ts @@ -180,7 +180,7 @@ const colors: Colors = { $assets_table_container_bgColor_hover: lightColorScheme.$primary_light_grey, - $assets_table_badge_bgColor: '#0000FE', + $assets_table_badge_bgColor: lightColorScheme.$secondary_data_bright_blue, $assets_table_badge_textColor: lightColorScheme.$primary_white, $dialog_container_bgColor: lightColorScheme.$primary_white, @@ -316,6 +316,7 @@ const colors: Colors = { $data_yellow: lightColorScheme.$secondary_lace_yellow, $data_orange: lightColorScheme.$secondary_data_orange, $white: lightColorScheme.$primary_white, + $data_bright_blue: lightColorScheme.$secondary_data_bright_blue, $educational_card_root_container_bgColor: lightColorScheme.$primary_white, $educational_card_root_container_borderColor: