diff --git a/CHANGELOG.md b/CHANGELOG.md index 39d0c84c4..87b96afd4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -46,6 +46,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements +- [#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 - [#905](https://github.com/alleslabs/celatone-frontend/pull/905) Refactor module related component for better readability - [#900](https://github.com/alleslabs/celatone-frontend/pull/900) Refactor module details info diff --git a/public/font/PPNeueMontreal-Regular.woff b/public/font/PPNeueMontreal-Regular.woff new file mode 100644 index 000000000..a0548d4b3 Binary files /dev/null and b/public/font/PPNeueMontreal-Regular.woff differ diff --git a/public/font/PPNeueMontreal-Regular.woff2 b/public/font/PPNeueMontreal-Regular.woff2 new file mode 100644 index 000000000..30f885591 Binary files /dev/null and b/public/font/PPNeueMontreal-Regular.woff2 differ diff --git a/public/font/PPNeueMontrealMono-Regular.woff b/public/font/PPNeueMontrealMono-Regular.woff new file mode 100644 index 000000000..22c9271d3 Binary files /dev/null and b/public/font/PPNeueMontrealMono-Regular.woff differ diff --git a/public/font/PPNeueMontrealMono-Regular.woff2 b/public/font/PPNeueMontrealMono-Regular.woff2 new file mode 100644 index 000000000..3b06bc5f4 Binary files /dev/null and b/public/font/PPNeueMontrealMono-Regular.woff2 differ diff --git a/public/font/main.css b/public/font/main.css new file mode 100644 index 000000000..95eea8995 --- /dev/null +++ b/public/font/main.css @@ -0,0 +1,25 @@ + /* Celatone */ +@font-face { + font-family: "PP Neue Montreal Regular"; + src: url("./PPNeueMontreal-Regular.woff"); + src: url("./PPNeueMontreal-Regular.woff2"); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: "PP Neue Montreal Mono Regular"; + src: url("./PPNeueMontrealMono-Regular.woff"); + src: url("./PPNeueMontrealMono-Regular.woff2"); + font-weight: 600; + font-style: normal; +} + +/* Initia */ +@font-face { + font-family: "Pilat Wide"; + src: url("./PilatWide-Bold.woff"); + src: url("./PilatWide-Bold.woff2"); + font-weight: 600; + font-style: normal; +} diff --git a/public/font/pilatwide.css b/public/font/pilatwide.css deleted file mode 100644 index 6b3319ca5..000000000 --- a/public/font/pilatwide.css +++ /dev/null @@ -1,8 +0,0 @@ -/* TODO: add another font face later */ -@font-face { - font-family: "Pilat Wide"; - src: url("./PilatWide-Bold.woff"); - src: url("./PilatWide-Bold.woff2"); - font-weight: 600; - font-style: normal; -} diff --git a/src/config/theme/default.ts b/src/config/theme/default.ts index d951fae74..1b421c2be 100644 --- a/src/config/theme/default.ts +++ b/src/config/theme/default.ts @@ -1,14 +1,16 @@ -import type { ThemeConfig } from "./types"; +/* eslint-disable sonarjs/no-duplicate-string */ +import type { ComponentConfig, ThemeConfig } from "./types"; +import { generateTheme } from "./utils"; -export const DEFAULT_THEME: ThemeConfig = { +const DEFAULT_BASE_THEME: ThemeConfig = { branding: { - logo: "https://assets.alleslabs.dev/branding/logo/logo.svg", - favicon: "https://assets.alleslabs.dev/branding/favicon.ico", + logo: "https://assets.alleslabs.dev/celatone-brand/logo/full-white.svg", + favicon: "https://assets.alleslabs.dev/celatone-brand/favicon.ico", seo: { appName: "Celatone", title: "Celatone Explorer for Cosmos chain", description: "A smart contract powered explorer for the Cosmos.", - image: "https://assets.alleslabs.dev/branding/celatone-cover.jpg", + image: "https://assets.alleslabs.dev/celatone-brand/socials/ogimage.jpg", twitter: { handle: "@celatone_", cardType: "summary_large_image", @@ -24,110 +26,169 @@ export const DEFAULT_THEME: ThemeConfig = { url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap", name: "Space Grotesk, sans-serif", }, + mono: { + url: "/font/main.css", + name: "PP Neue Montreal Mono Regular", + }, }, colors: { - gradient: { - main: "linear(to-tr, #5942F3, #9793F3)", + primary: { + lighter: "#E0F1FB", + light: "#C2EAFF", + main: "#89D1F6", + dark: "#5ABAEC", + darker: "#2B8BBD", + background: "#244865", + }, + secondary: { + light: "#C2EAFF", + main: "#89D1F6", + dark: "#5ABAEC", + darker: "#2B8BBD", + background: "#244865", + }, + accent: { + lighter: "#FDFAEC", + light: "#F9F0C8", + main: "#F5E6A3", + dark: "#EDD25A", + darker: "#7B703A", + background: "#3B3928", + }, + gray: { + 100: "#F8FAFC", + 400: "#B7C1CD", + 500: "#8A99AE", + 600: "#707E94", + 700: "#334155", + 800: "#1E2535", + 900: "#151B27", + }, + text: { + main: "#F8FAFC", + dark: "#CBD5E1", + disabled: "#94A3B8", + }, + background: { + main: "#0E131C", + overlay: "rgba(2, 6, 23, 0.7)", + }, + success: { + main: "#42BEA6", + light: "#67CBB7", + dark: "#207966", + background: "#102E28", }, error: { - main: "#FF666E", light: "#FF8086", + main: "#FF666E", dark: "#B43E44", background: "#4C1A1D", }, warning: { - main: "#FFBB33", light: "#FFCC66", + main: "#FFBB33", dark: "#CC8800", background: "#523600", }, - success: { - main: "#42BEA6", - light: "#67CBB7", - dark: "#207966", - background: "#102E28", + }, + jsonTheme: "pastel_on_dark", + illustration: { + "404": + "https://assets.alleslabs.dev/celatone-brand/illustration/states/404.svg", + error: + "https://assets.alleslabs.dev/celatone-brand/illustration/states/error.svg", + searchNotFound: + "https://assets.alleslabs.dev/celatone-brand/illustration/states/search-not-found.svg", + searchEmpty: + "https://assets.alleslabs.dev/celatone-brand/illustration/states/search-empty.svg", + disconnected: + "https://assets.alleslabs.dev/celatone-brand/illustration/states/disconnected.svg", + overview: { + main: "https://assets.alleslabs.dev/celatone-brand/illustration/left.svg", + secondary: + "https://assets.alleslabs.dev/celatone-brand/illustration/right.svg", }, - background: { - main: "#111117", - overlay: "rgba(17, 17, 23, 0.7)", + }, + socialMedia: { + website: "https://celat.one/", + github: "https://github.com/alleslabs", + twitter: "https://twitter.com/celatone_", + medium: "https://blog.alleslabs.com/", + telegram: "https://t.me/celatone_announcements", + }, +}; + +const DEFAULT_COMPONENT_CONFIG: ComponentConfig = { + button: { + primary: { + background: "primary.main", + color: "gray.800", + disabledBackground: "primary.background", + disabledColor: "gray.800", + hoverBackground: "primary.dark", + activeBackground: "primary.darker", + }, + outlinePrimary: { + borderColor: "primary.main", + color: "primary.main", + disabledBorderColor: "primary.background", + disabledColor: "primary.darker", + hoverBackground: "primary.background", + activeBackground: "primary.background", }, - text: { - main: "#F7F2FE", - dark: "#ADADC2", - disabled: "#8A8AA5", + }, + proposalChip: { + depositPeriod: { + bg: "primary.background", }, - primary: { - main: "#5942F3", - light: "#9793F3", - lighter: "#DCDBFB", - dark: "#3E38B0", - darker: "#292676", - background: "#181733", + votingPeriod: { + bg: "primary.darker", }, - secondary: { - main: "#D8BEFC", - light: "#E8D8FD", - dark: "#A28FBD", - darker: "#6C5F7E", - background: "#36303F", + failed: { + bg: "error.dark", }, - accent: { - main: "#C6E141", - light: "#DDED8D", - lighter: "#E8F3B3", - dark: "#95A931", - darker: "#637121", - background: "#3D470B", + rejected: { + bg: "error.dark", }, - gray: { - 100: "#F7F2FE", - 400: "#ADADC2", - 500: "#8A8AA5", - 600: "#68688A", - 700: "#343445", - 800: "#272734", - 900: "#1A1A22", + passed: { + bg: "success.dark", + }, + cancelled: { + bg: "error.background", + }, + depositFailed: { + bg: "gray.700", + }, + }, + stepper: { + active: { + bg: "primary.darker", + color: "text.main", + }, + disabled: { + bg: "gray.500", + color: "background.main", }, }, tag: { signer: { bg: "accent.darker", - color: "inherit", + color: "text.main", }, related: { - bg: "primary.dark", + bg: "gray.700", color: "text.main", }, }, - borderRadius: { - default: "8px", - iconButton: "36px", - viewButton: "0 0 8px 8px", - uploadButton: "50%", - tag: "full", - badge: "16px", - radio: "12px", - indicator: "2px", - stepper: "full", - }, - jsonTheme: "monokai", - illustration: { - "404": "https://assets.alleslabs.dev/illustration/404.svg", - error: "https://assets.alleslabs.dev/illustration/error.svg", - searchNotFound: - "https://assets.alleslabs.dev/illustration/search-not-found.svg", - searchEmpty: "https://assets.alleslabs.dev/illustration/search-empty.svg", - disconnected: "https://assets.alleslabs.dev/illustration/disconnected.svg", - overview: { - main: "https://assets.alleslabs.dev/illustration/bg-left.svg", - secondary: "https://assets.alleslabs.dev/illustration/bg-right.svg", - }, - }, - socialMedia: { - website: "https://celat.one/", - github: "https://github.com/alleslabs", - twitter: "https://twitter.com/celatone_", - medium: "https://blog.alleslabs.com/", - telegram: "https://t.me/celatone_announcements", + voteParticipations: { + voted: "primary.main", + votedAbstain: "primary.darker", + didNotVote: "gray.700", }, }; + +export const DEFAULT_THEME = generateTheme( + DEFAULT_BASE_THEME, + DEFAULT_COMPONENT_CONFIG +); diff --git a/src/config/theme/initia.ts b/src/config/theme/initia.ts index c22c01420..2e28cbbf0 100644 --- a/src/config/theme/initia.ts +++ b/src/config/theme/initia.ts @@ -1,6 +1,7 @@ -import type { ThemeConfig } from "./types"; +import type { ComponentConfig, ThemeConfig } from "./types"; +import { generateTheme } from "./utils"; -export const INITIA_THEME: ThemeConfig = { +const INITIA_BASE_THEME: ThemeConfig = { branding: { logo: "https://assets.alleslabs.dev/integrations/initia/logo.png", favicon: "https://assets.alleslabs.dev/integrations/initia/favicon.svg", @@ -18,18 +19,19 @@ export const INITIA_THEME: ThemeConfig = { }, fonts: { heading: { - url: "/font/pilatwide.css", + url: "/font/main.css", name: "Pilat Wide, serif", }, body: { url: "https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap", name: "Manrope, sans-serif", }, + mono: { + url: "/font/main.css", + name: "PP Neue Montreal Mono Regular", + }, }, colors: { - gradient: { - main: "linear(to-tr, #15AFF8, #5FC1EE)", - }, error: { main: "#FF666E", light: "#FF8086", @@ -90,37 +92,6 @@ export const INITIA_THEME: ThemeConfig = { 900: "#151617", }, }, - tag: { - signer: { - bg: "primary.darker", - color: "text.main", - }, - related: { - bg: "accent.darker", - color: "inherit", - }, - }, - button: { - primary: { - background: "#F5F5F5", - color: "#151617", - disabledBackground: "#A1A6AA", - disabledColor: "#151617", - hoverBackground: "#B7B7B7", - activeBackground: "#B7B7B7", - }, - }, - borderRadius: { - default: "4px", - iconButton: "36px", - viewButton: "0 0 8px 8px", - uploadButton: "50%", - tag: "full", - badge: "16px", - radio: "12px", - indicator: "2px", - stepper: "full", - }, jsonTheme: "monokai", illustration: { "404": @@ -144,3 +115,77 @@ export const INITIA_THEME: ThemeConfig = { twitter: "https://twitter.com/initiaFND", }, }; + +const INITIA_COMPONENT_CONFIG: ComponentConfig = { + button: { + primary: { + background: "gray.100", + color: "gray.900", + disabledBackground: "gray.500", + disabledColor: "gray.900", + hoverBackground: "gray.400", + activeBackground: "gray.400", + }, + outlinePrimary: { + borderColor: "primary.light", + color: "primary.light", + disabledBorderColor: "gray.700", + disabledColor: "gray.600", + hoverBackground: "primary.background", + activeBackground: "transparent", + }, + }, + proposalChip: { + depositPeriod: { + bg: "secondary.darker", + }, + votingPeriod: { + bg: "primary.dark", + }, + failed: { + bg: "error.dark", + }, + rejected: { + bg: "error.dark", + }, + passed: { + bg: "success.dark", + }, + cancelled: { + bg: "error.background", + }, + depositFailed: { + bg: "gray.700", + }, + }, + stepper: { + active: { + bg: "primary.dark", + color: "text.main", + }, + disabled: { + bg: "gray.500", + color: "background.main", + }, + }, + tag: { + signer: { + bg: "primary.darker", + color: "text.main", + }, + related: { + bg: "accent.darker", + color: "text.main", + }, + }, + voteParticipations: { + voted: "primary.main", + votedAbstain: "primary.darker", + didNotVote: "gray.700", + }, +}; + +export const INITIA_THEME = generateTheme( + INITIA_BASE_THEME, + INITIA_COMPONENT_CONFIG +); diff --git a/src/config/theme/osmosis.ts b/src/config/theme/osmosis.ts index 0dab5720c..72813eeb9 100644 --- a/src/config/theme/osmosis.ts +++ b/src/config/theme/osmosis.ts @@ -1,6 +1,8 @@ -import type { ThemeConfig } from "./types"; +/* eslint-disable sonarjs/no-duplicate-string */ +import type { ComponentConfig, ThemeConfig } from "./types"; +import { generateTheme } from "./utils"; -export const OSMOSIS_THEME: ThemeConfig = { +const OSMOSIS_BASE_THEME: ThemeConfig = { branding: { logo: "https://assets.alleslabs.dev/integrations/osmosis/logo.svg", favicon: "https://assets.alleslabs.dev/integrations/osmosis/favicon.ico", @@ -26,11 +28,12 @@ export const OSMOSIS_THEME: ThemeConfig = { url: "https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap", name: "Inter, sans-serif", }, + mono: { + url: "/font/main.css", + name: "PP Neue Montreal Mono Regular", + }, }, colors: { - gradient: { - main: "linear(55deg, #462ADF 0%,#5235EF 40%, #B72AAB 100%)", - }, error: { main: "#FF666E", light: "#FF8086", @@ -49,69 +52,48 @@ export const OSMOSIS_THEME: ThemeConfig = { dark: "#207966", background: "#102E28", }, - background: { - main: "#090524", - overlay: "rgba(14, 9, 49, 0.7)", - }, text: { main: "#F2F2F4", - dark: "#A09ACA", - disabled: "#736DA0", + dark: "#B0AADC", + disabled: "#8D87B8", }, primary: { + lighter: "#A5A3FF", + light: "#8481F8", main: "#5235EF", - light: "#765CFF", - lighter: "#8481F8", - dark: "#462ADF", - darker: "#3A1FCA", + dark: "#3E21DB", + darker: "#260BB6", background: "#201865", }, secondary: { + light: "#A5A3FF", main: "#8481F8", - light: "#9B99FF", - dark: "#6A67EA", - darker: "#5855DB", - background: "#2F306A", + dark: "#5235EF", + darker: "#462ADF", + background: "#201865", }, accent: { - main: "#DD69D3", - light: "#E58BDD", lighter: "#ECACE7", + light: "#E58BDD", + main: "#DD69D3", dark: "#CA2EBD", darker: "#B72AAB", - background: "#431152", + background: "#711B75", }, gray: { 100: "#F2F2F4", - 400: "#8D87B8", - 500: "#736DA0", - 600: "#5F588F", - 700: "#464075", - 800: "#282750", - 900: "#140F34", - }, - }, - tag: { - signer: { - bg: "accent.darker", - color: "inherit", + 400: "#B0AADC", + 500: "#8D87B8", + 600: "#736DA0", + 700: "#4B447B", + 800: "#3C356D", + 900: "#201B43", }, - related: { - bg: "primary.dark", - color: "text.main", + background: { + main: "#140F34", + overlay: "rgba(14, 9, 49, 0.7)", }, }, - borderRadius: { - default: "8px", - iconButton: "36px", - viewButton: "0 0 8px 8px", - uploadButton: "50%", - tag: "full", - badge: "16px", - radio: "12px", - indicator: "2px", - stepper: "full", - }, jsonTheme: "pastel_on_dark", illustration: { "404": @@ -145,3 +127,77 @@ export const OSMOSIS_THEME: ThemeConfig = { reddit: "https://www.reddit.com/r/OsmosisLab/", }, }; + +const OSMOSIS_COMPONENT_CONFIG: ComponentConfig = { + button: { + primary: { + background: "primary.main", + color: "gray.100", + disabledBackground: "primary.background", + disabledColor: "gray.600", + hoverBackground: "primary.dark", + activeBackground: "primary.light", + }, + outlinePrimary: { + borderColor: "primary.light", + color: "primary.light", + disabledBorderColor: "gray.700", + disabledColor: "gray.600", + hoverBackground: "primary.background", + activeBackground: "transparent", + }, + }, + proposalChip: { + depositPeriod: { + bg: "primary.darker", + }, + votingPeriod: { + bg: "primary.dark", + }, + failed: { + bg: "error.dark", + }, + rejected: { + bg: "error.dark", + }, + passed: { + bg: "success.dark", + }, + cancelled: { + bg: "error.background", + }, + depositFailed: { + bg: "gray.700", + }, + }, + stepper: { + active: { + bg: "primary.dark", + color: "text.main", + }, + disabled: { + bg: "gray.500", + color: "background.main", + }, + }, + tag: { + signer: { + bg: "accent.darker", + color: "text.main", + }, + related: { + bg: "primary.dark", + color: "text.main", + }, + }, + voteParticipations: { + voted: "primary.main", + votedAbstain: "primary.darker", + didNotVote: "gray.700", + }, +}; + +export const OSMOSIS_THEME = generateTheme( + OSMOSIS_BASE_THEME, + OSMOSIS_COMPONENT_CONFIG +); diff --git a/src/config/theme/sei.ts b/src/config/theme/sei.ts index 1a6ee2453..bfb5af33d 100644 --- a/src/config/theme/sei.ts +++ b/src/config/theme/sei.ts @@ -1,6 +1,9 @@ -import type { ThemeConfig } from "config/theme/types"; +/* eslint-disable sonarjs/no-duplicate-string */ +import type { ComponentConfig, ThemeConfig } from "config/theme/types"; -export const SEI_THEME: ThemeConfig = { +import { generateTheme } from "./utils"; + +const SEI_BASE_THEME: ThemeConfig = { branding: { logo: "https://assets.alleslabs.dev/integrations/sei/logo.svg", favicon: "https://assets.alleslabs.dev/integrations/sei/favicon.ico", @@ -25,11 +28,12 @@ export const SEI_THEME: ThemeConfig = { url: "https://fonts.cdnfonts.com/css/satoshi?styles=135009,135005,135007,135002,135000", name: "Satoshi, sans-serif", }, + mono: { + url: "/font/main.css", + name: "PP Neue Montreal Mono Regular", + }, }, colors: { - gradient: { - main: "linear(55deg, #1D343F 0%, #184354 100%)", - }, error: { main: "#FF666E", light: "#FF8086", @@ -90,43 +94,6 @@ export const SEI_THEME: ThemeConfig = { 900: "#0C1C23", }, }, - tag: { - signer: { - bg: "accent.darker", - color: "inherit", - }, - related: { - bg: "primary.dark", - color: "gray.900", - }, - }, - button: { - primary: { - background: "#F0E3CF", - color: "#0C1C23", - disabledBackground: "#787971", - disabledColor: "#0C1C23", - hoverBackground: "FAF6EF", - activeBackground: "FAF6EF", - }, - outlinePrimary: { - borderColor: "#787971", - color: "#F0E3CF", - disabledBorderColor: "#1D343F", - disabledColor: "#40566A", - }, - }, - borderRadius: { - default: "8px", - iconButton: "36px", - viewButton: "0 0 8px 8px", - uploadButton: "50%", - tag: "full", - badge: "16px", - radio: "12px", - indicator: "2px", - stepper: "full", - }, jsonTheme: "one_dark", illustration: { "404": "https://assets.alleslabs.dev/integrations/sei/illustration/404.svg", @@ -157,3 +124,74 @@ export const SEI_THEME: ThemeConfig = { telegram: "https://t.me/seinetwork", }, }; + +const SEI_COMPONENT_CONFIG: ComponentConfig = { + button: { + primary: { + background: "primary.main", + color: "gray.900", + disabledBackground: "primary.darker", + disabledColor: "gray.900", + hoverBackground: "primary.dark", + activeBackground: "primary.light", + }, + outlinePrimary: { + borderColor: "primary.darker", + color: "primary.main", + disabledBorderColor: "gray.700", + disabledColor: "gray.600", + hoverBackground: "primary.darker", + activeBackground: "primary.light", + }, + }, + proposalChip: { + depositPeriod: { + bg: "accent.darker", + }, + votingPeriod: { + bg: "accent.dark", + }, + failed: { + bg: "error.dark", + }, + rejected: { + bg: "error.dark", + }, + passed: { + bg: "success.dark", + }, + cancelled: { + bg: "error.background", + }, + depositFailed: { + bg: "gray.700", + }, + }, + stepper: { + active: { + bg: "accent.main", + color: "gray.100", + }, + disabled: { + bg: "gray.500", + color: "background.main", + }, + }, + tag: { + signer: { + bg: "accent.darker", + color: "text.main", + }, + related: { + bg: "primary.dark", + color: "gray.900", + }, + }, + voteParticipations: { + voted: "accent.main", + votedAbstain: "accent.darker", + didNotVote: "gray.700", + }, +}; + +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 d2f723611..43829cb82 100644 --- a/src/config/theme/types.ts +++ b/src/config/theme/types.ts @@ -22,38 +22,12 @@ export type ThemeConfig = { url: string; name: string; }; + mono: { + url: string; + name: string; + }; }; colors: { - gradient?: { - main: string; - }; - error: { - main: string; - light: string; - dark: string; - background: string; - }; - warning: { - main: string; - light: string; - dark: string; - background: string; - }; - success: { - main: string; - light: string; - dark: string; - background: string; - }; - background: { - main: string; - overlay: string; - }; - text: { - main: string; - dark: string; - disabled: string; - }; primary: { main: string; light: string; @@ -86,43 +60,33 @@ export type ThemeConfig = { 800: string; 900: string; }; - }; - tag: { - signer: { - bg: string; - color: string; + text: { + main: string; + dark: string; + disabled: string; }; - related: { - bg: string; - color: string; + background: { + main: string; + overlay: string; }; - }; - button?: { - primary?: { + success: { + main: string; + light: string; + dark: string; background: string; - color: string; - disabledBackground: string; - disabledColor: string; - hoverBackground: string; - activeBackground: string; }; - outlinePrimary?: { - borderColor: string; - color: string; - disabledBorderColor: string; - disabledColor: string; + error: { + main: string; + light: string; + dark: string; + background: string; + }; + warning: { + main: string; + light: string; + dark: string; + background: string; }; - }; - borderRadius: { - default: string; - iconButton: string; - viewButton: string; - uploadButton: string; - tag: string; - badge: string; - radio: string; - indicator: string; - stepper: string; }; illustration: { "404": string; @@ -152,3 +116,66 @@ export type ThemeConfig = { linkedin?: string; }; }; + +export type ComponentConfig = { + button: { + primary: { + background: string; + color: string; + disabledBackground: string; + disabledColor: string; + hoverBackground: string; + activeBackground: string; + }; + outlinePrimary: { + borderColor: string; + color: string; + disabledBorderColor: string; + disabledColor: string; + hoverBackground: string; + activeBackground: string; + }; + }; + proposalChip: { + depositPeriod: { + bg: string; + }; + votingPeriod: { + bg: string; + }; + failed: { + bg: string; + }; + rejected: { + bg: string; + }; + passed: { + bg: string; + }; + cancelled: { + bg: string; + }; + depositFailed: { + bg: string; + }; + }; + stepper: { + active: { bg: string; color: string }; + disabled: { bg: string; color: string }; + }; + tag: { + signer: { + bg: string; + color: string; + }; + related: { + bg: string; + color: string; + }; + }; + voteParticipations: { + voted: string; + votedAbstain: string; + didNotVote: string; + }; +}; diff --git a/src/config/theme/utils.ts b/src/config/theme/utils.ts new file mode 100644 index 000000000..ea153a85b --- /dev/null +++ b/src/config/theme/utils.ts @@ -0,0 +1,36 @@ +import type { ComponentConfig, ThemeConfig } from "./types"; + +const getColor = (obj: object, path: string[], fallback: string): string => { + if (path.length === 0 || !Object.prototype.hasOwnProperty.call(obj, path[0])) + return fallback; + + const value = obj[path[0] as keyof typeof obj]; + if (typeof value === "string") return value; + return getColor(value, path.slice(1), fallback); +}; + +const extractColors = (baseTheme: ThemeConfig["colors"], obj: object) => { + return Object.entries(obj).reduce( + (acc, [key, value]) => { + if (typeof value === "string") + acc[key] = getColor(baseTheme, value.split("."), value); + else acc[key] = extractColors(baseTheme, value); + return acc; + }, + {} as Record + ); +}; + +export const generateTheme = ( + baseTheme: ThemeConfig, + componentConfig: ComponentConfig +) => { + const { colors, ...rest } = baseTheme; + return { + ...rest, + colors: { + ...colors, + ...extractColors(colors, componentConfig), + }, + }; +}; diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx index 8589d40a9..059ad0fb8 100644 --- a/src/lib/components/CopyLink.tsx +++ b/src/lib/components/CopyLink.tsx @@ -77,6 +77,7 @@ export const CopyLink = ({ color="secondary.main" transition="all 0.25s ease-in-out" display="inline" + fontFamily="mono" > {value === address ? `${textValue} (Me)` : textValue} diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx index 1e387ab69..0b023f1db 100644 --- a/src/lib/components/ExplorerLink.tsx +++ b/src/lib/components/ExplorerLink.tsx @@ -120,6 +120,7 @@ const LinkRender = ({ const textElement = ( { disabled: boolean; icon?: IconKeys; iconColor?: string; - image?: string; + image?: JSX.Element; }[]; onChange: (newVal: T) => void; placeholder?: string; @@ -122,7 +121,7 @@ export const SelectInput = ({
{formLabel}
{selectedOption?.image && ( - + {selectedOption.image} )} {selectedOption?.icon && ( @@ -174,7 +173,7 @@ export const SelectInput = ({ }} disabled={disabled} > - {image && } + {image} {icon && } {label} diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx index 01087d0b9..c9ae908f8 100644 --- a/src/lib/components/modal/code/SaveNewCode.tsx +++ b/src/lib/components/modal/code/SaveNewCode.tsx @@ -103,7 +103,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) { duration: 5000, isClosable: false, position: "bottom-right", - icon: , + icon: , }); reset(); diff --git a/src/lib/components/stepper/StepperItem.tsx b/src/lib/components/stepper/StepperItem.tsx index fde456232..0b16b9de0 100644 --- a/src/lib/components/stepper/StepperItem.tsx +++ b/src/lib/components/stepper/StepperItem.tsx @@ -21,15 +21,22 @@ const StepLabel = ({ {currentStep > step ? ( - + ) : ( - + {step} )} diff --git a/src/lib/components/table/blocks/BlocksTableMobileCard.tsx b/src/lib/components/table/blocks/BlocksTableMobileCard.tsx index 2f62fd195..aa5fe50cc 100644 --- a/src/lib/components/table/blocks/BlocksTableMobileCard.tsx +++ b/src/lib/components/table/blocks/BlocksTableMobileCard.tsx @@ -39,7 +39,7 @@ export const BlocksTableMobileCard = ({ - + {truncate(blockData.hash.toUpperCase())} diff --git a/src/lib/components/table/blocks/BlocksTableRow.tsx b/src/lib/components/table/blocks/BlocksTableRow.tsx index 66221e379..c315ae6c8 100644 --- a/src/lib/components/table/blocks/BlocksTableRow.tsx +++ b/src/lib/components/table/blocks/BlocksTableRow.tsx @@ -46,7 +46,12 @@ export const BlocksTableRow = ({ - {truncate(blockData.hash.toUpperCase(), showProposer ? [6, 6] : [9, 9])} + + {truncate( + blockData.hash.toUpperCase(), + showProposer ? [6, 6] : [9, 9] + )} + {showProposer && ( diff --git a/src/lib/components/table/proposals/StatusChip.tsx b/src/lib/components/table/proposals/StatusChip.tsx index d3a0b51b7..b5753e33b 100644 --- a/src/lib/components/table/proposals/StatusChip.tsx +++ b/src/lib/components/table/proposals/StatusChip.tsx @@ -10,19 +10,20 @@ const getBgColor = ( ): CSSProperties["backgroundColor"] => { switch (status) { case ProposalStatus.DEPOSIT_PERIOD: - return "secondary.darker"; + return "proposalChip.depositPeriod.bg"; case ProposalStatus.VOTING_PERIOD: - return "primary.dark"; + return "proposalChip.votingPeriod.bg"; case ProposalStatus.FAILED: + return "proposalChip.failed.bg"; case ProposalStatus.REJECTED: - return "error.dark"; + return "proposalChip.rejected.bg"; case ProposalStatus.PASSED: - return "success.dark"; + return "proposalChip.passed.bg"; case ProposalStatus.CANCELLED: - return "error.background"; + return "proposalChip.cancelled.bg"; case ProposalStatus.DEPOSIT_FAILED: default: - return "gray.700"; + return "proposalChip.depositFailed.bg"; } }; diff --git a/src/lib/components/table/transactions/RelationChip.tsx b/src/lib/components/table/transactions/RelationChip.tsx index 9b278b3eb..1b8aa6fe1 100644 --- a/src/lib/components/table/transactions/RelationChip.tsx +++ b/src/lib/components/table/transactions/RelationChip.tsx @@ -1,7 +1,6 @@ import { Tag } from "@chakra-ui/react"; import type { CSSProperties } from "react"; -import { CURR_THEME } from "env"; import { Tooltip } from "lib/components/Tooltip"; interface RelationChipProps { @@ -13,16 +12,14 @@ export const RelationChip = ({ isSigner }: RelationChipProps) => { ? "‘Signer’ or ‘The signing address’ is the account address that signs the transaction." : "‘Related’ or ‘The related address’ is related to the transaction, even if not signing it; e.g., as a recipient address."; const tagBgColor: CSSProperties["backgroundColor"] = isSigner - ? CURR_THEME.tag.signer.bg - : CURR_THEME.tag.related.bg; + ? "tag.signer.bg" + : "tag.related.bg"; return ( {isSigner ? "Signer" : "Related"} diff --git a/src/lib/components/table/transactions/TransactionsTable.tsx b/src/lib/components/table/transactions/TransactionsTable.tsx index b910a4b51..cca5fad8b 100644 --- a/src/lib/components/table/transactions/TransactionsTable.tsx +++ b/src/lib/components/table/transactions/TransactionsTable.tsx @@ -29,9 +29,9 @@ export const TransactionsTable = ({ if (isLoading) return ; if (!transactions?.length) return emptyState; - const templateColumns = `40px 190px 48px minmax(360px, 1fr) ${ - showRelations ? "100px " : "" - }max(190px) ${showTimestamp ? "max(230px) " : ""}${ + const templateColumns = `32px 190px 48px minmax(380px, 1fr) ${ + showRelations ? "90px " : "" + }max(180px) ${showTimestamp ? "max(228px) " : ""}${ showAction ? "100px " : "" }`; diff --git a/src/lib/data/icon.ts b/src/lib/data/icon.ts index 75d91f5ab..fdd254f97 100644 --- a/src/lib/data/icon.ts +++ b/src/lib/data/icon.ts @@ -1,5 +1,5 @@ export const UNDEFINED_ICON_LIST = [ - "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet.svg", - "https://assets.alleslabs.dev/webapp-assets/asset/undefined-white.svg", - "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet-light.svg", + "https://assets.alleslabs.dev/celatone-brand/webapp-assets/assets/undefined-1.svg", + "https://assets.alleslabs.dev/celatone-brand/webapp-assets/assets/undefined-2.svg", + "https://assets.alleslabs.dev/celatone-brand/webapp-assets/assets/undefined-3.svg", ]; diff --git a/src/lib/icon/NAToken.tsx b/src/lib/icon/NAToken.tsx index 8f6d6b6ce..683472b4d 100644 --- a/src/lib/icon/NAToken.tsx +++ b/src/lib/icon/NAToken.tsx @@ -1,18 +1,16 @@ import { Icon } from "@chakra-ui/react"; import type { IconProps } from "@chakra-ui/react"; -import { CURR_THEME } from "env"; - export const NAToken = (props: IconProps) => ( diff --git a/src/lib/icon/index.ts b/src/lib/icon/index.ts index 1a698d62c..632ffb966 100644 --- a/src/lib/icon/index.ts +++ b/src/lib/icon/index.ts @@ -1 +1,6 @@ export * from "./NAToken"; + +export * from "./pools/BalancerPoolIcon"; +export * from "./pools/ClpIcon"; +export * from "./pools/CosmWasmPoolIcon"; +export * from "./pools/StableSwapPoolIcon"; diff --git a/src/lib/icon/pools/BalancerPoolIcon.tsx b/src/lib/icon/pools/BalancerPoolIcon.tsx new file mode 100644 index 000000000..a39463e32 --- /dev/null +++ b/src/lib/icon/pools/BalancerPoolIcon.tsx @@ -0,0 +1,19 @@ +import { Icon } from "@chakra-ui/react"; +import type { IconProps } from "@chakra-ui/react"; + +export const BalancerPoolIcon = (props: IconProps) => ( + + + + + +); diff --git a/src/lib/icon/pools/ClpIcon.tsx b/src/lib/icon/pools/ClpIcon.tsx new file mode 100644 index 000000000..ebbc337ae --- /dev/null +++ b/src/lib/icon/pools/ClpIcon.tsx @@ -0,0 +1,11 @@ +import { Icon } from "@chakra-ui/react"; +import type { IconProps } from "@chakra-ui/react"; + +export const ClpIcon = (props: IconProps) => ( + + + +); diff --git a/src/lib/icon/pools/CosmWasmPoolIcon.tsx b/src/lib/icon/pools/CosmWasmPoolIcon.tsx new file mode 100644 index 000000000..eb9c894e3 --- /dev/null +++ b/src/lib/icon/pools/CosmWasmPoolIcon.tsx @@ -0,0 +1,19 @@ +import { Icon } from "@chakra-ui/react"; +import type { IconProps } from "@chakra-ui/react"; + +export const CosmWasmPoolIcon = (props: IconProps) => ( + + + + +); diff --git a/src/lib/icon/pools/StableSwapPoolIcon.tsx b/src/lib/icon/pools/StableSwapPoolIcon.tsx new file mode 100644 index 000000000..cbd8fea77 --- /dev/null +++ b/src/lib/icon/pools/StableSwapPoolIcon.tsx @@ -0,0 +1,33 @@ +import { Icon } from "@chakra-ui/react"; +import type { IconProps } from "@chakra-ui/react"; + +export const StableSwapIcon = (props: IconProps) => ( + + + + + + + + + + + + +); diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx index 14ddf6c4c..0df90efcd 100644 --- a/src/lib/layout/Searchbar.tsx +++ b/src/lib/layout/Searchbar.tsx @@ -18,7 +18,6 @@ import { import { useCallback, useRef, useState } from "react"; import type { ChangeEvent, KeyboardEvent } from "react"; -import { CURR_THEME } from "env"; import { trackUseMainSearch } from "lib/amplitude"; import { useCelatoneApp, @@ -393,7 +392,7 @@ const Searchbar = () => { bg="background.main" p={5} justify="center" - borderRadius={CURR_THEME.borderRadius.default} + borderRadius="8px" > Your result will display here diff --git a/src/lib/pages/home/components/TopDecorations.tsx b/src/lib/pages/home/components/TopDecorations.tsx index e8448afd5..8cbfa5905 100644 --- a/src/lib/pages/home/components/TopDecorations.tsx +++ b/src/lib/pages/home/components/TopDecorations.tsx @@ -10,6 +10,7 @@ export const TopDecorations = () => w="700px" h="700px" position="absolute" + opacity={0.3} src={CURR_THEME.illustration.overview.main} transform="translateX(-50%) translateY(-47%)" zIndex={0} @@ -19,6 +20,7 @@ export const TopDecorations = () => h="480px" position="absolute" src={CURR_THEME.illustration.overview?.secondary} + opacity={0.3} right={0} bottom={0} transform="translateX(40%) translateY(55%)" diff --git a/src/lib/pages/home/index.tsx b/src/lib/pages/home/index.tsx index 2c350072e..c653d3a17 100644 --- a/src/lib/pages/home/index.tsx +++ b/src/lib/pages/home/index.tsx @@ -83,7 +83,7 @@ const Home = () => { zIndex={1} > - + {prettyName} {" "} Overview diff --git a/src/lib/pages/pools/components/FilterByPoolType.tsx b/src/lib/pages/pools/components/FilterByPoolType.tsx index 6134b7394..27ff5b8b8 100644 --- a/src/lib/pages/pools/components/FilterByPoolType.tsx +++ b/src/lib/pages/pools/components/FilterByPoolType.tsx @@ -1,20 +1,20 @@ import { Grid } from "@chakra-ui/react"; -import { - BALANCER_ICON, - CLP_ICON, - COSMWASM_ICON, - STABLESWAP_ICON, -} from "../constant"; import { AmpEvent, trackUseFilter } from "lib/amplitude"; import { SelectInput } from "lib/components/forms"; +import { + BalancerPoolIcon, + ClpIcon, + CosmWasmPoolIcon, + StableSwapIcon, +} from "lib/icon"; import type { PoolTypeFilter } from "lib/types"; import { PoolType } from "lib/types"; interface PoolTypeOption { label: string; value: PoolTypeFilter; - image?: string; + image?: JSX.Element; disabled: boolean; } @@ -33,25 +33,25 @@ const options: PoolTypeOption[] = [ { label: "Balancer Pools", value: PoolType.BALANCER, - image: BALANCER_ICON, + image: , disabled: false, }, { label: "StableSwap Pools", value: PoolType.STABLESWAP, - image: STABLESWAP_ICON, + image: , disabled: false, }, { label: "Concentrated Liquidity Pools", value: PoolType.CL, - image: CLP_ICON, + image: , disabled: false, }, { label: "CosmWasm Pools", value: PoolType.COSMWASM, - image: COSMWASM_ICON, + image: , disabled: false, }, ]; diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx index 171370a0e..e89fc554b 100644 --- a/src/lib/pages/pools/components/PoolHeader.tsx +++ b/src/lib/pages/pools/components/PoolHeader.tsx @@ -1,17 +1,17 @@ -import { Flex, Heading, Image, Text } from "@chakra-ui/react"; +import { Flex, Heading, Text } from "@chakra-ui/react"; import { - BALANCER_ICON, - CLP_ICON, - COSMWASM_ICON, - STABLESWAP_ICON, - SUPERFLUID_ICON, -} from "../constant"; + BalancerPoolIcon, + ClpIcon, + CosmWasmPoolIcon, + StableSwapIcon, +} from "lib/icon"; import type { PoolDetail } from "lib/types/pool"; import { PoolType } from "lib/types/pool"; import { getTokenLabel } from "lib/utils"; import { PoolLogo } from "./PoolLogo"; +import { SuperfluidLabel } from "./SuperfluidLabel"; interface PoolHeaderProps extends Pick { @@ -24,22 +24,22 @@ const poolTypeRender = (type: PoolDetail["type"]) => { case PoolType.BALANCER: return { text: "Balancer Pool", - icon: BALANCER_ICON, + icon: , }; case PoolType.STABLESWAP: return { text: "StableSwap Pool", - icon: STABLESWAP_ICON, + icon: , }; case PoolType.COSMWASM: return { text: "CosmWasm Pool", - icon: COSMWASM_ICON, + icon: , }; case PoolType.CL: return { text: "Concentrated Liquidity Pool", - icon: CLP_ICON, + icon: , }; default: return {}; @@ -112,8 +112,8 @@ export const PoolHeader = ({ h="6px" /> - - + {poolValue.icon} + {poolValue.text} @@ -127,12 +127,7 @@ export const PoolHeader = ({ w="6px" h="6px" /> - - - - Superfluid - - + )} diff --git a/src/lib/pages/pools/components/SuperfluidLabel.tsx b/src/lib/pages/pools/components/SuperfluidLabel.tsx new file mode 100644 index 000000000..a66ef4d1d --- /dev/null +++ b/src/lib/pages/pools/components/SuperfluidLabel.tsx @@ -0,0 +1,13 @@ +import { Flex, Image, Text } from "@chakra-ui/react"; + +export const SuperfluidLabel = ({ isSmall = false }: { isSmall?: boolean }) => ( + + + + Superfluid + + +); diff --git a/src/lib/pages/pools/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx index 986380712..153567a2e 100644 --- a/src/lib/pages/pools/components/supportedSection/index.tsx +++ b/src/lib/pages/pools/components/supportedSection/index.tsx @@ -5,7 +5,6 @@ import { FormControl, FormLabel, Heading, - Image, Switch, Text, } from "@chakra-ui/react"; @@ -14,10 +13,10 @@ import type { ChangeEvent } from "react"; import { useMemo, useState } from "react"; import { useForm } from "react-hook-form"; -import { SUPERFLUID_ICON } from "../../constant"; import { usePools } from "../../data"; import type { PoolFilterState } from "../../types"; import { FilterByPoolType } from "../FilterByPoolType"; +import { SuperfluidLabel } from "../SuperfluidLabel"; import { trackUseSort, trackUseToggle, trackUseView } from "lib/amplitude"; import { CustomIcon } from "lib/components/icon"; import InputWithIcon from "lib/components/InputWithIcon"; @@ -158,11 +157,10 @@ export const SupportedSection = ({ setValue("isSuperfluidOnly", isChecked); }} /> - + Show only - - Superfluid + diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx index 83f1c2767..863bf572a 100644 --- a/src/lib/pages/pools/components/unsupportedSection/index.tsx +++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx @@ -5,7 +5,6 @@ import { FormControl, FormLabel, Heading, - Image, Switch, Text, } from "@chakra-ui/react"; @@ -13,10 +12,10 @@ import type { ChangeEvent } from "react"; import { useMemo, useState } from "react"; import { useForm } from "react-hook-form"; -import { SUPERFLUID_ICON } from "../../constant"; import { usePools } from "../../data"; import type { PoolFilterState } from "../../types"; import { FilterByPoolType } from "../FilterByPoolType"; +import { SuperfluidLabel } from "../SuperfluidLabel"; import { trackUseExpandAll, trackUseSort, trackUseToggle } from "lib/amplitude"; import { CustomIcon } from "lib/components/icon"; import InputWithIcon from "lib/components/InputWithIcon"; @@ -141,8 +140,7 @@ export const UnsupportedSection = ({ Show only - - Superfluid + diff --git a/src/lib/pages/pools/constant.ts b/src/lib/pages/pools/constant.ts deleted file mode 100644 index 91e2aba67..000000000 --- a/src/lib/pages/pools/constant.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const SUPERFLUID_ICON = - "https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg"; -export const BALANCER_ICON = - "https://assets.alleslabs.dev/webapp-assets/pool/pool-balancer.svg"; -export const STABLESWAP_ICON = - "https://assets.alleslabs.dev/webapp-assets/pool/pool-stableswap.svg"; -export const COSMWASM_ICON = - "https://assets.alleslabs.dev/webapp-assets/pool/pool-cosmwasm.svg"; -export const CLP_ICON = - "https://assets.alleslabs.dev/webapp-assets/pool/pool-clp.svg"; diff --git a/src/lib/pages/pools/index.tsx b/src/lib/pages/pools/index.tsx index 07b492283..1a53f55f0 100644 --- a/src/lib/pages/pools/index.tsx +++ b/src/lib/pages/pools/index.tsx @@ -87,7 +87,11 @@ export const PoolIndex = () => { - + - + Threshold{isCompact && ": "} - + {thresholdPercent} @@ -111,7 +111,7 @@ export const VoteThresholdBar = ({ w="4px" ml={thresholdPercent} transform="translate(-50%)" - bgColor="accent.main" + bgColor="text.main" h="full" /> diff --git a/src/lib/pages/proposal-details/components/deposit-bar/ProgressBar.tsx b/src/lib/pages/proposal-details/components/deposit-bar/ProgressBar.tsx index 60dabe857..715edd09e 100644 --- a/src/lib/pages/proposal-details/components/deposit-bar/ProgressBar.tsx +++ b/src/lib/pages/proposal-details/components/deposit-bar/ProgressBar.tsx @@ -32,13 +32,13 @@ export const ProgressBar = ({ value, max, isCompact }: ProgressBarProps) => { justifyContent="end" > {!isCompact && ratio >= 0.5 && ( - + {percent} )} {!isCompact && ratio < 0.5 && ( - + {percent} )} diff --git a/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverviewQuorum.tsx b/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverviewQuorum.tsx index 9a357fb84..296e86bb2 100644 --- a/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverviewQuorum.tsx +++ b/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverviewQuorum.tsx @@ -52,7 +52,11 @@ export const VotingOverviewQuorum = ({ label={
- + {nonAbstainRatio ? formatPrettyPercent(nonAbstainRatio) : "-"}{" "} Vote response @@ -62,7 +66,7 @@ export const VotingOverviewQuorum = ({ {abstainRatio ? formatPrettyPercent(abstainRatio) : "-"} Vote diff --git a/src/lib/pages/proposal-details/components/proposal-stepper/StepIcon.tsx b/src/lib/pages/proposal-details/components/proposal-stepper/StepIcon.tsx index e2f756c79..01956d847 100644 --- a/src/lib/pages/proposal-details/components/proposal-stepper/StepIcon.tsx +++ b/src/lib/pages/proposal-details/components/proposal-stepper/StepIcon.tsx @@ -48,18 +48,22 @@ export const StepIcon = ({ step, proposalData }: ProposalStepperProps) => { borderRadius="50%" alignItems="center" justifyContent="center" - background={isGray ? "gray.500" : "primary.main"} + background={isGray ? "stepper.disabled.bg" : "stepper.active.bg"} > {state !== PeriodState.COMPLETE ? ( {step} ) : ( - + )} ); diff --git a/src/lib/pages/proposal-details/components/vote-details/voting-period/VotingQuorum.tsx b/src/lib/pages/proposal-details/components/vote-details/voting-period/VotingQuorum.tsx index 7b05651f0..d45593d44 100644 --- a/src/lib/pages/proposal-details/components/vote-details/voting-period/VotingQuorum.tsx +++ b/src/lib/pages/proposal-details/components/vote-details/voting-period/VotingQuorum.tsx @@ -92,14 +92,14 @@ export const VotingQuorum = ({ name="Voted" ratio={nonAbstainRatio} power={nonAbstain} - color="primary.main" + color="voteParticipations.voted" isCompact={isMobile} /> ) : null} power={totalVotingPower ? totalVotingPower.minus(allVotes) : null} - color="gray.800" + color="voteParticipations.didNotVote" isCompact={isMobile} /> diff --git a/src/lib/services/validator.ts b/src/lib/services/validator.ts index c0fdc5e33..b61764ed8 100644 --- a/src/lib/services/validator.ts +++ b/src/lib/services/validator.ts @@ -2,7 +2,6 @@ import type { Coin } from "@cosmjs/stargate"; import axios from "axios"; import { z } from "zod"; -import { CURR_THEME } from "env"; import type { Option, StakingShare, Validator, ValidatorAddr } from "lib/types"; import { BlockVote, @@ -70,13 +69,14 @@ export const getValidator = async ( export const resolveValIdentity = async ( chainName: string, - validator: Validator + validator: Validator, + bgColor: string ): Promise => { const githubUrl = `https://raw.githubusercontent.com/cosmostation/chainlist/master/chain/${chainName}/moniker/${validator.validatorAddress}.png`; const keybaseUrl = `https://keybase.io/_/api/1.0/user/lookup.json?key_suffix=${validator.identity}&fields=pictures`; const uiAvatarsUrl = `https://ui-avatars.com/api/?name=${removeSpecialChars( validator.moniker ?? "" - )}&background=${CURR_THEME.colors.secondary.main.replace("#", "")}&color=fff`; + )}&background=${bgColor.replace("#", "")}&color=fff`; return ( axios diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts index e81c0d9fd..e7bd7db9e 100644 --- a/src/lib/services/validatorService.ts +++ b/src/lib/services/validatorService.ts @@ -1,3 +1,4 @@ +import { useToken } from "@chakra-ui/react"; import type { QueryFunctionContext, UseQueryOptions, @@ -73,6 +74,7 @@ export const useValidatorImage = ( const { chain: { chain_name: chainName }, } = useCurrentChain(); + const [secondaryMain] = useToken("colors", ["secondary.main"]); return useQuery({ queryKey: [ @@ -84,7 +86,7 @@ export const useValidatorImage = ( ], queryFn: async () => { if (!validator) return Promise.resolve(""); - return resolveValIdentity(chainName, validator); + return resolveValIdentity(chainName, validator, secondaryMain); }, retry: false, refetchOnWindowFocus: false, diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts index 125be727d..5065fe5d2 100644 --- a/src/lib/styles/theme/components/button.ts +++ b/src/lib/styles/theme/components/button.ts @@ -1,8 +1,6 @@ import type { ComponentStyleConfig } from "@chakra-ui/react"; import { defineStyle } from "@chakra-ui/react"; -import { CURR_THEME } from "env"; - const gray400 = "gray.400"; const gray500 = "gray.500"; const gray600 = "gray.600"; @@ -21,6 +19,7 @@ const errorDark = "error.dark"; const secondaryLight = "secondary.light"; const secondaryMain = "secondary.main"; const secondaryBg = "secondary.background"; +const buttonOutlinePrimaryColor = "button.outlinePrimary.color"; const generateStyle = ({ basic, @@ -77,43 +76,24 @@ export const Button: ComponentStyleConfig = { }, }, variants: { - primary: CURR_THEME.button?.primary - ? generateStyle({ - basic: { - background: CURR_THEME.button.primary.background, - color: CURR_THEME.button.primary.color, - "& span": { - color: CURR_THEME.button.primary.color, - }, - }, - disabled: { - background: CURR_THEME.button.primary.disabledBackground, - color: CURR_THEME.button.primary.disabledColor, - "& span": { - color: CURR_THEME.button.primary.disabledColor, - }, - }, - hoverBg: CURR_THEME.button.primary.hoverBackground, - activeBg: CURR_THEME.button.primary.activeBackground, - }) - : generateStyle({ - basic: { - background: "primary.main", - color: "text.main", - "& span": { - color: "text.main", - }, - }, - disabled: { - background: primaryBg, - color: gray600, - "& span": { - color: gray600, - }, - }, - hoverBg: primaryDark, - activeBg: primaryLight, - }), + primary: generateStyle({ + basic: { + background: "button.primary.background", + color: "button.primary.color", + "& span": { + color: "button.primary.color", + }, + }, + disabled: { + background: "button.primary.disabledBackground", + color: "button.primary.disabledColor", + "& span": { + color: "button.primary.disabledColor", + }, + }, + hoverBg: "button.primary.hoverBackground", + activeBg: "button.primary.activeBackground", + }), "gray-solid": generateStyle({ basic: { background: gray800, @@ -135,53 +115,32 @@ export const Button: ComponentStyleConfig = { hoverBg: errorDark, activeBg: "error.light", }), - "outline-primary": CURR_THEME.button?.outlinePrimary - ? generateStyle({ - basic: { - border: borderDefault, - borderColor: CURR_THEME.button.outlinePrimary.borderColor, - color: CURR_THEME.button.outlinePrimary.color, - "> div": { - color: CURR_THEME.button.outlinePrimary.color, - }, - "> svg": { - color: CURR_THEME.button.outlinePrimary.color, - }, - }, - disabled: { - border: borderDefault, - borderColor: CURR_THEME.button.outlinePrimary.disabledBorderColor, - color: CURR_THEME.button.outlinePrimary.disabledColor, - "& span": { - color: CURR_THEME.button.outlinePrimary.disabledColor, - }, - }, - hoverBg: primaryDark, - activeBg: primaryLight, - }) - : generateStyle({ - basic: { - border: borderDefault, - borderColor: primaryLight, - color: primaryLight, - "> div": { - color: primaryLight, - }, - "> svg": { - color: primaryLight, - }, - }, - disabled: { - border: borderDefault, - borderColor: gray700, - color: gray600, - "> svg": { - color: gray600, - }, - }, - hoverBg: primaryBg, - activeBg: "transparent", - }), + "outline-primary": generateStyle({ + basic: { + border: borderDefault, + borderColor: "button.outlinePrimary.borderColor", + color: buttonOutlinePrimaryColor, + "> div": { + color: buttonOutlinePrimaryColor, + }, + "& span": { + color: buttonOutlinePrimaryColor, + }, + "> svg": { + color: buttonOutlinePrimaryColor, + }, + }, + disabled: { + border: borderDefault, + borderColor: "button.outlinePrimary.disabledBorderColor", + color: "button.outlinePrimary.disabledColor", + "& span": { + color: "button.outlinePrimary.disabledColor", + }, + }, + hoverBg: "button.outlinePrimary.hoverBackground", + activeBg: "button.outlinePrimary.activeBackground", + }), "outline-secondary": generateStyle({ basic: { border: borderDefault, diff --git a/src/lib/styles/theme/fonts.ts b/src/lib/styles/theme/fonts.ts index e4ba924b4..965ae069b 100644 --- a/src/lib/styles/theme/fonts.ts +++ b/src/lib/styles/theme/fonts.ts @@ -3,6 +3,7 @@ import type { DeepPartial, Theme } from "@chakra-ui/react"; import { CURR_THEME } from "env"; export const fonts: DeepPartial = { - body: CURR_THEME.fonts.body.name, heading: CURR_THEME.fonts.heading.name, + body: CURR_THEME.fonts.body.name, + mono: CURR_THEME.fonts.mono.name, }; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 2c4f499ee..5749e4943 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -18,6 +18,7 @@ class MyDocument extends Document { +