Hmt 139 footer is not mobile friendly (#201)

Co-authored-by: burtonjong <[email protected]>

Author: fionaa-truong

src/app/admin/layout.tsx

@@ -19,10 +19,10 @@ export const metadata: Metadata = {
 function AdminLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex w-full flex-1 ">
-      <div className="w-20">
+      <div className="sm:w-1/8 md:w-20 ">
         <SideNavBar />
       </div>
-      <div className="flex w-full flex-1 flex-col ">
+      <div className="flex w-4/5 flex-1 flex-col ">
         <TopNavBar />
         {children}
       </div>

src/app/admin/page.tsx

@@ -25,7 +25,7 @@ export const metadata: Metadata = {
 };
 export default function page() {
   return (
-    <div className="flex flex-1 flex-col gap-4 overflow-auto bg-slate-200 p-4 text-3xl font-semibold">
+    <div className="z-0 flex flex-1 flex-col gap-4 overflow-auto bg-slate-200 p-4 text-3xl font-semibold">
       <Greetings />
       <h1 className="text-2xl font-semibold">Hackathon Statistics</h1>
       <CheckUserLoggedIn>

src/components/Dashboard/TopNavBar.tsx

@@ -14,12 +14,12 @@ export default function TopNavBar() {
   };
   return (
     <>
-      <div className=" flex w-full justify-between bg-white p-4 px-8 text-4xl font-semibold">
+      <div className="flex w-full flex-col justify-between gap-4 bg-white p-4 px-8 text-4xl font-semibold md:flex-row">
         <AdminNavTitle />
-        <div className="flex flex-row items-center gap-4">
+        <div className="flex justify-start">
           <button
             onClick={toggleModal}
-            className=" ml-4 rounded-lg p-2 text-lg shadow-lg ring-2 ring-awesome-purple transition-transform duration-200 ease-in-out hover:-translate-y-2 hover:bg-awesome-purple hover:ring-awesomer-purple"
+            className="rounded-lg p-2 text-lg shadow-lg ring-2 ring-awesome-purple transition-transform duration-200 ease-in-out hover:-translate-y-2 hover:bg-awesome-purple hover:ring-awesomer-purple"
           >
             Announce To All Participants
           </button>

src/components/Footer.tsx

@@ -1,11 +1,12 @@
 import SocialMediaIcons from "@/components/atoms/SocialMediaIcons";
 
-const footerContainer =
-  "flex flex-col items-center justify-center text-awesomer-purple h-36 bg-awesome-purple";
-
 const Footer = () => {
   return (
-    <div className={footerContainer}>
+    <div
+      className={
+        "flex h-36 w-screen flex-col items-center justify-center bg-awesome-purple text-awesomer-purple"
+      }
+    >
       <h2 className="font-bold">Keep Up With Us!</h2>
       <SocialMediaIcons />
       <h4 className="mt-6 font-medium text-ehhh-grey">

src/components/Header.tsx

@@ -11,9 +11,6 @@ import { client } from "@/app/QueryProvider";
 import { UserType, useUser } from "@/components/contexts/UserContext";
 import { useQuery } from "@tanstack/react-query";
 
-const headerContainerStyles =
-  "flex flex-row items-center justify-between text-awesomer-purple h-36 bg-white px-8";
-
 export default function Header() {
   const user = useUser().currentUser;
 
@@ -53,7 +50,7 @@ export default function Header() {
     router.push("/");
   };
   return (
-    <div className={headerContainerStyles}>
+    <div className="flex h-36 w-screen flex-row items-center justify-between bg-white px-8 text-awesomer-purple">
       <div className="flex w-48 font-semibold">
         {user.username ? (
           <>