start on rounds page

gitcoinco · Jun 11, 2024 · c21c1f8 · c21c1f8
1 parent ec02636
commit c21c1f8
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 21 deletions.
diff --git a/packages/common/src/styles.ts b/packages/common/src/styles.ts
@@ -25,7 +25,7 @@ export const Button = tw.button`
     } else if (p.$variant === "external-link") {
       return "bg-white text-gitcoin-violet-500";
     } else {
-      return "bg-violet-400 text-white";
+      return "bg-blue-100 text-gray-500";
     }
   }}
   ${(p: ButtonProps) => (p.$hidden ? "hidden" : "")}

diff --git a/packages/round-manager/src/context/program/ReadProgramContext.tsx b/packages/round-manager/src/context/program/ReadProgramContext.tsx
@@ -200,7 +200,7 @@ export const useProgramById = (
         );
       }
     }
-  }, [id, walletProvider]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [address, context.dispatch, context.state.programs, dataLayer, id, walletProvider]);
 
   const program = context.state.programs.find((program) => program.id === id);
 

diff --git a/packages/round-manager/src/features/program/ProgramListPage.tsx b/packages/round-manager/src/features/program/ProgramListPage.tsx
@@ -44,6 +44,8 @@ function ListPrograms() {
     return !programs || programs.length === 0;
   }
 
+  console.log("programs", programs);
+
   const ProgramList = programs.map((program, key) => (
     <Link to={`/program/${program.id}`} key={key}>
       <ProgramCard
@@ -59,6 +61,14 @@ function ListPrograms() {
                 className="rounded-full w-5 h-5 mr-2"
               />
             </div>
+            <div className="-ml-28">
+              {program.tags?.includes("allo-v1") && (
+                <span className="border border-green-100 rounded-2xl bg-green-100 p-1 px-2 font-mono">
+                  v1
+                  {/* todo: add the icon */}
+                </span>
+              )}
+            </div>
             <div className="text-gray-500 ml-auto" data-testid="program-card">
               View details{" "}
               <ArrowNarrowRightIcon className="h-5 w-5 inline ml-4" />

diff --git a/packages/round-manager/src/features/program/ViewProgramPage.tsx b/packages/round-manager/src/features/program/ViewProgramPage.tsx
@@ -262,15 +262,15 @@ export default function ViewProgram() {
                   onClick={() => setGrantType("quadraticFunding")}
                   className={`flex w-full mb-4 rounded border  ${
                     grantType === "quadraticFunding"
-                      ? "border-violet-400 shadow-lg"
+                      ? "border-yellow-100 shadow-lg"
                       : "border-grey-100"
                   } bg-white p-6 cursor-pointer`}
                 >
                   <div className="flex pr-6 m-auto">
                     <div
                       className={`rounded-full border ${
                         grantType === "quadraticFunding"
-                          ? "border-violet-400"
+                          ? "border-yellow-100"
                           : "border-grey-100"
                       } h-[24px] w-[24px]`}
                       style={{
@@ -300,15 +300,15 @@ export default function ViewProgram() {
                   onClick={() => setGrantType("directGrant")}
                   className={`flex w-full rounded border  ${
                     grantType === "directGrant"
-                      ? "border-violet-400 shadow-lg"
+                      ? "border-green-200 shadow-lg"
                       : "border-grey-100"
                   } bg-white p-6 cursor-pointer`}
                 >
                   <div className="flex pr-6 m-auto">
                     <div
                       className={`rounded-full border ${
                         grantType === "directGrant"
-                          ? "border-violet-400"
+                          ? "border-green-200"
                           : "border-grey-100"
                       } h-[24px] w-[24px]`}
                       style={{
@@ -381,19 +381,12 @@ export default function ViewProgram() {
           <Navbar programCta={true} />
           <div className="container mx-auto flex flex-col">
             <header className="flex flex-col justify-center border-b border-grey-100 pl-2 py-6">
-              <div className="flex flex-row items-center">
+              <div className="flex flex-row items-center text-grey-400 font-bold text-sm font-sans">
                 <Link to={`/`}>
-                  <p className="text-sm text-grey-400 font-semibold">
-                    My Programs
-                  </p>
+                  <p>Home</p>
                 </Link>
-                <ChevronRightIcon
-                  className="h-6 w-6 mx-3 text-sm text-grey-400"
-                  aria-hidden="true"
-                />
-                <p className="text-sm text-grey-400 font-semibold">
-                  Program Details
-                </p>
+                <ChevronRightIcon className="h-6 w-6 mx-3" aria-hidden="true" />
+                <p>Program Details</p>
               </div>
               <h1 className="text-3xl sm:text-[32px] my-2">
                 {programToRender?.metadata?.name || "Program Details"}
@@ -408,21 +401,21 @@ export default function ViewProgram() {
               {isRoundsFetched && roundItems.length > 0 && (
                 <div className="px-2 py-3 md:py-6">
                   <div className="md:mb-8">
-                    <div className="flex flex-row justify-between">
+                    <div className="flex flex-row justify-between items-center">
                       <p className="font-bold">My Rounds</p>
                       {programToRender?.tags?.includes(getAlloVersion()) && (
                         <span
                           onClick={() => {
                             setIsModalOpen(true);
                           }}
-                          className="text-violet-400 font-thin ml-auto mr-4 cursor-pointer"
+                          className="border border-transparent p-2 rounded-lg text-sm text-gray-500 font-mono ml-auto mr-4 bg-yellow-100 cursor-pointer"
                           data-testid="create-round-small-link"
                         >
                           <PlusSmIcon
-                            className="h-5 w-5 inline -translate-y-0.5"
+                            className="h-5 w-5 inline ml-1 -translate-y-0.5"
                             aria-hidden="true"
                           />
-                          &nbsp;Create round
+                          <span className="mr-2">Create round</span>
                         </span>
                       )}
                     </div>

diff --git a/packages/round-manager/src/features/round/RoundListPage.tsx b/packages/round-manager/src/features/round/RoundListPage.tsx
@@ -31,6 +31,8 @@ function ListRounds() {
   );
   const [viewAllRounds, setViewAllRounds] = React.useState(false);
 
+  console.log("rounds", rounds);
+
   function hasNoRounds() {
     return !rounds || rounds.length === 0;
   }