chore: rfq footer style fixes

AdaptiveConsulting · Dec 3, 2024 · 94a084a · 94a084a
1 parent 0b301af
commit 94a084a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 19 deletions.
diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardFooter.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardFooter.tsx
@@ -32,7 +32,7 @@ export const LiveFooterContent = ({
 }) => (
   <>
     <CreditRfqTimer start={start} end={end} isSellSideView={false} />
-    <Button variant="primary" size="sm" onClick={() => onCancelRfq(rfqId)}>
+    <Button variant="primary" size="xxs" onClick={() => onCancelRfq(rfqId)}>
       Cancel
     </Button>
   </>
@@ -82,7 +82,12 @@ export const TerminatedFooterContent = ({
 }) => (
   <CloseRfqButton onClick={() => removeRfqs([rfqId])}>
     <BinIcon />
-    <Typography variant="Text xxs/Regular">{rfqStateToLabel(state)}</Typography>
+    <Typography
+      variant="Text xxs/Regular"
+      color="Colors/Text/text-secondary (700)"
+    >
+      {rfqStateToLabel(state)}
+    </Typography>
   </CloseRfqButton>
 )
 

diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/styled.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/styled.tsx
@@ -107,10 +107,12 @@ export const ViewTradeButton = styled(FooterButton)`
 export const CloseRfqButton = styled(FooterButton)`
   display: flex;
   align-items: center;
-
+  padding: ${({ theme }) => theme.newTheme.spacing.xs}
+    ${({ theme }) => theme.newTheme.spacing.md};
+  border-radius: ${({ theme }) => theme.newTheme.radius.xs};
   svg {
     fill: ${({ theme }) =>
-      theme.newTheme.color["Colors/Text/text-brand-primary (900)"]};
+      theme.newTheme.color["Colors/Text/text-brand-tertiary (600)"]};
     margin-right: ${({ theme }) => theme.newTheme.spacing.md};
   }
 `
diff --git a/packages/client/src/client/App/Credit/common/CreditRfqTimer.tsx b/packages/client/src/client/App/Credit/common/CreditRfqTimer.tsx
@@ -1,24 +1,24 @@
 import { memo, useEffect, useLayoutEffect, useRef, useState } from "react"
 import styled, { css, keyframes } from "styled-components"
 
+import { Typography } from "@/client/components/Typography"
+
 export const TimerWrapper = styled.div`
   display: flex;
   align-items: center;
   flex: 0 0 16px;
   padding: 0 16px;
 `
 
-export const TimeLeft = styled.div<{ margin: "left" | "right" }>`
+export const TimeLeft = styled.div`
   color: ${({ theme }) => theme.textColor};
   font-size: 10px;
   opacity: 0.6;
   white-space: nowrap;
-  ${({ margin }) =>
-    margin === "left" ? "margin-left: 0.5rem" : "margin-right: 0.5rem"};
 `
 
 export const ProgressBarWrapper = styled.div`
-  background-color: ${({ theme }) => theme.core.darkBackground};
+  margin: 0 ${({ theme }) => theme.newTheme.spacing.sm};
   height: 6px;
   width: 100%;
   border-radius: 3px;
@@ -46,7 +46,8 @@ export const ProgressBar = memo(styled.div<{
   end: number
   transitionTime: number
 }>`
-  background-color: ${({ theme }) => theme.accents.primary.base};
+  background-color: ${({ theme }) =>
+    theme.newTheme.color["Colors/Foreground/fg-brand-primary (600)"]};
   border-radius: 3px;
   height: 100%;
   animation: ${progressAnimation};
@@ -67,12 +68,7 @@ const TimeProgress = ({ start, end }: { start: number; end: number }) => {
   )
 }
 
-const CountWrapper = styled.span<{ grid?: boolean }>`
-  color: ${({ grid, theme }) =>
-    grid ? theme.accents.primary.base : "inherit"};
-`
-
-export const SecsTimer = ({ end, grid }: { end: number; grid?: boolean }) => {
+export const SecsTimer = ({ end }: { end: number }) => {
   const [timeLeft, setTimeLeft] = useState(() =>
     Math.round((end - Date.now()) / 1000),
   )
@@ -90,9 +86,12 @@ export const SecsTimer = ({ end, grid }: { end: number; grid?: boolean }) => {
   const timeLeftSecs = timeLeft % 60
 
   return (
-    <CountWrapper grid={grid}>
+    <Typography
+      variant="Text xs/Regular"
+      color="Colors/Text/text-primary (900)"
+    >
       {timeLeftMins}m {timeLeftSecs}s
-    </CountWrapper>
+    </Typography>
   )
 }
 
@@ -121,15 +120,15 @@ export const CreditRfqTimer = ({
   return timerEnded ? null : (
     <>
       {!isSellSideView && (
-        <TimeLeft margin={"right"}>
+        <TimeLeft>
           <SecsTimer end={end} />
         </TimeLeft>
       )}
       <ProgressBarWrapper>
         <TimeProgress start={start} end={end} />
       </ProgressBarWrapper>
       {isSellSideView && (
-        <TimeLeft margin={"left"}>
+        <TimeLeft>
           <SecsTimer end={end} />
         </TimeLeft>
       )}