feat: rhea ui

burrowHQ · Feb 25, 2025 · 8e17177 · 8e17177
1 parent 0c3f12b
commit 8e17177
Show file tree

Hide file tree

Showing 45 changed files with 221 additions and 193 deletions.
diff --git a/components/Assets/index.tsx b/components/Assets/index.tsx
@@ -50,8 +50,8 @@ const assets = {
             gradientUnits="userSpaceOnUse"
             gradientTransform="rotate(90) scale(93 229.5)"
           >
-            <stop stopColor="#D2FF3A" />
-            <stop offset="1" stopColor="#D2FF3A" stopOpacity="0" />
+            <stop stopColor="#00F7A5" />
+            <stop offset="1" stopColor="#00F7A5" stopOpacity="0" />
           </radialGradient>
         </defs>
       </svg>

diff --git a/components/ContentBox/ContentBox.tsx b/components/ContentBox/ContentBox.tsx
@@ -28,17 +28,17 @@ const StyledTipBox = styled.div<{ padding?: string }>`
   gap: 4px;
   position: relative;
   border-radius: 6px;
-  border: 1px solid #4f5178;
-  background: #2e304b;
+  border: 1px solid #303037;
+  background: #202026;
   font-size: 12px;
   padding: ${(p) => p.padding ?? "20px 30px"};
 `;
 
 const StyledBox = styled.div<{ padding?: string }>`
   position: relative;
   border-radius: 12px;
-  border: 1px solid #31344d;
-  background: #23253a;
+  border: 1px solid #303037;
+  background: #202026;
   padding: ${(p) => p.padding ?? "20px 30px"};
 
   @media (max-width: 767px) {

diff --git a/components/CustomButton/CustomButton.tsx b/components/CustomButton/CustomButton.tsx
@@ -120,7 +120,7 @@ const btnColor = {
     "border-primary border border-opacity-60 text-primary bg-primary hover:opacity-80 bg-opacity-5",
   errorBorder:
     "border border-red-50 border-opacity-60 text-red-50 bg-red-50 bg-opacity-5 hover:opacity-80",
-  secondary: "border border-gray-500 hover:border-gray-400 text-gray-300",
+  secondary: "border border-gray-1300 hover:border-gray-400 text-gray-300",
   secondary2: "border border-pink-400 hover:border-pink-400 text-pink-400",
   third: "rounded-full border border-1 border-black text-black font-bold",
   info: "border-yellow-50 bg-yellow-50 hover:opacity-80 text-black",

diff --git a/components/CustomTable/CustomTable.tsx b/components/CustomTable/CustomTable.tsx
@@ -256,7 +256,7 @@ const StyledTable = styled.div`
   }
 
   .custom-table-thead {
-    border-bottom: 1px solid #31344d;
+    border-bottom: 1px solid #303037;
 
     .custom-table-th {
       text-align: left;
@@ -285,7 +285,7 @@ const StyledTable = styled.div`
 
   .custom-table-row {
     &.table-row-hover:hover {
-      background: #33344c;
+      background: #25252c;
     }
     &:hover {
       .custom-table-action {

diff --git a/components/CustomTooltips/CustomTooltips.tsx b/components/CustomTooltips/CustomTooltips.tsx
@@ -25,9 +25,9 @@ const StyledWrapper = styled.div`
     margin-bottom: 8px;
     display: none;
     border-radius: 5px;
-    border: 1px solid #4f5178;
+    border: 1px solid #303037;
     padding: 7px 7px 6px;
-    background: #2e304b;
+    background: #202026;
     line-height: 1.1;
     box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.15);
     width: 351px;

diff --git a/components/Disclaimer/index.tsx b/components/Disclaimer/index.tsx
@@ -49,7 +49,7 @@ export default function Disclaimer({ isOpen = false, onClose }) {
           "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
             display: "none",
           },
-          border: "1px solid #4F5178",
+          border: "1px solid #303037",
           [theme.breakpoints.down("sm")]: {
             position: "absolute",
             bottom: "0px",
@@ -175,7 +175,7 @@ export default function Disclaimer({ isOpen = false, onClose }) {
               color: "#000",
               fontSize: "16px",
               textTransform: "none",
-              ":hover": { backgroundColor: "#D2FF3A" },
+              ":hover": { backgroundColor: "#00F7A5" },
               ":disabled": { color: "#6D708D", backgroundColor: "#565874" },
             }}
             disabled={!checked1 || !checked2}

diff --git a/components/Disclaimer/svg.tsx b/components/Disclaimer/svg.tsx
@@ -8,10 +8,10 @@ function CheckedIcon(props: any) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect width="16" height="16" rx="4" fill="#D2FF3A" />
+      <rect width="16" height="16" rx="4" fill="#00F7A5" />
       <path
         d="M4 8.22222L6.85714 11L12 6"
-        stroke="#14162B"
+        stroke="#16161B"
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -30,7 +30,7 @@ function UnCheckedIcon(props) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect x="0.5" y="0.5" width="15" height="15" rx="3.5" fill="#23253A" stroke="#D2FF3A" />
+      <rect x="0.5" y="0.5" width="15" height="15" rx="3.5" fill="#23253A" stroke="#00F7A5" />
     </svg>
   );
 }

diff --git a/components/Header/WalletButton.tsx b/components/Header/WalletButton.tsx
@@ -151,7 +151,7 @@ const WalletButton = () => {
               padding: "0 20px",
               borderRadius: "6px",
               ":hover": {
-                backgroundColor: "#D2FF3A",
+                backgroundColor: "#00F7A5",
                 opacity: "0.8",
               },
               [theme.breakpoints.down("lg")]: {
@@ -379,7 +379,7 @@ const ClaimButtonInAccount = (props) => {
       {...props}
       className="flex items-center justify-center bg-primary rounded-md cursor-pointer text-sm font-bold text-dark-200 hover:opacity-80 w-20 h-8"
     >
-      {loading ? <BeatLoader size={5} color="#14162B" /> : <>Claim</>}
+      {loading ? <BeatLoader size={5} color="#16161B" /> : <>Claim</>}
     </div>
   );
 };
@@ -420,7 +420,7 @@ export const ConnectWalletButton = ({
           height: "42px",
           borderRadius: "6px",
           ":hover": {
-            backgroundColor: "#D2FF3A",
+            backgroundColor: "#00F7A5",
             opacity: "0.8",
           },
         }}

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { useTheme, Box, Snackbar, Typography } from "@mui/material";
 import { useRouter } from "next/router";
+import Image from "next/image";
 import Link from "next/link";
 import LogoIcon from "../../public/logo.svg";
-import BurrowIcon from "../../public/burrow.svg";
 import BrrrIcon from "../../public/brrr.svg";
 import WalletButton from "./WalletButton";
 import Bridge from "./Bridge";
@@ -22,7 +22,7 @@ const MenuItem = ({ item }: { item: Imenu }) => {
   const { title, link, allLinks } = item;
   const router = useRouter();
   const isSelected = allLinks?.includes(router.route);
-  const style = isSelected ? { color: "#D2FF3A" } : {};
+  const style = isSelected ? { color: "#00F7A5" } : {};
 
   return (
     <Link href={link}>
@@ -126,8 +126,18 @@ const Header = () => {
               window.open("https://burrow.finance/");
             }}
           >
-            <LogoIcon style={{ fill: "white" }} />
-            <BurrowIcon />
+            {/* <span className=" transform"><LogoIcon /></span> */}
+            {/* <img src="/public/logo.svg" width={30} height={30} /> */}
+            <Image
+              src="/Rhea-logo.png"
+              width={80}
+              height={30}
+              alt=""
+              className="cursor-pointer"
+              onClick={() => {
+                window.open("https://www.ref.finance");
+              }}
+            />
           </Logo>
           <Menu>
             {mainMenuList.map((item) => {

diff --git a/components/Header/stats/liquidity.tsx b/components/Header/stats/liquidity.tsx
@@ -64,7 +64,7 @@ export const UserLiquidity = () => {
         value: userDepositedValue,
         text: "Supplied",
         valueStyle: {
-          color: "#D2FF3A",
+          color: "#00F7A5",
         },
       },
     ],

diff --git a/components/Header/style.ts b/components/Header/style.ts
@@ -76,7 +76,7 @@ export const WalletMobile = styled("div")(() => ({
   display: "flex",
 }));
 export const WrapperMenuMobile = styled("div")(() => ({
-  backgroundColor: "#2E304B",
+  backgroundColor: "#202026",
   borderBottomLeftRadius: "12px",
   borderBottomRightRadius: "12px",
   outline: "none",

diff --git a/components/Header/svg.tsx b/components/Header/svg.tsx
@@ -286,9 +286,9 @@ export function ArrowRightTopIcon(props) {
 export function RefreshIcon(props) {
   return (
     <svg {...props} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="#D2FF3A" strokeWidth="4" />
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="#00F7A5" strokeWidth="4" />
       <path
-        fill="#D2FF3A"
+        fill="#00F7A5"
         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
       />
     </svg>

diff --git a/components/Icons/Icons.tsx b/components/Icons/Icons.tsx
@@ -415,18 +415,18 @@ export const Mascot = ({ height = 148, width = 159 }) => (
     <ellipse cx="71" cy="120.076" rx="71" ry="8.5" fill="#626486" />
     <path
       d="M19.589 125.673C20.2233 115.1 23.0575 97.905 28.9456 77.7576C45.5594 60.4583 66.8484 55.5223 85.17 58.4933C103.549 61.4738 118.851 72.3872 123.525 86.6554C123.962 87.9909 124.261 90.8122 124.461 94.4433C124.66 98.0481 124.76 102.379 124.825 106.685C124.857 108.809 124.88 110.934 124.902 112.961C124.924 115.03 124.946 116.997 124.974 118.753C125.024 121.82 125.095 124.315 125.236 125.676C125.095 125.703 124.923 125.736 124.719 125.774C124.077 125.895 123.122 126.067 121.873 126.274C119.377 126.687 115.708 127.239 111.024 127.791C101.655 128.895 88.2276 130 72 130C55.7725 130 42.5589 128.895 33.4048 127.791C28.8279 127.239 25.2661 126.688 22.8501 126.274C21.6421 126.067 20.7206 125.895 20.1019 125.775C19.8978 125.735 19.7266 125.701 19.589 125.673Z"
-      fill="#D2FF3A"
+      fill="#00F7A5"
       stroke="black"
     />
     <circle cx="68.5" cy="120.5" r="18" fill="url(#paint0_linear_419_13466)" stroke="black" />
     <circle cx="68.5" cy="120.5" r="14" fill="url(#paint1_linear_419_13466)" stroke="black" />
     <path
       d="M88.7262 117.491C94.3211 116.248 97.7921 114.383 98.8281 113.605C98.8281 113.605 107 111.5 113.5 115C120 118.5 120 123 120 123C116.5 133.032 101.936 133.032 91.0574 133.032C80.1784 133.032 73.9619 140.026 72.4078 133.032C70.8536 126.039 81.7326 119.045 88.7262 117.491Z"
-      fill="#D2FF3A"
+      fill="#00F7A5"
     />
     <path
       d="M55.7039 118.918C48.8133 115.542 41.2884 105.813 39.2786 103C39.2786 103 33.7364 103 28.7485 109.517C23.7605 116.034 27.0858 123.093 27.0858 123.093C35.9533 130.153 54.8426 134.11 61.7333 134.954C68.6239 135.798 67.5508 124.723 55.7039 118.918Z"
-      fill="#D2FF3A"
+      fill="#00F7A5"
     />
     <path
       d="M98.8281 113.605C97.7921 114.383 94.3211 116.248 88.7262 117.491C81.7326 119.045 70.8536 126.039 72.4078 133.032C73.9619 140.026 80.1784 133.032 91.0574 133.032C101.936 133.032 117 133.032 120.5 122.5"
@@ -474,12 +474,12 @@ export const Mascot = ({ height = 148, width = 159 }) => (
     />
     <path
       d="M51.3268 53.7697C49.0412 52.8252 47.5372 51.2241 47.0038 49.6287C46.731 48.8128 46.7118 48.0031 46.9565 47.2678C47.2005 46.5346 47.7182 45.8405 48.5791 45.272C50.2854 44.1451 52.0173 44.3322 53.29 45.5121C54.5542 46.684 55.4366 48.908 55.2622 52.0289L51.3268 53.7697Z"
-      fill="#D2FF3A"
+      fill="#00F7A5"
       stroke="black"
     />
     <path
       d="M110.301 67.3317C112.773 67.4164 114.804 66.5801 115.949 65.3478C116.535 64.7177 116.887 63.9883 116.968 63.2176C117.049 62.4491 116.864 61.6031 116.315 60.7295C115.227 58.9982 113.573 58.4527 111.926 59.0011C110.291 59.5457 108.568 61.206 107.437 64.12L110.301 67.3317Z"
-      fill="#D2FF3A"
+      fill="#00F7A5"
       stroke="black"
     />
     <mask id="path-17-inside-1_419_13466" fill="white">
@@ -493,7 +493,7 @@ export const Mascot = ({ height = 148, width = 159 }) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M109.491 61.5127C110.55 64.7658 112.696 67.6092 115.404 69.6993C122.996 75.5581 126.742 85.6059 124.105 95.4471C120.603 108.517 107.168 116.273 94.0986 112.771C89.5848 111.562 85.7048 109.168 82.7034 106.013C80.277 103.463 77.1179 101.584 73.6554 100.949C72.779 100.788 71.9018 100.591 71.0256 100.356C70.5366 100.225 70.0533 100.084 69.5757 99.9327C66.4653 98.9475 63.0824 99.0393 59.9504 99.9532C55.7917 101.167 51.2584 101.292 46.7682 100.089C33.6983 96.5871 25.942 83.1528 29.4441 70.0829C31.9183 60.8489 39.3502 54.2673 48.1086 52.4343C51.1969 51.788 54.1271 50.3499 56.403 48.1646C64.1444 40.7315 75.6856 37.4387 87.0672 40.4884C98.0952 43.4434 106.276 51.63 109.491 61.5127Z"
-      fill="#D2FF3A"
+      fill="#00F7A5"
     />
     <path
       d="M69.5757 99.9327L69.2737 100.886L69.5757 99.9327ZM59.9504 99.9532L59.6703 98.9932L59.9504 99.9532ZM48.1086 52.4343L47.9038 51.4555L48.1086 52.4343ZM56.403 48.1646L55.7104 47.4433L56.403 48.1646ZM82.7034 106.013L83.4279 105.324L82.7034 106.013ZM73.6554 100.949L73.8356 99.9653L73.6554 100.949ZM115.404 69.6993L114.793 70.491L115.404 69.6993ZM109.491 61.5127L110.442 61.2033L109.491 61.5127ZM125.071 95.706C127.816 85.4615 123.915 75.0043 116.015 68.9077L114.793 70.491C122.077 76.1119 125.668 85.7503 123.139 95.1883L125.071 95.706ZM93.8398 113.737C107.443 117.382 121.426 109.309 125.071 95.706L123.139 95.1883C119.78 107.725 106.894 115.164 94.3574 111.805L93.8398 113.737ZM81.9789 106.702C85.1035 109.987 89.1433 112.479 93.8398 113.737L94.3574 111.805C90.0263 110.645 86.3061 108.349 83.4279 105.324L81.9789 106.702ZM73.8356 99.9653C72.9857 99.8095 72.1347 99.6182 71.2844 99.3904L70.7668 101.322C71.669 101.564 72.5724 101.767 73.4751 101.933L73.8356 99.9653ZM71.2844 99.3904C70.8099 99.2633 70.341 99.1262 69.8776 98.9794L69.2737 100.886C69.7656 101.042 70.2633 101.187 70.7668 101.322L71.2844 99.3904ZM46.5094 101.055C51.1813 102.307 55.901 102.176 60.2305 100.913L59.6703 98.9932C55.6823 100.157 51.3355 100.278 47.027 99.1232L46.5094 101.055ZM28.4782 69.8241C24.8331 83.4274 32.906 97.41 46.5094 101.055L47.027 99.1232C34.4906 95.7641 27.0509 82.8782 30.41 70.3417L28.4782 69.8241ZM47.9038 51.4555C38.7906 53.3627 31.0538 60.2118 28.4782 69.8241L30.41 70.3417C32.7829 61.486 39.9098 55.1718 48.3135 53.4131L47.9038 51.4555ZM57.0956 48.886C64.5875 41.6924 75.7687 38.4963 86.8083 41.4543L87.326 39.5225C75.6024 36.3812 63.7014 39.7705 55.7104 47.4433L57.0956 48.886ZM86.8083 41.4543C97.5049 44.3205 105.428 52.2568 108.54 61.8221L110.442 61.2033C107.123 51.0032 98.6855 42.5663 87.326 39.5225L86.8083 41.4543ZM69.8776 98.9794C66.5524 97.9261 62.965 98.0319 59.6703 98.9932L60.2305 100.913C63.1999 100.047 66.3782 99.9688 69.2737 100.886L69.8776 98.9794ZM48.3135 53.4131C51.564 52.7328 54.6696 51.2154 57.0956 48.886L55.7104 47.4433C53.5846 49.4845 50.8299 50.8431 47.9038 51.4555L48.3135 53.4131ZM83.4279 105.324C80.8771 102.643 77.5346 100.643 73.8356 99.9653L73.4751 101.933C76.7011 102.524 79.6769 104.283 81.9789 106.702L83.4279 105.324ZM116.015 68.9077C113.447 66.9256 111.431 64.2431 110.442 61.2033L108.54 61.8221C109.668 65.2884 111.945 68.2929 114.793 70.491L116.015 68.9077Z"

diff --git a/components/Modal/components.tsx b/components/Modal/components.tsx
@@ -272,13 +272,13 @@ export const SubmitButton = ({ action, disabled, onClick, loading }) => {
   if (action === "Borrow" || action === "Repay")
     return (
       <RedSolidSubmitButton disabled={disabled || loading} onClick={onClick}>
-        {loading ? <BeatLoader size={5} color="#14162B" /> : action}
+        {loading ? <BeatLoader size={5} color="#16161B" /> : action}
       </RedSolidSubmitButton>
     );
 
   return (
     <YellowSolidSubmitButton disabled={disabled || loading} onClick={onClick}>
-      {loading ? <BeatLoader size={5} color="#14162B" /> : action === "Adjust" ? "Confirm" : action}
+      {loading ? <BeatLoader size={5} color="#16161B" /> : action === "Adjust" ? "Confirm" : action}
     </YellowSolidSubmitButton>
   );
 };

diff --git a/components/Modal/style.ts b/components/Modal/style.ts
@@ -4,8 +4,8 @@ import { Box } from "@mui/material";
 export const Wrapper = styled(Box)(({ theme }) => ({
   position: "relative",
   display: "flex",
-  backgroundColor: "#2E304B",
-  border: "1px solid #4F5178",
+  backgroundColor: "#202026",
+  border: "1px solid #303037",
   boxShadow: "0px 0px 10px 4px #00000026",
   flexDirection: "column",
   overflow: "auto",

diff --git a/components/NonFarmedAssets/index.tsx b/components/NonFarmedAssets/index.tsx
@@ -30,7 +30,7 @@ const ClaimButton = (props) => {
       {...props}
       className="flex flex-shrink-0 items-center justify-center bg-primary rounded-md cursor-pointer text-sm font-bold text-dark-200 hover:opacity-80 w-[136px] xsm:w-full h-8"
     >
-      {loading ? <BeatLoader size={5} color="#14162B" /> : <>Claim & Join</>}
+      {loading ? <BeatLoader size={5} color="#16161B" /> : <>Claim & Join</>}
     </div>
   );
 };

diff --git a/components/Rpc/component/Common.tsx b/components/Rpc/component/Common.tsx
@@ -314,9 +314,7 @@ export const ModalAddCustomNetWork = (props: any) => {
                         } ${index !== Object.entries(rpclist).length - 1 ? "mb-3" : ""} ${
                           isInEditStatus ? "" : "cursor-pointer"
                         } ${
-                          isInEditStatus && !data.custom
-                            ? ""
-                            : "bg-black bg-gray-500 bg-opacity-30 hover:bg-opacity-50"
+                          isInEditStatus && !data.custom ? "" : "bg-gray-500 hover:bg-opacity-50"
                         } justify-between text-white`}
                         onClick={() => {
                           if (!isInEditStatus) {

diff --git a/components/Rpc/component/svg.tsx b/components/Rpc/component/svg.tsx
@@ -116,7 +116,7 @@ export const ReturnArrowButtonIcon = (props: any) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M8.72189 0.26192C8.99145 0.576414 8.95503 1.04989 8.64054 1.31946L2.30489 6.75001L8.64054 12.1806C8.95503 12.4501 8.99145 12.9236 8.72189 13.2381C8.45232 13.5526 7.97884 13.589 7.66435 13.3195L0 6.75001L7.66435 0.180571C7.97884 -0.0889955 8.45232 -0.0525743 8.72189 0.26192Z"
-        fill="#7E8A93"
+        fill="#303037"
       />
     </svg>
   );
@@ -155,7 +155,7 @@ export const ModalClose = (props: any) => {
     >
       <path
         d="M5.99973 5.10533L1.07987 0.185461C0.960569 0.0702397 0.800789 0.00648358 0.63494 0.00792476C0.469091 0.00936594 0.310444 0.0758891 0.193166 0.193166C0.0758891 0.310444 0.00936596 0.469092 0.00792478 0.63494C0.0064836 0.800789 0.0702397 0.960569 0.185461 1.07987L5.10469 5.99973L0.185461 10.9196C0.126692 10.9783 0.0800658 11.0481 0.0482443 11.1248C0.0164228 11.2015 2.94086e-05 11.2838 3.95314e-08 11.3669C-2.93295e-05 11.45 0.0163059 11.5322 0.0480731 11.609C0.0798403 11.6858 0.126417 11.7555 0.185145 11.8143C0.243872 11.8731 0.3136 11.9197 0.390347 11.9515C0.467094 11.9834 0.549358 11.9997 0.63244 11.9998C0.715523 11.9998 0.797798 11.9835 0.874567 11.9517C0.951337 11.9199 1.0211 11.8734 1.07987 11.8146L5.99973 6.89414L10.9196 11.8146C10.9784 11.8734 11.0481 11.92 11.1249 11.9518C11.2017 11.9836 11.284 12 11.3671 12C11.4502 12 11.5325 11.9836 11.6093 11.9518C11.6861 11.92 11.7559 11.8734 11.8146 11.8146C11.8734 11.7559 11.92 11.6861 11.9518 11.6093C11.9836 11.5325 12 11.4502 12 11.3671C12 11.284 11.9836 11.2017 11.9518 11.1249C11.92 11.0481 11.8734 10.9784 11.8146 10.9196L6.89414 5.99973L11.8146 1.07987C11.9332 0.961177 11.9998 0.800233 11.9998 0.63244C11.9997 0.464648 11.933 0.30375 11.8143 0.185145C11.6956 0.0665393 11.5347 -5.92694e-05 11.3669 3.95789e-08C11.1991 5.93485e-05 11.0382 0.0667717 10.9196 0.185461L5.99973 5.10469V5.10533Z"
-        fill={fillColor || "#7E8A93"}
+        fill={fillColor || "#303037"}
       />
     </svg>
   );

diff --git a/components/SelectToken/svg.tsx b/components/SelectToken/svg.tsx
@@ -8,7 +8,7 @@ export function CheckedIcon(props) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M1 3.94737L6.05263 9L14.0526 1" stroke="#D2FF3A" strokeWidth="2" />
+      <path d="M1 3.94737L6.05263 9L14.0526 1" stroke="#00F7A5" strokeWidth="2" />
     </svg>
   );
 }
diff --git a/components/SemiCircleProgressBar/SemiCircleProgressBar.tsx b/components/SemiCircleProgressBar/SemiCircleProgressBar.tsx
@@ -104,9 +104,9 @@ const StyledWrapper = styled.div`
       height: 240px;
       border-radius: 50%;
       box-sizing: border-box;
-      border: 10px solid #2e304b; /* half gray, */
-      border-bottom-color: #d2ff3a; /* half azure */
-      border-right-color: #d2ff3a;
+      border: 10px solid #202026; /* half gray, */
+      border-bottom-color: #00f7a5; /* half azure */
+      border-right-color: #00f7a5;
       opacity: 1;
 
       &.bar-warning {

diff --git a/components/ToolTip/index.tsx b/components/ToolTip/index.tsx
@@ -54,10 +54,10 @@ export default function ToolTip({
 }
 const TipWrap = styled.div`
   #my-tooltip.react-tooltip {
-    border: 1px solid #4f5178;
+    border: 1px solid #303037;
     border-radius: 6px;
     padding: 6px 12px;
-    background-color: #2e304b !important;
+    background-color: #202026 !important;
     max-width: 300px;
     z-index: 50;
     font-size: 12px;

diff --git a/components/common/html-tooltip.tsx b/components/common/html-tooltip.tsx
@@ -4,10 +4,10 @@ const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip placement={props.placement || "top-start"} {...props} classes={{ popper: className }} />
 ))(({ theme }) => ({
   [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: "#2E304B",
+    backgroundColor: "#202026",
     boxShadow: "0px 0px 10px 4px #00000026",
     color: "#C0C4E9",
-    border: "1px solid #4F5178",
+    border: "1px solid #303037",
     borderRadius: "6px",
     padding: "8px 8px",
     fontSize: "12px",