Merge pull request #400 from privacy-scaling-explorations/fix/mobile-…

…support-2 fix: mobile support for multi-round UI
privacy-scaling-explorations · Oct 22, 2024 · abe3cd9 · abe3cd9
2 parents 25fd30f + 821e1b0
commit abe3cd9
Show file tree

Hide file tree

Showing 24 changed files with 131 additions and 81 deletions.
diff --git a/packages/interface/src/components/Footer.tsx b/packages/interface/src/components/Footer.tsx
@@ -31,13 +31,13 @@ export const Footer = (): JSX.Element => (
 
     <div className="flex justify-end gap-4">
       <a className="flex items-center gap-1" href="https://maci.pse.dev" rel="noreferrer" target="_blank">
-        <span>Documentation</span>
+        <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">
-        <span>About MACI-PLATFORM</span>
+        <span>About</span>
 
         <Image alt="arrow-go-to" className="dark:invert" height="18" src="/arrow-go-to.svg" width="18" />
       </a>

diff --git a/packages/interface/src/components/Header.tsx b/packages/interface/src/components/Header.tsx
@@ -36,9 +36,13 @@ interface IMobileMenuProps {
 const MobileMenu = ({ isOpen = false, navLinks }: IMobileMenuProps) => (
   <div
     className={clsx("fixed left-0 top-16 z-10 h-full w-full bg-white transition-transform duration-150", {
-      "translate-x-full": !isOpen,
+      "-translate-x-full": !isOpen,
     })}
   >
+    <Link key="home" className={clsx("block p-4 text-2xl  font-semibold")} href="/">
+      Home
+    </Link>
+
     {navLinks.map((link) => (
       <Link key={link.href} className={clsx("block p-4 text-2xl  font-semibold")} {...link} />
     ))}

diff --git a/packages/interface/src/features/applications/components/ApplicationForm.tsx b/packages/interface/src/features/applications/components/ApplicationForm.tsx
@@ -126,14 +126,14 @@ export const ApplicationForm = ({ roundId }: IApplicationFormProps): JSX.Element
             </FormControl>
           </div>
 
-          <div className="mb-4 gap-4 md:flex">
+          <div className="mb-4 flex flex-col gap-4 sm:flex-row">
             <FormControl
               required
               hint="The size should be smaller than 1MB."
               label="Project avatar"
               name="profileImageUrl"
             >
-              <ImageUpload className="h-48 w-48 " />
+              <ImageUpload className="h-48 w-48" />
             </FormControl>
 
             <FormControl
@@ -143,7 +143,7 @@ export const ApplicationForm = ({ roundId }: IApplicationFormProps): JSX.Element
               label="Project background image"
               name="bannerImageUrl"
             >
-              <ImageUpload className="h-48 " />
+              <ImageUpload className="h-48" />
             </FormControl>
           </div>
         </FormSection>

diff --git a/packages/interface/src/features/applications/components/ApplicationHeader.tsx b/packages/interface/src/features/applications/components/ApplicationHeader.tsx
@@ -12,7 +12,7 @@ export const ApplicationHeader = ({ applications = [] }: IApplicationHeaderProps
       <SelectAllButton applications={applications} />
     </div>
 
-    <div className="flex-[8] pl-6">Project</div>
+    <div className="flex-[2] sm:flex-[8] sm:pl-6">Project</div>
 
     <div className="flex-[3]">Submitted on</div>
 

diff --git a/packages/interface/src/features/applications/components/ApplicationItem.tsx b/packages/interface/src/features/applications/components/ApplicationItem.tsx
@@ -34,12 +34,12 @@ export const ApplicationItem = ({
 
   return (
     <Link href={`/projects/${id}`} target="_blank">
-      <div className="dark:hover:bg-lighterBlack flex cursor-pointer items-center gap-2 py-4 hover:bg-blue-50">
-        <label className="flex flex-1 cursor-pointer justify-center p-2">
+      <div className="dark:hover:bg-lighterBlack flex cursor-pointer items-center gap-1 py-4 hover:bg-blue-50 sm:gap-2">
+        <label className="flex flex-1 cursor-pointer justify-center sm:p-2">
           <Checkbox disabled={isApproved} value={id} {...form.register(`selected`)} type="checkbox" />
         </label>
 
-        <div className="flex flex-[8] items-center gap-4">
+        <div className="flex flex-[5] items-center gap-4 sm:flex-[8]">
           <ProjectAvatar isLoading={isLoading} profileId={recipient} size="sm" url={profileImageUrl} />
 
           <div className="flex flex-col">

diff --git a/packages/interface/src/features/applications/components/ApplicationSteps.tsx b/packages/interface/src/features/applications/components/ApplicationSteps.tsx
@@ -17,7 +17,7 @@ interface IApplicationStepsProps {
 }
 
 const StepCategory = ({ title, progress }: IStepCategoryProps): JSX.Element => (
-  <div className="flex items-center gap-3">
+  <div className="flex items-center gap-1 text-xs sm:gap-3 sm:text-base">
     {progress === EStepState.ACTIVE && (
       <Image alt="circle-check-blue" height="22" src="/circle-check-blue.svg" width="22" />
     )}
@@ -26,16 +26,16 @@ const StepCategory = ({ title, progress }: IStepCategoryProps): JSX.Element => (
       <Image alt="circle-check-blue-filled" height="22" src="/circle-check-blue-filled.svg" width="22" />
     )}
 
-    {progress === EStepState.DEFAULT && <div className="h-4 w-4 rounded-full border-2 border-gray-300" />}
+    {progress <= EStepState.DEFAULT && <div className="h-4 w-4 rounded-full border-2 border-gray-300" />}
 
-    <p className={clsx("text-md", progress === EStepState.ACTIVE ? "text-blue-400" : "text-gray-300")}>{title}</p>
+    <div className={clsx("w-fit", progress === EStepState.ACTIVE ? "text-blue-400" : "text-gray-300")}>{title}</div>
   </div>
 );
 
-const Interline = (): JSX.Element => <div className="h-[1px] w-9 bg-gray-300" />;
+const Interline = (): JSX.Element => <div className="h-[1px] w-4 bg-gray-300 sm:w-9" />;
 
 export const ApplicationSteps = ({ step }: IApplicationStepsProps): JSX.Element => (
-  <div className="mb-4 flex items-center gap-4">
+  <div className="mb-4 flex items-center gap-1 sm:gap-4">
     <StepCategory progress={step} title="Project Profile" />
 
     <Interline />

diff --git a/packages/interface/src/features/applications/components/ApproveButton.tsx b/packages/interface/src/features/applications/components/ApproveButton.tsx
@@ -21,6 +21,7 @@ export const ApproveButton = ({ isLoading = false }: IApproveButtonProps): JSX.E
   return (
     <Button
       suppressHydrationWarning
+      className="mt-2 w-full sm:w-auto"
       disabled={!selectedCount || !isAdmin || isLoading || !isCorrectNetwork}
       size="auto"
       type="submit"

diff --git a/packages/interface/src/features/applications/components/ReviewApplicationDetails.tsx b/packages/interface/src/features/applications/components/ReviewApplicationDetails.tsx
@@ -19,7 +19,7 @@ const ValueField = ({ title, body = undefined, required = false }: IValueFieldPr
   const emptyPlaceholder = "(empty)";
 
   return (
-    <div className="flex flex-col gap-2 text-sm">
+    <div className="flex flex-col gap-2 text-xs sm:text-sm">
       <b className={clsx(required && "after:text-blue-400 after:content-['*']")}>{title}</b>
 
       <div className="text-light flex flex-wrap gap-2 text-gray-400">
@@ -55,7 +55,7 @@ export const ReviewApplicationDetails = (): JSX.Element => {
 
         <ValueField required body={application.bio} title="Project description" />
 
-        <div className="grid grid-flow-row grid-cols-2 gap-4">
+        <div className="grid grid-flow-row gap-4 sm:grid-cols-2">
           <ValueField required body={application.websiteUrl} title="Website" />
 
           <ValueField required body={application.payoutAddress} title="Payout address" />
@@ -65,7 +65,7 @@ export const ReviewApplicationDetails = (): JSX.Element => {
           <ValueField body={application.github} title="Github" />
         </div>
 
-        <div className="flex gap-6">
+        <div className="gap-6 sm:flex">
           <div>
             <p>Project avatar</p>
 
@@ -77,7 +77,7 @@ export const ReviewApplicationDetails = (): JSX.Element => {
             />
           </div>
 
-          <div className="flex-1">
+          <div className="mt-6 flex-1 sm:mt-0">
             <p>Project cover image</p>
 
             <div

diff --git a/packages/interface/src/features/applications/components/SelectAllButton.tsx b/packages/interface/src/features/applications/components/SelectAllButton.tsx
@@ -15,6 +15,7 @@ export const SelectAllButton = ({ applications = [] }: ISelectAllButtonProps): J
   const isAllSelected = selected.length > 0 && selected.length === applications.length;
   return (
     <Button
+      className="px-2 text-sm sm:px-4 sm:text-base"
       disabled={!applications.length}
       type="button"
       onClick={() => {

diff --git a/packages/interface/src/features/ballot/components/AllocationFormWrapper.tsx b/packages/interface/src/features/ballot/components/AllocationFormWrapper.tsx
@@ -51,7 +51,7 @@ export const AllocationFormWrapper = ({
               <ProjectAvatarWithName showDescription id={project.projectId} isLink={projectIsLink} />
             </Td>
 
-            <Td className="pr-0">
+            <Td className="pl-0 pr-0 sm:pl-2">
               <AllocationInput
                 defaultValue={project.amount}
                 disabled={disabled}

diff --git a/packages/interface/src/features/ballot/components/BallotConfirmation.tsx b/packages/interface/src/features/ballot/components/BallotConfirmation.tsx
@@ -72,7 +72,7 @@ export const BallotConfirmation = ({ roundId }: IBallotConfirmationProps): JSX.E
         <div className="mt-4 flex w-full justify-end">
           <h4>Total votes allocated:</h4>
 
-          <p>{sum}</p>
+          <p className="ml-1">{sum}</p>
         </div>
       </div>
 
@@ -85,22 +85,22 @@ export const BallotConfirmation = ({ roundId }: IBallotConfirmationProps): JSX.E
       />
 
       {roundState === ERoundState.VOTING && (
-        <Card>
+        <Card className="flex-col sm:flex-row">
           <div className="flex-3 flex flex-col gap-4">
             <b className="font-mono text-2xl uppercase">Changed your mind?</b>
 
             <p className="text-gray-400">Your can edit your ballot and resubmit it anytime during the voting period.</p>
           </div>
 
           <div>
-            <Button as={Link} href="/ballot" variant="primary">
+            <Button as={Link} className="w-80 sm:w-fit" href="/ballot" variant="primary">
               Edit my ballot
             </Button>
           </div>
         </Card>
       )}
 
-      <Card>
+      <Card className="flex-col sm:flex-row">
         <div className="flex-3 flex flex-col gap-4">
           <b className="font-mono text-2xl uppercase">{`Help us improve our next round of ${config.eventName}`}</b>
 
@@ -111,13 +111,13 @@ export const BallotConfirmation = ({ roundId }: IBallotConfirmationProps): JSX.E
         </div>
 
         <div>
-          <Button as={Link} href={feedbackUrl} target="_blank" variant="primary">
+          <Button as={Link} className="w-80 sm:w-fit" href={feedbackUrl} target="_blank" variant="primary">
             Share your feedback
           </Button>
         </div>
       </Card>
 
-      <Card>
+      <Card className="flex-col sm:flex-row">
         <div className="flex-3 flex flex-col gap-4">
           <b className="font-mono text-2xl uppercase">Want to run a round?</b>
 
@@ -128,7 +128,13 @@ export const BallotConfirmation = ({ roundId }: IBallotConfirmationProps): JSX.E
         </div>
 
         <div>
-          <Button as={Link} href="https://discord.com/invite/sF5CT5rzrR" target="_blank" variant="primary">
+          <Button
+            as={Link}
+            className="w-80 sm:w-fit"
+            href="https://discord.com/invite/sF5CT5rzrR"
+            target="_blank"
+            variant="primary"
+          >
             Contact us
           </Button>
         </div>

diff --git a/packages/interface/src/features/home/components/FaqItem.tsx b/packages/interface/src/features/home/components/FaqItem.tsx
@@ -15,9 +15,9 @@ export const FAQItem = ({ title, description }: IFAQItemProps): JSX.Element => {
   }, [isOpen, setIsOpen]);
 
   return (
-    <div className="flex w-3/5 flex-col gap-4 border-b border-b-black py-6 dark:border-b-white dark:text-white">
+    <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="font-mono text-2xl uppercase">{title}</p>
+        <p className="w-full font-mono text-2xl uppercase sm:w-auto">{title}</p>
 
         <Image
           alt="arrow-down"
@@ -28,7 +28,7 @@ export const FAQItem = ({ title, description }: IFAQItemProps): JSX.Element => {
         />
       </button>
 
-      {isOpen && description}
+      {isOpen && <p className="text-center sm:text-left">{description}</p>}
     </div>
   );
 };
diff --git a/packages/interface/src/features/home/components/FaqList.tsx b/packages/interface/src/features/home/components/FaqList.tsx
@@ -3,7 +3,7 @@ import { Heading } from "~/components/ui/Heading";
 import { FAQItem } from "./FaqItem";
 
 export const FAQList = (): JSX.Element => (
-  <div className="mt-28 flex flex-col items-center justify-center dark:text-white">
+  <div className="mt-14 flex flex-col items-center justify-center sm:mt-28 dark:text-white">
     <Heading size="6xl">FAQ</Heading>
 
     <FAQItem
@@ -13,7 +13,7 @@ export const FAQList = (): JSX.Element => (
 
     <FAQItem
       description="(This is related to what gatekeeper is used.)"
-      title="Who are the requirements for participation?"
+      title="What are the requirements for participation?"
     />
 
     <FAQItem

diff --git a/packages/interface/src/features/projects/components/ProjectContacts.tsx b/packages/interface/src/features/projects/components/ProjectContacts.tsx
@@ -3,6 +3,7 @@ import { FaXTwitter } from "react-icons/fa6";
 import { RiGlobalLine } from "react-icons/ri";
 
 import { Link } from "~/components/ui/Link";
+import useScreenSize from "~/hooks/useScreenSize";
 
 interface IProjectContactsProps {
   author?: string;
@@ -16,37 +17,41 @@ export const ProjectContacts = ({
   website = undefined,
   github = undefined,
   twitter = undefined,
-}: IProjectContactsProps): JSX.Element => (
-  <div className="my-8 grid w-full grid-cols-1 gap-4 border-y border-gray-200 px-2 py-4 text-blue-400 xl:grid-cols-2">
-    {author && (
-      <Link href={`https://etherscan.io/address/${author}`} target="_blank">
-        <FaEthereum />
-
-        {author}
-      </Link>
-    )}
-
-    {twitter && (
-      <Link href="https://x.com" target="_blank">
-        <FaXTwitter />
-        x.com
-      </Link>
-    )}
-
-    {website && (
-      <Link href={website} target="_blank">
-        <RiGlobalLine />
-
-        {website}
-      </Link>
-    )}
-
-    {github && (
-      <Link href="https://github.com" target="_blank">
-        <FaGithub />
-
-        {github}
-      </Link>
-    )}
-  </div>
-);
+}: IProjectContactsProps): JSX.Element => {
+  const { width } = useScreenSize();
+
+  return (
+    <div className="my-8 grid w-full grid-cols-1 gap-4 border-y border-gray-200 px-2 py-4 text-blue-400 xl:grid-cols-2">
+      {author && (
+        <Link href={`https://etherscan.io/address/${author}`} target="_blank">
+          <FaEthereum />
+
+          {width <= 640 ? `${author.slice(0, 6)}...${author.slice(-4)}` : author}
+        </Link>
+      )}
+
+      {twitter && (
+        <Link href="https://x.com" target="_blank">
+          <FaXTwitter />
+          x.com
+        </Link>
+      )}
+
+      {website && (
+        <Link href={website} target="_blank">
+          <RiGlobalLine />
+
+          {website}
+        </Link>
+      )}
+
+      {github && (
+        <Link href="https://github.com" target="_blank">
+          <FaGithub />
+
+          {github}
+        </Link>
+      )}
+    </div>
+  );
+};
diff --git a/packages/interface/src/features/projects/components/ProjectDetails.tsx b/packages/interface/src/features/projects/components/ProjectDetails.tsx
@@ -37,7 +37,7 @@ const ProjectDetails = ({
 
   return (
     <div className="relative dark:text-white">
-      <div className="mb-7">
+      <div className="mb-7 px-2">
         <Navigation projectName={attestation?.name ?? "project name"} roundId={roundId} />
       </div>
 
@@ -49,7 +49,7 @@ const ProjectDetails = ({
         <ProjectAvatar className="-mt-20 ml-8" rounded="full" size="lg" url={profileImageUrl} />
       </div>
 
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col items-center justify-between px-2 sm:flex-row">
         <Heading as="h3" size="3xl">
           {attestation?.name}
         </Heading>
@@ -59,9 +59,9 @@ const ProjectDetails = ({
 
       <ProjectContacts author={payoutAddress} github={github} twitter={twitter} website={websiteUrl} />
 
-      <p className="text-gray-400">{bio}</p>
+      <p className="px-2 text-gray-400">{bio}</p>
 
-      <div className="my-8 flex flex-col gap-8">
+      <div className="my-8 flex flex-col gap-8 px-2">
         <p className="text-xl uppercase">
           <b>Impact statements</b>
         </p>