diff --git a/components/Assets/index.tsx b/components/Assets/index.tsx index 8d8a89e1..45aa4de1 100644 --- 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)" > - - + + diff --git a/components/ContentBox/ContentBox.tsx b/components/ContentBox/ContentBox.tsx index 87240d9c..f9a30da1 100644 --- a/components/ContentBox/ContentBox.tsx +++ b/components/ContentBox/ContentBox.tsx @@ -28,8 +28,8 @@ 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"}; `; @@ -37,8 +37,8 @@ const StyledTipBox = styled.div<{ padding?: string }>` 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 index f0f9f5b8..1716417b 100644 --- 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 index 8f75cc4d..1d7de9d5 100644 --- 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 index 7ff23f6e..6ad646d0 100644 --- 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 index 8ae1a153..a2440a9e 100644 --- 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 index 8f1de2fa..ea349e21 100644 --- 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" > - + - + ); } diff --git a/components/Header/WalletButton.tsx b/components/Header/WalletButton.tsx index b0ecddbc..69cf976c 100644 --- 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 ? : <>Claim} + {loading ? : <>Claim} ); }; @@ -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 index e3afba00..3e821bd0 100644 --- 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 ( @@ -126,8 +126,18 @@ const Header = () => { window.open("https://burrow.finance/"); }} > - - + {/* */} + {/* */} + { + window.open("https://www.ref.finance"); + }} + /> {mainMenuList.map((item) => { diff --git a/components/Header/stats/liquidity.tsx b/components/Header/stats/liquidity.tsx index 9b6acd9b..13a328f4 100644 --- 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 index 53abb76e..9a2672b7 100644 --- 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 index 799076e7..05cd878c 100644 --- a/components/Header/svg.tsx +++ b/components/Header/svg.tsx @@ -286,9 +286,9 @@ export function ArrowRightTopIcon(props) { export function RefreshIcon(props) { return ( - + diff --git a/components/Icons/Icons.tsx b/components/Icons/Icons.tsx index 1fc792fc..1e587c9b 100644 --- a/components/Icons/Icons.tsx +++ b/components/Icons/Icons.tsx @@ -415,18 +415,18 @@ export const Mascot = ({ height = 148, width = 159 }) => ( ( /> @@ -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" /> { if (action === "Borrow" || action === "Repay") return ( - {loading ? : action} + {loading ? : action} ); return ( - {loading ? : action === "Adjust" ? "Confirm" : action} + {loading ? : action === "Adjust" ? "Confirm" : action} ); }; diff --git a/components/Modal/style.ts b/components/Modal/style.ts index 2b65af3c..ca3a5b3a 100644 --- 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 index 01965007..9aeeaa25 100644 --- 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 ? : <>Claim & Join} + {loading ? : <>Claim & Join} ); }; diff --git a/components/Rpc/component/Common.tsx b/components/Rpc/component/Common.tsx index 348cd324..77a9cf4e 100644 --- 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 index e8fb7454..4836e24d 100644 --- 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" /> ); @@ -155,7 +155,7 @@ export const ModalClose = (props: any) => { > ); diff --git a/components/SelectToken/svg.tsx b/components/SelectToken/svg.tsx index 9bf7e86f..f96e4cdd 100644 --- 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" > - + ); } diff --git a/components/SemiCircleProgressBar/SemiCircleProgressBar.tsx b/components/SemiCircleProgressBar/SemiCircleProgressBar.tsx index a920e176..5b3dd0e2 100644 --- 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 index 0455d327..86304128 100644 --- 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 index a935d1a1..765f660a 100644 --- a/components/common/html-tooltip.tsx +++ b/components/common/html-tooltip.tsx @@ -4,10 +4,10 @@ const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => ( ))(({ 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", diff --git a/components/popup/components/StakeCarousel.tsx b/components/popup/components/StakeCarousel.tsx index d1bfcc55..9f31790f 100644 --- a/components/popup/components/StakeCarousel.tsx +++ b/components/popup/components/StakeCarousel.tsx @@ -64,7 +64,7 @@ function BoxSvg() { > - + @@ -112,7 +112,7 @@ function BoxSvg() { rx="52.2029" ry="59.1632" transform="rotate(-110.842 105.575 147.662)" - fill="#D2FF3A" + fill="#00F7A5" stroke="#23253A" strokeWidth="2" /> @@ -167,7 +167,7 @@ function BoxMobileSvg() { > - + @@ -215,7 +215,7 @@ function BoxMobileSvg() { rx="52.2029" ry="59.1632" transform="rotate(-110.842 105.575 137.662)" - fill="#D2FF3A" + fill="#00F7A5" stroke="#23253A" strokeWidth="2" /> diff --git a/components/popup/components/SupplyCarousel.tsx b/components/popup/components/SupplyCarousel.tsx index a738ad75..de57ddee 100644 --- a/components/popup/components/SupplyCarousel.tsx +++ b/components/popup/components/SupplyCarousel.tsx @@ -131,7 +131,7 @@ const ClaimButton = (props) => { {...props} classInfo="float-right transform translate-y-2 text-dark-200 bg-primary cursor-pointer" > - {loading ? : <>Claim & Join} + {loading ? : <>Claim & Join} ); }; @@ -155,12 +155,12 @@ function BoxSvg() { /> */} */} diff --git a/components/popup/index.tsx b/components/popup/index.tsx index 0393139a..497f7909 100644 --- a/components/popup/index.tsx +++ b/components/popup/index.tsx @@ -110,7 +110,7 @@ function CloseButton(props: any) { fill="none" xmlns="http://www.w3.org/2000/svg" > - + setProgress(0)} diff --git a/pages/declaration.tsx b/pages/declaration.tsx index ee1e19d2..8ca0090b 100644 --- a/pages/declaration.tsx +++ b/pages/declaration.tsx @@ -26,12 +26,12 @@ const StyledDocument = styled.div` color: "#C0C4E9"; h1 { font-size: 26px; - color: #d2ff3a; + color: #00f7a5; font-family: "work-sans-bold"; } h2 { font-size: 22px; - color: #d2ff3a; + color: #00f7a5; font-family: "work-sans-bold"; } h3 { diff --git a/public/Rhea-logo.png b/public/Rhea-logo.png new file mode 100644 index 00000000..81c24fd3 Binary files /dev/null and b/public/Rhea-logo.png differ diff --git a/public/brrr.svg b/public/brrr.svg index 617f6eff..2a42e59e 100644 --- a/public/brrr.svg +++ b/public/brrr.svg @@ -1,5 +1,5 @@ - + diff --git a/public/favicon.png b/public/favicon.png index baf1ddce..56ca29da 100644 Binary files a/public/favicon.png and b/public/favicon.png differ diff --git a/public/logo.svg b/public/logo.svg index 8073aebd..3d8c3036 100644 --- a/public/logo.svg +++ b/public/logo.svg @@ -1,5 +1,24 @@ - - - - + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/svg/Group 24677.svg b/public/svg/Group 24677.svg index 5e4f9c43..799607b4 100644 --- a/public/svg/Group 24677.svg +++ b/public/svg/Group 24677.svg @@ -4,12 +4,12 @@ - + - - + + diff --git a/public/svg/Group 24791.svg b/public/svg/Group 24791.svg index ca595815..35f89b58 100644 --- a/public/svg/Group 24791.svg +++ b/public/svg/Group 24791.svg @@ -1,15 +1,15 @@ - + - + - - + + diff --git a/public/svg/Group 74.svg b/public/svg/Group 74.svg index 6210bcaf..b9b53164 100644 --- a/public/svg/Group 74.svg +++ b/public/svg/Group 74.svg @@ -1,27 +1,27 @@ - - + + - - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - + + + + + - - + + diff --git a/screens/Dashboard/dashboardOverview.tsx b/screens/Dashboard/dashboardOverview.tsx index fabc3185..a28b69ba 100644 --- a/screens/Dashboard/dashboardOverview.tsx +++ b/screens/Dashboard/dashboardOverview.tsx @@ -248,7 +248,7 @@ const DashboardOverview = ({ suppliedRows, borrowedRows }) => { title={{ text: tokensName }} wrapStyle={{ background: "none", - border: "1px solid #2E304B", + border: "1px solid #202026", padding: "7px 8px", }} titleWrapClass="w-[158px] rounded-[4px] md:rounded-[4px]" @@ -351,7 +351,7 @@ const ClaimButton = (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-full h-8 mt-1.5 " > - {loading ? : <>Claim} + {loading ? : <>Claim} ); }; diff --git a/screens/Dashboard/modalHistoryInfo.tsx b/screens/Dashboard/modalHistoryInfo.tsx index 3045a334..7a356c4e 100644 --- a/screens/Dashboard/modalHistoryInfo.tsx +++ b/screens/Dashboard/modalHistoryInfo.tsx @@ -63,7 +63,7 @@ const ModalHistoryInfo = ({ isOpen, onClose, tab }) => { >
handleTabChange(0)} active={tabIndex === 0} /> diff --git a/screens/Market/svg.tsx b/screens/Market/svg.tsx index 379686fa..923bf262 100644 --- a/screens/Market/svg.tsx +++ b/screens/Market/svg.tsx @@ -61,7 +61,7 @@ export function CheckIcon(props) { > ); diff --git a/screens/Staking/index.tsx b/screens/Staking/index.tsx index c90548e9..5450e990 100644 --- a/screens/Staking/index.tsx +++ b/screens/Staking/index.tsx @@ -81,7 +81,7 @@ const Staking = () => {
- +
{totalAmount > 0 ? totalAmount.toLocaleString() : 0}
BRRR
@@ -201,7 +201,7 @@ const StakingBox = ({
- + {logoIcon && (
{logoIcon} diff --git a/screens/Staking/modalStaking.tsx b/screens/Staking/modalStaking.tsx index df519ef9..34eb3437 100644 --- a/screens/Staking/modalStaking.tsx +++ b/screens/Staking/modalStaking.tsx @@ -129,7 +129,7 @@ const ModalStaking = ({ isOpen, onClose }) => { {total.toLocaleString()}
- + { } activeDot={} /> @@ -149,7 +149,7 @@ const CustomTooltip = ({ active, payload, defaultPayload }: any) => {
@@ -173,7 +173,7 @@ const RenderTickY = (tickProps: any) => { const { value, offset } = payload; return ( - + {value}% ); @@ -184,7 +184,7 @@ const RenderTick = (tickProps: any) => { const { value, offset } = payload; return ( - + {value}% ); diff --git a/screens/TokenDetail/svg.tsx b/screens/TokenDetail/svg.tsx index 51ca6ea5..0c76f3bc 100644 --- a/screens/TokenDetail/svg.tsx +++ b/screens/TokenDetail/svg.tsx @@ -24,9 +24,9 @@ export function SuppliedEmptyIcon() { > - + - + ); @@ -67,7 +67,7 @@ export function BorrowedEmptyIcon() { d="M76.0898 21.3842C75.7869 21.846 75.9158 22.4659 76.3776 22.7688C76.8394 23.0717 77.4593 22.9429 77.7622 22.4811L76.0898 21.3842ZM82.2495 0.292806C81.859 -0.0977198 81.2259 -0.0977195 80.8353 0.292803L74.4714 6.65676C74.0808 7.04728 74.0808 7.68045 74.4714 8.07097C74.8619 8.46149 75.4951 8.4615 75.8856 8.07097L81.5424 2.41412L87.1993 8.07099C87.5898 8.46151 88.223 8.46151 88.6135 8.07099C89.004 7.68046 89.004 7.0473 88.6135 6.65677L82.2495 0.292806ZM77.7622 22.4811C83.456 13.8003 82.5424 7.36073 82.5424 0.999913L80.5424 0.99991C80.5424 7.5045 81.3968 13.2931 76.0898 21.3842L77.7622 22.4811Z" fill="#FF6BA9" /> - + @@ -374,8 +374,8 @@ export function YellowLinearGradient(props) { y2="124.871" gradientUnits="userSpaceOnUse" > - - + + @@ -409,7 +409,7 @@ export function YellowBallIcon(props) { xmlns="http://www.w3.org/2000/svg" > - + - - + + @@ -130,7 +130,7 @@ const TokenBorrowSuppliesChart = ({ activeDot={} type="monotone" dataKey={yKey} - stroke={isBorrow ? "#FF6BA9" : "#d2ff3a"} + stroke={isBorrow ? "#FF6BA9" : "#00F7A5"} fill={isBorrow ? "url(#colorPink)" : "url(#colorYellow)"} /> @@ -171,7 +171,7 @@ const RenderTickY = (tickProps: any) => { const { value, offset } = payload; return ( - + {value}% ); @@ -183,7 +183,7 @@ const RenderTick = (tickProps: any) => { if (index % 2 === 0) { return ( - + {value} ); diff --git a/styles/global.css b/styles/global.css index 52fcf37e..852d3631 100644 --- a/styles/global.css +++ b/styles/global.css @@ -18,12 +18,12 @@ body { padding: 0; height: 100%; pointer-events: all !important; - background: #14162b; + background: #16161b; color: #fff; } #__next { - background: #14162b; + background: #16161b; height: 100%; } @@ -214,8 +214,8 @@ body, outline: 0; border-radius: 6px; - border: 1px solid #4f5178; - background: #2e304b; + border: 1px solid #303037; + background: #202026; box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.15); } @@ -471,7 +471,7 @@ body, } } .nws-modal-wrapper .nws-modal .modal-left .modal-left-title { - background: #2e304b; + background: #202026; } input { margin: 0; @@ -502,13 +502,13 @@ input[type="range"] { display: block; appearance: none; -webkit-appearance: none; - background: #282a42; + background: #131317; height: 10px; border-radius: 6px; border: 1px solid #40435a; margin: 0 auto; outline: none; - background-image: linear-gradient(#d2ff3a, #d2ff3a); + background-image: linear-gradient(#00f7a5, #00f7a5); background-size: 0% 100%; background-repeat: no-repeat; } @@ -520,7 +520,7 @@ input[type="range"] { .redInput[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; - background-color: #d2ff3a; + background-color: #00f7a5; width: 20px; height: 20px; border-radius: 50%; @@ -558,7 +558,7 @@ input[type="range"]::-webkit-slider-runnable-track { align-items: center; border-radius: 6px; border: 1px solid #40435a; - background: #282a42; + background: #131317; padding: 14px 14px; } @@ -658,30 +658,30 @@ input[type="range"]::-webkit-slider-runnable-track { } .MuiModal-root .css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop { - background-color: #14162b; + background-color: #16161b; opacity: 0.8 !important; } ::-webkit-scrollbar { - width: 4px; + width: 2px; border-radius: 2px; } ::-webkit-scrollbar-thumb { - background: #626486; + background: #5f5f5f; border-radius: 2px; } :root { --wallet-selector-backdrop-bg: rgba(20, 22, 43, 0.8); - --wallet-selector-content-bg: #2e304b; + --wallet-selector-content-bg: #202026; --wallet-selector-heading-color: #ffffff; --wallet-selector-text-color: #c0c4e9; --gradient-dark-icon: #ffffff; --wallet-selector-close-button-bg-color: transparent; --wallet-selector-sidebar-border-color: rgba(79, 81, 120, 0.5); --wallet-selector-selected-wallet-bg: #3f4162; - --wallet-selector-mobile-bottom-section: #2e304b; + --wallet-selector-mobile-bottom-section: #202026; } #near-wallet-selector-modal { @@ -692,12 +692,12 @@ input[type="range"]::-webkit-slider-runnable-track { /* */ .nws-modal-wrapper .nws-modal { - border: 1px solid #4f5178; + border: 1px solid #303037; } .nws-modal-wrapper .nws-modal .modal-left::-webkit-scrollbar, options-list::-webkit-scrollbar { - width: 4px; + width: 1px; border-radius: 2px; } @@ -707,13 +707,13 @@ options-list::-webkit-scrollbar { } .wallet-options-wrapper .options-list::-webkit-scrollbar-thumb { - background: #626486; + background: #5f5f5f; border-radius: 2px; } .nws-modal-wrapper .nws-modal .nws-modal-body button.middleButton { color: #000; - background-color: #d2ff3a; + background-color: #00f7a5; border: none; } @@ -767,7 +767,7 @@ options-list::-webkit-scrollbar { white-space: nowrap; } .nws-modal-wrapper .nws-modal .modal-right::-webkit-scrollbar { - width: 2px; + width: 1px; } .noselect { @@ -789,7 +789,7 @@ options-list::-webkit-scrollbar { height: 10px; top: 6px; border-radius: 6px; - background-color: #282a42; + background-color: #131317; border: 1px solid #40435a; } @@ -801,14 +801,14 @@ options-list::-webkit-scrollbar { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); border: 3px solid #343649; outline: none; - background: #d2ff3a; + background: #00f7a5; } .month-slider .track-0 { height: 8px; top: 7px; border-radius: 6px; - background-color: #d2ff3a; + background-color: #00f7a5; } /* slider end*/ .radio-custom { @@ -818,13 +818,13 @@ options-list::-webkit-scrollbar { -webkit-appearance: none; outline: none; cursor: pointer; - border: 1px solid #626486; + border: 1px solid #5f5f5f; border-radius: 50%; - background-color: #23253a; + background-color: #202026; } .radio-custom:checked { - border-color: #d2ff3a; + border-color: #00f7a5; } .radio-custom:checked::after { @@ -836,14 +836,14 @@ options-list::-webkit-scrollbar { width: 10px; height: 10px; border-radius: 50%; - background: #d2ff3a; + background: #00f7a5; } .health-tab { border-radius: 4px; } .health-tab:hover, .health-tab-active { - background: #2e304b; + background: #202026; } .health-tab .arrow-left { @@ -853,7 +853,7 @@ options-list::-webkit-scrollbar { height: 0; border-top: 16px solid transparent; border-bottom: 15px solid transparent; - border-right: 10px solid #2e304b; + border-right: 10px solid #202026; } .loading-dots { diff --git a/tailwind.config.js b/tailwind.config.js index 1b85e600..75406d1d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -31,7 +31,7 @@ module.exports = { }, backgroundImage: () => ({ linear_gradient_yellow: - "linear-gradient(123.3deg, #D2FF3A 45.55%, rgba(210, 255, 58, 0) 81.79%)", + "linear-gradient(123.3deg, #00F7A5 45.55%, rgba(210, 255, 58, 0) 81.79%)", linear_gradient_dark: "linear-gradient(180deg, #525365 0%, #2E3043 100%)", }), gridTemplateColumns: { @@ -48,7 +48,7 @@ module.exports = { sm: "6px", }, colors: { - primary: "#D2FF3A", + primary: "#00F7A5", claim: "#7C89FF", warning: "#FFC34F", danger: "#FF68A7", @@ -61,17 +61,17 @@ module.exports = { 100: "#16F195", }, dark: { - 50: "#31344D", - 100: "#2E304B", + 50: "#303037", + 100: "#202026", 150: "#404263", - 200: "#14162B", - 250: "#363955", - 300: "#4F5178", + 200: "#16161B", + 250: "#202026", + 300: "#303037", 350: "#324451", 400: "#6D708D", - 450: "#7E8A93", + 450: "#303037", 500: "#40435A", - 600: "#282A42", + 600: "#16161B", 700: "#393C58", 800: "#979ABE", 900: "#3F4162", @@ -96,17 +96,18 @@ module.exports = { 300: "#C0C4E9", 380: "#6D708D", 400: "#626486", - 500: "#565874", + 500: "#25252C", 700: "#494D69", - 800: "#23253A", + 800: "#202026", 900: "#0f101c", 950: "#787B93", 1000: "#3A3A3A", 1050: "#ECECEC", 1100: "#2F324B", 1200: "#D8DCFF", + 1300: "#565874", }, - toolTipBoxBorderColor: "#D2FF3A", + toolTipBoxBorderColor: "#00F7A5", toolTipBoxBgColor: "rgba(35,37,58,0.8)", }, }, diff --git a/utils/theme.ts b/utils/theme.ts index 80cd3b7d..0ca09393 100644 --- a/utils/theme.ts +++ b/utils/theme.ts @@ -8,7 +8,7 @@ const palette = { light: { mode: "light", primary: { - main: "#D2FF3A", + main: "#00F7A5", light: "#D5EFE6", }, secondary: { @@ -20,13 +20,13 @@ const palette = { }, background: { default: "#F8F9FF", - paper: "#2E304B", + paper: "#202026", }, }, dark: { mode: "light", primary: { - main: "#D2FF3A", + main: "#00F7A5", light: "#000", }, secondary: { @@ -38,7 +38,7 @@ const palette = { }, background: { default: "#1A3632", - paper: "#2E304B", + paper: "#202026", }, }, }; @@ -66,8 +66,8 @@ declare module "@mui/material/styles" { const custom = { light: { - headerBackground: "#14162B", - pageBackground: "#14162B", + headerBackground: "#16161B", + pageBackground: "#16161B", footerText: "#C0C4E9", footerIcon: "#000", text: "#000", @@ -82,13 +82,13 @@ const custom = { stakingCardBg: "#fff", }, dark: { - headerBackground: "#14162B", - pageBackground: "#14162B", + headerBackground: "#16161B", + pageBackground: "#16161B", footerText: "#C0C4E9", footerIcon: "#7f83a0", text: "#fff", textStaking: "#fff", - background: "#14162B", + background: "#16161B", backgroundStaking: "#31344E", notConnectedBg: "rgba(0,0,0,0.85)", scrollbarBg: "rgba(0,0,0,0.5)",