feat: exchange card visual changes

bosonprotocol · Dec 20, 2024 · f1a0306 · f1a0306
1 parent 8db8087
commit f1a0306
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/packages/react-kit/src/components/exchangeCard/ExchangeCard.styles.ts b/packages/react-kit/src/components/exchangeCard/ExchangeCard.styles.ts
@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { theme } from "../../theme";
 import { ExchangeCardStatus } from "./types";
 import { ProductCardLabelWrapper } from "../productCard/ProductCard.styles";
+import { Grid } from "../ui/Grid";
 
 const topSpace = "1rem";
 const sideSpace = "1rem";
@@ -32,7 +33,7 @@ export const ExchangeCreatorName = styled.div`
   font-weight: 600;
   font-size: 0.75rem;
   line-height: 150%;
-  color: ${({ theme }) => theme?.colors?.light.accent};
+  color: ${({ theme }) => theme?.colors?.light.darkGrey};
   flex: none;
   order: 1;
   flex-grow: 0;
@@ -48,12 +49,7 @@ export const ExchangeTitle = styled.div`
   word-break: break-word;
 `;
 
-export const ExchangeCardPriceWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-self: stretch;
-  max-width: 50%;
-  min-width: 44%;
+export const ExchangeCardPriceWrapper = styled(Grid)`
   span {
     padding-left: 0.5rem;
   }
@@ -89,6 +85,7 @@ export const ExchangeCardBottomContent = styled.div`
   box-sizing: border-box;
   align-items: flex-start;
   border-top: 2px solid ${theme.colors.light.border};
+  flex-direction: column;
 `;
 
 export const ExchangeCardWrapper = styled.div<{

diff --git a/packages/react-kit/src/components/exchangeCard/ExchangeCard.tsx b/packages/react-kit/src/components/exchangeCard/ExchangeCard.tsx
@@ -30,6 +30,10 @@ import {
   RedeemButtonWrapper
 } from "./ExchangeCard.styles";
 import { ExchangeCardStatus } from "./types";
+import {
+  ProductCardTitle,
+  ProductCardTitleWrapper
+} from "../productCard/ProductCard.styles";
 export type { ExchangeCardStatus } from "./types";
 interface Base {
   id: string;
@@ -187,24 +191,28 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
                 onAvatarNameClick?.();
               }}
             >
-              <ExchangeCreatorAvatar>
-                <img src={avatar} alt="avatar" />
-              </ExchangeCreatorAvatar>
+              <ProductCardTitleWrapper>
+                <ProductCardTitle fontSize={"0.75rem"} fontWeight={"600"}>
+                  {title}
+                </ProductCardTitle>
+              </ProductCardTitleWrapper>
               <ExchangeCreatorName data-avatarname="exchange-card">
                 {avatarName}
               </ExchangeCreatorName>
             </ExchangeCreator>
-            <ExchangeTitle>{title}</ExchangeTitle>
           </ExchangeCarData>
           <ExchangeCardPriceWrapper>
-            <ExchangeCardPrice>Price</ExchangeCardPrice>
             <CurrencyDisplay
               value={price}
               currency={currency}
+              fontSize={"0.875rem"}
+              iconSize={16}
+              gap={"0.3125rem"}
               style={{
                 wordBreak: "break-all",
-                alignItems: "flex-start",
-                justifyContent: "flex-end"
+                alignItems: "center",
+                justifyContent: "center",
+                paddingTop: "0.25rem"
               }}
             />
           </ExchangeCardPriceWrapper>