From 305c06f7577133276e1c39efdbb2b4c2aafcf21a Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Mon, 13 May 2024 15:44:29 +0700 Subject: [PATCH 1/5] fix(components): adjust color for latest blocks and contract interaction switch --- CHANGELOG.md | 1 + src/config/theme/default.ts | 5 +++++ src/config/theme/initia.ts | 6 ++++++ src/config/theme/osmosis.ts | 5 +++++ src/config/theme/sei.ts | 5 +++++ src/config/theme/types.ts | 5 +++++ .../interact-contract/components/InteractionTypeSwitch.tsx | 2 +- .../components/performance/RecentBlocksLegends.tsx | 6 +++--- 8 files changed, 31 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 64f48e91d..2781ab0c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -51,6 +51,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements +- [#922](https://github.com/alleslabs/celatone-frontend/pull/922) Adjust color for latest blocks - [#826](https://github.com/alleslabs/celatone-frontend/pull/826) Apply dynamic component theme generation - [#795](https://github.com/alleslabs/celatone-frontend/pull/795) Rebranding - [#907](https://github.com/alleslabs/celatone-frontend/pull/907) Migrate mahalo and minitias from 2 to 3 diff --git a/src/config/theme/default.ts b/src/config/theme/default.ts index 445125616..811dae9e0 100644 --- a/src/config/theme/default.ts +++ b/src/config/theme/default.ts @@ -172,6 +172,11 @@ const DEFAULT_COMPONENT_CONFIG: ComponentConfig = { votedAbstain: "primary.darker", didNotVote: "gray.700", }, + latestBlocks: { + signed: "primary.main", + proposed: "accent.dark", + missed: "error.dark", + }, }; export const DEFAULT_THEME = generateTheme( diff --git a/src/config/theme/initia.ts b/src/config/theme/initia.ts index ffa75a19d..3052f14f5 100644 --- a/src/config/theme/initia.ts +++ b/src/config/theme/initia.ts @@ -1,3 +1,4 @@ +/* eslint-disable sonarjs/no-duplicate-string */ import type { ComponentConfig, ThemeConfig } from "./types"; import { generateTheme } from "./utils"; @@ -169,6 +170,11 @@ const INITIA_COMPONENT_CONFIG: ComponentConfig = { votedAbstain: "primary.darker", didNotVote: "gray.700", }, + latestBlocks: { + signed: "primary.main", + proposed: "accent.light", + missed: "error.dark", + }, }; export const INITIA_THEME = generateTheme( diff --git a/src/config/theme/osmosis.ts b/src/config/theme/osmosis.ts index 28b1fdca6..1832ccece 100644 --- a/src/config/theme/osmosis.ts +++ b/src/config/theme/osmosis.ts @@ -181,6 +181,11 @@ const OSMOSIS_COMPONENT_CONFIG: ComponentConfig = { votedAbstain: "primary.darker", didNotVote: "gray.700", }, + latestBlocks: { + signed: "primary.main", + proposed: "secondary.darker", + missed: "error.dark", + }, }; export const OSMOSIS_THEME = generateTheme( diff --git a/src/config/theme/sei.ts b/src/config/theme/sei.ts index f242b1f2b..1bfc85bcf 100644 --- a/src/config/theme/sei.ts +++ b/src/config/theme/sei.ts @@ -178,6 +178,11 @@ const SEI_COMPONENT_CONFIG: ComponentConfig = { votedAbstain: "accent.darker", didNotVote: "gray.700", }, + latestBlocks: { + signed: "primary.main", + proposed: "secondary.main", + missed: "error.dark", + }, }; export const SEI_THEME = generateTheme(SEI_BASE_THEME, SEI_COMPONENT_CONFIG); diff --git a/src/config/theme/types.ts b/src/config/theme/types.ts index 68dc5bf01..f29e9304c 100644 --- a/src/config/theme/types.ts +++ b/src/config/theme/types.ts @@ -164,4 +164,9 @@ export type ComponentConfig = { votedAbstain: string; didNotVote: string; }; + latestBlocks: { + signed: string; + proposed: string; + missed: string; + }; }; diff --git a/src/lib/pages/interact-contract/components/InteractionTypeSwitch.tsx b/src/lib/pages/interact-contract/components/InteractionTypeSwitch.tsx index 53ff8b23e..b67121f6b 100644 --- a/src/lib/pages/interact-contract/components/InteractionTypeSwitch.tsx +++ b/src/lib/pages/interact-contract/components/InteractionTypeSwitch.tsx @@ -76,7 +76,7 @@ export const InteractionTypeSwitch = < h="22px" position="absolute" borderRadius="2px" - backgroundColor="primary.dark" + backgroundColor="primary.darker" animate={{ left: activeIndex === 0 ? "4px" : "100px", }} diff --git a/src/lib/pages/validator-details/components/performance/RecentBlocksLegends.tsx b/src/lib/pages/validator-details/components/performance/RecentBlocksLegends.tsx index 64fd3e12d..08e829b1f 100644 --- a/src/lib/pages/validator-details/components/performance/RecentBlocksLegends.tsx +++ b/src/lib/pages/validator-details/components/performance/RecentBlocksLegends.tsx @@ -53,19 +53,19 @@ export const RecentBlocksLegends = ({ From e9668fe5b83071f22389bbb4b3f236786614c6b7 Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Mon, 13 May 2024 15:58:20 +0700 Subject: [PATCH 2/5] fix(components): change alles icon --- src/lib/components/icon/CustomIcon.tsx | 63 ++------------------------ 1 file changed, 4 insertions(+), 59 deletions(-) diff --git a/src/lib/components/icon/CustomIcon.tsx b/src/lib/components/icon/CustomIcon.tsx index 733099959..6dc979628 100644 --- a/src/lib/components/icon/CustomIcon.tsx +++ b/src/lib/components/icon/CustomIcon.tsx @@ -13,68 +13,13 @@ export const ICONS = { svg: ( <> - - - - - - - - - - - - - - - - - - - - - - - ), viewBox: viewboxDefault, From 1946d23f40aff0eff71f843a817143bb2844081e Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Mon, 13 May 2024 16:14:26 +0700 Subject: [PATCH 3/5] fix(components): change color and sei logo url --- src/config/theme/default.ts | 4 ++-- src/config/theme/initia.ts | 4 ++-- src/config/theme/sei.ts | 6 +++--- .../components/performance/RecentBlocksSection.tsx | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/config/theme/default.ts b/src/config/theme/default.ts index 811dae9e0..eeedf7a61 100644 --- a/src/config/theme/default.ts +++ b/src/config/theme/default.ts @@ -173,8 +173,8 @@ const DEFAULT_COMPONENT_CONFIG: ComponentConfig = { didNotVote: "gray.700", }, latestBlocks: { - signed: "primary.main", - proposed: "accent.dark", + signed: "primary.dark", + proposed: "primary.light", missed: "error.dark", }, }; diff --git a/src/config/theme/initia.ts b/src/config/theme/initia.ts index 3052f14f5..b57a084f6 100644 --- a/src/config/theme/initia.ts +++ b/src/config/theme/initia.ts @@ -171,8 +171,8 @@ const INITIA_COMPONENT_CONFIG: ComponentConfig = { didNotVote: "gray.700", }, latestBlocks: { - signed: "primary.main", - proposed: "accent.light", + signed: "primary.darker", + proposed: "primary.lighter", missed: "error.dark", }, }; diff --git a/src/config/theme/sei.ts b/src/config/theme/sei.ts index 1bfc85bcf..dad4edde5 100644 --- a/src/config/theme/sei.ts +++ b/src/config/theme/sei.ts @@ -97,7 +97,7 @@ const SEI_BASE_THEME: ThemeConfig = { }, }, footer: { - logo: "https://www.sei.io/_next/static/media/logo-light.1249fa55.svg", + logo: "https://assets.alleslabs.dev/integrations/sei/logo-sei.png", description: "A Smart Contract Explorer for Sei | Explore, deploy, execute, and query smart contracts on Sei from a user-friendly web UI", iconStyle: "rounded", @@ -179,8 +179,8 @@ const SEI_COMPONENT_CONFIG: ComponentConfig = { didNotVote: "gray.700", }, latestBlocks: { - signed: "primary.main", - proposed: "secondary.main", + signed: "secondary.main", + proposed: "primary.main", missed: "error.dark", }, }; diff --git a/src/lib/pages/validator-details/components/performance/RecentBlocksSection.tsx b/src/lib/pages/validator-details/components/performance/RecentBlocksSection.tsx index a1af483cb..c15e28775 100644 --- a/src/lib/pages/validator-details/components/performance/RecentBlocksSection.tsx +++ b/src/lib/pages/validator-details/components/performance/RecentBlocksSection.tsx @@ -18,14 +18,14 @@ interface BlockProps { const Block = forwardRef( ({ height, vote }, ref) => { - let backgroundColor = "primary.main"; + let backgroundColor = "latestBlocks.signed"; let voteLabel = "Signed"; if (vote === BlockVote.PROPOSE) { - backgroundColor = "secondary.main"; + backgroundColor = "latestBlocks.proposed"; voteLabel = "Proposed"; } else if (vote === BlockVote.ABSTAIN) { - backgroundColor = "error.dark"; + backgroundColor = "latestBlocks.missed"; voteLabel = "Missed"; } From fb54825a7d2955ba54dd1d5264f0cf3512b5fdd0 Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Mon, 13 May 2024 16:23:01 +0700 Subject: [PATCH 4/5] fix(components): change celatone icon --- src/lib/components/icon/CustomIcon.tsx | 58 ++++---------------------- 1 file changed, 9 insertions(+), 49 deletions(-) diff --git a/src/lib/components/icon/CustomIcon.tsx b/src/lib/components/icon/CustomIcon.tsx index 6dc979628..9530df92f 100644 --- a/src/lib/components/icon/CustomIcon.tsx +++ b/src/lib/components/icon/CustomIcon.tsx @@ -297,64 +297,24 @@ export const ICONS = { svg: ( <> - - - - - - - - - - - - - - ), - viewBox: "0 0 20 20", + viewBox: "0 0 14 14", }, check: { svg: ( From fa2a1b3594140479b5181b5f009dccf9ed12f006 Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Mon, 13 May 2024 18:10:02 +0700 Subject: [PATCH 5/5] fix(components): fix variable name --- src/config/theme/default.ts | 2 +- src/config/theme/initia.ts | 2 +- src/config/theme/osmosis.ts | 2 +- src/config/theme/sei.ts | 2 +- src/config/theme/types.ts | 2 +- .../components/performance/RecentBlocksLegends.tsx | 6 +++--- .../components/performance/RecentBlocksSection.tsx | 6 +++--- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/config/theme/default.ts b/src/config/theme/default.ts index eeedf7a61..cc73da92c 100644 --- a/src/config/theme/default.ts +++ b/src/config/theme/default.ts @@ -172,7 +172,7 @@ const DEFAULT_COMPONENT_CONFIG: ComponentConfig = { votedAbstain: "primary.darker", didNotVote: "gray.700", }, - latestBlocks: { + recentBlocks: { signed: "primary.dark", proposed: "primary.light", missed: "error.dark", diff --git a/src/config/theme/initia.ts b/src/config/theme/initia.ts index b57a084f6..808a31c9c 100644 --- a/src/config/theme/initia.ts +++ b/src/config/theme/initia.ts @@ -170,7 +170,7 @@ const INITIA_COMPONENT_CONFIG: ComponentConfig = { votedAbstain: "primary.darker", didNotVote: "gray.700", }, - latestBlocks: { + recentBlocks: { signed: "primary.darker", proposed: "primary.lighter", missed: "error.dark", diff --git a/src/config/theme/osmosis.ts b/src/config/theme/osmosis.ts index 1832ccece..eb222b87c 100644 --- a/src/config/theme/osmosis.ts +++ b/src/config/theme/osmosis.ts @@ -181,7 +181,7 @@ const OSMOSIS_COMPONENT_CONFIG: ComponentConfig = { votedAbstain: "primary.darker", didNotVote: "gray.700", }, - latestBlocks: { + recentBlocks: { signed: "primary.main", proposed: "secondary.darker", missed: "error.dark", diff --git a/src/config/theme/sei.ts b/src/config/theme/sei.ts index dad4edde5..9f020d051 100644 --- a/src/config/theme/sei.ts +++ b/src/config/theme/sei.ts @@ -178,7 +178,7 @@ const SEI_COMPONENT_CONFIG: ComponentConfig = { votedAbstain: "accent.darker", didNotVote: "gray.700", }, - latestBlocks: { + recentBlocks: { signed: "secondary.main", proposed: "primary.main", missed: "error.dark", diff --git a/src/config/theme/types.ts b/src/config/theme/types.ts index f29e9304c..6082dd691 100644 --- a/src/config/theme/types.ts +++ b/src/config/theme/types.ts @@ -164,7 +164,7 @@ export type ComponentConfig = { votedAbstain: string; didNotVote: string; }; - latestBlocks: { + recentBlocks: { signed: string; proposed: string; missed: string; diff --git a/src/lib/pages/validator-details/components/performance/RecentBlocksLegends.tsx b/src/lib/pages/validator-details/components/performance/RecentBlocksLegends.tsx index 08e829b1f..8580bc04a 100644 --- a/src/lib/pages/validator-details/components/performance/RecentBlocksLegends.tsx +++ b/src/lib/pages/validator-details/components/performance/RecentBlocksLegends.tsx @@ -53,19 +53,19 @@ export const RecentBlocksLegends = ({ diff --git a/src/lib/pages/validator-details/components/performance/RecentBlocksSection.tsx b/src/lib/pages/validator-details/components/performance/RecentBlocksSection.tsx index c15e28775..76823f130 100644 --- a/src/lib/pages/validator-details/components/performance/RecentBlocksSection.tsx +++ b/src/lib/pages/validator-details/components/performance/RecentBlocksSection.tsx @@ -18,14 +18,14 @@ interface BlockProps { const Block = forwardRef( ({ height, vote }, ref) => { - let backgroundColor = "latestBlocks.signed"; + let backgroundColor = "recentBlocks.signed"; let voteLabel = "Signed"; if (vote === BlockVote.PROPOSE) { - backgroundColor = "latestBlocks.proposed"; + backgroundColor = "recentBlocks.proposed"; voteLabel = "Proposed"; } else if (vote === BlockVote.ABSTAIN) { - backgroundColor = "latestBlocks.missed"; + backgroundColor = "recentBlocks.missed"; voteLabel = "Missed"; }