wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Red color

Browse Source
This commit is contained in:
Adam C
2024-07-13 11:36:20 +08:00
parent 91cdd8b4c7
commit f011f812a8
12 changed files with 93 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/NavigationBar.tsx
View File

@@ -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,7 +75,7 @@ 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
variant="light"
size="sm"

4
client/src/components/SingaporeAgencyStrip.tsx
View File

@@ -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>
);

7
client/src/components/SpringboardButton.tsx
View File

@@ -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>

10
client/src/components/UpdateAccountModule.tsx
View File

@@ -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>

2
client/src/components/UserProfilePicture.tsx
View File

@@ -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}

2
client/src/main.tsx
View File

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

6
client/src/pages/CommunityPage.tsx
View File

@@ -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");

4
client/src/pages/CreatePostPage.tsx
View File

@@ -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>

4
client/src/pages/EditPostPage.tsx
View File

@@ -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>

13
client/src/pages/EventsPage.tsx
View File

@@ -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

6
client/src/pages/SpringboardPage.tsx
View File

@@ -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>

60
client/tailwind.config.js
View File

@@ -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",
},
},
},
}),
],
};