From 4aa5b03d4393be74fca041040bd94d51fea1a7e9 Mon Sep 17 00:00:00 2001 From: Thomas Makin Date: Tue, 19 Nov 2024 15:54:49 -0500 Subject: [PATCH] style: light mode also round off the calendar --- components/Calendar.tsx | 37 +++++++++++++++++++------------------ components/CourseCard.tsx | 17 ++++++++--------- components/CreatePlan.tsx | 5 +---- components/PlanCard.tsx | 7 ++----- components/Search.tsx | 3 +++ components/navbar.tsx | 19 +++++++++++++------ components/primitives.ts | 35 +++++++++++++++++++---------------- components/theme-switch.tsx | 10 +++++++--- styles/globals.css | 16 ++++++++++++++-- tailwind.config.js | 19 +++++++++++++++++-- 10 files changed, 103 insertions(+), 65 deletions(-) diff --git a/components/Calendar.tsx b/components/Calendar.tsx index 4150c36..a4ecff4 100644 --- a/components/Calendar.tsx +++ b/components/Calendar.tsx @@ -26,8 +26,7 @@ export default function Calendar({ function renderEventContent(eventInfo: EventContentArg) { return ( {eventInfo.timeText} {"|"} {eventInfo.event.extendedProps.room} @@ -46,21 +45,23 @@ export default function Calendar({ } return ( - +
+ +
); } diff --git a/components/CourseCard.tsx b/components/CourseCard.tsx index 46d1c84..854826b 100644 --- a/components/CourseCard.tsx +++ b/components/CourseCard.tsx @@ -56,7 +56,9 @@ export default function CourseCard(props: any) { className="flex w-6 h-6 lg:w-8 lg:h-8 rounded-md justify-center items-center" style={{ backgroundColor: color_mappings[index] }} > -

{item[0]}

+

+ {item[0]} +

); } @@ -80,10 +82,7 @@ export default function CourseCard(props: any) { return ( -
+
updatePlan(props.course)}>
@@ -124,12 +123,12 @@ export default function CourseCard(props: any) {
{props.course.facultyMeet.meetingTimes.room ? ( -
+
{props.course.facultyMeet.meetingTimes.buildingDescription}{" "} {props.course.facultyMeet.meetingTimes.room}
-
+
{props.course.facultyMeet.meetingTimes ? (
@@ -157,8 +156,8 @@ export default function CourseCard(props: any) {
) : ( -
-

+

+

Contact your Professor for additional details.

diff --git a/components/CreatePlan.tsx b/components/CreatePlan.tsx index 9e8772d..590dae8 100644 --- a/components/CreatePlan.tsx +++ b/components/CreatePlan.tsx @@ -138,10 +138,7 @@ export default function CreatePlan(props: any) { // onClick={() => removeCourseFromPlan(selectedCoursePlan, course)} >
diff --git a/components/PlanCard.tsx b/components/PlanCard.tsx index 4ac08a8..77f07bc 100644 --- a/components/PlanCard.tsx +++ b/components/PlanCard.tsx @@ -13,10 +13,7 @@ export default function PlanCard(props: any) { shadow="sm" >
@@ -31,7 +28,7 @@ export default function PlanCard(props: any) { onClick={() => removeCourseFromPlan(props.selectedCoursePlan[0], props.course) } - + */ > X diff --git a/components/Search.tsx b/components/Search.tsx index 0f35480..33e80c9 100644 --- a/components/Search.tsx +++ b/components/Search.tsx @@ -142,6 +142,9 @@ export default function Search(props: any) { { return (
{ SCCS  - + Course Planner  @@ -114,8 +117,11 @@ export const Navbar = (props: any) => { {status === "authenticated" ? ( - @@ -133,8 +139,9 @@ export const Navbar = (props: any) => { )} @@ -169,7 +176,7 @@ export const Navbar = (props: any) => { @@ -188,7 +195,7 @@ export const Navbar = (props: any) => { variant="bordered" onClick={() => signIn("keycloak", { callbackUrl: "/" })} > - Log In + Log In )} diff --git a/components/primitives.ts b/components/primitives.ts index af278d0..6607a15 100644 --- a/components/primitives.ts +++ b/components/primitives.ts @@ -56,22 +56,22 @@ export const subtitle = tv({ }); export const courseColors = [ - "hsl(0deg 60% 35%)", - "hsl(21.17deg 60% 35%)", - "hsl(42.34deg 60% 35%)", - "hsl(63.51deg 60% 35%)", - "hsl(84.68deg 60% 35%)", - "hsl(105.85deg 60% 35%)", - "hsl(127.02deg 60% 35%)", - "hsl(148.19deg 60% 35%)", - "hsl(169.36deg 60% 35%)", - "hsl(190.53deg 60% 35%)", - "hsl(211.70deg 60% 35%)", - "hsl(232.87deg 60% 35%)", - "hsl(254.04deg 60% 35%)", - "hsl(275.21deg 60% 35%)", - "hsl(296.38deg 60% 35%)", - "hsl(317.55deg 60% 35%)", + "bg-[color:hsl(0deg_60%_50%)] dark:bg-[color:hsl(0deg_60%_35%)]", + "bg-[color:hsl(21.17deg_60%_50%)] dark:bg-[color:hsl(21.17deg_60%_35%)]", + "bg-[color:hsl(42.34deg_60%_50%)] dark:bg-[color:hsl(42.34deg_60%_35%)]", + "bg-[color:hsl(63.51deg_60%_50%)] dark:bg-[color:hsl(63.51deg_60%_35%)]", + "bg-[color:hsl(84.68deg_60%_50%)] dark:bg-[color:hsl(84.68deg_60%_35%)]", + "bg-[color:hsl(105.85deg_60%_50%)] dark:bg-[color:hsl(105.85deg_60%_35%)]", + "bg-[color:hsl(127.02deg_60%_50%)] dark:bg-[color:hsl(127.02deg_60%_35%)]", + "bg-[color:hsl(148.19deg_60%_50%)] dark:bg-[color:hsl(148.19deg_60%_35%)]", + "bg-[color:hsl(169.36deg_60%_50%)] dark:bg-[color:hsl(169.36deg_60%_35%)]", + "bg-[color:hsl(190.53deg_60%_50%)] dark:bg-[color:hsl(190.53deg_60%_35%)]", + "bg-[color:hsl(211.70deg_60%_50%)] dark:bg-[color:hsl(211.70deg_60%_35%)]", + "bg-[color:hsl(232.87deg_60%_50%)] dark:bg-[color:hsl(232.87deg_60%_35%)]", + "bg-[color:hsl(254.04deg_60%_50%)] dark:bg-[color:hsl(254.04deg_60%_35%)]", + "bg-[color:hsl(275.21deg_60%_50%)] dark:bg-[color:hsl(275.21deg_60%_35%)]", + "bg-[color:hsl(296.38deg_60%_50%)] dark:bg-[color:hsl(296.38deg_60%_35%)]", + "bg-[color:hsl(317.55deg_60%_50%)] dark:bg-[color:hsl(317.55deg_60%_35%)]", ]; export function generateColorFromName(name: string) { @@ -81,5 +81,8 @@ export function generateColorFromName(name: string) { hash += name.charCodeAt(i) * i; } + console.log("generated:"); + console.log(courseColors[hash % courseColors.length]); + return courseColors[hash % courseColors.length]; } diff --git a/components/theme-switch.tsx b/components/theme-switch.tsx index 72b5980..c0636f7 100644 --- a/components/theme-switch.tsx +++ b/components/theme-switch.tsx @@ -43,7 +43,7 @@ export const ThemeSwitch: FC = ({ className: clsx( "px-px transition-opacity hover:opacity-80 cursor-pointer", className, - classNames?.base, + classNames?.base ), })} > @@ -65,11 +65,15 @@ export const ThemeSwitch: FC = ({ "px-0", "mx-0", ], - classNames?.wrapper, + classNames?.wrapper ), })} > - {!isSelected || isSSR ? : } + {!isSelected || isSSR ? ( + + ) : ( + + )}
); diff --git a/styles/globals.css b/styles/globals.css index b8cc390..947af0c 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -40,6 +40,11 @@ .fc-col-header { background-color: #151d2b; font-family: var(--font-sans); + border-radius: 0.5rem 0.5rem 0px 0px; +} + +.fc { + border-radius: 0.5rem; } .fc-event-main-frame { @@ -50,8 +55,15 @@ text-overflow: ellipsis; } -h2 { - font-size: 1.1em; +.fc-theme-standard .fc-scrollgrid { + border-radius: 0.5rem; +} + +.fc-theme-standard td { + border-radius: 0rem 0rem 0.5rem 0.5rem; +} +.fc-theme-standard th { + border-radius: 0.5rem 0.5rem 0rem 0rem; } .smallFont { diff --git a/tailwind.config.js b/tailwind.config.js index 3d455c7..dcccabe 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -24,11 +24,26 @@ module.exports = { plugins: [ nextui({ themes: { - light: {}, + light: { + colors: { + background: "#E5E7EB", + background_navbar: "#31425E", + background_layer: "#31425E", + foreground: "#000000", + light_foreground: "#F1F1F1", + primary: { + DEFAULT: "#9FADBC", + foreground: "#314f25E", + }, + secondary: "#F46523", + focus: "#F46523", + }, + }, dark: { colors: { background: "#0C1019", background_navbar: "#151D2B", + background_layer: "#2C2C33", foreground: "#D9D9D9", light_foreground: "#181C25", primary: { @@ -36,7 +51,7 @@ module.exports = { foreground: "#1D2125", }, secondary: "#F46523", - focus: "#BEF264", + focus: "#F46523", }, }, },