Skip to content

Commit

Permalink
refactor: use COLORS constant
Browse files Browse the repository at this point in the history
  • Loading branch information
dohaki committed Nov 1, 2023
1 parent 84362cb commit 95cb1ba
Showing 1 changed file with 18 additions and 19 deletions.
37 changes: 18 additions & 19 deletions src/views/DepositStatus/components/DepositStatusUpperCard.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from "react";
import styled from "@emotion/styled";
import { keyframes } from "@emotion/react";

Expand All @@ -13,17 +14,15 @@ import { ReactComponent as ZkSyncGrayscaleLogo } from "assets/grayscale-logos/zk
import { ReactComponent as BaseGrayscaleLogo } from "assets/grayscale-logos/base.svg";
import { Text, Badge } from "components";

import { ChainId, QUERIESV2 } from "utils";
import { ChainId, QUERIESV2, COLORS } from "utils";

import { useElapsedSeconds } from "../hooks/useElapsedSeconds";
import { useDepositTracking } from "../hooks/useDepositTracking";
import { DepositTimesCard } from "./DepositTimesCard";
import { ElapsedTime } from "./ElapsedTime";
import { DepositStatus, FromBridgePagePayload } from "../types";

const grayscaleLogos: {
[key: number]: JSX.Element;
} = {
const grayscaleLogos: Record<number, React.ReactNode> = {
[ChainId.ARBITRUM]: <ArbitrumGrayscaleLogo />,
[ChainId.POLYGON]: <PolygonGrayscaleLogo />,
[ChainId.OPTIMISM]: <OptimismGrayscaleLogo />,
Expand Down Expand Up @@ -155,8 +154,8 @@ const Wrapper = styled.div`
gap: 30px;
background-image: url(${BgBanner});
background-color: #2d2e33;
border-bottom: 1px solid #3e4047;
background-color: ${COLORS["black-800"]};
border-bottom: 1px solid ${COLORS["grey-600"]};
width: calc(100% + 48px);
margin: 0 -24px;
Expand Down Expand Up @@ -250,18 +249,18 @@ const AnimatedDividerFromChain = styled(AnimatedDivider)<{
status: DepositStatus;
}>`
background: ${({ status }) =>
status === "depositing" ? "#FFFFFF" : "#6cf9d8"};
status === "depositing" ? COLORS.white : COLORS.aqua};
`;

const AnimatedDividerToChain = styled(AnimatedDivider)<{
status: DepositStatus;
}>`
background: ${({ status }) =>
status === "depositing"
? "#9daab3"
? COLORS["grey-400"]
: status === "filling"
? "#FFFFFF"
: "#6cf9d8"};
? COLORS.white
: COLORS.aqua};
`;

const AnimatedLogoWrapper = styled.div`
Expand All @@ -274,7 +273,7 @@ const AnimatedLogoWrapper = styled.div`
width: 60px;
height: 60px;
background: #2d2e33;
background: ${COLORS["black-800"]};
border: 1px solid;
transition: border-color 0.5s ease-in-out;
Expand All @@ -293,18 +292,18 @@ const AnimatedLogoWrapperFromChain = styled(AnimatedLogoWrapper)<{
status: DepositStatus;
}>`
border-color: ${({ status }) =>
status === "depositing" ? "#FFFFFF" : "#6cf9d8"};
status === "depositing" ? COLORS.white : COLORS.aqua};
`;

const AnimatedLogoWrapperToChain = styled(AnimatedLogoWrapper)<{
status: DepositStatus;
}>`
border-color: ${({ status }) =>
status === "depositing"
? "#9daab3"
? COLORS["grey-400"]
: status === "filling"
? "#FFFFFF"
: "#6cf9d8"};
? COLORS.white
: COLORS.aqua};
`;

const AnimatedLogo = styled.div<{
Expand Down Expand Up @@ -340,7 +339,7 @@ const AnimatedLogoFromChain = styled(AnimatedLogo)<{ status: DepositStatus }>`
circle,
#path-to-animate {
fill: ${({ status }) =>
status === "depositing" ? "#FFFFFF" : "#6cf9d8"};
status === "depositing" ? "COLORS.white" : COLORS.aqua};
}
}
`;
Expand All @@ -352,10 +351,10 @@ const AnimatedLogoToChain = styled(AnimatedLogo)<{ status: DepositStatus }>`
#path-to-animate {
fill: ${({ status }) =>
status === "depositing"
? "#9daab3"
? COLORS["grey-400"]
: status === "filling"
? "#FFFFFF"
: "#6cf9d8"};
? COLORS.white
: COLORS.aqua};
}
}
`;

0 comments on commit 95cb1ba

Please sign in to comment.