feat: scroll mobile designs (#2975)

* feat: scroll mobile designs * feat: remaining styling updates for scroll badge * feat(app): include changes after merge conflict * fix(app): remove unused vars
passportxyz · Oct 16, 2024 · 6991cfa · 6991cfa
1 parent c10f2ff
commit 6991cfa
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 68 deletions.
diff --git a/app/__tests__/components/ScrollCampaign.test.tsx b/app/__tests__/components/ScrollCampaign.test.tsx
@@ -15,6 +15,7 @@ import { useMintBadge } from "../../hooks/useMintBadge";
 import { ProviderWithTitle } from "../../components/ScrollCampaign";
 import { ethers } from "ethers";
 import { scrollCampaignChain } from "../../config/scroll_campaign";
+import { useBreakpoint } from "../../hooks/useBreakpoint";
 
 jest.mock("@gitcoin/passport-database-client");
 jest.mock("ethers");
@@ -138,6 +139,8 @@ jest.mock("../../hooks/useScrollBadge", () => {
   };
 });
 
+jest.mock("../../hooks/useBreakpoint");
+
 describe("Landing page tests", () => {
   it("goes to next page when login successful", async () => {
     const mockUseLoginFlow = jest.fn().mockReturnValue({
@@ -181,6 +184,7 @@ describe("Component tests", () => {
   });
   it("shows step 0 correctly", () => {
     (useParams as jest.Mock).mockReturnValue({ campaignId: "scroll-developer", step: "0" });
+    (useBreakpoint as jest.Mock).mockReturnValue(true);
 
     render(<ScrollStepsBar />);
 
@@ -199,6 +203,7 @@ describe("Component tests", () => {
 
   it("shows step 1 correctly", () => {
     (useParams as jest.Mock).mockReturnValue({ campaignId: "scroll-developer", step: "1" });
+    (useBreakpoint as jest.Mock).mockReturnValue(true);
 
     render(<ScrollStepsBar />);
 

diff --git a/app/components/ScrollCampaign.tsx b/app/components/ScrollCampaign.tsx
@@ -23,24 +23,31 @@ export interface ProviderWithTitle extends Provider {
   title: string;
 }
 
+export const BadgeCTA = ({ header, body }: { header: string; body: string }) => (
+  <>
+    <div className="text-3xl lg:text-5xl text-[#FFEEDA]">{header}</div>
+    <div className="text-lg lg:text-xl text-[#FFEEDA] mt-2">{body}</div>
+  </>
+);
+
 const ScrollLogin = () => {
   const nextStep = useNextCampaignStep();
   const { isLoggingIn, signIn, loginStep } = useLoginFlow({ onLoggedIn: nextStep });
 
   return (
     <ScrollCampaignPage>
-      <div className="text-5xl text-[#FFEEDA]">Developer Badge</div>
-      <div className="text-xl mt-2">
-        Connect your GitHub account to prove the number of contributions you have made, then mint your badge to prove
-        you are a Rust developer.
-      </div>
-      <div className="mt-8">
+      <BadgeCTA
+        header="Developer Badge"
+        body="Connect your GitHub account to prove the number of contributions you have made, then mint your badge to prove
+        you are a ZK developer."
+      />
+      <div className="mt-8 w-full lg:w-auto">
         <LoadButton
           data-testid="connectWalletButton"
           variant="custom"
           onClick={signIn}
           isLoading={isLoggingIn}
-          className="text-color-1 text-lg font-bold bg-[#FF684B] hover:brightness-150 py-3 transition-all duration-200"
+          className="text-color-1 text-lg font-bold bg-[#FF684B] hover:brightness-150 py-3 transition-all duration-200 w-full"
         >
           <div className="flex flex-col items-center justify-center">
             {isLoggingIn ? (

diff --git a/app/components/scroll/ScrollCampaignPage.tsx b/app/components/scroll/ScrollCampaignPage.tsx
@@ -1,5 +1,5 @@
 import { ProviderWithTitle } from "../ScrollCampaign";
-import { BackgroundImage, ScrollCampaignPageRoot, ScrollStepsBar } from "./ScrollLayout";
+import { BackgroundImage, MobileBackgroundImage, ScrollCampaignPageRoot, ScrollStepsBar } from "./ScrollLayout";
 
 export const ScrollCampaignPage = ({
   children,
@@ -32,11 +32,12 @@ export const ScrollCampaignPage = ({
           </div>
         </div>
         <div className="flex col-start-1 col-end-3 row-start-1">
-          <div className="flex flex-col min-h-screen justify-center items-center shrink-0 grow w-1/2">
-            <div className="mt-24 mb-28 mx-8 lg:mr-1 lg:ml-8 flex flex-col items-start justify-center max-w-[572px]">
-              <ScrollStepsBar className="mb-8" />
+          <div className="flex flex-col min-h-screen justify-start lg:justify-center items-center shrink-0 grow w-1/2">
+            <div className="mt-24 mb-28 mx-8 lg:mr-1 lg:ml-8 flex flex-col items-start justify-center max-w-[572px] z-10">
+              <ScrollStepsBar className="mb-2 lg:mb-8" />
               {children}
             </div>
+            <MobileBackgroundImage />
           </div>
           <BackgroundImage fadeBackgroundImage={fadeBackgroundImage} />
         </div>

diff --git a/app/components/scroll/ScrollConnectGithub.tsx b/app/components/scroll/ScrollConnectGithub.tsx
@@ -16,6 +16,7 @@ import { datadogLogs } from "@datadog/browser-logs";
 import { LoadButton } from "../LoadButton";
 import { GitHubIcon } from "../WelcomeFooter";
 import { ScrollCampaignPage } from "./ScrollCampaignPage";
+import { BadgeCTA } from "../ScrollCampaign";
 
 export const ScrollConnectGithub = () => {
   const goToNextStep = useNextCampaignStep();
@@ -128,18 +129,17 @@ export const ScrollConnectGithub = () => {
         </>
       ) : (
         <>
-          <div className="text-5xl text-[#FFEEDA]">Connect to Github</div>
-          <div className="text-xl mt-2 max-w-4xl">
-            Passport is privacy preserving and verifies you have 1 or more commits to the following Repos located here.
-            Click below and obtain the specific developer credentials
-          </div>
-          <div className="mt-8 flex items-center justify-start">
+          <BadgeCTA
+            header="Connect to Github"
+            body="Passport is privacy preserving and verifies you have 1 or more commits to the following Repos located here. Click below and obtain the specific developer credentials"
+          />
+          <div className="mt-8 flex items-center justify-start w-full lg:w-auto">
             <LoadButton
               data-testid="connectGithubButton"
               variant="custom"
               onClick={signInWithGithub}
               isLoading={isVerificationRunning || areBadgesLoading}
-              className="text-color-1 text-lg border-2 border-white hover:brightness-150 py-3 transition-all duration-200 pl-3 pr-5"
+              className="text-color-1 text-lg border-2 border-white hover:brightness-150 py-3 transition-all duration-200 pl-3 pr-5 w-full lg:w-auto"
             >
               <GitHubIcon /> {msg ? msg : "Connect to Github"}
             </LoadButton>

diff --git a/app/components/scroll/ScrollInitiateMintBadge.tsx b/app/components/scroll/ScrollInitiateMintBadge.tsx
@@ -11,6 +11,8 @@ import { useWalletStore } from "../../context/walletStore";
 import { ethers } from "ethers";
 import { Hyperlink } from "@gitcoin/passport-platforms";
 import ScrollCanvasProfileRegistryAbi from "../../abi/ScrollCanvasProfileRegistry.json";
+import { RenderedBadges } from "./ScrollMintedBadge";
+import { useBreakpoint } from "../../hooks/useBreakpoint";
 
 export const ScrollInitiateMintBadge = ({
   onMint,
@@ -32,6 +34,7 @@ export const ScrollInitiateMintBadge = ({
   const [canvasCheckPaused, setCanvasCheckPaused] = useState(false);
   const { failure } = useMessage();
   const address = useWalletStore((state) => state.address);
+  const isLg = useBreakpoint("lg");
 
   const loading = credentialsLoading || hasCanvas === undefined;
 
@@ -80,11 +83,11 @@ export const ScrollInitiateMintBadge = ({
     <ScrollCampaignPage fadeBackgroundImage={loading || hasBadge} earnedBadges={earnedBadges}>
       <ScrollLoadingBarSection
         isLoading={loading}
-        className={`text-5xl ${hasBadge ? "text-[#FFEEDA]" : "text-[#FF684B]"}`}
+        className={`text-3xl lg:text-5xl ${hasBadge ? "text-[#FFEEDA]" : "text-[#FF684B]"}`}
       >
         {hasBadge ? "Congratulations!" : "We're sorry!"}
       </ScrollLoadingBarSection>
-      <ScrollLoadingBarSection isLoading={loading} className="text-xl mt-2">
+      <ScrollLoadingBarSection isLoading={loading} className="text-lg lg:text-xl mt-2">
         {hasBadge ? (
           <div>
             You qualify for {highestLevelBadgeStamps.length} badge{hasMultipleBadges ? "s" : ""}.
@@ -110,7 +113,7 @@ export const ScrollInitiateMintBadge = ({
       </ScrollLoadingBarSection>
 
       {hasBadge && (
-        <div className="mt-8">
+        <div className="mt-8 w-full lg:w-aut">
           {hasCanvas === true ? (
             <>
               <LoadButton
@@ -121,12 +124,17 @@ export const ScrollInitiateMintBadge = ({
                   })
                 }
                 isLoading={loading}
-                className="text-color-1 text-lg font-bold bg-[#FF684B] hover:brightness-150 py-3 transition-all duration-200"
+                className="text-color-1 text-lg font-bold bg-[#FF684B] hover:brightness-150 py-3 transition-all duration-200 w-full lg:w-auto"
               >
                 <div className="flex flex-col items-center justify-center">
                   Mint Badge{hasMultipleBadges ? "s" : ""}
                 </div>
               </LoadButton>
+              {!isLg && (
+                <div className="flex flex-wrap justify-center items-end gap-8 text-center mt-6">
+                  <RenderedBadges badges={earnedBadges} />
+                </div>
+              )}
               {needToSwitchChain && (
                 <div className="text-[#FF684B] mt-4">
                   You will be prompted to switch to the Scroll chain, and then to submit a transaction.
@@ -138,7 +146,7 @@ export const ScrollInitiateMintBadge = ({
               variant="custom"
               onClick={() => setHasCanvas(undefined)}
               isLoading={hasCanvas === undefined || canvasCheckPaused}
-              className="text-color-1 text-lg font-bold bg-[#FF684B] hover:brightness-150 py-3 transition-all duration-200"
+              className="text-color-1 text-lg font-bold bg-[#FF684B] hover:brightness-150 py-3 transition-all duration-200 w-full lg:w-auto"
             >
               {hasCanvas === undefined ? "Checking..." : "Check Again"}
             </LoadButton>

diff --git a/app/components/scroll/ScrollLayout.tsx b/app/components/scroll/ScrollLayout.tsx
@@ -2,6 +2,7 @@ import { useWeb3ModalAccount } from "@web3modal/ethers/react";
 import PageRoot from "../PageRoot";
 import { AccountCenter } from "../AccountCenter";
 import { useParams } from "react-router-dom";
+import { useBreakpoint } from "../../hooks/useBreakpoint";
 
 export const ScrollHeader = ({ className }: { className?: string }) => {
   return (
@@ -59,9 +60,9 @@ export const ScrollHeader = ({ className }: { className?: string }) => {
 export const ScrollFooter = ({ className }: { className?: string }) => {
   return (
     <div
-      className={`flex items-center justify-center drop-shadow-text md:justify-end mx-24 mb-12 text-color-1 text-alt ${className}`}
+      className={`flex items-center justify-center drop-shadow-text md:justify-end md:mx-24 mb-12 text-color-1 text-alt ${className}`}
     >
-      <div className="mr-3 hidden md:block">powered by</div>
+      <div className="mr-3">powered by</div>
       <img src="/assets/passportLogoWhite.svg" alt="Passport Logo" className="h-8 min-h-8 w-7 min-w-7" />
       <div className="font-body text-lg ml-1">Passport</div>
     </div>
@@ -90,24 +91,31 @@ export const BackgroundImage = ({ fadeBackgroundImage }: { fadeBackgroundImage?:
   </div>
 );
 
+export const MobileBackgroundImage = () => (
+  <img
+    className={`absolute bottom-0 left-0 w-full opacity-50 z-0 block lg:hidden`}
+    src="/assets/campaignBackgroundMobile.png"
+    alt="Campaign Background Image"
+  />
+);
+
 const SCROLL_STEP_NAMES = ["Connect Wallet", "Connect to Github", "Mint Badge"];
-export const ScrollStepsBar = ({
-  className,
-  highLightCurrentStep = true,
-}: {
-  className?: string;
-  highLightCurrentStep?: boolean;
-}) => {
+export const ScrollStepsBar = ({ className }: { className?: string }) => {
+  const isLg = useBreakpoint("lg");
   const { step } = useParams();
+  const stepNames = SCROLL_STEP_NAMES.filter((_, index) => isLg || index === (parseInt(step || "") || 0));
+  const bright = (index: number) => {
+    if (!isLg) {
+      return true;
+    }
+    return index === (parseInt(step || "") || 0);
+  };
   return (
     <div className={`flex flex-wrap gap-4 items-center ${className}`}>
-      {SCROLL_STEP_NAMES.map((stepName, index) => (
-        <div
-          key={index}
-          className={`flex items-center ${index === (parseInt(step || "") || 0) ? "" : "brightness-50"}`}
-        >
+      {stepNames.map((stepName, index) => (
+        <div key={index} className={`flex items-center ${!bright(index) && "brightness-50"}`}>
           <div className="w-6 h-6 mr-2 rounded-full flex items-center shrink-0 justify-center text-center bg-[#FF684B]">
-            {index + 1}
+            {SCROLL_STEP_NAMES.indexOf(stepName) + 1}
           </div>
           {stepName}
         </div>

diff --git a/app/components/scroll/ScrollMintedBadge.tsx b/app/components/scroll/ScrollMintedBadge.tsx
@@ -4,9 +4,7 @@ import { useDatastoreConnectionContext } from "../../context/datastoreConnection
 import { useScrollBadge } from "../../hooks/useScrollBadge";
 import { useMessage } from "../../hooks/useMessage";
 import { useEffect } from "react";
-import PageRoot from "../PageRoot";
-import { AccountCenter } from "../AccountCenter";
-import { ScrollFooter, ScrollHeader } from "./ScrollLayout";
+import { MobileBackgroundImage, ScrollCampaignPageRoot } from "./ScrollLayout";
 import { badgeContractInfo, scrollCampaignChain } from "../../config/scroll_campaign";
 import { LoadButton } from "../LoadButton";
 import { ProviderWithTitle } from "../ScrollCampaign";
@@ -35,9 +33,13 @@ export const getHighestEarnedBadgeProviderInfo = (contractAddress: string, level
 export const RenderedBadges = ({ badges }: { badges: ProviderWithTitle[] }) => (
   <>
     {badges.map((badge, index) => (
-      <div key={index} className={`flex flex-col items-center ${badges.length != 2 && "even:mb-10"}`}>
-        <img src={badge.image} alt={`Badge Level ${badge.level}`} className="badge-image w-32 h-32 object-contain" />
-        <div className="mt-2 text-lg font-semibold">{badge.title}</div>
+      <div key={index} className={`flex flex-col items-center ${badges.length != 2 && "even:mb-10"} w-20 md:w-auto`}>
+        <img
+          src={badge.image}
+          alt={`Badge Level ${badge.level}`}
+          className="w-24 md:w-32 h-20 md:h-32 object-contain"
+        />
+        <div className="mt-2 text-sm lg:text-lg font-semibold">{badge.title}</div>
         <div className="text-sm">Level: {badge.level}</div>
       </div>
     ))}
@@ -47,7 +49,7 @@ export const RenderedBadges = ({ badges }: { badges: ProviderWithTitle[] }) => (
 export const ScrollMintedBadge = ({ badgesFreshlyMinted }: { badgesFreshlyMinted: boolean }) => {
   const goToLoginStep = useNavigateToRootStep();
   const goToGithubConnectStep = useNavigateToGithubConnectStep();
-  const { isConnected, address } = useWeb3ModalAccount();
+  const { address } = useWeb3ModalAccount();
   const { did, dbAccessToken } = useDatastoreConnectionContext();
   const { badges, areBadgesLoading, errors, hasAtLeastOneBadge } = useScrollBadge(address);
   const { failure } = useMessage();
@@ -77,16 +79,14 @@ export const ScrollMintedBadge = ({ badgesFreshlyMinted }: { badgesFreshlyMinted
   }, [errors, failure]);
 
   return (
-    <PageRoot className="text-color-1">
-      {isConnected && <AccountCenter />}
-      <ScrollHeader className="fixed top-0 left-0 right-0" />
-      <div className="flex grow">
-        <div className="flex flex-col min-h-screen justify-center items-center shrink-0 grow w-1/2 text-center">
+    <ScrollCampaignPageRoot>
+      <div className="flex grow mx-8 md:mx-10 py-10 md:py-0">
+        <div className="flex flex-col min-h-screen mt-16 lg:mt-0 justify-start lg:justify-center items-center shrink-0 grow w-1/2 text-center">
           <div className="mb-10">
             {badgesFreshlyMinted ? (
-              <div className="text-5xl text-[#FFEEDA]">Badges minted!</div>
+              <div className="text-3xl lg:text-5xl text-[#FFEEDA]">Badges minted!</div>
             ) : (
-              <div className="text-5xl text-[#FFEEDA]">You already minted available badges!</div>
+              <div className="text-3xl lg:text-5xl text-[#FFEEDA]">You already minted available badges!</div>
             )}
             {badgesFreshlyMinted && (
               <p>
@@ -117,7 +117,7 @@ export const ScrollMintedBadge = ({ badgesFreshlyMinted }: { badgesFreshlyMinted
           ) : badges.length === 0 ? (
             <div>No badges found.</div>
           ) : (
-            <div className="flex flex-wrap justify-center items-end gap-8">
+            <div className="flex flex-wrap justify-center items-end gap-8 w-full">
               <RenderedBadges
                 badges={
                   badges
@@ -136,13 +136,13 @@ export const ScrollMintedBadge = ({ badgesFreshlyMinted }: { badgesFreshlyMinted
             onClick={() => {
               window.open("https://scroll.io/canvas", "_blank", "noopener,noreferrer");
             }}
-            className="text-color-1 text-lg border-2 border-white hover:brightness-150 py-3 transition-all duration-100 pl-3 pr-5 m-10"
+            className="text-color-1 text-lg border-2 border-white hover:brightness-150 py-3 transition-all duration-100 pl-3 pr-5 m-10 w-full md:w-3/4 lg:w-auto z-10"
           >
             See badges on Canvas
           </LoadButton>
         </div>
       </div>
-      <ScrollFooter className="absolute bottom-0 left-0 right-0 z-10" />
-    </PageRoot>
+      <MobileBackgroundImage />
+    </ScrollCampaignPageRoot>
   );
 };
diff --git a/app/components/scroll/ScrollMintingBadge.tsx b/app/components/scroll/ScrollMintingBadge.tsx
@@ -1,25 +1,22 @@
-import { useWeb3ModalAccount } from "@web3modal/ethers/react";
 import { ProviderWithTitle } from "../ScrollCampaign";
-import PageRoot from "../PageRoot";
-import { AccountCenter } from "../AccountCenter";
-import { ScrollFooter, ScrollHeader } from "./ScrollLayout";
+import { MobileBackgroundImage, ScrollCampaignPageRoot, ScrollFooter } from "./ScrollLayout";
 import { RenderedBadges } from "./ScrollMintedBadge";
 
 export const ScrollMintingBadge = ({ earnedBadges }: { earnedBadges: ProviderWithTitle[] }) => {
-  const { isConnected } = useWeb3ModalAccount();
   return (
-    <PageRoot className="text-color-1">
-      {isConnected && <AccountCenter />}
-      <ScrollHeader className="fixed top-0 left-0 right-0" />
-      <div className="flex grow">
-        <div className="flex flex-col min-h-screen justify-center items-center shrink-0 grow w-1/2 text-center">
-          <div className="text-5xl text-[#FFEEDA] mb-10">Minting badge{earnedBadges.length > 1 ? "s" : ""}...</div>
+    <ScrollCampaignPageRoot>
+      <div className="flex grow mx-8 md:mx-10 py-10 md:py-0">
+        <div className="flex flex-col min-h-screen mt-16 lg:mt-0 justify-start lg:justify-center items-center shrink-0 grow w-1/2 text-center">
+          <div className="text-3xl lg:text-5xl text-[#FFEEDA] mb-10">
+            Minting badge{earnedBadges.length > 1 ? "s" : ""}...
+          </div>
           <div className="flex flex-wrap justify-center items-end gap-8">
             <RenderedBadges badges={earnedBadges} />
           </div>
         </div>
       </div>
       <ScrollFooter className="absolute bottom-0 left-0 right-0 z-10" />
-    </PageRoot>
+      <MobileBackgroundImage />
+    </ScrollCampaignPageRoot>
   );
 };
diff --git a/app/public/assets/campaignBackgroundMobile.png b/app/public/assets/campaignBackgroundMobile.png