ui fixes (#3674)

* ui: fix overflow in badge close PAR-261 * ui: add view history button close PAR-262 * add placeholder closes PAR-255
gitcoinco · Oct 7, 2024 · 923c5d5 · 923c5d5
1 parent 8132958
commit 923c5d5
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 22 deletions.
diff --git a/packages/grant-explorer/src/features/collections/CollectionCard.tsx b/packages/grant-explorer/src/features/collections/CollectionCard.tsx
@@ -26,8 +26,11 @@ const CollectionCard = ({ collection, size }: CollectionCardProps) => {
             <div className="text-grey-400 text-sm">
               {numberOfProjects} projects
             </div>
-            <div className="text-sm flex gap-2 items-center">
-              by <Badge rounded="full">{author}</Badge>
+            <div className="text-sm flex gap-2 items-center truncate max-w-[20ch]">
+              by
+              <div className="truncate">
+                <Badge rounded="full">{author}</Badge>
+              </div>
             </div>
           </div>
         </div>

diff --git a/packages/grant-explorer/src/features/common/styles.tsx b/packages/grant-explorer/src/features/common/styles.tsx
@@ -95,7 +95,6 @@ export const Badge = tw.div<{
   max-w-full
   w-fit
   items-center
-  justify-center
   px-2
   py-1.5
   ${(p) => colorMap[p.color ?? "grey"]}

diff --git a/packages/grant-explorer/src/features/projects/ViewProject.tsx b/packages/grant-explorer/src/features/projects/ViewProject.tsx
@@ -49,7 +49,7 @@ import ProgressModal, { errorModalDelayMs } from "../common/ProgressModal";
 import { useDirectAllocation } from "./hooks/useDirectAllocation";
 import { Address, getAddress, zeroAddress } from "viem";
 import GenericModal from "../common/GenericModal";
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
+import { InformationCircleIcon } from "@heroicons/react/24/solid";
 import { BoltIcon } from "@heroicons/react/24/solid";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { getBalance } from "@wagmi/core";

diff --git a/packages/grant-explorer/src/features/round/ViewCartPage/CartWithProjects.tsx b/packages/grant-explorer/src/features/round/ViewCartPage/CartWithProjects.tsx
@@ -77,6 +77,7 @@ export function CartWithProjects({ cart, chainId }: Props) {
                 setFixedDonation(e.target.value);
               }}
               className="w-16 lg:w-18"
+              placeholder={"0"}
             />
             <PayoutTokenDropdown
               selectedPayoutToken={selectedPayoutToken}

diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails.tsx
@@ -1,5 +1,5 @@
 import { datadogLogs } from "@datadog/browser-logs";
-import { ShieldCheckIcon } from "@heroicons/react/24/solid";
+import { ArrowTrendingUpIcon, LinkIcon, ShieldCheckIcon } from "@heroicons/react/24/solid";
 import {
   formatDateWithOrdinal,
   renderToHTML,
@@ -37,7 +37,7 @@ import { useGap } from "../api/gap";
 import { StatList } from "./OSO/ImpactStats";
 import { useOSO } from "../api/oso";
 import { CheckIcon, ShoppingCartIcon } from "@heroicons/react/24/outline";
-import { useDataLayer } from "data-layer";
+import { Application, useDataLayer } from "data-layer";
 import { DefaultLayout } from "../common/DefaultLayout";
 import { truncate } from "../common/utils/truncate";
 import {
@@ -504,24 +504,9 @@ function Sidebar(props: {
   removeFromCart: () => void;
   addToCart: () => void;
 }) {
-  return (
-    <div className="min-w-[320px] h-fit mb-6 rounded-3xl bg-gray-50">
-      <ProjectStats />
-      {props.isBeforeRoundEndDate && (
-        <CartButtonToggle
-          isAlreadyInCart={props.isAlreadyInCart}
-          addToCart={props.addToCart}
-          removeFromCart={props.removeFromCart}
-        />
-      )}
-    </div>
-  );
-}
-
-export function ProjectStats() {
   const { chainId, roundId, applicationId } = useProjectDetailsParams();
-  const { round } = useRoundById(Number(chainId), roundId);
   const dataLayer = useDataLayer();
+
   const { data: application } = useApplication(
     {
       chainId: Number(chainId as string),
@@ -531,6 +516,40 @@ export function ProjectStats() {
     dataLayer
   );
 
+  return (
+    <div>
+      <div className="min-w-[320px] h-fit mb-6 rounded-3xl bg-gray-50">
+        <ProjectStats application={application}/>
+        {props.isBeforeRoundEndDate && (
+          <CartButtonToggle
+            isAlreadyInCart={props.isAlreadyInCart}
+            addToCart={props.addToCart}
+            removeFromCart={props.removeFromCart}
+          />
+        )}
+      </div>
+      {!props.isBeforeRoundEndDate &&
+        <a
+          href={`/#/projects/${application?.project.id}`}
+          target="_blank"
+          className="mt-4 flex font-bold justify-center border rounded-lg px-4 py-2"
+        >
+          <ArrowTrendingUpIcon className="w-4 h-4 inline-block mt-1 mr-2" />
+          View history
+          <LinkIcon className="w-4 h-4 ml-2 mt-1" />
+        </a>
+      }
+    </div>
+  );
+}
+
+export function ProjectStats(props: {
+  application: Application | undefined
+}) {
+  const { chainId, roundId } = useProjectDetailsParams();
+  const { round } = useRoundById(Number(chainId), roundId);
+  const application = props.application;
+
   const timeRemaining =
     round?.roundEndTime && !isInfiniteDate(round?.roundEndTime)
       ? formatDistanceToNowStrict(round.roundEndTime)
@@ -570,6 +589,7 @@ export function ProjectStats() {
               : "Round ended"
         }
       </Stat>
+
     </div>
   );
 }