fix(components): adjust color for latest blocks and contract interact…

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

src/config/theme/default.ts

@@ -172,6 +172,11 @@ const DEFAULT_COMPONENT_CONFIG: ComponentConfig = {
     votedAbstain: "primary.darker",
     didNotVote: "gray.700",
   },
+  recentBlocks: {
+    signed: "primary.dark",
+    proposed: "primary.light",
+    missed: "error.dark",
+  },
 };
 
 export const DEFAULT_THEME = generateTheme(

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",
   },
+  recentBlocks: {
+    signed: "primary.darker",
+    proposed: "primary.lighter",
+    missed: "error.dark",
+  },
 };
 
 export const INITIA_THEME = generateTheme(

src/config/theme/osmosis.ts

@@ -181,6 +181,11 @@ const OSMOSIS_COMPONENT_CONFIG: ComponentConfig = {
     votedAbstain: "primary.darker",
     didNotVote: "gray.700",
   },
+  recentBlocks: {
+    signed: "primary.main",
+    proposed: "secondary.darker",
+    missed: "error.dark",
+  },
 };
 
 export const OSMOSIS_THEME = generateTheme(

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",
@@ -178,6 +178,11 @@ const SEI_COMPONENT_CONFIG: ComponentConfig = {
     votedAbstain: "accent.darker",
     didNotVote: "gray.700",
   },
+  recentBlocks: {
+    signed: "secondary.main",
+    proposed: "primary.main",
+    missed: "error.dark",
+  },
 };
 
 export const SEI_THEME = generateTheme(SEI_BASE_THEME, SEI_COMPONENT_CONFIG);

src/config/theme/types.ts

@@ -164,4 +164,9 @@ export type ComponentConfig = {
     votedAbstain: string;
     didNotVote: string;
   };
+  recentBlocks: {
+    signed: string;
+    proposed: string;
+    missed: string;
+  };
 };

src/lib/components/icon/CustomIcon.tsx

@@ -13,68 +13,13 @@ export const ICONS = {
     svg: (
       <>
         <path
-          d="M8.46826 3.84487C7.27842 3.41148 6.08859 3.17145 4.98209 3.15145C2.89572 3.11478 1.30261 3.85488 0.502723 5.2384C-0.29383 6.62192 -0.140518 8.37215 0.939328 10.1691C1.8692 11.7159 3.41897 13.1695 5.30204 14.2596C6.24524 14.8064 7.22177 15.2331 8.19163 15.5265L8.81821 12.8761C8.09831 12.6427 7.36175 12.316 6.65851 11.906C5.18539 11.0525 3.9489 9.90903 3.26233 8.76554C2.73241 7.87875 2.57576 7.06864 2.85239 6.59191C3.12568 6.11518 3.90557 5.84514 4.93543 5.86181C5.81197 5.87848 6.80849 6.10185 7.80835 6.49523L8.46826 3.84154V3.84487Z"
-          fill="#524BEB"
+          d="M13.7977 11.6936H2.30636V0.202312C2.30636 0.0890173 2.21734 0 2.10405 0H0.202312C0.0890173 0 0 0.0890173 0 0.202312V13.7977C0 13.911 0.0890173 14 0.202312 14H13.7977C13.911 14 14 13.911 14 13.7977V11.896C14 11.7827 13.911 11.6936 13.7977 11.6936Z"
+          fill="white"
         />
         <path
-          d="M15.0609 8.98233C14.131 7.43546 12.5812 5.98193 10.6982 4.89178C9.96829 4.46839 9.21839 4.11834 8.4685 3.84497L7.80859 6.49866C8.32519 6.70202 8.84511 6.95206 9.34504 7.2421C10.8182 8.09554 12.0547 9.23903 12.7412 10.3825C13.2711 11.266 13.4278 12.0794 13.1512 12.5561C12.8779 13.0329 12.098 13.3029 11.0681 13.2862C10.3749 13.2729 9.605 13.1296 8.81845 12.8762L8.19187 15.5265C9.1584 15.8233 10.1183 15.9833 11.0181 15.9999C11.0681 15.9999 11.1215 15.9999 11.1714 15.9999C13.1878 15.9999 14.7176 15.2632 15.4975 13.913C16.2941 12.5295 16.1407 10.7792 15.0609 8.98233Z"
-          fill="url(#paint0_linear_796_24770)"
+          d="M13.7978 5.61618H8.3677V0.202312C8.3677 0.0890173 8.27868 0 8.16539 0H6.26365C6.15036 0 6.06134 0.0890173 6.06134 0.202312V7.72428C6.06134 7.83757 6.15036 7.92659 6.26365 7.92659H13.7978C13.9111 7.92659 14.0001 7.83757 14.0001 7.72428V5.82254C14.0001 5.70925 13.9111 5.62023 13.7978 5.62023V5.61618Z"
+          fill="white"
         />
-        <path
-          d="M9.11191 14.3558C9.29321 13.6268 9.16213 12.9667 8.81913 12.8813C8.47612 12.796 8.05109 13.3177 7.86978 14.0467C7.68848 14.7757 7.81956 15.4359 8.16257 15.5212C8.50557 15.6066 8.93061 15.0848 9.11191 14.3558Z"
-          fill="#1313D1"
-        />
-        <path
-          d="M8.75756 5.32519C8.93976 4.59262 8.80939 3.92956 8.46639 3.84421C8.12338 3.75885 7.69763 4.28353 7.51543 5.0161C7.33324 5.74866 7.46361 6.41172 7.80661 6.49708C8.14962 6.58243 8.57537 6.05776 8.75756 5.32519Z"
-          fill="#1313D1"
-        />
-        <path
-          d="M12.401 1.16471C11.8377 0.841334 11.2545 0.577965 10.6746 0.387939L10.0146 3.02496C10.3579 3.15165 10.7079 3.315 11.0445 3.51169C12.8676 4.56184 13.4175 5.91535 13.2675 6.17539C13.2242 6.24873 12.9576 6.39208 12.391 6.38542C12.1077 6.37875 11.7977 6.33541 11.4778 6.2554L10.8045 8.87575C11.3311 9.00577 11.8477 9.07911 12.341 9.08911C12.3743 9.08911 12.4076 9.08911 12.441 9.08911C13.8841 9.08911 15.0339 8.52237 15.6105 7.52557C16.7237 5.59864 15.3406 2.86494 12.3943 1.16804L12.401 1.16471Z"
-          fill="#524BEB"
-        />
-        <path
-          d="M10.6747 0.38784C9.9481 0.147808 9.22487 0.0144565 8.5483 0.00112136C7.05518 -0.0288827 5.86535 0.544528 5.27544 1.56467C4.16226 3.49159 5.5454 6.2253 8.49165 7.92219C9.24487 8.35558 10.0348 8.67896 10.808 8.87232L11.4812 6.25197C10.948 6.11861 10.3847 5.88858 9.84812 5.57854C8.02505 4.5284 7.47512 3.17488 7.6251 2.91485C7.66843 2.84151 7.93506 2.69482 8.50164 2.70482C8.96158 2.71482 9.48484 2.82484 10.0181 3.02153L10.678 0.384506L10.6747 0.38784Z"
-          fill="url(#paint1_linear_796_24770)"
-        />
-        <path
-          d="M11.7536 7.70955C11.9348 6.9862 11.8036 6.33018 11.4607 6.24429C11.1179 6.15839 10.6931 6.67516 10.512 7.39851C10.3309 8.12186 10.462 8.77788 10.8049 8.86377C11.1478 8.94967 11.5725 8.4329 11.7536 7.70955Z"
-          fill="#1313D1"
-        />
-        <path
-          d="M10.967 1.86049C11.1495 1.13178 11.0194 0.471419 10.6765 0.385526C10.3337 0.299634 9.90782 0.82074 9.72537 1.54945C9.54292 2.27816 9.67297 2.93853 10.0158 3.02442C10.3587 3.11031 10.7846 2.5892 10.967 1.86049Z"
-          fill="#1313D1"
-        />
-        <defs>
-          <linearGradient
-            id="paint0_linear_796_24770"
-            x1="5.03566"
-            y1="19.4137"
-            x2="21.2229"
-            y2="-5.10211"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop offset="0.09" stopColor="#95A931" />
-            <stop offset="0.1" stopColor="#97AB33" />
-            <stop offset="0.31" stopColor="#C2D754" />
-            <stop offset="0.41" stopColor="#D3E961" />
-            <stop offset="0.49" stopColor="#D7EB6D" />
-            <stop offset="0.6" stopColor="#DBEE77" />
-            <stop offset="0.73" stopColor="#DDEF7B" />
-          </linearGradient>
-          <linearGradient
-            id="paint1_linear_796_24770"
-            x1="4.87216"
-            y1="11.6794"
-            x2="12.7512"
-            y2="-4.39774"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#95A931" />
-            <stop offset="0.02" stopColor="#97AB33" />
-            <stop offset="0.34" stopColor="#C2D754" />
-            <stop offset="0.5" stopColor="#D3E961" />
-          </linearGradient>
-        </defs>
       </>
     ),
     viewBox: viewboxDefault,
@@ -352,64 +297,24 @@ export const ICONS = {
     svg: (
       <>
         <path
-          d="M2.86218 16.6807C4.7079 18.5264 7.16161 19.5429 9.7714 19.5429C12.3812 19.5429 14.8349 18.5264 16.6806 16.6807C18.5263 14.835 19.5428 12.3813 19.5428 9.77152C19.5428 7.16173 18.5263 4.70802 16.6806 2.8623L14.3775 5.16538C15.5583 6.34609 16.2884 7.97466 16.2884 9.77152C16.2884 11.5127 15.6098 13.1494 14.3789 14.3804C13.148 15.6113 11.5113 16.2899 9.77004 16.2899C7.97318 16.2899 6.34325 15.5584 5.1639 14.379L2.86218 16.6807Z"
-          fill="url(#paint0_linear_3494_381196)"
-        />
-        <path
-          d="M16.6806 2.86221C14.8349 1.0165 12.3812 0 9.77143 0C7.16164 0 4.70793 1.0165 2.86221 2.86221C1.0165 4.70793 0 7.16164 0 9.77143C0 12.3812 1.0165 14.8349 2.86221 16.6806L5.16529 14.3776C3.98457 13.1969 3.25443 11.5683 3.25443 9.77143C3.25443 8.03021 3.933 6.3935 5.16393 5.16257C6.39486 3.93164 8.03157 3.25307 9.77279 3.25307C11.5696 3.25307 13.1996 3.98457 14.3789 5.16393L16.6806 2.86221Z"
-          fill="#524BEB"
-        />
-        <path
-          d="M4.56711 16.0838C5.20311 15.4478 5.47078 14.6843 5.16497 14.3785C4.85916 14.0727 4.09568 14.3404 3.45968 14.9764C2.82368 15.6124 2.55601 16.3758 2.86182 16.6816C3.16763 16.9875 3.93111 16.7198 4.56711 16.0838Z"
-          fill="#5942F3"
-        />
-        <path
-          d="M16.0824 4.56889C16.7184 3.9329 16.986 3.16941 16.6802 2.8636C16.3744 2.5578 15.6109 2.82547 14.9749 3.46146C14.3389 4.09746 14.0713 4.86094 14.3771 5.16675C14.6829 5.47256 15.4464 5.20489 16.0824 4.56889Z"
-          fill="#5942F3"
-        />
-        <path
-          d="M6.31482 13.228C8.22025 15.1334 11.3213 15.1334 13.2281 13.228C15.1335 11.3226 15.1335 8.22148 13.2281 6.3147L10.9237 8.6232C11.5575 9.25698 11.5575 10.2884 10.9237 10.9222C10.2899 11.556 9.25846 11.556 8.62468 10.9222L6.31618 13.2266L6.31482 13.228Z"
-          fill="#524BEB"
+          d="M10.9582 9.38954C10.9094 9.34075 10.833 9.34287 10.7843 9.38954C9.50729 10.5753 7.51123 10.5477 6.2682 9.30469L5.10577 10.4671C6.98941 12.3507 10.0227 12.3804 11.9424 10.5583C11.9933 10.5095 11.9933 10.4268 11.9424 10.3759L10.9582 9.39166V9.38954Z"
+          fill="white"
         />
         <path
-          d="M8.61926 10.9195C7.98547 10.2857 7.98547 9.25425 8.61926 8.62046C9.25304 7.98668 10.2845 7.98668 10.9183 8.62046L13.2268 6.31603C11.3213 4.41061 8.22026 4.41061 6.31347 6.31603C4.40804 8.22146 4.40804 11.3225 6.31347 13.2293L8.6179 10.9208L8.61926 10.9195Z"
-          fill="url(#paint1_linear_3494_381196)"
+          d="M10.9603 4.61028C10.9115 4.65907 10.8352 4.65907 10.7843 4.61028C9.50729 3.42453 7.51123 3.45422 6.2682 4.69725L5.10577 3.53483C6.98729 1.65331 10.0206 1.6215 11.9403 3.44362C11.9934 3.4924 11.9934 3.57725 11.9403 3.62816L10.9582 4.61028H10.9603Z"
+          fill="white"
         />
         <path
-          d="M12.6285 8.02104C13.2645 7.38505 13.5322 6.62156 13.2264 6.31575C12.9206 6.00994 12.1571 6.27761 11.5211 6.91361C10.8851 7.54961 10.6174 8.31309 10.9232 8.6189C11.229 8.92471 11.9925 8.65704 12.6285 8.02104Z"
-          fill="#5942F3"
+          d="M6.26814 9.30193L8.48056 7.0895C8.53147 7.0386 8.53147 6.95799 8.48056 6.9092L6.26814 4.69678C4.99753 5.96738 4.99753 8.0292 6.26814 9.30193Z"
+          fill="white"
         />
         <path
-          d="M8.0206 12.6304C8.6566 11.9944 8.92427 11.2309 8.61846 10.9251C8.31265 10.6193 7.54917 10.887 6.91317 11.523C6.27717 12.159 6.0095 12.9225 6.31531 13.2283C6.62112 13.5341 7.3846 13.2664 8.0206 12.6304Z"
-          fill="#5942F3"
+          d="M5.10579 3.53664L4.03457 2.46543C3.98367 2.41452 3.90094 2.41452 3.85215 2.46543C2.6367 3.72967 2.03003 5.36512 2.03003 7.00058C2.03003 8.63603 2.6367 10.2715 3.85215 11.5357C3.90094 11.5866 3.98367 11.5866 4.03457 11.5357L5.10579 10.4645C4.14912 9.50785 3.66973 8.25422 3.66973 7.00058C3.66973 5.74694 4.14912 4.49331 5.10579 3.53664Z"
+          fill="white"
         />
-        <defs>
-          <linearGradient
-            id="paint0_linear_3494_381196"
-            x1="6.31579"
-            y1="20.1348"
-            x2="20.1347"
-            y2="6.31592"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#B1C618" />
-            <stop offset="1" stopColor="#DDEF7B" />
-          </linearGradient>
-          <linearGradient
-            id="paint1_linear_3494_381196"
-            x1="4.8844"
-            y1="9.05746"
-            x2="13.2268"
-            y2="9.05746"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#AAC700" />
-            <stop offset="1" stopColor="#D7F067" />
-          </linearGradient>
-        </defs>
       </>
     ),
-    viewBox: "0 0 20 20",
+    viewBox: "0 0 14 14",
   },
   check: {
     svg: (

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",
           }}

src/lib/pages/validator-details/components/performance/RecentBlocksLegends.tsx

@@ -53,19 +53,19 @@ export const RecentBlocksLegends = ({
   <Flex direction={{ base: "column", md: "row" }}>
     <LegendItem
       label="Signed Blocks"
-      color="primary.main"
+      color="recentBlocks.signed"
       value={signed}
       ratio={signedRatio}
     />
     <LegendItem
       label="Proposed Blocks"
-      color="secondary.main"
+      color="recentBlocks.proposed"
       value={proposed}
       ratio={proposedRatio}
     />
     <LegendItem
       label="Missed Blocks"
-      color="error.dark"
+      color="recentBlocks.missed"
       value={missed}
       ratio={missedRatio}
     />

src/lib/pages/validator-details/components/performance/RecentBlocksSection.tsx

@@ -18,14 +18,14 @@ interface BlockProps {
 
 const Block = forwardRef<HTMLDivElement, BlockProps>(
   ({ height, vote }, ref) => {
-    let backgroundColor = "primary.main";
+    let backgroundColor = "recentBlocks.signed";
     let voteLabel = "Signed";
 
     if (vote === BlockVote.PROPOSE) {
-      backgroundColor = "secondary.main";
+      backgroundColor = "recentBlocks.proposed";
       voteLabel = "Proposed";
     } else if (vote === BlockVote.ABSTAIN) {
-      backgroundColor = "error.dark";
+      backgroundColor = "recentBlocks.missed";
       voteLabel = "Missed";
     }