From 3e578234634a1d7e7e5f6e8d2dc4a303c9a58c97 Mon Sep 17 00:00:00 2001
From: yu-zhen <wlphg010688@gmail.com>
Date: Sat, 4 Jan 2025 01:59:03 +0800
Subject: [PATCH] chore: adjust ui bugs

---
 packages/interface/src/components/BallotOverview.tsx   | 10 ++++++++--
 packages/interface/src/components/Footer.tsx           | 10 +++++-----
 packages/interface/src/components/Header.tsx           |  7 +++++--
 .../features/ballot/components/BallotConfirmation.tsx  |  2 +-
 .../interface/src/features/home/components/FaqItem.tsx |  2 +-
 .../src/features/projects/components/ProjectItem.tsx   |  2 +-
 6 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/interface/src/components/BallotOverview.tsx b/packages/interface/src/components/BallotOverview.tsx
index 0dbaf952..1bd50621 100644
--- a/packages/interface/src/components/BallotOverview.tsx
+++ b/packages/interface/src/components/BallotOverview.tsx
@@ -25,7 +25,13 @@ export const BallotOverview = ({ title = undefined, pollId }: IBallotOverviewPro
 
   const { asPath } = useRouter();
 
-  const showButton = useMemo(() => !asPath.includes("ballot"), [asPath]);
+  const showButton = useMemo(
+    () =>
+      !asPath.includes("ballot") &&
+      (roundState === ERoundState.VOTING ||
+        ((roundState === ERoundState.TALLYING || roundState === ERoundState.RESULTS) && ballot.published)),
+    [asPath],
+  );
 
   return (
     <Link
@@ -35,7 +41,7 @@ export const BallotOverview = ({ title = undefined, pollId }: IBallotOverviewPro
           : `/rounds/${pollId}/ballot`
       }
     >
-      <div className="dark:bg-lightBlack w-64 flex-col items-center gap-2 bg-white uppercase dark:text-white">
+      <div className="dark:bg-lightBlack sm:w-66 w-full flex-col items-center gap-2 bg-white uppercase dark:text-white">
         <Heading as="h3" size="3xl">
           {title}
         </Heading>
diff --git a/packages/interface/src/components/Footer.tsx b/packages/interface/src/components/Footer.tsx
index 340475c5..19b9e116 100644
--- a/packages/interface/src/components/Footer.tsx
+++ b/packages/interface/src/components/Footer.tsx
@@ -7,8 +7,8 @@ import { config } from "~/config";
 import { Logo } from "./ui/Logo";
 
 export const Footer = (): JSX.Element => (
-  <footer className="dark:border-lighterBlack flex items-center justify-between border-t border-gray-300 bg-gray-50 px-12 py-9 dark:bg-black dark:text-white">
-    <div className="flex items-center justify-start gap-4">
+  <footer className="dark:border-lighterBlack flex items-center justify-between border-t border-gray-300 bg-gray-50 px-2 py-4 sm:px-12 sm:py-9 dark:bg-black dark:text-white">
+    <div className="flex items-center justify-start gap-2 sm:gap-4">
       <a aria-label="twitter" href="https://x.com/zkMACI" rel="noreferrer" target="_blank">
         <FaXTwitter />
       </a>
@@ -27,16 +27,16 @@ export const Footer = (): JSX.Element => (
       </a>
     </div>
 
-    <div className="flex justify-end gap-4">
+    <div className="flex justify-end gap-2 sm:gap-4">
       <p className="text-red flex items-center">Git Version: {config.commitHash}</p>
 
-      <a className="flex items-center gap-1" href="https://maci.pse.dev" rel="noreferrer" target="_blank">
+      <a className="flex items-center sm:gap-1" href="https://maci.pse.dev" rel="noreferrer" target="_blank">
         <span>Docs</span>
 
         <Image alt="arrow-go-to" className="dark:invert" height="18" src="/arrow-go-to.svg" width="18" />
       </a>
 
-      <a className="flex items-center gap-1" href="https://maci.pse.dev" rel="noreferrer" target="_blank">
+      <a className="flex items-center sm:gap-1" href="https://maci.pse.dev" rel="noreferrer" target="_blank">
         <span>About</span>
 
         <Image alt="arrow-go-to" className="dark:invert" height="18" src="/arrow-go-to.svg" width="18" />
diff --git a/packages/interface/src/components/Header.tsx b/packages/interface/src/components/Header.tsx
index 0e232954..e5de98e1 100644
--- a/packages/interface/src/components/Header.tsx
+++ b/packages/interface/src/components/Header.tsx
@@ -73,7 +73,10 @@ const Header = ({ navLinks, pollId = "" }: IHeaderProps) => {
   }, [theme, setTheme]);
 
   // the URI of round index page looks like: /rounds/:pollId, without anything else, which is the reason why the length is 3
-  const isRoundIndexPage = useMemo(() => asPath.includes("rounds") && asPath.split("/").length === 3, [asPath]);
+  const isRoundProjectPage = useMemo(
+    () => asPath.includes("rounds") && !asPath.includes("applications") && !asPath.includes("ballot"),
+    [asPath],
+  );
 
   return (
     <header className="dark:border-lighterBlack dark:bg-lightBlack relative z-[100] border-b border-gray-200 bg-white dark:text-white">
@@ -96,7 +99,7 @@ const Header = ({ navLinks, pollId = "" }: IHeaderProps) => {
         <div className="hidden h-full items-center gap-4 overflow-x-auto uppercase md:flex">
           {navLinks.map((link) => {
             const isActive =
-              asPath.includes(link.children.toLowerCase()) || (link.children === "Projects" && isRoundIndexPage);
+              asPath.includes(link.children.toLowerCase()) || (link.children === "Projects" && isRoundProjectPage);
 
             return (
               <NavLink key={link.href} href={link.href} isActive={isActive}>
diff --git a/packages/interface/src/features/ballot/components/BallotConfirmation.tsx b/packages/interface/src/features/ballot/components/BallotConfirmation.tsx
index c7d9fa63..2e8fa2d7 100644
--- a/packages/interface/src/features/ballot/components/BallotConfirmation.tsx
+++ b/packages/interface/src/features/ballot/components/BallotConfirmation.tsx
@@ -71,7 +71,7 @@ export const BallotConfirmation = ({ pollId }: IBallotConfirmationProps): JSX.El
 
   return (
     <div className="flex w-full justify-center dark:text-white">
-      <section className="md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
+      <section className="w-full md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
         <Heading as="h2" className="tracking-tighter" size="4xl">
           Your ballot has been successfully submitted 🥳
         </Heading>
diff --git a/packages/interface/src/features/home/components/FaqItem.tsx b/packages/interface/src/features/home/components/FaqItem.tsx
index afd4de91..af539def 100644
--- a/packages/interface/src/features/home/components/FaqItem.tsx
+++ b/packages/interface/src/features/home/components/FaqItem.tsx
@@ -17,7 +17,7 @@ export const FAQItem = ({ title, description }: IFAQItemProps): JSX.Element => {
   return (
     <div className="flex w-4/5 flex-col gap-4 border-b border-b-black py-6 sm:w-3/5 dark:border-b-white dark:text-white">
       <button className="flex cursor-pointer justify-between" type="button" onClick={openDescription}>
-        <p className="w-full font-mono text-2xl uppercase sm:w-auto">{title}</p>
+        <p className="w-full text-left font-mono text-2xl uppercase sm:w-auto">{title}</p>
 
         <Image
           alt="arrow-down"
diff --git a/packages/interface/src/features/projects/components/ProjectItem.tsx b/packages/interface/src/features/projects/components/ProjectItem.tsx
index db4142ca..16798465 100644
--- a/packages/interface/src/features/projects/components/ProjectItem.tsx
+++ b/packages/interface/src/features/projects/components/ProjectItem.tsx
@@ -51,7 +51,7 @@ export const ProjectItem = ({
           <Skeleton isLoading={isLoading}>{metadata.data?.name}</Skeleton>
         </Heading>
 
-        <div className="line-clamp-2 h-10 text-sm text-gray-400">
+        <div className="mb-2 line-clamp-2 h-10 text-sm text-gray-400">
           <Skeleton className="w-full" isLoading={isLoading}>
             {metadata.data?.bio}
           </Skeleton>