updated page for mobile view (#233)

Co-authored-by: Burton Jong <[email protected]>

Author: justin-phxm

src/app/participant/layout.tsx

@@ -11,8 +11,6 @@ export default function RoleBasedLayout({
 
   // This example uses the UserBasedNav component in the layout:
   return (
-    <div className="flex w-full flex-col bg-fuzzy-peach">
-      <main className="">{children}</main>
-    </div>
+    <div className="flex w-full flex-1 flex-col bg-fuzzy-peach">{children}</div>
   );
 }

src/app/participant/profile/layout.tsx

@@ -5,15 +5,13 @@ import ProfileLinks from "@/components/UserProfile/ProfileLinks";
 
 const ProfileLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="w-full">
+    <>
       <ProfileHeader />
-      <div className="flex w-full flex-col bg-fuzzy-peach">
-        <div className="px-10  md:px-16 md:py-10">
-          <ProfileLinks />
-          {children}
-        </div>
+      <div className="flex w-full flex-col bg-fuzzy-peach px-10 md:px-16 md:py-10 ">
+        <ProfileLinks />
+        {children}
       </div>
-    </div>
+    </>
   );
 };
 

src/app/participant/profile/page.tsx

@@ -7,7 +7,7 @@ const UserProfile = dynamic(
   {
     ssr: true,
     loading: () => (
-      <div className="flex w-full items-center justify-center">
+      <div className="flex w-full flex-1 items-center justify-center">
         <KevinLoadingRing />
       </div>
     ),

src/app/register/team/discord/page.tsx

@@ -4,35 +4,41 @@ import { Underline } from "@/utils/text-utils";
 
 export default function page() {
   return (
-    <div className="flex w-full flex-col justify-center rounded-xl bg-white p-4 md:p-8">
-      <div className="gap-6 p-8 text-center font-bold">
-        <h1 className="flex justify-start pb-4 text-4xl">But First...</h1>
-        <div className="flex w-full flex-col items-center gap-3 rounded-3xl bg-pastel-green p-8 text-xl">
-          <div className="w-1/2 rounded-3xl bg-white p-8">
-            <div className="relative inline-block text-3xl">
+    <div className="flex w-full flex-col gap-6 rounded-xl bg-white p-8 text-center font-bold">
+      <h1 className="flex justify-start text-4xl">But First...</h1>
+      <div className="flex w-full flex-col items-center rounded-3xl bg-pastel-green p-8">
+        <div className="flex w-1/2 min-w-60 flex-col items-center gap-4 rounded-3xl bg-white p-8">
+          <div className="text-3xl">
+            <div className="hidden xl:block">
               <Underline>Join the official Discord!</Underline>
             </div>
-            <div className="pt-8">
-              <a
-                target="_blank"
-                rel="noreferrer"
-                href={process.env.NEXT_PUBLIC_DISCORD_LINK}
-              >
-                <PurpleButton>Hackathon Discord</PurpleButton>
-              </a>
+            <div className="w-full xl:hidden">
+              Join the official
+              <Underline>
+                <span className="ml-3">Discord!</span>
+              </Underline>
             </div>
           </div>
-        </div>
-
-        <div className="flex justify-between pt-8">
-          <Link href={"/register/team"}>
-            <PurpleButton>Back</PurpleButton>
-          </Link>
-          <Link href={"/register/team/ready"}>
-            <PurpleButton>Next</PurpleButton>
+          <Link
+            target="_blank"
+            rel="noreferrer"
+            href={process.env.NEXT_PUBLIC_DISCORD_LINK ?? ""}
+          >
+            <PurpleButton className="w-auto px-4">
+              Hackathon Discord
+            </PurpleButton>
           </Link>
         </div>
       </div>
+
+      <div className="flex flex-col justify-between sm:flex-row">
+        <Link href={"/register/team"}>
+          <PurpleButton>Back</PurpleButton>
+        </Link>
+        <Link href={"/register/team/ready"}>
+          <PurpleButton>Next</PurpleButton>
+        </Link>
+      </div>
     </div>
   );
 }

src/components/UserProfile/UserProfile.tsx

@@ -84,9 +84,8 @@ const UserProfile = () => {
 
   return (
     <>
-      {" "}
       {isFetching || userContextIsFetching ? (
-        <div className="flex w-full items-center justify-center">
+        <div className="flex w-full flex-1 items-center justify-center">
           <KevinLoadingRing />
         </div>
       ) : (

src/components/layouts/MainLayout.tsx

@@ -27,7 +27,7 @@ export default async function MainLayout({ children }: Props) {
             initialUserDetails={userDetails ?? ({} as UserDetailsNoFunctions)}
           >
             <Header />
-            <main className="flex flex-col items-center justify-between">
+            <main className="flex flex-1 flex-col items-center justify-between">
               {children}
             </main>
             <Footer />

src/components/layouts/RegistrationLayout.tsx

@@ -24,7 +24,7 @@ export default function RegistrationLayout({
   return (
     <div
       className={twMerge(
-        "flex h-[90dvh] w-full flex-1 flex-col items-center justify-center overflow-hidden py-6",
+        "flex w-full flex-1 flex-col items-center justify-center overflow-hidden",
         bgColor,
       )}
     >