Merge pull request #569 from privacy-scaling-explorations/chore/ui-fix

chore: adjust ui bugs
privacy-scaling-explorations · Jan 20, 2025 · 73248f3 · 73248f3
2 parents 53e3ac2 + 3e57823
commit 73248f3
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>