fix activity designs (#2066)

* fix activity designs * fix wrong import for icon * only apply bg color to odd element --------- Co-authored-by: Michael Collins <[email protected]>
KlimaDAO · Jan 5, 2024 · 47cdd82 · 47cdd82 · vercel · Jan 5, 2024
1 parent daf9664
commit 47cdd82
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 13 deletions.
diff --git a/carbonmark/components/Activities/Activity.tsx b/carbonmark/components/Activities/Activity.tsx
@@ -1,5 +1,6 @@
 import { useWeb3 } from "@klimadao/lib/utils";
 import { t } from "@lingui/macro";
+import EastIcon from "@mui/icons-material/East";
 import { Text } from "components/Text";
 import { createProjectLink } from "lib/createUrls";
 import { formatToPrice, formatToTonnes } from "lib/formatNumbers";
@@ -11,6 +12,7 @@ import {
 } from "lib/types/carbonmark.types";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { ReactNode } from "react";
 import { ActivityActions } from "./Activities.constants";
 import * as styles from "./styles";
 interface Props {
@@ -28,7 +30,7 @@ export const Activity = (props: Props) => {
   const { locale } = useRouter();
   let firstActor, secondActor;
   let amountA, amountB;
-  let transactionString = t`at`;
+  let transactionString: string | ReactNode = t`at`;
 
   const isPurchaseActivity = props.activity.activityType === "Purchase";
   const isSaleActivity = props.activity.activityType === "Sold";
@@ -77,16 +79,17 @@ export const Activity = (props: Props) => {
   if (isUpdateQuantity) {
     amountA =
       props.activity.previousAmount &&
-      formatToTonnes(props.activity.previousAmount);
-    amountB = props.activity.amount && formatToTonnes(props.activity.amount);
+      `${formatToTonnes(props.activity.previousAmount)}t`;
+    amountB =
+      props.activity.amount && `${formatToTonnes(props.activity.amount)}t`;
   }
 
   /** Determine the conjunction between the labels */
   if (isPurchaseActivity || isSaleActivity) {
     transactionString = t`for`;
   }
   if (isUpdatePrice || isUpdateQuantity) {
-    transactionString = "->";
+    transactionString = <EastIcon />;
   }
 
   return (
@@ -140,9 +143,10 @@ export const Activity = (props: Props) => {
       {!!amountA &&
         !!amountB &&
         props.activity.activityType != "DeletedListing" && (
-          <Text t="body1">
-            <span className="number">{`${amountA}`}</span> {transactionString}
-            <span className="number">{`${amountB}`}</span>
+          <Text t="body1" className={styles.activitySummary}>
+            <span className={styles.amount}>{`${amountA}`}</span>
+            <span className={styles.action}>{transactionString}</span>
+            <span className={styles.amount}>{`${amountB}`}</span>
           </Text>
         )}
     </div>

diff --git a/carbonmark/components/Activities/styles.ts b/carbonmark/components/Activities/styles.ts
@@ -1,18 +1,17 @@
 import { css } from "@emotion/css";
 
 export const activity = css`
-  border-left: 2px solid var(--surface-04);
-  padding: 1.2rem;
+  border-left: 2px solid var(--manatee);
+  padding: 0.6rem 1.4rem;
   display: grid;
   gap: 0.8rem;
 
-  .number {
-    padding: 0.4rem 0.8rem;
-    background-color: var(--surface-02);
+  :nth-child(odd) {
+    background-color: #fafaff;
   }
 
   .account {
-    color: var(--klima-blue);
+    color: var(--bright-blue);
     margin-right: 0.4rem;
   }
 `;
@@ -25,3 +24,26 @@ export const link = css`
     color: blue;
   }
 `;
+
+export const action = css`
+  color: var(--font-03);
+  display: flex;
+  align-items: center;
+
+  svg {
+    width: 2rem;
+    height: 2rem;
+  }
+`;
+
+export const activitySummary = css`
+  display: flex;
+  gap: 0.8rem;
+`;
+
+export const amount = css`
+  padding: 0.4rem 0.8rem;
+  border: 0.1rem solid var(--font-03);
+  border-radius: 0.4rem;
+  background-color: var(--surface-03);
+`;