Red color

client/src/components/NavigationBar.tsx

@@ -59,7 +59,7 @@ export default function NavigationBar() {
           : "transition-all fixed w-full p-2 mt-8"
       }
     >
-      <div className="relative bg-red-100 dark:bg-red-900 border-2 border-red-200 dark:border-red-950 shadow-lg w-full h-full rounded-xl flex flex-col justify-center p-1">
+      <div className="relative bg-primary-50 dark:bg-primary-800 border-2 border-primary-100 dark:border-primary-950 shadow-lg w-full h-full rounded-xl flex flex-col justify-center p-1">
         <div className=" w-full flex flex-row justify-between gap-4">
           <div className="flex flex-row gap-0 my-auto *:my-auto">
             <Button
@@ -75,9 +75,9 @@ export default function NavigationBar() {
                 className="h-6 dark:invert dark:hue-rotate-180"
               />
             </Button>
-            <div className="flex flex-row *:my-auto *:text-red-800 dark:*:text-red-100">
+            <div className="flex flex-row *:my-auto *:text-primary-800 dark:*:text-primary-100">
-              <Button 
+              <Button
-                variant="light" 
+                variant="light"
                 size="sm"
                 onPress={() => {
                   navigate("/events");

client/src/components/SingaporeAgencyStrip.tsx

@@ -6,7 +6,9 @@ export default function SingaporeAgencyStrip() {
       <div className="mx-auto  w-full flex flex-row gap-2 *:my-auto h-full text-sm max-w-7xl pl-4">
         <img src="../assets/Merlion.svg" alt="Merlion Icon" className="w-6" />
         <p>A Singapore Government Agency Website</p>
-        <Link size="sm">How to identify</Link>
+        <Link size="sm" className="text-blue-500">
+          How to identify
+        </Link>
       </div>
     </div>
   );

client/src/components/SpringboardButton.tsx

@@ -12,7 +12,12 @@ export default function SpringboardButton({
 }) {
   const navigate = useNavigate();
   return (
-    <Button onPress={() => {navigate(linkToPage)}} className="border-4 border-red-500 bg-neutral-700 hover:bg-red-500 text-white">
+    <Button
+      onPress={() => {
+        navigate(linkToPage);
+      }}
+      className="border-4 border-primary-500 bg-neutral-700 hover:bg-primary-500 text-white"
+    >
       <div className="flex flex-col justify-between w-full h-full py-4 px-2 text-left *:text-wrap mr-16">
         <p className="text-2xl font-semibold">{title}</p>
         <p>{subtitle}</p>

client/src/components/UpdateAccountModule.tsx

@@ -6,6 +6,7 @@ import {
   Accordion,
   AccordionItem,
   Button,
+  Card,
   Modal,
   ModalBody,
   ModalContent,
@@ -196,8 +197,9 @@ export default function UpdateAccountModule() {
                 <AccordionItem
                   key="1"
                   aria-label="Account danger zone"
+                  as={Card}
                   title={
-                    <div className="flex flex-col -my-2">
+                    <div className="flex flex-col">
                       <p className="text-lg">More actions</p>
                       <p className="opacity-50">
                         Click to show more options collapsed for security
@@ -205,9 +207,9 @@ export default function UpdateAccountModule() {
                       </p>
                     </div>
                   }
-                  className="rounded-xl -m-2 px-4 py-2 bg-neutral-100 dark:bg-neutral-800 border-2 border-transparent hover:border-neutral-200 dark:hover:border-neutral-700 transition-colors"
+                  className="rounded-xl -m-2 *:px-4"
                 >
-                  <div className="flex flex-row justify-between *:my-auto bg-red-100 dark:bg-red-950 p-4 rounded-xl">
+                  <Card className="flex flex-row justify-between *:my-auto bg-primary-50 dark:bg-primary-950 p-4 my-2">
                     <div className="flex flex-col">
                       <p className="text-lg">Danger zone</p>
                       <p className="opacity-50">
@@ -222,7 +224,7 @@ export default function UpdateAccountModule() {
                         Archive this account
                       </Button>
                     </div>
-                  </div>
+                  </Card>
                 </AccordionItem>
               </Accordion>
             </div>

client/src/components/UserProfilePicture.tsx

@@ -63,7 +63,7 @@ export default function UserProfilePicture({
         onChange={handleFileChange}
       />
       <Button
-        className="w-48 h-48 p-0 border-2 border-red-500 shadow-red-500 shadow-2xl"
+        className="w-48 h-48 p-0 border-2 border-primary-500 shadow-primary-500 shadow-2xl"
         radius="full"
         onPress={editable ? handleButtonClick : () => {}}
         isLoading={loading}

client/src/main.tsx

@@ -9,7 +9,9 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <BrowserRouter>
       <NextUIProvider>
-        <App />
+        <main className="red-light dark:red-dark">
+          <App />
+        </main>
       </NextUIProvider>
     </BrowserRouter>
   </React.StrictMode>

client/src/pages/CommunityPage.tsx

@@ -128,7 +128,7 @@ export default function CommunityPage() {
             {communityList.map((post) => {
               return (
                 <section
-                  className="flex flex-row gap-4 bg-red-50 dark:bg-red-950 border border-none rounded-2xl p-4"
+                  className="flex flex-row gap-4 bg-primary-50 dark:bg-primary-950 border border-none rounded-2xl p-4"
                   key={post.id}
                 >
                   <div>
@@ -201,10 +201,10 @@ export default function CommunityPage() {
             })}
           </div>
         </div>
-        <div className="flex flex-col gap-4 bg-red-50 dark:bg-red-950 p-4 rounded-xl w-[400px]">
+        <div className="flex flex-col gap-4 bg-primary-50 dark:bg-primary-950 p-4 rounded-xl w-[400px]">
           <Button
             startContent={<PlusIcon />}
-            className=" bg-red-500 dark:bg-red-700 text-white"
+            className=" bg-primary-500 dark:bg-primary-700 text-white"
             size="lg"
             onPress={() => {
               navigate("/createPost");

client/src/pages/CreatePostPage.tsx

@@ -75,7 +75,7 @@ function CreatePostPage() {
           <ArrowUTurnLeftIcon />
         </Button>
       </section>
-      <section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl">
+      <section className="w-8/12 mx-auto p-5 bg-primary-100 border border-none rounded-2xl">
         <Formik
           initialValues={initialValues}
           validationSchema={validationSchema}
@@ -114,7 +114,7 @@ function CreatePostPage() {
               <div className="flex flex-row-reverse border">
                 <Button
                   type="submit"
-                  className="bg-red-color text-white text-xl w-1/6"
+                  className="bg-primary-color text-white text-xl w-1/6"
                   disabled={!isValid || !dirty || isSubmitting}
                 >
                   <p>Post</p>

client/src/pages/EditPostPage.tsx

@@ -87,7 +87,7 @@ function editPost() {
           <ArrowUTurnLeftIcon />
         </Button>
       </section>
-      <section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl">
+      <section className="w-8/12 mx-auto p-5 bg-primary-100 border border-none rounded-2xl">
         {!loading && (
           <Formik
             initialValues={post}
@@ -127,7 +127,7 @@ function editPost() {
                 <div className="flex flex-row-reverse border">
                   <Button
                     type="submit"
-                    className="bg-red-color text-white text-xl w-1/6"
+                    className="bg-primary-color text-white text-xl w-1/6"
                     disabled={!isValid || !dirty || isSubmitting}
                   >
                     <p>Update</p>

client/src/pages/EventsPage.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 import DefaultLayout from "../layouts/default";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
 import instance from "../security/http";
 import config from "../config";
 
@@ -18,11 +18,14 @@ const EventsPage = () => {
     <DefaultLayout>
       <div className="p-8">
         <div className="mb-6">
-          <h2 className="text-3xl font-semibold text-red-600">Events</h2>
+          <h2 className="text-3xl font-semibold text-primary-600">Events</h2>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {events.map((event) => (
-            <div key={event.id} className="bg-white rounded-lg shadow-lg overflow-hidden">
+            <div
+              key={event.id}
+              className="bg-white rounded-lg shadow-lg overflow-hidden"
+            >
               <img
                 src={`${config.serverAddress}${event.imageUrl}`}
                 alt={event.title}
@@ -32,7 +35,7 @@ const EventsPage = () => {
                 <h3 className="text-xl font-semibold mb-2">{event.title}</h3>
                 <p className="text-gray-600 mb-4">{event.description}</p>
                 <button
-                  className="bg-red-600 text-white rounded px-4 py-2 hover:bg-red-700"
+                  className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700"
                   onClick={() => navigate(`/event/${event.id}`)}
                 >
                   View event details

client/src/pages/SpringboardPage.tsx

@@ -95,7 +95,7 @@ export default function SpringboardPage() {
                 linkToPage="/schedule"
               ></SpringboardButton>
             </div>
-            <div className="w-full h-[600px] bg-red-500"></div>
+            <div className="w-full h-[600px] bg-primary-500"></div>
           </div>
         )}
       </div>
@@ -104,7 +104,7 @@ export default function SpringboardPage() {
           <div className="m-8 flex flex-col gap-4">
             <Card>
               <div className="flex flex-col m-8 gap-8">
-                <div className="rounded-xl flex flex-col gap-8 p-4 justify-center bg-red-500 text-center text-white">
+                <div className="rounded-xl flex flex-col gap-8 p-4 justify-center bg-primary-500 text-center text-white">
                   <div className="pt-10 w-full flex flex-row justify-center scale-150">
                     <div className="scale-150 pb-2">
                       <LockClosedIcon />
@@ -119,7 +119,7 @@ export default function SpringboardPage() {
                     </div>
                     <p>
                       If you wish to recover the account, please{" "}
-                      <Link className="text-white px-1 rounded-md bg-red-400">
+                      <Link className="text-white px-1 rounded-md bg-primary-400">
                         contact us
                       </Link>
                     </p>

client/tailwind.config.js

@@ -7,13 +7,57 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
-  theme: {
-    extend: {
-      colors: {
-        'red-color': '#F36E6E', // Your color code
-      },
-    },
-  },
   darkMode: "class",
-  plugins: [nextui()],
+  plugins: [
+    nextui({
+      themes: {
+        "red-dark": {
+          extend: "dark",
+          colors: {
+            background: "#1A0000",
+            foreground: "#ffffff",
+            primary: {
+              50: "#FFE5E5",
+              100: "#FFB3B3",
+              200: "#FF8080",
+              300: "#FF4040",
+              400: "#F00000",
+              500: "#D20000",
+              600: "#B50000",
+              700: "#960000",
+              800: "#780000",
+              900: "#610000",
+              950: "#420000",
+              DEFAULT: "#F00000",
+              foreground: "#ffffff",
+            },
+            focus: "#FF4040",
+          },
+        },
+        "red-light": {
+          extend: "light", // <- inherit default values from light theme
+          colors: {
+            background: "#ffffff",
+            foreground: "#1A0000",
+            primary: {
+              50: "#FFE5E5",
+              100: "#FFB3B3",
+              200: "#FF8080",
+              300: "#FF4040",
+              400: "#FF0000",
+              500: "#E60000",
+              600: "#CC0000",
+              700: "#B30000",
+              800: "#990000",
+              900: "#800000",
+              950: "#690000",
+              DEFAULT: "#FF0000",
+              foreground: "#ffffff",
+            },
+            focus: "#FF8080",
+          },
+        },
+      },
+    }),
+  ],
 };