refactor components for new branding

bleu · Jul 30, 2024 · 65c5563 · 65c5563
1 parent f08347e
commit 65c5563
Show file tree

Hide file tree

Showing 24 changed files with 89 additions and 94 deletions.
diff --git a/apps/cow-amm-deployer/src/app/layout.tsx b/apps/cow-amm-deployer/src/app/layout.tsx
@@ -20,33 +20,10 @@ export const metadata: Metadata = {
   },
 };
 
-const flechaS = localFont({
+const studioFeixenSans = localFont({
   src: [
     {
-      path: "../fonts/FlechaS-Medium.woff2",
-      weight: "500",
-      style: "normal",
-    },
-    {
-      path: "../fonts/FlechaS-MediumItalic.woff2",
-      weight: "500",
-      style: "italic",
-    },
-  ],
-  variable: "--font-family-serif",
-});
-
-const circularStd = localFont({
-  src: [
-    {
-      path: "../fonts/CircularStd-Book.woff2",
-      weight: "400",
-      style: "normal",
-    },
-    {
-      path: "../fonts/CircularStd-Medium.woff2",
-      weight: "500",
-      style: "normal",
+      path: "../fonts/Studio-Feixen-Sans.ttf",
     },
   ],
   variable: "--font-family-sans",
@@ -57,9 +34,8 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <html lang="en" className="h-full">
       <body
         className={cn(
-          flechaS.variable,
-          circularStd.variable,
-          "bg-background flex h-full flex-col font-sans font-normal text-foreground",
+          studioFeixenSans.variable,
+          "bg-[url(/assets/bg.png)] flex h-full flex-col font-sans font-normal text-white",
         )}
       >
         <RootLayout>{children}</RootLayout>

diff --git a/apps/cow-amm-deployer/src/app/manager/(components)/BalancerPriceInformation.tsx b/apps/cow-amm-deployer/src/app/manager/(components)/BalancerPriceInformation.tsx
@@ -15,7 +15,7 @@ export function BalancerPriceInformation({ cowAmm }: { cowAmm: ICowAmm }) {
   );
 
   return (
-    <div className="flex flex-row gap-x-1 items-center hover:text-foreground/90">
+    <div className="flex flex-row gap-x-1 items-center">
       <span>Using price information from Balancer V2</span>
       {priceOracleLink && (
         <Link href={priceOracleLink} target="_blank">

diff --git a/apps/cow-amm-deployer/src/app/manager/(components)/ChainlinkPriceInformation.tsx b/apps/cow-amm-deployer/src/app/manager/(components)/ChainlinkPriceInformation.tsx
@@ -32,13 +32,13 @@ export function ChainlinkPriceInformation({ cowAmm }: { cowAmm: ICowAmm }) {
     fetchPriceFeedLinks();
   }, []);
   return (
-    <div className="flex flex-row gap-x-1 items-start hover:text-foreground/90">
+    <div className="flex flex-row gap-x-1 items-start">
       <span>Using price information from Chainlink</span>
       {priceFeed0Link && (
         <Link
           href={priceFeed0Link}
           target="_blank"
-          className="text-primary hover:text-primary/80 text-xs"
+          className="text-secondary hover:text-secondary/80 text-xs"
         >
           1
         </Link>
@@ -47,7 +47,7 @@ export function ChainlinkPriceInformation({ cowAmm }: { cowAmm: ICowAmm }) {
         <Link
           href={priceFeed1Link}
           target="_blank"
-          className="text-primary hover:text-primary/80 text-xs"
+          className="text-secondary hover:text-secondary/80 text-xs"
         >
           2
         </Link>

diff --git a/apps/cow-amm-deployer/src/app/manager/(components)/CustomPriceInformation.tsx b/apps/cow-amm-deployer/src/app/manager/(components)/CustomPriceInformation.tsx
@@ -15,7 +15,7 @@ export function CustomPriceInformation({ cowAmm }: { cowAmm: ICowAmm }) {
   });
 
   return (
-    <div className="flex flex-row gap-x-1 items-center hover:text-foreground/90">
+    <div className="flex flex-row gap-x-1 items-center">
       <span>Using price information from custom contract</span>
       {priceOracleLink && (
         <Link href={priceOracleLink.url} target="_blank">

diff --git a/apps/cow-amm-deployer/src/app/manager/(components)/PoolCompositionTable.tsx b/apps/cow-amm-deployer/src/app/manager/(components)/PoolCompositionTable.tsx
@@ -16,7 +16,7 @@ export function PoolCompositionTable({ cowAmm }: { cowAmm: ICowAmm }) {
     <Table
       color="foreground"
       shade="darkWithBorder"
-      classNames="overflow-y-auto text-background"
+      classNames="overflow-y-auto text-background rounded-lg"
     >
       <Table.HeaderRow>
         <Table.HeaderCell>Tokens</Table.HeaderCell>

diff --git a/apps/cow-amm-deployer/src/app/manager/(components)/SushiV2PriceInformation.tsx b/apps/cow-amm-deployer/src/app/manager/(components)/SushiV2PriceInformation.tsx
@@ -14,7 +14,7 @@ export function SushiV2PriceInformation({ cowAmm }: { cowAmm: ICowAmm }) {
   );
 
   return (
-    <div className="flex flex-row gap-x-1 items-center hover:text-foreground/90">
+    <div className="flex flex-row gap-x-1 items-center">
       <span>Using price information from Sushi V2</span>
       {priceOracleLink && (
         <Link href={priceOracleLink} target="_blank">

diff --git a/apps/cow-amm-deployer/src/app/manager/(components)/UniswapV2PriceInformation.tsx b/apps/cow-amm-deployer/src/app/manager/(components)/UniswapV2PriceInformation.tsx
@@ -16,7 +16,7 @@ export function UniswapV2PriceInformation({ cowAmm }: { cowAmm: ICowAmm }) {
   );
 
   return (
-    <div className="flex flex-row gap-x-1 items-center hover:text-foreground/90">
+    <div className="flex flex-row gap-x-1 items-center">
       <span>Using price information from Uniswap V2</span>
       {priceOracleLink && (
         <Link href={priceOracleLink} target="_blank">

diff --git a/apps/cow-amm-deployer/src/app/manager/page.tsx b/apps/cow-amm-deployer/src/app/manager/page.tsx
@@ -2,7 +2,6 @@
 
 import { formatNumber } from "@bleu/utils/formatNumber";
 import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk";
-import { tomatoDark } from "@radix-ui/colors";
 import {
   ArrowTopRightIcon,
   ExclamationTriangleIcon,
@@ -88,13 +87,12 @@ export default function Page() {
       <div className="my-10 flex w-9/12 flex-col gap-y-5 justify-center">
         <div className="flex items-center justify-between gap-x-8">
           <div className="flex flex-col gap-1">
-            <h2 className="text-2xl font-serif">
-              The first <i className="text-purple">MEV-Capturing AMM</i>,
-              brought to you by <i className="text-yellow">CoW DAO</i>{" "}
-            </h2>
+            <span className="text-2xl font-bold">
+              The first MEV-Capturing AMM, brought to you by CoW DAO
+            </span>
             <PriceInformation cowAmm={cowAmm} />
           </div>
-          <div className="flex flex-col bg-yellow/40 text-foreground py-2 px-8">
+          <div className="flex flex-col py-2 px-8">
             <span className="text-sm">Total Value</span>
             <span className="text-2xl">
               ${" "}
@@ -109,11 +107,11 @@ export default function Page() {
           </div>
         </div>
         <div className="flex flex-col">
-          <span className="text-xl my-2 border-b-2 border-primary">
+          <span className="text-xl my-2 border-b-2 border-info">
             AMM Composition
           </span>
           <Link
-            className="text-primary hover:text-primary/90 inline-flex items-center gap-1 text-sm"
+            className="text-secondary hover:text-secondary/90 inline-flex items-center gap-1 text-sm"
             href={
               new URL(
                 buildAccountCowExplorerUrl({
@@ -126,7 +124,7 @@ export default function Page() {
             target="_blank"
           >
             See in CoW Explorer
-            <ArrowTopRightIcon className="hover:text-primary" />
+            <ArrowTopRightIcon />
           </Link>
         </div>
         <PoolCompositionTable cowAmm={cowAmm} />
@@ -154,10 +152,7 @@ export default function Page() {
           </Button>
           {!isAmmFromModule && (
             <Tooltip content="This CoW AMM LP position was not created from the supported module.">
-              <ExclamationTriangleIcon
-                className="size-6"
-                color={tomatoDark.tomato10}
-              />
+              <ExclamationTriangleIcon className="size-6 text-destructive" />
             </Tooltip>
           )}
         </div>

diff --git a/apps/cow-amm-deployer/src/app/new/(components)/AmmForm.tsx b/apps/cow-amm-deployer/src/app/new/(components)/AmmForm.tsx
@@ -1,7 +1,6 @@
 import { Address } from "@bleu/utils";
 import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { brownDark } from "@radix-ui/colors";
 import { InfoCircledIcon } from "@radix-ui/react-icons";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -75,7 +74,7 @@ export function AmmForm({
     resolver: zodResolver(ammFormSchema),
     defaultValues: {
       ...defaultValues,
-      safeAddress,
+      safeAddress: safeAddress as Address,
       chainId,
     },
   });
@@ -113,7 +112,7 @@ export function AmmForm({
   }, [fallbackState, setValue]);
 
   useEffect(() => {
-    setValue("safeAddress", safeAddress);
+    setValue("safeAddress", safeAddress as Address);
   }, [safeAddress, setValue]);
 
   if (!fallbackState || !domainSeparator) {
@@ -134,7 +133,7 @@ export function AmmForm({
               onSelectToken={async (token: IToken) => {
                 setValue("token0", {
                   decimals: token.decimals,
-                  address: token.address,
+                  address: token.address as Address,
                   symbol: token.symbol,
                 });
                 setValue(
@@ -160,7 +159,7 @@ export function AmmForm({
               onSelectToken={(token: IToken) => {
                 setValue("token1", {
                   decimals: token.decimals,
-                  address: token.address,
+                  address: token.address as Address,
                   symbol: token.symbol,
                 });
               }}
@@ -236,10 +235,31 @@ function PriceOracleFields({
     setValue,
     formState: { errors },
     watch,
+    unregister,
   } = form;
 
   const priceOracle = watch("priceOracle");
 
+  const unregisterFields = (selectedPriceOracle: PRICE_ORACLES) => {
+    if (selectedPriceOracle !== PRICE_ORACLES.BALANCER)
+      unregister("balancerPoolId");
+    if (selectedPriceOracle !== PRICE_ORACLES.UNI) unregister("uniswapV2Pair");
+    if (selectedPriceOracle !== PRICE_ORACLES.SUSHI) unregister("sushiV2Pair");
+    if (selectedPriceOracle !== PRICE_ORACLES.CHAINLINK) {
+      unregister("chainlinkPriceFeed0");
+      unregister("chainlinkPriceFeed1");
+      unregister("chainlinkTimeThresholdInHours");
+    }
+    if (selectedPriceOracle !== PRICE_ORACLES.CUSTOM) {
+      unregister("customPriceOracleAddress");
+      unregister("customPriceOracleData");
+    }
+  };
+
+  useEffect(() => {
+    unregisterFields(priceOracle);
+  }, [priceOracle]);
+
   return (
     <div className="flex flex-col gap-y-3">
       <div className="flex flex-col gap-x-7">
@@ -251,7 +271,7 @@ function PriceOracleFields({
                 "The AMM relies on price oracle exclusively for generating orders that will plausibly be settled in the current market conditions"
               }
             >
-              <InfoCircledIcon className="size-4" color={brownDark.brown8} />
+              <InfoCircledIcon className="size-4 text-secondary-foreground" />
             </Tooltip>
           </div>
           <SelectInput

diff --git a/apps/cow-amm-deployer/src/app/new/(components)/FormWrapper.tsx b/apps/cow-amm-deployer/src/app/new/(components)/FormWrapper.tsx
@@ -29,7 +29,7 @@ export function FormWrapper({
     transactionType === TRANSACTION_TYPES.CREATE_COW_AMM ? "/" : "/manager";
   return (
     <div className="flex size-full items-center justify-center">
-      <div className="my-4 flex flex-col border-2 border-foreground bg-card border-card-foreground text-card-foreground">
+      <div className="my-4 flex flex-col border-2 border-foreground bg-card border-card-foreground text-card-foreground rounded-xl">
         <div className="relative flex size-full justify-center">
           <LinkComponent
             href={backHref}
@@ -40,7 +40,7 @@ export function FormWrapper({
             }
           />
           <div className="flex w-[530px] flex-col items-center py-3">
-            <div className="text-xl">
+            <div className="text-xl text-background">
               {transactionType === TRANSACTION_TYPES.CREATE_COW_AMM
                 ? "Create"
                 : "Edit"}{" "}

diff --git a/apps/cow-amm-deployer/src/app/new/page.tsx b/apps/cow-amm-deployer/src/app/new/page.tsx
@@ -66,16 +66,16 @@ export default function Page() {
       <div className="flex size-full justify-center">
         <div className="flex flex-col items-center gap-8 justify-center">
           <h2 className="mt-8 leading-snug text-center w-3/4 text-2xl">
-            <b className="text-yellow">Attention</b>, deploying a CoW AMM
+            <b className="text-info">Attention</b>, deploying a CoW AMM
             Liquidity pool requires a safe wallet. Keep in mind, that the{" "}
-            <b className="text-yellow">
+            <b className="text-info">
               Safe used for deploying liquidity should only be used for this
               purpose
             </b>
             , as the tokens held in the safe will be used for the pool creation.
             CoW AMM utilizes all available token balances on the Safe for the
             token pairs that you have created a liquidity pool, thus,{" "}
-            <b className="text-yellow">
+            <b className="text-info">
               disabling other functionalities a Safe might be used for.
             </b>
           </h2>

diff --git a/apps/cow-amm-deployer/src/components/AlertCard.tsx b/apps/cow-amm-deployer/src/components/AlertCard.tsx
@@ -11,17 +11,20 @@ export function AlertCard({
   children?: React.ReactNode;
 }) {
   return (
-    <div className="w-full justify-center" role="alert">
+    <div className="w-full justify-center rounded-lg" role="alert">
       <div
         className={cn(
-          "font-bold text-sand12 px-4 py-2 border-t border-x border-border",
+          "font-bold text-white px-4 py-2 rounded-t-lg",
           style === "error" ? "bg-destructive" : "bg-accent",
         )}
       >
         {capitalize(style)}: {title}
       </div>
       <div
-        className={cn("px-4 py-3 max-w-prose text-base border border-border")}
+        className={cn(
+          "px-4 py-3 max-w-prose text-base border rounded-b-lg",
+          style === "error" ? "border-destructive" : "border-accent",
+        )}
       >
         {children}
       </div>

diff --git a/apps/cow-amm-deployer/src/components/Button.tsx b/apps/cow-amm-deployer/src/components/Button.tsx
@@ -7,7 +7,7 @@ import { cn } from "#/lib/utils";
 import { Icons } from "./Icons";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap text-sm font-normal transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap text-sm font-normal transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 rounded-full",
   {
     variants: {
       variant: {

diff --git a/apps/cow-amm-deployer/src/components/Footer.tsx b/apps/cow-amm-deployer/src/components/Footer.tsx
@@ -21,7 +21,7 @@ export function Footer({
           target="_blank"
           rel="noopener noreferrer"
           href="https://github.com/bleu"
-          className="font-bold text-primary"
+          className="font-bold text-secondary"
         >
           bleu
         </a>

diff --git a/apps/cow-amm-deployer/src/components/Header.tsx b/apps/cow-amm-deployer/src/components/Header.tsx
@@ -29,13 +29,13 @@ export function Header({ linkUrl, imageSrc, children, onLinkClick }: IHeader) {
           className="flex items-center gap-3 justify-self-start"
         >
           {imageSrc && (
-            <Image src={imageSrc} height={75} width={300} alt="CoW AMM Logo" />
+            <Image src={imageSrc} height={50} width={200} alt="CoW AMM Logo" />
           )}
         </Link>
       </div>
       {children && <div className="flex flex-1 justify-center">{children}</div>}
       <div className="ml-auto flex flex-1 justify-end">
-        <div className="border-foreground text-center text-sm font-semibold border focus-visible:outline-brown7 focus-visible:outline-offset-2 disabled:opacity-40 py-3 px-5">
+        <div className="text-center text-sm font-semibold border-none py-3 px-5 rounded-full bg-primary text-primary-foreground">
           <Link
             className="hover:text-highlight inline-flex items-center gap-1"
             href={

diff --git a/apps/cow-amm-deployer/src/components/HomeWrapper.tsx b/apps/cow-amm-deployer/src/components/HomeWrapper.tsx
@@ -24,16 +24,16 @@ export function HomeWrapper({
     <div className="flex size-full justify-center">
       <div className="flex flex-col items-center gap-8 justify-center">
         <Image
-          src="/assets/cow-amm.svg"
+          src="/assets/app-logo.svg"
           height={100}
           width={400}
           alt="CoW AMM Logo"
         />
-        <h2 className="text-6xl mt-8 leading-snug text-center w-full font-serif">
-          The first <i className="text-purple">MEV-Capturing AMM</i>,
-          <br /> brought to you by <i className="text-yellow">CoW DAO</i>
+        <h2 className="text-6xl mt-8 leading-snug text-center w-full font-bold">
+          The first MEV-Capturing AMM,
+          <br /> brought to you by CoW DAO
         </h2>
-        <span className="text-prose w-3/4 text-lg text-center">
+        <span className="text-prose w-3/4 text-xl text-center text-info">
           CoW AMM is a production-ready implementation of an FM-AMM that
           supplies liquidity for trades made on CoW Protocol. Solvers compete
           with each other for the right to trade against the AMM