removed colors and standerdized them in components

ATXDAO · Apr 3, 2024 · 80319f5 · 80319f5
1 parent 096b10a
commit 80319f5
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 78 deletions.
diff --git a/packages/foundry/script/DeployDemo.s.sol b/packages/foundry/script/DeployDemo.s.sol
@@ -17,7 +17,7 @@ import {ReputationFaucet} from "../contracts/Reputation/ReputationFaucet.sol";
 contract DeployDemoScript is ScaffoldETHDeploy {
     error InvalidPrivateKey(string);
 
-    address controller = 0x4161f8A8DfF60aEdB63baFb7d5843b0988393eC9; //replace with burner or other address from wallet!
+    address controller = 0x778992593f3EA5d47b4Ff19e0347609b98b236D9; //replace with burner or other address from wallet!
 
     function run() external {
         uint256 deployerPrivateKey = setupLocalhostEnv();

diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
@@ -49,7 +49,7 @@ export function RepTokensDemo() {
 
   return (
     <>
-      <div className="py-5 space-y-5 flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
+      <div className="py-5 space-y-5 flex flex-col justify-center items-center bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
         <p>Faucet</p>
         <StylizedTokenGroupCard
           tokens={faucetTokensData.tokens}
@@ -70,38 +70,27 @@ export function RepTokensDemo() {
         <StylizedBalanceCard value={Number(tokensData.tokens[0]?.balance)} />
         <StylizedImageCard src={tokensData.tokens[0]?.image} />
 
-        <StylizedStringCard value={tokensData.tokens[0]?.name} color="violet" type="bold" />
-        <StylizedStringCard value={tokensData.tokens[0]?.description} color="lime" />
-        <StylizedAddressCard address={tokensData.tokens[0]?.address} color="pink" />
+        <StylizedStringCard value={tokensData.tokens[0]?.name} type="bold" />
+        <StylizedStringCard value={tokensData.tokens[0]?.description} />
+        <StylizedAddressCard address={tokensData.tokens[0]?.address} />
         <StylizedStringCard value={`Soulbound: ${tokensData.tokens[0]?.properties.isSoulbound.toString()}`} />
-        <StylizedStringCard
-          value={`Redeemable: \n ${tokensData.tokens[0]?.properties.isRedeemable.toString()}`}
-          color="yellow"
-        />
+        <StylizedStringCard value={`Redeemable: \n ${tokensData.tokens[0]?.properties.isRedeemable.toString()}`} />
         <StylizedStringCard
           value={`Max Mint Amount Per Tx \n${tokensData.tokens[0]?.properties.maxMintAmountPerTx.toString()}`}
-          color="teal"
         />
         <p className="text-center text-4xl">Single Card</p>
 
         <StylizedTokenCard>
           <StylizedBalanceCard value={Number(tokensData.tokens[0]?.balance)} />
           <StylizedImageCard src={tokensData.tokens[0]?.image} />
 
-          <StylizedStringCard value={tokensData.tokens[0]?.name} color="violet" type="bold" />
-          <StylizedStringCard value={tokensData.tokens[0]?.description} color="lime" />
-          <StylizedAddressCard address={tokensData.tokens[0]?.address} color="pink" />
-          <StylizedStringCard
-            value={`Soulbound: ${tokensData.tokens[0]?.properties.isSoulbound.toString()}`}
-            color="blue"
-          />
-          <StylizedStringCard
-            value={`Redeemable: \n ${tokensData.tokens[0]?.properties.isRedeemable.toString()}`}
-            color="yellow"
-          />
+          <StylizedStringCard value={tokensData.tokens[0]?.name} type="bold" />
+          <StylizedStringCard value={tokensData.tokens[0]?.description} />
+          <StylizedAddressCard address={tokensData.tokens[0]?.address} />
+          <StylizedStringCard value={`Soulbound: ${tokensData.tokens[0]?.properties.isSoulbound.toString()}`} />
+          <StylizedStringCard value={`Redeemable: \n ${tokensData.tokens[0]?.properties.isRedeemable.toString()}`} />
           <StylizedStringCard
             value={`Max Mint Amount Per Tx \n${tokensData.tokens[0]?.properties.maxMintAmountPerTx.toString()}`}
-            color="teal"
           />
         </StylizedTokenCard>
 

diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedAddressCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedAddressCard.tsx
@@ -1,22 +1,14 @@
-import { Color } from "./Stylized";
 import { Address } from "~~/components/scaffold-eth";
 
 type AddressCardProps = {
   address: string;
-  color?: Color;
-  textColor?: Color;
   isGroup?: boolean;
 };
 
-export const StylizedAddressCard = ({
-  address,
-  color = "slate",
-  textColor = "black",
-  isGroup = false,
-}: AddressCardProps) => {
+export const StylizedAddressCard = ({ address, isGroup = false }: AddressCardProps) => {
   return (
-    <div className={`rounded-lg flex items-center justify-center bg-${color}-300 ${isGroup ? "mt-4" : ""}`}>
-      <Address address={address} textColor={textColor} />
+    <div className={`rounded-lg flex items-center justify-center bg-base-300 ${isGroup ? "mt-4" : ""}`}>
+      <Address address={address} />
     </div>
   );
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard.tsx
@@ -1,26 +1,23 @@
-import { Color } from "./Stylized";
-
 type BalanceProps = {
   value: number;
-  color?: Color;
   isOverlay?: boolean;
   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
 };
 
 const normalSizeMap = {
-  xs: "2xl",
-  sm: "4xl",
-  base: "4xl",
+  xs: "text-2xl",
+  sm: "text-4xl",
+  base: "text-4xl",
   lg: 9,
   xl: 10,
   "2xl": 12,
   "3xl": 15,
 };
 
 const overlaidSizeMap = {
-  xs: "2xl",
-  sm: "4xl",
-  base: "9xl",
+  xs: "text-2xl",
+  sm: "text-4xl",
+  base: "text-9xl",
   lg: 9,
   xl: 10,
   "2xl": 12,
@@ -37,16 +34,16 @@ const overlaidCardSizeMap = {
   "3xl": "",
 };
 
-export const StylizedBalanceCard = ({ value, color = "slate", isOverlay, size = "base" }: BalanceProps) => {
+export const StylizedBalanceCard = ({ value, isOverlay, size = "base" }: BalanceProps) => {
   let cardClasses;
   let textClasses;
 
   if (isOverlay) {
-    cardClasses = `absolute ${overlaidCardSizeMap[size]} items-center justify-center`;
-    textClasses = `text-${overlaidSizeMap[size]} mx-auto text-center text-black`;
+    cardClasses = `absolute ${overlaidCardSizeMap[size]} items-center justify-center bg-base-300 bg-opacity-75`;
+    textClasses = `${overlaidSizeMap[size]} mx-auto text-center`;
   } else {
-    cardClasses = `rounded-lg bg-${color}-300`;
-    textClasses = `text-${normalSizeMap[size]} mx-auto text-center text-black`;
+    cardClasses = `rounded-lg bg-base-300`;
+    textClasses = `${normalSizeMap[size]} mx-auto text-center`;
   }
 
   return (

diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedImageCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedImageCard.tsx
@@ -29,15 +29,14 @@ const cardSizeMap = {
   "3xl": 15,
 };
 
-export const StylizedImageCard = ({
-  src,
-  alt = "Token Image",
-  size = "base",
-  color = "slate",
-}: ImageCardPropsInternal) => {
+export const StylizedImageCard = ({ src, alt = "Token Image", size = "base" }: ImageCardPropsInternal) => {
   return (
-    <div className={`rounded-lg bg-${color}-300 ${cardSizeMap[size]}`}>
-      <Image className="rounded-lg mx-auto" src={src} alt={alt} width={sizeMap[size]} height={sizeMap[size]} />
+    <div className={`rounded-lg bg-base-300 ${cardSizeMap[size]}`}>
+      {src ? (
+        <Image className="rounded-lg mx-auto" src={src} alt={alt} width={sizeMap[size]} height={sizeMap[size]} />
+      ) : (
+        <></>
+      )}
     </div>
   );
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedStringCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedStringCard.tsx
@@ -1,22 +1,19 @@
-import { Color } from "./Stylized";
-
 type StringProps = {
   value: string;
-  color?: Color;
 
   type?: "default" | "bold";
 };
 
-export const StylizedStringCard = ({ value, color = "slate", type = "default" }: StringProps) => {
+export const StylizedStringCard = ({ value, type = "default" }: StringProps) => {
   let textClassName;
   if (type === "default") {
-    textClassName = "text-black text-1xl mx-auto text-center break-words";
+    textClassName = "text-base-content text-1xl mx-auto text-center break-words";
   } else if (type === "bold") {
-    textClassName = "text-black text-1xl mx-auto text-center break-all object-center font-bold";
+    textClassName = "text-base-content text-1xl mx-auto text-center break-all object-center font-bold";
   }
 
   return (
-    <div className={`rounded-lg bg-${color}-300`}>
+    <div className="bg-base-300 rounded-lg">
       <p className={textClassName}>{value}</p>
     </div>
   );

diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard.tsx
@@ -1,9 +1,6 @@
-import { Color } from "./Stylized";
-
 export type Size = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
 
 export interface TokenCardInternalProps {
-  color?: Color;
   size?: Size;
   children?: React.ReactNode;
 }
@@ -18,8 +15,8 @@ const sizeMap = {
   "3xl": "",
 };
 
-export const StylizedTokenCard = ({ color = "slate", size = "base", children }: TokenCardInternalProps) => {
+export const StylizedTokenCard = ({ size = "base", children }: TokenCardInternalProps) => {
   "rounded-lg bg-slate-600 px-1 py-1 relative w-20";
 
-  return <div className={`bg-${color}-600 rounded-lg ${sizeMap[size]} relative p-1`}>{children}</div>;
+  return <div className={`bg-base-100 rounded-lg ${sizeMap[size]} relative p-1`}>{children}</div>;
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx
@@ -1,5 +1,4 @@
 import { BalanceImageOverlay } from "./BalanceImageOverlay";
-import { Color } from "./Stylized";
 import { StylizedAddressCard } from "./StylizedAddressCard";
 import { StylizedBalanceCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard";
 import { StylizedImageCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedImageCard";
@@ -9,7 +8,6 @@ import { StylizedTokenCard } from "~~/components/rep-tokens/cards/stylized-cards
 export interface TokenCardInternalProps {
   tokens: any[];
   components?: ReputationComponent[];
-  color?: Color;
   isBalanceOverlayed?: boolean;
   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
   children?: React.ReactNode;
@@ -47,7 +45,6 @@ export const StylizedTokenGroupCard = ({
     "IsRedeemable",
     "MaxMintAmountPerTx",
   ],
-  color = "slate",
   isBalanceOverlayed,
   children,
   size = "base",
@@ -142,9 +139,9 @@ export const StylizedTokenGroupCard = ({
   }
 
   return (
-    <div className={`bg-${color}-900 flex flex-col rounded-lg ${sizeMap[size]}`}>
+    <div className={`bg-base-100 flex flex-col rounded-lg ${sizeMap[size]}`}>
       {children}
-      <div className={`flex justify-center ${sizeMap[size]} bg-${color}-800 `}>{output}</div>
+      <div className={`flex justify-center ${sizeMap[size]} rounded-lg bg-base-200`}>{output}</div>
     </div>
   );
 };
diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -2,7 +2,6 @@
 
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { Color } from "../rep-tokens/cards/stylized-cards/Stylized";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { Address as AddressType, getAddress, isAddress } from "viem";
 import { hardhat } from "viem/chains";
@@ -17,7 +16,6 @@ type AddressProps = {
   disableAddressLink?: boolean;
   format?: "short" | "long";
   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
-  textColor?: Color;
 };
 
 const blockieSizeMap = {
@@ -33,7 +31,7 @@ const blockieSizeMap = {
 /**
  * Displays an address (or ENS) with a Blockie image and option to copy address.
  */
-export const Address = ({ address, disableAddressLink, format, size = "base", textColor = "white" }: AddressProps) => {
+export const Address = ({ address, disableAddressLink, format, size = "base" }: AddressProps) => {
   const [ens, setEns] = useState<string | null>();
   const [ensAvatar, setEnsAvatar] = useState<string | null>();
   const [addressCopied, setAddressCopied] = useState(false);
@@ -97,14 +95,14 @@ export const Address = ({ address, disableAddressLink, format, size = "base", te
         />
       </div>
       {disableAddressLink ? (
-        <span className={`ml-1.5 text-${size} text-${textColor} font-normal`}>{displayAddress}</span>
+        <span className={`ml-1.5 text-${size} font-normal`}>{displayAddress}</span>
       ) : targetNetwork.id === hardhat.id ? (
-        <span className={`ml-1.5 text-${size} text-${textColor} font-normal`}>
+        <span className={`ml-1.5 text-${size} font-normal`}>
           <Link href={blockExplorerAddressLink}>{displayAddress}</Link>
         </span>
       ) : (
         <a
-          className={`ml-1.5 text-${size} text-${textColor} font-normal`}
+          className={`ml-1.5 text-${size} font-normal`}
           target="_blank"
           href={blockExplorerAddressLink}
           rel="noopener noreferrer"