feat(api): 1273 - spacing adjustments to align with design tokens (pa…

…ssportxyz#1319)

app/components/BodyWrapper.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { PAGE_PADDING, CONTENT_MAX_WIDTH_INCLUDING_PADDING } from "./PageWidthGrid";
+
+const BodyWrapper = ({ children, className }: { children: React.ReactNode; className?: string }) => (
+  <div
+    className={`${PAGE_PADDING} ${CONTENT_MAX_WIDTH_INCLUDING_PADDING} w-full justify-self-center overflow-x-hidden ${className}`}
+  >
+    {children}
+  </div>
+);
+
+export default BodyWrapper;

app/components/CardList.tsx

@@ -21,12 +21,13 @@ import PageWidthGrid from "../components/PageWidthGrid";
 
 export type CardListProps = {
   isLoading?: boolean;
-  cardClassName?: string;
 };
 
+const cardClassName = "col-span-2 md:col-span-3 lg:col-span-2 xl:col-span-3";
+
 type SelectedProviders = Record<PLATFORM_ID, PROVIDER_ID[]>;
 
-export const CardList = ({ isLoading = false, cardClassName }: CardListProps): JSX.Element => {
+export const CardList = ({ isLoading = false }: CardListProps): JSX.Element => {
   const { allProvidersState, allPlatforms } = useContext(CeramicContext);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const btnRef = useRef();
@@ -112,7 +113,7 @@ export const CardList = ({ isLoading = false, cardClassName }: CardListProps): J
 
   return (
     <>
-      <PageWidthGrid nested={true}>
+      <PageWidthGrid>
         {PLATFORMS.map((platform, i) => {
           return isLoading ? (
             <LoadingCard key={i} className={cardClassName} />

app/components/Footer.tsx

@@ -1,14 +1,14 @@
 // --- React Methods
 import React from "react";
-import PageWidthGrid from "../components/PageWidthGrid";
+import PageWidthGrid, { PAGE_PADDING } from "../components/PageWidthGrid";
 
 export type FooterProps = {
   lightMode?: boolean;
 };
 
 export const Footer = ({ lightMode }: FooterProps): JSX.Element => {
   return (
-    <PageWidthGrid className="grid-flow-dense py-8 font-alt text-color-1 lg:flex" unconstrainedWidth>
+    <PageWidthGrid className={`grid-flow-dense py-8 font-alt text-color-1 lg:flex ${PAGE_PADDING}`}>
       <div className="col-span-3 grow md:col-span-4">
         <span className="text-color-3">Available on </span>
         <a href="https://ceramic.network/" target="_blank" rel="noopener noreferrer" className="hover:underline">

app/components/InitialWelcome.tsx

@@ -39,7 +39,7 @@ export const InitialWelcome = ({ onBoardFinished }: { onBoardFinished: () => voi
   return (
     <WelcomeWrapper content={welcomeSteps[step]}>
       <div className="flex w-full flex-col">
-        <div className="mb-5 flex w-full items-center justify-center">
+        <div className="mb-4 flex w-full items-center justify-center">
           Step {step + 1} of {welcomeSteps.length} {stepIndicator(step)}
         </div>
         <div className="grid w-full grid-cols-2 gap-4">

app/components/PageWidthGrid.tsx

@@ -4,21 +4,10 @@ export const PAGE_PADDING = "px-4 md:px-10 lg:px-20";
 export const CONTENT_MAX_WIDTH_INCLUDING_PADDING = "max-w-[1440px]";
 export const CONTENT_MAX_WIDTH = "max-w-screen-xl";
 
-const PageWidthGrid = ({
-  children,
-  className,
-  nested,
-  unconstrainedWidth,
-}: {
-  children: React.ReactNode;
-  className?: string;
-  nested?: boolean;
-  unconstrainedWidth?: boolean;
-}) => (
+const PageWidthGrid = ({ children, className }: { children: React.ReactNode; className?: string }) => (
   <div
-    className={`col-span-full grid w-full grid-cols-4 gap-4 justify-self-center overflow-x-hidden md:grid-cols-6 md:gap-6 lg:grid-cols-8 xl:grid-cols-12 ${className} ${
-      nested ? "" : PAGE_PADDING
-    } ${unconstrainedWidth || nested ? "" : CONTENT_MAX_WIDTH_INCLUDING_PADDING}`}
+    className={`col-span-full grid w-full grid-cols-4 gap-4 justify-self-center
+      md:grid-cols-6 md:gap-6 lg:grid-cols-8 xl:grid-cols-12 ${className}`}
   >
     {children}
   </div>

app/components/PlatformCard.tsx

@@ -106,33 +106,35 @@ export const PlatformCard = ({
   return (
     <div className={className} key={`${platform.name}${i}`}>
       <div className="relative flex h-full flex-col border border-accent-2 bg-background-2 p-0">
-        <div className="flex flex-row p-6">
-          <div className="flex h-10 w-10 flex-grow justify-center md:justify-start">
-            {platform.icon ? (
-              <img src={platform.icon} alt={platform.name} className="h-10 w-10" />
-            ) : (
-              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M24.7999 24.8002H28.7999V28.8002H24.7999V24.8002ZM14 24.8002H18V28.8002H14V24.8002ZM3.19995 24.8002H7.19995V28.8002H3.19995V24.8002ZM24.7999 14.0002H28.7999V18.0002H24.7999V14.0002ZM14 14.0002H18V18.0002H14V14.0002ZM3.19995 14.0002H7.19995V18.0002H3.19995V14.0002ZM24.7999 3.2002H28.7999V7.2002H24.7999V3.2002ZM14 3.2002H18V7.2002H14V3.2002ZM3.19995 3.2002H7.19995V7.2002H3.19995V3.2002Z"
-                  fill="var(--color-muted)"
-                />
-              </svg>
-            )}
+        <div className="m-4 md:m-6 md:mb-10">
+          <div className="flex flex-row">
+            <div className="flex h-10 w-10 flex-grow justify-center md:justify-start">
+              {platform.icon ? (
+                <img src={platform.icon} alt={platform.name} className="h-10 w-10" />
+              ) : (
+                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M24.7999 24.8002H28.7999V28.8002H24.7999V24.8002ZM14 24.8002H18V28.8002H14V24.8002ZM3.19995 24.8002H7.19995V28.8002H3.19995V24.8002ZM24.7999 14.0002H28.7999V18.0002H24.7999V14.0002ZM14 14.0002H18V18.0002H14V14.0002ZM3.19995 14.0002H7.19995V18.0002H3.19995V14.0002ZM24.7999 3.2002H28.7999V7.2002H24.7999V3.2002ZM14 3.2002H18V7.2002H14V3.2002ZM3.19995 3.2002H7.19995V7.2002H3.19995V3.2002Z"
+                    fill="var(--color-muted)"
+                  />
+                </svg>
+              )}
+            </div>
+            {updatedPlatforms &&
+              platform?.enablePlatformCardUpdate &&
+              updatedPlatforms[platform.name] !== true &&
+              selectedProviders[platform.platform].length > 0 && (
+                <div className="inline-flex h-6 items-center rounded-xl border border-accent-3 px-2 text-xs text-accent-3">
+                  Update
+                </div>
+              )}
+          </div>
+          <div className="mt-4 flex justify-center md:mt-6 md:block md:justify-start">
+            <h1 className="text-lg">{platform.name}</h1>
+            <p className="pleading-relaxed mt-2 hidden text-color-4 md:inline-block">{platform.description}</p>
           </div>
-          {updatedPlatforms &&
-            platform?.enablePlatformCardUpdate &&
-            updatedPlatforms[platform.name] !== true &&
-            selectedProviders[platform.platform].length > 0 && (
-              <div className="inline-flex h-6 items-center rounded-xl border border-accent-3 px-2 text-xs text-accent-3">
-                Update
-              </div>
-            )}
-        </div>
-        <div className="flex justify-center px-2 py-0 pb-6 md:block md:justify-start md:px-6">
-          <h1 className="mb-0 text-lg md:mb-3">{platform.name}</h1>
-          <p className="pleading-relaxed hidden text-color-4 md:inline-block">{platform.description}</p>
         </div>
         <div className="mt-auto text-color-3">
           {selectedProviders[platform.platform].length > 0 ? (

app/components/RefreshMyStampsModal.tsx

@@ -30,17 +30,8 @@ export const RefreshMyStampsModal = ({
         datatest-id="refresh-my-stamps-modal"
       >
         <ModalOverlay bg="blackAlpha.900" />
-        <ModalContent
-          rounded="none"
-          padding={5}
-          w="410px"
-          minH="550px"
-          maxH="auto"
-          backgroundColor="black"
-          borderWidth="1px"
-          borderColor="var(--color-accent-2)"
-        >
-          <ModalCloseButton color="var(--color-text-1)" />
+        <ModalContent w="410px" minH="550px" maxH="auto">
+          <ModalCloseButton />
           {validPlatforms ? (
             <>
               <RefreshMyStampsModalContent
@@ -50,14 +41,14 @@ export const RefreshMyStampsModal = ({
               />
             </>
           ) : (
-            <>
+            <div className="p-4 md:p-6">
               <div className="font-heading text-3xl text-white">Searching for Stamps</div>
               <div className="mt-2 font-alt text-white">
                 Give us a moment while we check your account for existing Stamps.
               </div>
               <RefreshStampsProgressSteps steps={steps} />
               <div className="text-center text-white">Please do not close the window.</div>
-            </>
+            </div>
           )}
         </ModalContent>
       </Modal>

app/components/RefreshMyStampsModalContent.tsx

@@ -163,11 +163,11 @@ export const RefreshMyStampsModalContent = ({
   }, [validPlatforms]);
 
   return (
-    <div className="flex grow flex-col">
-      <div className="grow">
+    <div className="flex grow flex-col items-center pb-6">
+      <div className="w-full grow px-4 md:px-8">
         {validPlatforms.length > 0 ? (
           <div className="flex flex-col text-white">
-            <div className="mb-6 font-heading text-2xl">Stamps Found</div>
+            <div className="my-4 font-heading text-2xl md:my-6">Stamps Found</div>
             <div>
               {" "}
               {/* TODO: update comments */}
@@ -192,7 +192,7 @@ export const RefreshMyStampsModalContent = ({
                 </p>
               </div>
             )}
-            <div className="mt-16 grid grid-cols-2 items-center justify-center gap-6">
+            <div className="mt-8 grid grid-cols-2 items-center justify-center gap-6">
               <Button variant="secondary" onClick={() => navigate("/dashboard")}>
                 Cancel
               </Button>
@@ -234,7 +234,7 @@ export const RefreshMyStampsModalContent = ({
           </div>
         )}
       </div>
-      <div className="mt-6 mb-2 flex text-color-1">
+      <div className="mt-8 mb-2 flex text-color-1">
         <Checkbox
           data-testid="checkbox-onboard-hide"
           id="checkbox-onboard-hide"

app/components/RefreshMyStampsModalContentCard.tsx

@@ -50,12 +50,14 @@ export const RefreshMyStampsModalContentCard = ({
   }, [checked, accordionExpanded]);
 
   return (
-    <div>
+    <div className="border-t border-accent-2 last:border-b">
       <Accordion allowToggle>
-        <AccordionItem className="py-2 first:border-t-accent-2 first:border-b-accent-2" isDisabled={disableExpand}>
+        <AccordionItem padding={0} isDisabled={disableExpand} border="none">
           <div className="flex items-center gap-4 text-white focus:shadow-none">
             <div className="grow">
               <AccordionButton
+                paddingY="16px"
+                paddingX="0"
                 _focus={{ outline: "none" }}
                 ref={accordionButton}
                 onClick={() => setAccordionExpanded(!accordionExpanded)}
@@ -85,7 +87,7 @@ export const RefreshMyStampsModalContentCard = ({
               }}
             />
           </div>
-          <AccordionPanel borderTop="1px solid #083A40" marginTop="8px" paddingLeft="0" paddingRight="0">
+          <AccordionPanel borderTop="1px solid var(--color-accent-2)" padding="0">
             <RefreshMyStampsSelector
               validPlatformGroups={platformGroups}
               selectedProviders={selectedProviders}

app/components/RefreshMyStampsSelector.tsx

@@ -24,35 +24,35 @@ export function RefreshMyStampsSelector({
       {validPlatformGroups.map((group, i) => {
         return (
           <div key={i}>
-            <p className="mt-4 text-sm text-color-4">{group.name}</p>
+            <p className="my-4 text-sm text-color-4">{group.name}</p>
             <div>
-              <ul className="marker:leading-1 marker:text-3xl ">
-                {group.providers.map((provider, i) => {
-                  return (
-                    <div key={`${provider.title}${i}`} className="mt-5 flex flex-row items-center justify-between">
-                      <li key={`${provider.title}${i}`} data-testid={`indicator-${provider.name}`}>
-                        <div className="relative mr-10 text-sm text-color-1">{provider.title}</div>
-                      </li>
-                      <div className="align-right">
-                        <Checkbox
-                          key={`${provider.title}${i}`}
-                          data-testid={`checkbox-${provider.name}`}
-                          disabled={!platformChecked}
-                          checked={selectedProviders?.includes(provider.name)}
-                          onChange={(checked: boolean) => {
-                            // set the selected items by concatenating or filtering by providerId
-                            setSelectedProviders(
-                              checked
-                                ? (selectedProviders || []).concat(provider.name)
-                                : (selectedProviders || []).filter((providerId) => providerId !== provider.name)
-                            );
-                          }}
-                        />
-                      </div>
+              {group.providers.map((provider, i) => {
+                return (
+                  <div
+                    key={`${provider.title}${i}`}
+                    data-testid={`indicator-${provider.name}`}
+                    className="mb-8 flex flex-row items-center justify-between"
+                  >
+                    <div className="mr-10 text-color-1">{provider.title}</div>
+                    <div className="align-right">
+                      <Checkbox
+                        key={`${provider.title}${i}`}
+                        data-testid={`checkbox-${provider.name}`}
+                        disabled={!platformChecked}
+                        checked={selectedProviders?.includes(provider.name)}
+                        onChange={(checked: boolean) => {
+                          // set the selected items by concatenating or filtering by providerId
+                          setSelectedProviders(
+                            checked
+                              ? (selectedProviders || []).concat(provider.name)
+                              : (selectedProviders || []).filter((providerId) => providerId !== provider.name)
+                          );
+                        }}
+                      />
                     </div>
-                  );
-                })}
-              </ul>
+                  </div>
+                );
+              })}
             </div>
           </div>
         );

app/components/WelcomeWrapper.tsx

@@ -12,16 +12,14 @@ export type WelcomeWrapperProps = {
 
 export const WelcomeWrapper = ({ content, children }: WelcomeWrapperProps) => {
   return (
-    <>
-      <div className="mt-10 font-heading text-3xl">{content.header}</div>
-      <div className="mt-10 h-[240px] w-[295px] border border-accent-2 bg-background lg:h-[333.56px] lg:w-[410px]">
-        <img src={content.imgSrc} alt="welcome" className="h-full w-full" />
+    <div className="my-6 w-full text-center md:my-12">
+      <div className="font-heading text-3xl">{content.header}</div>
+      <div className="mt-8 w-full border border-accent-2 bg-background md:mt-12">
+        <img src={content.imgSrc} alt="welcome" className="aspect-[4/3] h-auto w-full" />
       </div>
-      <p className="mt-10 text-2xl text-muted">{content.subHeader}</p>
-      <p className="mt-2 mb-10 w-[343px] text-gray-300 lg:w-[410px]">{content.body}</p>
-      <div className="absolute bottom-10 mb-auto flex w-full items-center justify-between px-4 md:relative md:mt-16 md:px-0 lg:w-[410px]">
-        {children}
-      </div>
-    </>
+      <p className="mt-4 text-2xl text-muted md:mt-6">{content.subHeader}</p>
+      <p className="mt-2 text-color-4">{content.body}</p>
+      <div className="mt-4 flex w-full items-center justify-between">{children}</div>
+    </div>
   );
 };

app/package.json

@@ -4,8 +4,8 @@
   "version": "1.0.0",
   "scripts": {
     "start": "NEXT_PUBLIC_GIT_COMMIT_HASH=$(git rev-parse --short HEAD) next dev -p 3000",
-    "export": "NEXT_PUBLIC_GIT_COMMIT_HASH=$(git rev-parse --short HEAD) next build && next export && ts-node ./scripts/postBuild.ts out",
-    "build": "NEXT_PUBLIC_GIT_COMMIT_HASH=$(git rev-parse --short HEAD) next build && ts-node ./scripts/postBuild.ts public",
+    "export": "NEXT_PUBLIC_GIT_COMMIT_HASH=$(git rev-parse --short HEAD) next build && ts-node ./scripts/postBuild.ts && next export",
+    "build": "NEXT_PUBLIC_GIT_COMMIT_HASH=$(git rev-parse --short HEAD) next build && ts-node ./scripts/postBuild.ts",
     "prod-start": "NEXT_PUBLIC_GIT_COMMIT_HASH=$(git rev-parse --short HEAD) next start",
     "clean": "rimraf node_modules && rimraf .next",
     "lint": "next lint && prettier --check .",

app/pages/Dashboard.tsx

@@ -11,6 +11,7 @@ import { CardList } from "../components/CardList";
 import { JsonOutputModal } from "../components/JsonOutputModal";
 import { Footer } from "../components/Footer";
 import Header from "../components/Header";
+import BodyWrapper from "../components/BodyWrapper";
 import PageWidthGrid from "../components/PageWidthGrid";
 import HeaderContentFooterGrid from "../components/HeaderContentFooterGrid";
 import Tooltip from "../components/Tooltip";
@@ -206,7 +207,7 @@ export default function Dashboard() {
 
   const subheader = useMemo(
     () => (
-      <PageWidthGrid nested={true} className="my-4">
+      <PageWidthGrid className="my-4 min-h-[64px]">
         <div className="col-span-3 flex items-center justify-items-center self-center lg:col-span-4">
           <div className="flex text-2xl">
             <span className="font-heading">My {filterName && `${filterName} `}Stamps</span>
@@ -253,7 +254,7 @@ export default function Dashboard() {
             </div>
           )}
 
-          <div className="ml-4 flex flex-col place-items-center gap-4 md:flex-row">
+          <div className="ml-4 flex flex-col place-items-center gap-4 self-center md:flex-row">
             {isOnChainSyncEnabled &&
               (wallet?.chains[0].id === sepoliaChainId || wallet?.chains[0].id === hardhatChainId) && (
                 <SyncToChainButton />
@@ -293,16 +294,15 @@ export default function Dashboard() {
       {modals}
       <HeaderContentFooterGrid>
         <Header subheader={subheader} />
-        <PageWidthGrid className="mt-8">
+        <BodyWrapper className="mt-4 md:mt-6">
           <CardList
-            cardClassName="col-span-2 md:col-span-3 lg:col-span-2 xl:col-span-3"
             isLoading={
               isLoadingPassport == IsLoadingPassportState.Loading ||
               isLoadingPassport == IsLoadingPassportState.LoadingFromCeramic ||
               isLoadingPassport == IsLoadingPassportState.FailedToConnect
             }
           />
-        </PageWidthGrid>
+        </BodyWrapper>
         {/* This footer contains dark colored text and dark images */}
         <Footer lightMode={true} />
       </HeaderContentFooterGrid>