From 247b1d4b189025ec2950993b3c5949ff32cb18d8 Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Fri, 7 Jun 2024 18:09:50 -0400 Subject: [PATCH] more style updates/layout setup --- packages/common/src/components/Footer.tsx | 8 +- packages/common/src/icons/BuilderIcon.tsx | 8 +- packages/common/src/icons/Discord.tsx | 4 +- packages/common/src/icons/Gitbook.tsx | 4 +- packages/common/src/icons/Github.tsx | 16 +-- packages/common/src/icons/ManagerIcon.tsx | 2 +- .../src/features/common/styles.ts | 4 +- .../src/features/program/ListProgramPage.tsx | 130 +++++++++++++----- packages/round-manager/tailwind.config.js | 3 + 9 files changed, 118 insertions(+), 61 deletions(-) diff --git a/packages/common/src/components/Footer.tsx b/packages/common/src/components/Footer.tsx index d1cc57fec3..1d3f0911e5 100644 --- a/packages/common/src/components/Footer.tsx +++ b/packages/common/src/components/Footer.tsx @@ -1,10 +1,10 @@ import Discord from "../icons/Discord"; import Github from "../icons/Github"; import Gitbook from "../icons/Gitbook"; -// import { getConfig } from "../config"; import ManagerIcon from "../icons/ManagerIcon"; import BuilderIcon from "../icons/BuilderIcon"; +// Note: Footer Navigation items const navigation = [ // note: the Manager and Builder icons are white... so they are not visible on the white background of the footer { @@ -39,10 +39,7 @@ const navigation = [ }, ]; -// note: not sure if we need this anymore? We could keep it as a hidden value for debugging purposes. -// const config = getConfig(); -// const COMMIT_HASH = process.env.REACT_APP_GIT_SHA ?? "localhost"; -// const ALLO_VERSION = config.allo.version; +const COMMIT_HASH = process.env.REACT_APP_GIT_SHA ?? "localhost"; export default function Footer() { return ( @@ -62,6 +59,7 @@ export default function Footer() { ))} +
{COMMIT_HASH}
); } diff --git a/packages/common/src/icons/BuilderIcon.tsx b/packages/common/src/icons/BuilderIcon.tsx index e3cb2646d4..52c91b4cf6 100644 --- a/packages/common/src/icons/BuilderIcon.tsx +++ b/packages/common/src/icons/BuilderIcon.tsx @@ -9,19 +9,19 @@ function BuilderIcon() { > ); diff --git a/packages/common/src/icons/Discord.tsx b/packages/common/src/icons/Discord.tsx index bfbc4d7e31..285953ef0c 100644 --- a/packages/common/src/icons/Discord.tsx +++ b/packages/common/src/icons/Discord.tsx @@ -10,7 +10,7 @@ function Discord() { @@ -18,7 +18,7 @@ function Discord() { diff --git a/packages/common/src/icons/Gitbook.tsx b/packages/common/src/icons/Gitbook.tsx index e30da7b498..5b78b9a3a3 100644 --- a/packages/common/src/icons/Gitbook.tsx +++ b/packages/common/src/icons/Gitbook.tsx @@ -10,7 +10,7 @@ function Gitbook() { @@ -18,7 +18,7 @@ function Gitbook() { diff --git a/packages/common/src/icons/Github.tsx b/packages/common/src/icons/Github.tsx index 9b5c8c26c0..b45e357e6b 100644 --- a/packages/common/src/icons/Github.tsx +++ b/packages/common/src/icons/Github.tsx @@ -11,35 +11,35 @@ function Github() { fillRule="evenodd" clipRule="evenodd" d="M10.2567 2.16669C8.21671 2.16775 6.24365 2.89026 4.69029 4.20502C3.13692 5.51979 2.10455 7.34108 1.77776 9.34323C1.45097 11.3454 1.85107 13.3978 2.90653 15.1336C3.962 16.8693 5.60398 18.1752 7.5389 18.8177C7.96577 18.8969 8.12656 18.6323 8.12656 18.4074C8.12656 18.1824 8.11802 17.5302 8.11517 16.8171C5.72468 17.3335 5.21955 15.8083 5.21955 15.8083C4.82968 14.818 4.2662 14.5577 4.2662 14.5577C3.48645 14.0285 4.32455 14.0384 4.32455 14.0384C5.18825 14.0992 5.64216 14.9198 5.64216 14.9198C6.40769 16.2257 7.65273 15.848 8.14221 15.6273C8.21904 15.0741 8.44245 14.6977 8.68861 14.4841C6.77906 14.269 4.77276 13.5362 4.77276 10.2623C4.76092 9.4132 5.0778 8.59211 5.65781 7.96885C5.56959 7.7538 5.27504 6.8851 5.74176 5.70514C5.74176 5.70514 6.46318 5.47594 8.10522 6.58092C9.51365 6.19795 10.9997 6.19795 12.4081 6.58092C14.0487 5.47594 14.7687 5.70514 14.7687 5.70514C15.2368 6.88227 14.9423 7.75097 14.8541 7.96885C15.4359 8.59221 15.7535 9.41474 15.7405 10.2651C15.7405 13.5461 13.73 14.269 11.8176 14.4798C12.1249 14.7458 12.3996 15.2651 12.3996 16.063C12.3996 17.2062 12.3896 18.1258 12.3896 18.4074C12.3896 18.6352 12.5447 18.9011 12.9801 18.8177C14.9152 18.1751 16.5574 16.869 17.6128 15.133C18.6683 13.3969 19.0682 11.3442 18.741 9.34184C18.4138 7.3395 17.381 5.51819 15.8271 4.20365C14.2732 2.88911 12.2997 2.16707 10.2595 2.16669H10.2567Z" - fill="white" + fill="black" /> ); diff --git a/packages/common/src/icons/ManagerIcon.tsx b/packages/common/src/icons/ManagerIcon.tsx index dcd1a75288..345acd59ef 100644 --- a/packages/common/src/icons/ManagerIcon.tsx +++ b/packages/common/src/icons/ManagerIcon.tsx @@ -9,7 +9,7 @@ function ManagerIcon() { > ); diff --git a/packages/round-manager/src/features/common/styles.ts b/packages/round-manager/src/features/common/styles.ts index bfd37b3f25..de0bebf3f7 100644 --- a/packages/round-manager/src/features/common/styles.ts +++ b/packages/round-manager/src/features/common/styles.ts @@ -3,7 +3,8 @@ import tw from "tailwind-styled-components"; export const CardsContainer = tw.div` flex flex-row - flex-wrap + flex-grow + justify-between w-full `; @@ -59,6 +60,5 @@ export const CardFooterContent = tw.div` flex flex-row items-center - h-full w-full `; diff --git a/packages/round-manager/src/features/program/ListProgramPage.tsx b/packages/round-manager/src/features/program/ListProgramPage.tsx index c329c8720a..84ae786a24 100644 --- a/packages/round-manager/src/features/program/ListProgramPage.tsx +++ b/packages/round-manager/src/features/program/ListProgramPage.tsx @@ -1,7 +1,12 @@ import React from "react"; import { Link } from "react-router-dom"; -import { ArrowNarrowRightIcon, UserGroupIcon } from "@heroicons/react/solid"; +import { + ArrowNarrowRightIcon, + CalendarIcon, + ChevronUpIcon, + UserGroupIcon, +} from "@heroicons/react/solid"; import { Spinner } from "../common/Spinner"; import Navbar from "../common/Navbar"; import { @@ -18,8 +23,6 @@ import Footer from "common/src/components/Footer"; import { datadogLogs } from "@datadog/browser-logs"; import { usePrograms } from "../../context/program/ReadProgramContext"; import { ProgressStatus } from "../api/types"; -import AlloV1 from "common/src/icons/AlloV1"; -import AlloV2 from "common/src/icons/AlloV2"; import { useAlloVersion } from "common/src/components/AlloVersionSwitcher"; import { ExclamationCircleIcon } from "@heroicons/react/solid"; @@ -30,8 +33,8 @@ interface ProgramCardProps { } const ProgramCard: React.FC = (props: ProgramCardProps) => ( - - + + {props.title} @@ -57,7 +60,7 @@ const ProgramCard: React.FC = (props: ProgramCardProps) => ( - + {props.footerContent} @@ -65,20 +68,36 @@ const ProgramCard: React.FC = (props: ProgramCardProps) => ( ); const RoundCard: React.FC = (props: ProgramCardProps) => ( - - + + {props.title} - - {props.description} + + {/*
+ {props.description} +
*/} +
+ {/* todo: Add badges to props for proper round category */} +
+ + Quadratic funding + +
+
+
+ + 10 June 2024 - 01 July 2024 +
+
+
- - +
+
{props.footerContent} - - +
+
); @@ -106,7 +125,7 @@ function ListPrograms() { const { version, switchToVersion } = useAlloVersion(); const { programs, fetchProgramsStatus, listProgramsError } = usePrograms(); // todo: implement rounds - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars const rounds: any[] = []; function hasNoPrograms() { @@ -129,7 +148,7 @@ function ListPrograms() { Chain
@@ -142,22 +161,24 @@ function ListPrograms() { )); + // todo: udpate to use rounds // eslint-disable-next-line @typescript-eslint/no-unused-vars - const roundList = rounds.map((round, key) => ( + const roundList = programs.map((round, key) => ( -
- {round.tags?.includes("allo-v1") && } - {round.tags?.includes("allo-v2") && } -
-
- View details{" "} - +
+ {/* todo: add the chain/network icon */} + Chain + {round.chain?.name}
} @@ -167,7 +188,11 @@ function ListPrograms() { return (
- + {" "} + {fetchProgramsStatus === ProgressStatus.IN_PROGRESS && ( + + )} + {/* todo: remove when ready */} {version === "allo-v1" && (
@@ -200,30 +225,61 @@ function ListPrograms() {
)} -
+
-
+
Programs - + { + console.log("View all programs"); + }} + > View all
-
- {/* */} -
-
-
{isSuccess && hasNoPrograms() && startAProgramCard} {programList} +
+
+
+ + Rounds + + { + console.log("View all programs"); + }} + > + View all + +
+ {/* todo: make these dropdowns for search/sorting */} +
+
+ + Sort by Recent + + + + Filter by All + + +
+
+
+
+
+ {isSuccess && hasNoPrograms() && startAProgramCard} + {roundList} +
- {fetchProgramsStatus === ProgressStatus.IN_PROGRESS && ( - - )}
); diff --git a/packages/round-manager/tailwind.config.js b/packages/round-manager/tailwind.config.js index 7089d083c4..a998dd18c4 100644 --- a/packages/round-manager/tailwind.config.js +++ b/packages/round-manager/tailwind.config.js @@ -20,6 +20,9 @@ module.exports = { green: { 100: "#ADEDE5", }, + nectary: { + 600: "#FF7043", + }, grey: { 50: "#F3F3F5", 100: "#E2E0E7",