feat: general ui fixes (#61)

kalidiagne · web-flow · commit 024ca5fbed3a · 2025-07-14T11:20:39.000+01:00
diff --git a/components/WalletContainer.tsx b/components/WalletContainer.tsx
@@ -38,6 +38,17 @@ const WalletContainer = () => {
     query: { enabled: !!ensName },
   });
 
+  if (!isConnected) {
+    return (
+      <button
+        className="cursor:pointer flex h-[48px] min-w-[112px] flex-row items-center justify-center gap-1 rounded-xl border border-primary-400 bg-primary-400 text-base font-semibold leading-tight text-neutral-0 outline-none transition-all hover:border-primary-500 hover:bg-primary-500 hover:shadow-primary-md focus:outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset active:border-primary-800 active:bg-primary-800 aria-disabled:border-primary-100 aria-disabled:bg-primary-100 aria-disabled:text-primary-300"
+        onClick={() => open()}
+      >
+        Connect
+      </button>
+    );
+  }
+
   return (
     <button
       className={classNames(
@@ -55,7 +66,7 @@ const WalletContainer = () => {
         </div>
       )}
 
-      {!isConnected && <span>Connect</span>}
+      {!isConnected && <button>Connect</button>}
     </button>
   );
 };
diff --git a/components/nav/navbar.tsx b/components/nav/navbar.tsx
@@ -28,7 +28,7 @@ export const Navbar: React.FC = () => {
           <Link
             href="/"
             className={classNames(
-              "flex items-center gap-x-3 rounded-full md:rounded-lg",
+              "flex cursor-pointer items-center gap-x-3 rounded-full md:rounded-lg",
               "outline-none focus:outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset" // focus styles
             )}
           >
diff --git a/components/proposalAction/proposalAction.tsx b/components/proposalAction/proposalAction.tsx
@@ -86,7 +86,7 @@ const ActionItem = ({ index, rawAction }: { index: number; rawAction: RawAction
               </Link>
             </div>
           </div>
-          <span className="hidden text-sm leading-tight text-neutral-500 sm:block md:text-base">{title}</span>
+          <span className="hidden text-sm leading-tight text-neutral-500 md:text-base">{title}</span>
         </div>
       </AccordionItemHeader>
 
diff --git a/plugins/maciVoting/components/VoteResultCard.tsx b/plugins/maciVoting/components/VoteResultCard.tsx
@@ -100,7 +100,7 @@ export const VoteResultCard = ({ results }: VoteResultCardProps) => {
             </div>
           </div>
 
-          <div className="grid grid-cols-3 gap-2">
+          <div className="grid grid-cols-1 gap-2 lg:grid-cols-3">
             <div className={`p-4 text-center ${bgClass("yes")} rounded-xl border`}>
               <CheckCircle className={classNames(`mx-auto h-5 w-5`, textClass("yes"))} />
               <div
diff --git a/plugins/maciVoting/components/proposal/header.tsx b/plugins/maciVoting/components/proposal/header.tsx
@@ -16,6 +16,7 @@ import { type ReactNode } from "react";
 import { Publisher } from "@/components/publisher";
 import { getSimpleRelativeTimeFromDate } from "@/utils/dates";
 import { unixTimestampToDate } from "../../utils/formatPollDate";
+import Link from "next/link";
 
 interface ProposalHeaderProps {
   proposalNumber: number;
@@ -36,6 +37,15 @@ const ProposalHeader: React.FC<ProposalHeaderProps> = ({ proposal, proposalMetad
     <div className="flex w-full justify-center bg-neutral-0">
       {/* Wrapper */}
       <MainSection className="flex flex-col gap-y-6 md:px-16 md:py-10">
+        <Link className="mr-auto flex cursor-pointer items-center gap-2" href="/plugins/maci-voting">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M6.52268 9.78578L10.9927 5.31578L9.81435 4.13745L3.33268 10.6191L9.81435 17.1008L10.9927 15.9225L6.52268 11.4525H16.666V9.78578H6.52268Z"
+              fill="currentColor"
+            />
+          </svg>
+          <span className="text-base">Back</span>
+        </Link>
         {/* Title & description */}
         <div className="flex w-full flex-col gap-y-2">
           <div className="flex w-full items-center gap-x-4">
diff --git a/plugins/maciVoting/components/proposal/index.tsx b/plugins/maciVoting/components/proposal/index.tsx
@@ -51,15 +51,7 @@ export default function ProposalCard(props: ProposalInputs) {
   const winningOption = getWinningOption(proposal?.tally as Tally);
 
   if (!proposal && showLoading) {
-    return (
-      <section className="mb-4 w-full">
-        <Card className="p-4">
-          <span className="xs:px-10 px-4 py-5 md:px-6 lg:px-7">
-            <PleaseWaitSpinner fullMessage="Loading proposal..." />
-          </span>
-        </Card>
-      </section>
-    );
+    return <Card className="mb-4 min-h-[120px] animate-pulse bg-slate p-4" />;
   } else if (!proposalMetadata?.title && !proposalMetadata?.summary) {
     // We have the proposal but no metadata yet
     return (
diff --git a/plugins/maciVoting/pages/new.tsx b/plugins/maciVoting/pages/new.tsx
@@ -15,6 +15,7 @@ import { NEXT_MINIMUM_START_DELAY_IN_SECONDS, PUBLIC_CHAIN, PUBLIC_MACI_VOTING_P
 import { ActionCard } from "@/components/actions/action";
 import { useMutation } from "@tanstack/react-query";
 import classNames from "classnames";
+import Link from "next/link";
 
 enum ActionType {
   Signaling,
@@ -38,6 +39,15 @@ export default function Create() {
   const { writeContract: createProposalWrite, data: createTxHash, status, error } = useWriteContract();
   const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({ hash: createTxHash });
   const [actionType, setActionType] = useState<ActionType>(ActionType.Signaling);
+  const [errors, setErrors] = useState<{
+    title?: string;
+    summary?: string;
+    description?: string;
+    startDate?: string;
+    endDate?: string;
+    withdrawal?: string;
+    custom?: string;
+  }>({});
 
   const changeActionType = (actionType: ActionType) => {
     setActions([]);
@@ -82,20 +92,21 @@ export default function Create() {
   }, [status, createTxHash, isConfirming, isConfirmed, error, push]);
 
   const submitProposal = async () => {
+    let formErrors = {};
     try {
       // Check metadata
       if (!title.trim()) {
-        return addAlert("Invalid proposal details", {
-          description: "Please, enter a title",
-          type: "error",
-        });
+        formErrors = {
+          ...formErrors,
+          title: "Please, enter a title",
+        };
       }
 
       if (!summary.trim()) {
-        return addAlert("Invalid proposal details", {
-          description: "Please, enter a summary of what the proposal is about",
-          type: "error",
-        });
+        formErrors = {
+          ...formErrors,
+          summary: "Please, enter a summary of what the proposal is about",
+        };
       }
 
       // Check the action
@@ -104,18 +115,18 @@ export default function Create() {
           break;
         case ActionType.Withdrawal:
           if (!actions.length) {
-            return addAlert("Invalid proposal details", {
-              description: "Please ensure that the withdrawal address and the amount to transfer are valid",
-              type: "error",
-            });
+            formErrors = {
+              ...formErrors,
+              withdrawal: "Please ensure that the withdrawal address and the amount to transfer are valid",
+            };
           }
           break;
         default:
           if (!actions.length || !actions[0].data || actions[0].data === "0x") {
-            return addAlert("Invalid proposal details", {
-              description: "Please ensure that the values of the action to execute are complete and correct",
-              type: "error",
-            });
+            formErrors = {
+              ...formErrors,
+              custom: "Please ensure that the values of the action to execute are complete and correct",
+            };
           }
       }
 
@@ -132,21 +143,20 @@ export default function Create() {
       const ipfsPin = await uploadToPinata(blob);
 
       if (!startDate || !endDate) {
-        addAlert("You need to specify the start date and end date of the voting period", {
-          timeout: 4 * 1000,
-        });
-        return null;
+        formErrors = {
+          ...formErrors,
+          startDate: "You need to specify the start date and end date of the voting period",
+        };
       }
 
       const currentTime = Math.floor(Date.now() / 1000);
       const startDateTime = Math.floor(new Date(`${startDate}T${startTime ? startTime : "00:00:00"}`).getTime() / 1000);
 
       if (startDateTime - currentTime < NEXT_MINIMUM_START_DELAY_IN_SECONDS) {
-        addAlert(`The start date must be at least ${NEXT_MINIMUM_START_DELAY_IN_SECONDS} seconds in the future`, {
-          timeout: 4 * 1000,
-          type: "error",
-        });
-        return null;
+        formErrors = {
+          ...formErrors,
+          startDate: `The start date must be at least ${NEXT_MINIMUM_START_DELAY_IN_SECONDS} seconds in the future`,
+        };
       }
 
       const endDateTime = Math.floor(new Date(`${endDate}T${endTime ? endTime : "00:00:00"}`).getTime() / 1000);
@@ -160,6 +170,11 @@ export default function Create() {
         tryEarlyExecution,
       ]);
 
+      if (Object.keys(formErrors).length > 0) {
+        setErrors(formErrors);
+        return;
+      }
+
       if (chainId !== PUBLIC_CHAIN.id) await switchChainAsync({ chainId: PUBLIC_CHAIN.id });
       createProposalWrite({
         chainId: PUBLIC_CHAIN.id,
@@ -199,11 +214,20 @@ export default function Create() {
   const isDisabled = submitProposalMutation.isPending || isConfirming;
   return (
     <section className="container flex w-screen flex-col items-center pt-4 lg:pt-10">
+      <Link className="mb-6 mr-auto flex cursor-pointer items-center gap-2" href="/plugins/maci-voting">
+        <svg width="20" height="21" viewBox="0 0 20 21" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M6.52268 9.78578L10.9927 5.31578L9.81435 4.13745L3.33268 10.6191L9.81435 17.1008L10.9927 15.9225L6.52268 11.4525H16.666V9.78578H6.52268Z"
+            fill="currentColor"
+          />
+        </svg>
+        <span className="text-base">Back</span>
+      </Link>
       <div className="mb-6 w-full content-center justify-between">
         <h1 className="mb-10 text-3xl font-semibold text-neutral-900">Create Proposal</h1>
         <div className="mb-6">
           <InputText
-            label="Title"
+            label="Title *"
             wrapperClassName={inputWrapperClassName}
             maxLength={100}
             placeholder="A short title that describes the main purpose"
@@ -216,7 +240,7 @@ export default function Create() {
         <div className="mb-6">
           <InputText
             wrapperClassName={inputWrapperClassName}
-            label="Summary"
+            label="Summary *"
             maxLength={240}
             placeholder="A short summary that describes the main purpose"
             variant="default"
@@ -227,7 +251,7 @@ export default function Create() {
         </div>
         <div className="mb-6">
           <TextAreaRichText
-            label="Description"
+            label="Description *"
             wrapperClassName={inputWrapperClassName}
             className="pt-2"
             value={description}
@@ -241,7 +265,7 @@ export default function Create() {
             <InputDate
               wrapperClassName={inputWrapperClassName}
               className="w-full"
-              label="Start date"
+              label="Start date *"
               variant="default"
               value={startDate}
               onChange={(e) => setStartDate(e.target.value)}
@@ -260,7 +284,7 @@ export default function Create() {
             <InputDate
               wrapperClassName={inputWrapperClassName}
               className="w-full"
-              label="End date"
+              label="End date *"
               variant="default"
               value={endDate}
               onChange={(e) => setEndDate(e.target.value)}
@@ -341,6 +365,14 @@ export default function Create() {
           </div>
         </div>
 
+        <div className="flex flex-col gap-2">
+          {Object.entries(errors).map(([key, value]) => (
+            <div key={key} className="text-danger">
+              {value}
+            </div>
+          ))}
+        </div>
+
         <If condition={showLoading}>
           <Then>
             <div className="mb-6 mt-14">
diff --git a/plugins/maciVoting/pages/proposal.tsx b/plugins/maciVoting/pages/proposal.tsx
@@ -23,9 +23,20 @@ export default function ProposalDetail({ id: proposalId }: { id: string }) {
 
   if (!proposal || !proposalMetadata || !creator || showProposalLoading) {
     return (
-      <section className="justify-left items-left flex w-screen min-w-full max-w-full">
-        <PleaseWaitSpinner />
-      </section>
+      <div className="flex w-full flex-col gap-10">
+        <div className="h-[250px] w-full bg-slate"></div>
+        <div className="mx-auto grid w-full max-w-screen-xl grid-cols-3 gap-12">
+          <div className="col-span-2 flex flex-col gap-6">
+            <div className="h-[200px] w-full rounded-xl bg-slate"></div>
+            <div className="h-[200px] w-full rounded-xl bg-slate"></div>
+            <div className="h-[200px] w-full rounded-xl bg-slate"></div>
+          </div>
+          <div className="flex flex-col gap-6">
+            <div className="aspect-video w-full rounded-xl bg-slate"></div>
+            <div className="h-[140px] w-full rounded-xl bg-slate"></div>
+          </div>
+        </div>
+      </div>
     );
   }
 
@@ -41,7 +52,7 @@ export default function ProposalDetail({ id: proposalId }: { id: string }) {
       />
 
       <div className="mx-auto w-full max-w-screen-xl px-4 py-6 md:px-16 md:pb-20 md:pt-10">
-        <div className="flex w-full flex-col gap-x-12 gap-y-6 md:flex-row">
+        <div className="mg:gap-y-6 flex w-full flex-col gap-6 md:flex-row md:gap-x-12">
           <div className="flex flex-col gap-y-6 md:w-[63%] md:shrink-0">
             <BodySection body={proposalMetadata?.description || "No description was provided"} />
             <If condition={canFinalize && finalizeStatus !== "submitted"}>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -11,6 +11,8 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
+        slate: "#CBD5E1",
+        danger: "#e7000b",
         voting: {
           yes: "#10b981",
           no: "#dc2626",

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ export const Navbar: React.FC = () => {`
`28`	`28`	`<Link`
`29`	`29`	`href="/"`
`30`	`30`	`className={classNames(`
`31`		`- "flex items-center gap-x-3 rounded-full md:rounded-lg",`
	`31`	`+ "flex cursor-pointer items-center gap-x-3 rounded-full md:rounded-lg",`
`32`	`32`	`"outline-none focus:outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset" // focus styles`
`33`	`33`	`)}`
`34`	`34`	`>`