fix: ui/ux cleanup (#74)

* fix fonts - install modern-era - ensure all headings using sans - removed unused classes closes PAR-682 closes PAR-683 * fix: color of reject circle closes PAR-684 * fix: add margin to evaluation screen closes PAR-685 * button logic cleanup - fix color neutral-100 hex code - add new button variant - update logic in project review list to - disable if not reviewer - show evaluate if not reviewed - view previous evaluations if already reviewed closes PAR-686 * fix: redirect to overview after submitting evaluation closes PAR-687 * chore: add ModernEra to typography.mdx * fix: chromatic build * improvements in data-layer + ui * Update src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx --------- Co-authored-by: Hussein Martinez <[email protected]> Co-authored-by: Nick Lionis <[email protected]> Co-authored-by: Kurt <[email protected]>
gitcoinco · Dec 6, 2024 · 089b35b · 089b35b
1 parent 1d919df
commit 089b35b
Show file tree

Hide file tree

Showing 21 changed files with 118 additions and 66 deletions.
diff --git a/public/fonts/modern-era/modern-era-normal-700.woff2 b/public/fonts/modern-era/modern-era-normal-700.woff2
diff --git a/public/fonts/modern-era/modern-era-normal.woff2 b/public/fonts/modern-era/modern-era-normal.woff2
diff --git a/src/components/ProgressModal/ProgressModal.tsx b/src/components/ProgressModal/ProgressModal.tsx
@@ -70,7 +70,7 @@ function ModalStep({
         </span>
         <span className="ml-4 flex min-w-0 flex-col">
           <span
-            className={`font-mono text-[14px]/[16px] font-semibold uppercase tracking-wide ${nameColor}`}
+            className={`font-sans text-[14px]/[16px] font-semibold uppercase tracking-wide ${nameColor}`}
           >
             {step.name}
           </span>

diff --git a/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx b/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx
@@ -2,16 +2,14 @@ import { Address } from "viem";
 
 import { DefaultLogo } from "@/assets";
 import { IconLabel } from "@/components/IconLabel";
+import { ReviewsCounterLabel } from "@/mainAll";
 import { Button } from "@/primitives/Button";
 import { CircleStat } from "@/primitives/Indicators";
 import { ListGrid, ListGridColumn } from "@/primitives/ListGrid";
 
 import { ProjectReview } from "~checker/types";
 import { getReviewsCount } from "~checker/utils/getReviewsCount";
 
-import { ReviewsCounterLabel } from "../ReviewsCounterLabel";
-import { addressFrom } from "@/lib";
-
 export interface ProjectReviewListProps {
   projects: ProjectReview[];
 
@@ -68,8 +66,8 @@ export const ProjectReviewList = ({
       header: "AI Suggestion",
       key: "aiSuggestion",
       width: "0.9fr",
-      render: (item) => { // addressFrom(1) === ai evaluator 
-        return item.reviews.some(review => review.reviewer === addressFrom(1)) ? (
+      render: (item) => {
+        return item.aiSuggestion >= 0 ? (
           <IconLabel type="ai-evaluation" percent={item.aiSuggestion} />
         ) : (
           <ReviewsCounterLabel negativeReviews={0} positiveReviews={0} />
@@ -94,12 +92,14 @@ export const ProjectReviewList = ({
       position: "center",
       render: (item) => {
         const isReviewed = item.reviews.some((review) => review.reviewer === reviewer);
+        const isDisabled = !keepAction && (!isPoolManager || isReviewed);
+        const defaultActionLabel = isReviewed ? "View evaluation" : "Evaluate project";
         return (
           <div className="flex items-center justify-center">
             <Button
-              variant="outlined-secondary"
-              value={actionLabel ?? "Evaluate project"}
-              disabled={keepAction ? false : !isPoolManager || isReviewed}
+              variant={isDisabled ? "disabled" : "subtle"}
+              value={actionLabel ?? defaultActionLabel}
+              disabled={!isPoolManager && !keepAction}
               onClick={() => {
                 if (action) {
                   action(item.id);

diff --git a/src/features/checker/components/ReviewsCounterLabel/components/ReviewIcon.tsx b/src/features/checker/components/ReviewsCounterLabel/components/ReviewIcon.tsx
@@ -17,7 +17,7 @@ const iconVariants = tv({
   variants: {
     status: {
       approved: { icon: "fill-green-600" },
-      rejected: { icon: "fill-red-200" },
+      rejected: { icon: "fill-red-500" },
       pending: { icon: "fill-yellow-200" },
     },
     withCounter: {

diff --git a/src/features/checker/hooks/useApplicationEvaluations.ts b/src/features/checker/hooks/useApplicationEvaluations.ts
@@ -11,10 +11,14 @@ export const useApplicationOverviewEvaluations = ({ applicationId }: { applicati
 
   if (!poolData) return null;
 
+  const application = poolData.applications[applicationId];
+  const applicationEvaluations = application?.evaluations ?? [];
+  const evaluationQuestions = poolData.evaluationQuestions;
+
   return {
-    application: poolData.applications[applicationId],
-    applicationEvaluations: poolData.applications[applicationId].evaluations,
-    evaluationQuestions: poolData.evaluationQuestions,
+    application,
+    applicationEvaluations,
+    evaluationQuestions,
     poolData,
   };
 };
diff --git a/src/features/checker/hooks/usePerformEvaluation.ts b/src/features/checker/hooks/usePerformEvaluation.ts
@@ -3,9 +3,9 @@ import { useState, useEffect } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { Hex } from "viem";
 
-import { submitEvaluation } from "~checker/services/checker/api";
+import { EvaluationBody } from "@/mainAll";
 
-import { EvaluationBody } from "../types";
+import { submitEvaluation } from "~checker/services/checker/api";
 
 export const usePerformEvaluation = () => {
   const [evaluationBody, setEvaluationBody] = useState<EvaluationBody | null>(null);

diff --git a/...res/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.tsx b/...res/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.tsx
@@ -75,18 +75,20 @@ export const ApplicationEvaluationOverviewPage = ({
         <p className="leading-9 text-grey-900">
           Evaluate this project and see how others have evaluated this project.
         </p>
-        <div className="flex flex-col gap-8">
+        <div className="mb-64 flex flex-col gap-8">
           <div className="px-16">
             <EvaluationList evaluations={applicationEvaluations ?? []} />
           </div>
-          <div className="flex items-center justify-center">
-            <Button
-              variant="primary"
-              value="Perform evaluation"
-              className="w-44"
-              onClick={goToSubmitApplicationEvaluation}
-            />
-          </div>
+          {poolData?.isPoolManager && (
+            <div className="flex items-center justify-center">
+              <Button
+                variant="primary"
+                value="Perform evaluation"
+                className="w-44"
+                onClick={goToSubmitApplicationEvaluation}
+              />
+            </div>
+          )}
         </div>
       </div>
     </div>

diff --git a/src/features/checker/pages/ReviewApplicationsPage/ReviewApplicationsPage.tsx b/src/features/checker/pages/ReviewApplicationsPage/ReviewApplicationsPage.tsx
@@ -8,7 +8,6 @@ import { useGetApplicationsReviewPage } from "~checker/hooks";
 import {
   goToApplicationEvaluationOverviewAction,
   goToSubmitFinalEvaluationAction,
-  goToSubmitApplicationEvaluationAction,
   useCheckerContext,
   useCheckerDispatchContext,
 } from "~checker/store";
@@ -48,10 +47,12 @@ export const ReviewApplicationsPage = () => {
     window.open(`https://manager.gitcoin.co/#/chain/${chainId}/round/${poolId}`, "_blank");
   };
 
-  const openApplicationOnManager = (projectId: string) => {
-    dispatch(goToSubmitApplicationEvaluationAction({ projectId }));
+  const openCheckerApplicationEvaluations = (projectId: string) => {
+    window.open(
+      `https://beta.checker.gitcoin.co/view/application/${chainId}/${poolId}/${projectId}`,
+      "_blank",
+    );
   };
-
   return (
     <div className="flex flex-col gap-6 ">
       <PoolSummary
@@ -77,17 +78,17 @@ export const ReviewApplicationsPage = () => {
         <StatCardGroup stats={statCardsProps || []} justify="center" />
         <div className="flex flex-col gap-8">
           <div className="flex flex-col gap-4">
-            <div className="font-mono text-2xl font-medium leading-loose text-black">
+            <div className="font-sans text-2xl font-medium leading-loose text-black">
               Review applications
             </div>
-            <div className="font-mono text-base font-normal leading-7 text-grey-900">
+            <div className="font-sans text-base font-normal leading-7 text-grey-900">
               Evaluate projects here.
             </div>
           </div>
           <div className="flex flex-col gap-2">
             <div className="pb-1">
               <div className="flex items-center justify-between pb-1">
-                <div className="font-mono text-2xl font-medium leading-loose text-black">
+                <div className="font-sans text-2xl font-medium leading-loose text-black">
                   {`Ready to submit (${ReadyApplicationsToSubmit.length})`}
                 </div>
                 <Button
@@ -101,7 +102,7 @@ export const ReviewApplicationsPage = () => {
 
             <div>
               {ReadyApplicationsToSubmit.length === 0 ? (
-                <div className="font-mono text-base font-normal leading-7 text-grey-900">
+                <div className="font-sans text-base font-normal leading-7 text-grey-900">
                   Evaluations that are ready to be submitted onchain will appear here once reviewed.
                   Manager supports multiple reviewers.
                 </div>
@@ -118,7 +119,7 @@ export const ReviewApplicationsPage = () => {
           <div className="flex flex-col gap-2">
             <div className="pb-1">
               <div className="flex items-center justify-start pb-1">
-                <div className="font-mono text-2xl font-medium leading-loose text-black">
+                <div className="font-sans text-2xl font-medium leading-loose text-black">
                   {`In Review (${PendingApplications.length})`}
                 </div>
               </div>
@@ -127,7 +128,7 @@ export const ReviewApplicationsPage = () => {
 
             <div>
               {PendingApplications.length === 0 ? (
-                <div className="font-mono text-base font-normal leading-7 text-grey-900">
+                <div className="font-sans text-base font-normal leading-7 text-grey-900">
                   No applications are currently in review.
                 </div>
               ) : (
@@ -159,8 +160,8 @@ export const ReviewApplicationsPage = () => {
                 <ProjectReviewList
                   reviewer={address}
                   projects={ApprovedApplications}
-                  action={openApplicationOnManager}
-                  actionLabel="View project"
+                  action={openCheckerApplicationEvaluations}
+                  actionLabel="View evaluations"
                   keepAction
                 />
               )}
@@ -185,8 +186,8 @@ export const ReviewApplicationsPage = () => {
                 <ProjectReviewList
                   reviewer={address}
                   projects={RejectedApplications}
-                  action={openApplicationOnManager}
-                  actionLabel="View project"
+                  action={openCheckerApplicationEvaluations}
+                  actionLabel="View evaluations"
                   keepAction
                 />
               )}

diff --git a/...eatures/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx b/...eatures/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx
@@ -21,11 +21,7 @@ import { Markdown } from "@/primitives/Markdown/Markdown";
 import { useGetPastApplications, useInitialize } from "~checker/hooks";
 import { useApplicationOverviewEvaluations } from "~checker/hooks/useApplicationEvaluations";
 import { PastApplication } from "~checker/services/allo";
-import {
-  goToApplicationEvaluationOverviewAction,
-  goToSubmitFinalEvaluationAction,
-  useCheckerDispatchContext,
-} from "~checker/store";
+import { goToApplicationEvaluationOverviewAction, useCheckerDispatchContext } from "~checker/store";
 import { EvaluationStatus, EvaluationBody } from "~checker/types";
 
 import { SubmitApplicationEvaluationModal } from "./SubmitApplicationEvaluationModal";
@@ -81,15 +77,11 @@ export const SubmitApplicationEvaluationPage = ({
     dispatch(goToApplicationEvaluationOverviewAction({ projectId: applicationId }));
   };
 
-  const goToSubmitFinalEvaluation = () => {
-    dispatch(goToSubmitFinalEvaluationAction());
-  };
-
   useEffect(() => {
     if ((isSuccess || isError) && isModalOpen) {
       showToast();
       setIsModalOpen(false);
-      goToSubmitFinalEvaluation();
+      goToApplicationEvaluationOverview();
       if (isSuccess) {
         queryClient.invalidateQueries({ queryKey: ["poolData", chainId, poolId, address] }); // Invalidate the query
       }

diff --git a/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationPage.tsx b/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationPage.tsx
@@ -138,17 +138,17 @@ export const SubmitFinalEvaluationPage = ({
 
         <div className="flex flex-col gap-8">
           <div className="flex flex-col gap-4">
-            <div className="font-mono text-2xl font-medium leading-loose text-black">
+            <div className="font-sans text-2xl font-medium leading-loose text-black">
               Review applications
             </div>
-            <div className="font-mono text-base font-normal leading-7 text-grey-900">
+            <div className="font-sans text-base font-normal leading-7 text-grey-900">
               Evaluate projects here.
             </div>
           </div>
           <div className="flex flex-col gap-2">
             <div className="pb-1">
               <div className="flex items-center justify-between pb-1">
-                <div className="font-mono text-2xl font-medium leading-loose text-black">
+                <div className="font-sans text-2xl font-medium leading-loose text-black">
                   {`Ready to submit (${ReadyApplicationsToSubmit.length})`}
                 </div>
                 <div className="flex gap-2">
@@ -167,7 +167,7 @@ export const SubmitFinalEvaluationPage = ({
 
             <div>
               {ReadyApplicationsToSubmit.length === 0 ? (
-                <div className="font-mono text-base font-normal leading-7 text-grey-900">
+                <div className="font-sans text-base font-normal leading-7 text-grey-900">
                   Evaluations that are ready to be submitted onchain will appear here once reviewed.
                   Manager supports multiple reviewers.
                 </div>

diff --git a/src/features/checker/pages/ViewApplicationEvaluationsPage/ViewApplicationEvaluationsPage.tsx b/src/features/checker/pages/ViewApplicationEvaluationsPage/ViewApplicationEvaluationsPage.tsx
@@ -69,7 +69,7 @@ export const ViewApplicationEvaluationsPage: React.FC<ViewApplicationEvaluations
             <Button
               value="View public page"
               variant="none"
-              className=" h-[38px] w-40 rounded-lg border-none bg-white font-mono text-black"
+              className="h-[38px] w-40 bg-white"
               onClick={() => {
                 window.open(
                   `https://explorer.gitcoin.co/#/round/${chainId}/${poolId}/${applicationId}`,

diff --git a/src/features/checker/utils/mapApplicationsForOverviewPage.ts b/src/features/checker/utils/mapApplicationsForOverviewPage.ts
@@ -1,9 +1,8 @@
+import { ProjectReview, Review, addressFrom } from "@/mainAll";
 import { StatCardProps } from "@/primitives/StatCard";
 
 import { CheckerApplication } from "~checker/store";
 
-import { ProjectReview, Review } from "../types";
-
 // Define the structure of the function's return type
 interface ProjectReviewsResultByCategory {
   categorizedReviews: Record<
@@ -14,7 +13,7 @@ interface ProjectReviewsResultByCategory {
 }
 
 // Define the AI evaluator address
-const AI_EVALUATOR_ADDRESS = "0x0000000000000000000000000000000000000001" as const;
+const AI_EVALUATOR_ADDRESS = addressFrom(1);
 
 // Utility function to categorize project reviews and calculate application counts
 export function categorizeProjectReviews(
@@ -68,7 +67,7 @@ export function categorizeProjectReviews(
     // Separate evaluations into AI and non-AI
     const aiEvaluations =
       application.evaluations?.filter(
-        (evaluation) => evaluation.evaluator.toLowerCase() === AI_EVALUATOR_ADDRESS.toLowerCase(),
+        (evaluation) => evaluation.evaluator === AI_EVALUATOR_ADDRESS,
       ) ?? [];
 
     const humanEvaluations =
@@ -106,7 +105,7 @@ export function categorizeProjectReviews(
     // Calculate AI suggestion score (average AI evaluator scores)
     const aiTotalScore =
       aiEvaluations?.reduce((sum, evaluation) => sum + evaluation.evaluatorScore, 0) ?? 0;
-    const aiSuggestion = aiEvaluations.length > 0 ? aiTotalScore / aiEvaluations.length : 0;
+    const aiSuggestion = aiEvaluations.length > 0 ? aiTotalScore / aiEvaluations.length : -1;
 
     const projectData = application.metadata.application.project;
 

diff --git a/src/index.css b/src/index.css
@@ -24,6 +24,27 @@ body {
   }
 }
 
+/* Modern Era */
+@font-face {
+  font-family: "Modern Era";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(/fonts/modern-era/modern-era-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Modern Era";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/fonts/modern-era/modern-era-normal-700.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 /* DM Sans */
 @font-face {
   font-family: "DM Sans";

diff --git a/src/primitives/Button/Button.stories.tsx b/src/primitives/Button/Button.stories.tsx
@@ -20,6 +20,7 @@ const meta: Meta<typeof Button> = {
           "secondary",
           "error",
           "success",
+          "subtle",
           "outlined-error",
           "outlined-success",
           "outlined-primary",
@@ -153,6 +154,10 @@ export const OutlinedFilled: Story = {
         variant: "outlined-success-filled",
         value: "Outlined Success Filled",
       },
+      {
+        variant: "subtle",
+        value: "Subtle",
+      },
     ];
 
     return (

diff --git a/src/primitives/Button/Button.tsx b/src/primitives/Button/Button.tsx
@@ -16,6 +16,7 @@ export type ButtonVariants =
   | "outlined-secondary"
   | "outlined-disabled"
   | "disabled"
+  | "subtle"
   | undefined;
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -30,13 +31,15 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 
 export type ButtonSizes = "default" | "sm" | "md" | "lg" | "icon" | undefined;
 
+// eslint-disable-next-line tailwindcss/no-custom-classname
 const buttonVariants = tv({
   base: "inline-flex h-[32px] items-center justify-center gap-2 whitespace-nowrap rounded-[8px] px-[12px] py-[8px] font-mono text-[14px] font-medium leading-[16px] ring-offset-white transition-colors hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none dark:ring-offset-neutral-950",
   variants: {
     variant: {
       primary: "border-brand bg-brand text-white",
       secondary: "border-neutral-100 bg-neutral-100 text-black",
       grey: "border-neutral-300 bg-neutral-300 text-black",
+      subtle: "bg-neutral-25 text-black",
       error: "border-red-50 bg-red-50 text-red-700",
       success: "border-moss-50 bg-moss-50 text-moss-700",
       "outlined-error": "border-2 border-red-700 text-red-900",