Cm/admin updates

src/app/admin/page.tsx

@@ -57,56 +57,50 @@ export default function Login() {
   };
 
   return (
-    <div className="">
-      {/* Background Image */}
-      <img
-        src="/images/login-bg.svg"
-        alt=""
-        className="fixed inset-0 z-0 h-screen w-full object-cover"
-      />
-
-      <div className="font-body relative z-10 mx-auto flex max-w-2xl flex-col items-center justify-center min-h-[600px] text-white h-[calc(100vh-83px)] pb-36">
-        <div className="px-10 text-center">
-          <h1 className="text-3xl font-medium">Admin Login</h1>
+    <>
+      <div className="fixed inset-0 z-0 bg-[#080d14]" />
+      <div className="relative z-10 mx-auto flex max-w-2xl flex-col items-center justify-center pt-40 text-[#eaeaea] sm:pt-56">
+        <div className="px-6 text-center sm:px-10">
+          <h1 className="text-2xl font-medium sm:text-3xl">Admin Login</h1>
           <h2 className="mt-3">Use the admin email and password to login.</h2>
         </div>
         <form
           action=""
-          className="mt-6 flex w-full flex-col gap-5 px-10"
+          className="mt-6 flex w-full flex-col gap-5 px-6 sm:px-10 "
           onSubmit={handleLogin}
         >
           <div>
-            <label htmlFor="email">Email:</label>
+            <label htmlFor="email" className="text-sm sm:text-base">Email:</label>
             <input
               id="email"
               type="email"
               name="email"
-              className="mt-2 block w-full rounded-md border border-gray-200 bg-gray-100 px-4 py-2 outline-none text-black"
+              className="mt-2 block w-full rounded-md border border-gray-700 bg-[#303742] px-4 py-1.5 sm:py-2 outline-none"
               placeholder="Email"
               onChange={handleCrendentialsChange}
             />
           </div>
           <div>
-            <label htmlFor="password">Password:</label>
+            <label htmlFor="password" className="text-sm sm:text-base">Password:</label>
             <input
               type="password"
               id="password"
               name="password"
-              className="mt-2 block w-full rounded-md border border-gray-200 bg-gray-100 px-4 py-2 outline-none text-black"
+              className="mt-2 block w-full rounded-md border border-gray-700 bg-[#303742] px-4 py-1.5 sm:py-2 outline-none"
               placeholder="Password"
               onChange={handleCrendentialsChange}
             />
           </div>
           <input
             type="submit"
             value="Login"
-            className="cursor-pointer rounded-md bg-blue-500 py-2 text-sm"
+            className="cursor-pointer rounded-md bg-blue-500 py-1.5 sm:py-2 text-sm text-white"
           />
         </form>
         <Link href="/" className="mt-6 text-sm underline">
           Lost? Click to return to safety
         </Link>
       </div>
-    </div>
+    </>
   );
 }

src/app/client-layout.tsx

@@ -2,11 +2,12 @@
 
 import { useAuthState } from "react-firebase-hooks/auth";
 import { auth } from "@/lib/firebase/firebase";
-import Navbar from "@/components/Navbar/PublicNavbar";
+import Navbar from "@/components/Navbar/Navbar";
 import Sidebar from "@/components/Navbar/Sidebar";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { queryClient } from "@/lib/react-query/queryClient";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
 
 export default function ClientLayout({
   children,
@@ -16,9 +17,22 @@ export default function ClientLayout({
   const [user] = useAuthState(auth);
   const [isCollapsed, setIsCollapsed] = useState(false);
 
+  // Set the body's background on client-view components. (Improves aesthetics on mobile browsers)
+  const pathname = usePathname();
+  const isAdminRoute = pathname?.startsWith("/dashboard");
+
+  useEffect(() => {
+      if(isAdminRoute) {
+        document.body.style.backgroundColor = "#fff"
+      }
+      else {
+        document.body.style.backgroundColor = "#080d14"
+      }
+  },[isAdminRoute])
+
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="min-h-screen">
+      <div>
         {user && (
           <Sidebar isCollapsed={isCollapsed} onCollapse={setIsCollapsed} />
         )}

src/app/dashboard/events/add/page.tsx

@@ -7,9 +7,9 @@ import BackButton from "@/components/Buttons/BackButton";
 export default function AddEvent() {
   return (
     <ProtectedRoute>
-      <div className="mx-auto w-full max-w-3xl p-6 pt-8">
+      <div className="mx-auto w-full max-w-3xl px-4 sm:p-6 pt-8">
         <div className="flex items-end justify-between">
-          <h1 className="text-2xl font-semibold">Create Event</h1>
+          <h1 className="text-xl sm:text-2xl font-semibold">Create Event</h1>
           <BackButton />
         </div>
         <EventForm mode="create" />

src/app/dashboard/events/page.tsx

@@ -35,22 +35,22 @@ export default function EditEvents() {
 
   return (
     <ProtectedRoute>
-      <div className="mx-auto max-w-6xl px-8 pt-10">
-        <div className="flex justify-between">
-          <h1 className="text-3xl font-bold">Events</h1>
-          <div className="flex gap-2">
+      <div className="mx-auto max-w-6xl px-4 md:px-8 pt-6 sm:pt-10">
+        <div className="flex justify-between items-center">
+          <h1 className="text-xl sm:text-2xl md:text-3xl font-bold">Events</h1>
+          <div className="flex gap-2 text-sm md:text-base">
             <BackButton />
             <button className="rounded bg-green-600 px-4 py-2 text-white transition-colors hover:bg-green-700">
               <a href="/dashboard/events/add">New Event</a>
             </button>
           </div>
         </div>
-        <div className="mt-5 flex items-center justify-between text-lg">
-          <p>
+        <div className="mt-4 flex items-center justify-between ">
+          <p className=" sm:text-lg">
             Showing events for:{" "}
             <span className="font-semibold">{currentMonth} {currentYear}</span>
           </p>
-          <div className="flex gap-2">
+          <div className="flex gap-2 text-lg">
             <button className="rounded-full p-1 hover:bg-gray-300" onClick={() => changeMonth("prev")}>
               <FaChevronLeft />
             </button>

src/app/dashboard/page.tsx

@@ -4,7 +4,7 @@ import { FaCalendarAlt, FaBoxOpen } from "react-icons/fa";
 import { BsPcDisplay } from "react-icons/bs";
 import Link from "next/link";
 import ProtectedRoute from "@/components/admin/auth/ProtectedRoute";
-import SignOutButton from "@/components/admin/auth/SingOut";
+import SignOutButton from "@/components/admin/auth/SignOut";
 
 export default function Dashboard() {
   return (
@@ -15,7 +15,7 @@ export default function Dashboard() {
           <SignOutButton />
         </div>
         <hr className="my-4 border-gray-200" />
-        <ul className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
+        <ul className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8 pb-12">
           <Link
             href="/dashboard/events"
             className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6"

src/app/dashboard/projects/add/page.tsx

@@ -7,8 +7,8 @@ import BackButton from "@/components/Buttons/BackButton";
 export default function projects() {
   return (
     <ProtectedRoute>
-      <div className="mx-auto flex max-w-4xl justify-between p-6 pt-8">
-        <h1 className="text-2xl font-semibold">Create Project</h1>
+      <div className="mx-auto flex max-w-4xl justify-between px-4 sm:p-6 pt-8 items-center">
+        <h1 className="text-xl sm:text-2xl font-semibold">Create Project</h1>
         <BackButton />
       </div>
       <AddForm />

src/app/dashboard/projects/page.tsx

@@ -7,12 +7,12 @@ import BackButton from "@/components/Buttons/BackButton";
 export default function projects() {
   return (
     <ProtectedRoute>
-      <div className="mx-auto max-w-6xl px-8 pt-10">
-        <div className="flex justify-between">
-          <h1 className="text-3xl font-bold">Projects</h1>
+      <div className="mx-auto max-w-6xl px-4 sm:px-8 pt-10">
+        <div className="flex justify-between items-center">
+          <h1 className="text-xl sm:text-3xl font-bold">Projects</h1>
           <div className="flex gap-2">
             <BackButton />
-            <button className="rounded bg-green-600 px-4 py-2 text-white transition-colors hover:bg-green-700">
+            <button className="text-sm sm:text-base rounded bg-green-600 px-4 py-2 text-white transition-colors hover:bg-green-700">
               <a href="/dashboard/projects/add">New Project</a>
             </button>
           </div>

src/app/events/page.tsx

@@ -5,7 +5,7 @@ import MonthlyEvents from "@/components/events/MonthlyEvents";
 export default function Events() {
   return (
     <>
-      <section className="relative min-h-screen bg-[#050a10]">
+      <section className="relative min-h-screen bg-[#080d14]">
         <div className="noise-bg"/>
         <div className="mx-auto max-w-7xl px-4 md:px-10 pt-24 pb-12 text-white">
           <MonthlyEvents />

src/app/globals.css

@@ -44,7 +44,7 @@ body {
 .monthly-event {
   background: radial-gradient(
       138.71% 110.11% at 93.15% -36.58%,
-      #4255f922 25%,
+      #4255f933 25%,
       #0f1319 100%
     ),
     radial-gradient(61.66% 37.6% at 6.63% 95.08%, #4255f922 25%, #0f1319 100%),

src/app/page.tsx

@@ -4,7 +4,7 @@ import LandingAbout from "@/components/landing/LandingAbout";
 
 const Website = () => {
   return (
-    <div className="min-h-screen w-full bg-[#050a10]">
+    <div className="min-h-screen w-full bg-[#080d14]">
       {/* Applied a noise bg to the page for added depth */}
       <div className="noise-bg" />
       <Hero />

src/components/Buttons/BackButton.tsx

@@ -15,10 +15,10 @@ const BackButton: React.FC = () => {
       onClick={handleBack}
       className="flex items-center gap-2 rounded-md bg-blue-500 px-4 py-2 text-white transition-all hover:bg-blue-600 active:bg-blue-800"
     >
-      <span className="text-lg">
+      <span className="sm:text-lg">
         <FaLongArrowAltLeft />
       </span>
-      Back
+     <span className="text-sm sm:text-base">Back</span>
     </button>
   );
 };