chore: ui patches (#217)

* chore: ui patches * fix: scorer plus icon * fix: icon alignment * fix(interface): fixes ui test --------- Co-authored-by: Aminah Burch <hello@aminah.io>
passportxyz · Apr 18, 2023 · 39d1306 · 39d1306
1 parent d050440
commit 39d1306
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 29 deletions.
diff --git a/interface/__tests__/components/NewScorer.test.tsx b/interface/__tests__/components/NewScorer.test.tsx
@@ -65,8 +65,10 @@ describe("NewScorer", () => {
 
   it("should render the scoring mechanism page with localstorage items from use case modal", async () => {
     renderApp("/new-scorer");
+    const airdropProtection = screen.getAllByText("Airdrop Protection");
     expect(screen.getByText("Select a Scoring Mechanism")).toBeInTheDocument();
-    expect(screen.getByText("Airdrop Protection")).toBeInTheDocument();
+    expect(airdropProtection[0]).toHaveClass("md:hidden");
+    expect(airdropProtection[1]).toHaveClass("md:inline");
     expect(screen.getByText("Gitcoin Airdrop")).toBeInTheDocument();
     expect(
       screen.getByText(

diff --git a/interface/components/APIKeyList.tsx b/interface/components/APIKeyList.tsx
@@ -1,12 +1,11 @@
 // --- React components/methods
-import React, { useContext, useEffect, useState, useRef } from "react";
+import React, { useContext, useEffect, useState } from "react";
 
 // --- Utils
 import {
   ApiKeys,
   getApiKeys,
   deleteApiKey,
-  createApiKey,
   updateApiKey,
 } from "../utils/account-requests";
 import NoValues from "./NoValues";
@@ -112,7 +111,7 @@ const APIKeyList = () => {
   }
 
   const userInstructions = (
-    <span className="lg:pt-3 pb-6 text-purple-softpurple">
+    <span className="pb-6 text-purple-softpurple lg:pt-3">
       Use these API keys to programmatically access a Scorer.
     </span>
   );
@@ -137,8 +136,9 @@ const APIKeyList = () => {
             {apiKeys.map((key, i) => (
               <div
                 key={`${key.id}-${i}`}
-                className={`flex ${key.api_key && "flex-col"
-                  } w-full items-center justify-between border-x border-t border-gray-lightgray bg-white p-4 first-of-type:rounded-t-md last-of-type:rounded-b-md last-of-type:border-b hover:bg-gray-50`}
+                className={`flex ${
+                  key.api_key && "flex-col"
+                } w-full items-center justify-between border-x border-t border-gray-lightgray bg-white p-4 first-of-type:rounded-t-md last-of-type:rounded-b-md last-of-type:border-b hover:bg-gray-50`}
               >
                 <div className="flex w-full items-center justify-between">
                   <div className="justify-self-center text-purple-darkpurple md:justify-self-start">

diff --git a/interface/components/CommunityList.tsx b/interface/components/CommunityList.tsx
@@ -1,11 +1,7 @@
 // --- React components/methods
-import React, { useEffect, useState, useCallback, useContext, useRef } from "react";
-
-// --- Context
-import { UserContext } from "../context/userContext";
+import React, { useEffect, useState, useCallback } from "react";
 
 // --- Components
-import { CheckCircleIcon, CloseIcon, AddIcon } from "@chakra-ui/icons";
 import CommunityCard from "./CommunityCard";
 import NoValues from "./NoValues";
 
@@ -21,6 +17,7 @@ import UseCaseModal from "./UseCaseModal";
 import { useToast } from "@chakra-ui/react";
 import { successToast } from "./Toasts";
 import { StarIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/24/solid";
 
 const CommunityList = () => {
   const toast = useToast();
@@ -118,7 +115,8 @@ const CommunityList = () => {
                 communityLoadingStatus !== "done" || communities.length >= 5
               }
             >
-              <AddIcon className="mr-3 self-center" /> Scorer
+              <PlusIcon className="mr-2 inline w-6 self-center" />{" "}
+              <span className="self-center">Scorer</span>
             </button>
             <p className="ml-5 self-center py-3 text-xs text-purple-softpurple">
               The scorer limit is five.

diff --git a/interface/components/Dashboard.tsx b/interface/components/Dashboard.tsx
@@ -30,7 +30,7 @@ const QuickLink = ({
   <a href={url} target="_blank" rel="noreferrer">
     <div
       className={`flex w-full flex-row items-center justify-start border-gray-lightgray px-6 ${
-        icon ? "py-3 border-t" : "pt-6 pb-4"
+        icon ? "border-t py-3" : "pt-6 pb-4"
       } ${(url ? "cursor-pointer " : " ") + className}`}
     >
       <span className={`${icon ? "mr-2" : ""}`}>{icon}</span>
@@ -43,7 +43,7 @@ const QuickLinks = ({ className }: { className: string }) => {
   const linkClassName = "text-purple-softpurple";
   const iconClassName = "mr-2 w-3.5";
   return (
-    <div className={`w-full bg-white border rounded-md ${className}`}>
+    <div className={`w-full rounded-md border bg-white ${className}`}>
       <QuickLink
         text="Quick Links"
         className="pt-6 text-xs text-purple-darkpurple"
@@ -77,21 +77,26 @@ const QuickLinks = ({ className }: { className: string }) => {
 };
 
 const SampleApplications = ({ className }: { className?: string }) => {
-  const classOverwrite = "py-2"
+  const classOverwrite = "py-2";
   return (
-    <div className={"border-gray-lightgray border rounded-md bg-white text-base pb-24 " + className}>
+    <div
+      className={
+        "rounded-md border border-gray-lightgray bg-white pb-24 text-base " +
+        className
+      }
+    >
       <QuickLink
         text="Sample Applications"
         className="pt-6 text-xs text-purple-darkpurple"
       />
       <QuickLink
         text="Gitcoin Passport Sample App"
         url="https://github.com/gitcoinco/passport-scorer/tree/main/examples/example-score-a-passport"
-        className="text-purple-softpurple pt-0"
+        className="pt-0 text-purple-softpurple"
       />
       <QuickLink
         text="Gitcoin Allo Protocol"
-        className="text-purple-softpurple pt-0 pb-2"
+        className="pt-0 pb-2 text-purple-softpurple"
         url="https://github.com/gitcoinco/grants-stack/blob/45b6a3a00beb05090e039be2551a06636e873fbc/packages/grant-explorer/src/features/round/PassportConnect.tsx"
       />
     </div>

diff --git a/interface/components/Footer.tsx b/interface/components/Footer.tsx
@@ -27,15 +27,15 @@ const Footer = ({ mode, className }: FooterProps): JSX.Element => {
     <div
       className={`flex h-[120px] items-center justify-between text-base ${PAGE_PADDING} ${className}`}
     >
-      <div className="">
+      <div className="text-purple-softpurple">
         Available on
         <a
           href="https://ceramic.network/"
           target="_blank"
           rel="noopener noreferrer"
           className={`text-${assets.emphasisColor} ml-1 hover:underline`}
         >
-          <span className="text-purple-darkpurple">Ceramic</span>
+          <span className="text-purple-darkpurple">Ceramic.</span>
         </a>
       </div>
       <div className="flex">

diff --git a/interface/components/NewScorer.tsx b/interface/components/NewScorer.tsx
@@ -8,9 +8,7 @@ import {
   Select,
   useToast,
 } from "@chakra-ui/react";
-import {
-  NoSymbolIcon,
-} from "@heroicons/react/24/outline";
+import { NoSymbolIcon } from "@heroicons/react/24/outline";
 import {
   ChartPieIcon,
   ScaleIcon,
@@ -91,7 +89,7 @@ const PageFooter = ({
     <div className="mx-auto overflow-hidden md:flex md:justify-end">
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <button
-          className="order-last h-10 w-full rounded border border-gray-lightgray px-6 text-sm md:order-first md:w-[139px]"
+          className="order-last h-10 w-full rounded border border-gray-lightgray px-6 text-sm text-purple-darkpurple md:order-first md:w-[139px]"
           onClick={() => setCancelModal(true)}
         >
           Cancel
@@ -154,16 +152,22 @@ const Subheader = ({ useCase, name, description }: any) => (
       <p className="text-xs text-purple-softpurple">
         Select a Scoring Mechanism
       </p>
-      <p className="mt-2 text-purple-gitcoinpurple">
+      <p className="mt-2 text-xs text-purple-gitcoinpurple md:hidden">
         <Icon boxSize={19.5}>{useCase?.icon("#6F3FF5")}</Icon> {useCase?.title}
       </p>
 
-      <h1 className="mt-2 font-miriamlibre text-2xl">{name}</h1>
+      <h1 className="mt-2 font-miriamlibre text-2xl text-purple-darkpurple">
+        {name}
+        <span className="ml-6 hidden text-xs text-purple-gitcoinpurple md:inline">
+          <Icon boxSize={19.5}>{useCase?.icon("#6F3FF5")}</Icon>{" "}
+          {useCase?.title}
+        </span>
+      </h1>
       <p className="mt-2 text-purple-softpurple">{description}</p>
     </div>
     <div>
       <p className="mb-2 text-xs text-purple-softpurple">Scorer ID</p>
-      <p>N/A</p>
+      <p className="text-purple-darkpurple">N/A</p>
     </div>
   </div>
 );
@@ -240,7 +244,9 @@ const NewScorer = () => {
           created.
         </p>
         <div className="col-span-4 md:col-span-6 lg:col-span-2 xl:col-span-3">
-          <span className="mr-1 text-xs">Select Deduplication</span>
+          <span className="mr-1 text-xs text-purple-softpurple">
+            Select Deduplication
+          </span>
           <PopoverInfo>
             Gitcoin scoring uses binary logic to verify stamp/account ownership,
             encrypted for privacy and to decrease deduplication risk.
@@ -273,7 +279,9 @@ const NewScorer = () => {
         </div>
 
         <div className="col-span-4 md:col-span-6 xl:col-span-9">
-          <span className="mr-1 text-xs">Scoring Mechanisms</span>
+          <span className="mr-1 text-xs text-purple-softpurple">
+            Scoring Mechanisms
+          </span>
           <PopoverInfo>
             The scoring rules evaluate Passports based on the &quot;Verifiable
             Credentials&quot; (VCs), or &quot;Stamps&quot; they hold.