From e302adfe73002a618a70bd00e0d7d977957fca16 Mon Sep 17 00:00:00 2001 From: titix Date: Wed, 11 Sep 2024 12:12:14 -0300 Subject: [PATCH] feat: disabled btn and icon --- src/assets/icons/disabledBlockDark.svg | 1 + src/assets/icons/disabledBlockLight.svg | 1 + src/assets/icons/disabledLinkDark.svg | 5 +++++ src/assets/icons/disabledLinkLight.svg | 5 +++++ src/assets/icons/disabledWebDark.svg | 1 + src/assets/icons/disabledWebLight.svg | 1 + src/assets/icons/whiteBlock.svg | 1 + src/containers/ChainDetail/ChainMetadata.tsx | 18 +++++++-------- src/data/IconPaths.ts | 23 ++++++++++++++++++++ src/types/Data.ts | 1 + 10 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 src/assets/icons/disabledBlockDark.svg create mode 100644 src/assets/icons/disabledBlockLight.svg create mode 100644 src/assets/icons/disabledLinkDark.svg create mode 100644 src/assets/icons/disabledLinkLight.svg create mode 100644 src/assets/icons/disabledWebDark.svg create mode 100644 src/assets/icons/disabledWebLight.svg create mode 100644 src/assets/icons/whiteBlock.svg diff --git a/src/assets/icons/disabledBlockDark.svg b/src/assets/icons/disabledBlockDark.svg new file mode 100644 index 0000000..38a44b6 --- /dev/null +++ b/src/assets/icons/disabledBlockDark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/disabledBlockLight.svg b/src/assets/icons/disabledBlockLight.svg new file mode 100644 index 0000000..86ac707 --- /dev/null +++ b/src/assets/icons/disabledBlockLight.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/disabledLinkDark.svg b/src/assets/icons/disabledLinkDark.svg new file mode 100644 index 0000000..54ef24b --- /dev/null +++ b/src/assets/icons/disabledLinkDark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/disabledLinkLight.svg b/src/assets/icons/disabledLinkLight.svg new file mode 100644 index 0000000..dc4a897 --- /dev/null +++ b/src/assets/icons/disabledLinkLight.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/disabledWebDark.svg b/src/assets/icons/disabledWebDark.svg new file mode 100644 index 0000000..ed3b99b --- /dev/null +++ b/src/assets/icons/disabledWebDark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/disabledWebLight.svg b/src/assets/icons/disabledWebLight.svg new file mode 100644 index 0000000..fd946fd --- /dev/null +++ b/src/assets/icons/disabledWebLight.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/whiteBlock.svg b/src/assets/icons/whiteBlock.svg new file mode 100644 index 0000000..23a2d62 --- /dev/null +++ b/src/assets/icons/whiteBlock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/containers/ChainDetail/ChainMetadata.tsx b/src/containers/ChainDetail/ChainMetadata.tsx index 7d70eaf..ba5ccf3 100644 --- a/src/containers/ChainDetail/ChainMetadata.tsx +++ b/src/containers/ChainDetail/ChainMetadata.tsx @@ -27,16 +27,16 @@ export const ChainMetadata = () => { - - + + {t('CHAIN.website')} - + - - + + {t('CHAIN.explorer')} - + @@ -122,7 +122,7 @@ const ChainIdentity = styled(Box)(() => { }; }); -const MetadataButton = styled('a')(() => { +const MetadataButton = styled('a')(({ disable }: { disable: boolean }) => { const { currentTheme, theme } = useCustomTheme(); return { @@ -132,7 +132,7 @@ const MetadataButton = styled('a')(() => { background: theme === 'dark' ? currentTheme.backgroundSecondary : currentTheme.backgroundTertiary, borderRadius: currentTheme.borderRadius, padding: currentTheme.padding, - color: currentTheme.textPrimary, + color: disable ? (theme === 'dark' ? currentTheme.textSecondary : '#BEC2CC') : currentTheme.textPrimary, boxShadow: 'none', textTransform: 'none', fontSize: '1rem', @@ -140,7 +140,7 @@ const MetadataButton = styled('a')(() => { lineHeight: '1.5rem', textDecoration: 'none', '&:hover': { - background: theme === 'dark' ? currentTheme.neutral[800] : currentTheme.neutral[300], + background: !disable && (theme === 'dark' ? currentTheme.neutral[800] : currentTheme.neutral[300]), boxShadow: 'none', }, }; diff --git a/src/data/IconPaths.ts b/src/data/IconPaths.ts index badca22..6478ec5 100644 --- a/src/data/IconPaths.ts +++ b/src/data/IconPaths.ts @@ -45,12 +45,27 @@ import CheckDark from '~/assets/icons/checkDark.svg'; import CheckLight from '~/assets/icons/checkLight.svg'; import ErrorDark from '~/assets/icons/errorDark.svg'; import ErrorLight from '~/assets/icons/errorLight.svg'; +import DisabledWebLight from '~/assets/icons/disabledWebLight.svg'; +import DisabledWebDark from '~/assets/icons/disabledWebDark.svg'; +import DisabledLinkDark from '~/assets/icons/disabledLinkDark.svg'; +import DisabledLinkLight from '~/assets/icons/disabledLinkLight.svg'; +import DisabledBlockDark from '~/assets/icons/disabledBlockDark.svg'; +import DisabledBlockLight from '~/assets/icons/disabledBlockLight.svg'; +import WhiteBlock from '~/assets/icons/whiteBlock.svg'; export const iconPaths: IconPaths = { block: { dark: BlockDark, light: BlockLight, }, + btnBlock: { + dark: WhiteBlock, + light: BlockLight, + }, + disabledBlock: { + dark: DisabledBlockDark, + light: DisabledBlockLight, + }, chainType: { dark: ChainTypeDark, light: ChainTypeLight, @@ -83,10 +98,18 @@ export const iconPaths: IconPaths = { dark: WebDark, light: WebLight, }, + disabledWeb: { + dark: DisabledWebDark, + light: DisabledWebLight, + }, link: { dark: LinkDark, light: LinkLight, }, + disabledLink: { + dark: DisabledLinkDark, + light: DisabledLinkLight, + }, mode: { dark: LightMode, // Intended to show the light mode icon when the theme is dark light: DarkMode, // Intended to show the dark mode icon when the theme is light diff --git a/src/types/Data.ts b/src/types/Data.ts index 80a7353..5ac1f08 100644 --- a/src/types/Data.ts +++ b/src/types/Data.ts @@ -30,6 +30,7 @@ export interface ChainData { launchDate: number; chainType?: string; tokenImgUrl?: string; + websiteUrl: string; }; l2ChainInfo?: { tps: number;