Update various styling including dark mode.

Squashed commit of the following: commit 08e2bfd07a5e5d0426d126975041dab3c2bb66ae Author: Ethan Swan <[email protected]> Date: Sun Sep 3 23:02:11 2023 -0500 Update card styling. commit 55d5ef184ebd883c205a6a4b64c5ee372b9290db Author: Ethan Swan <[email protected]> Date: Sun Sep 3 22:52:17 2023 -0500 Make some nav bar style updates. commit f74623a7e40437dc4ab0d949ca1324daeaca55b9 Author: Ethan Swan <[email protected]> Date: Sun Sep 3 22:45:32 2023 -0500 Finish dark mode updates. commit 96c40eb71f7caa9adfeb3486c6f3dc76e96311c7 Author: Ethan Swan <[email protected]> Date: Sun Sep 3 22:38:35 2023 -0500 Finish live workout in dark mode. commit 678858fcfe542aa57600556cc3330b02c82a6478 Author: Ethan Swan <[email protected]> Date: Sun Sep 3 22:33:49 2023 -0500 Update a lot of things for dark mode.
eswan18 · Sep 4, 2023 · a17623d · a17623d
1 parent ef3fa07
commit a17623d
Show file tree

Hide file tree

Showing 15 changed files with 69 additions and 64 deletions.
diff --git a/app/(protected)/dashboard/NewWorkoutPanel.tsx b/app/(protected)/dashboard/NewWorkoutPanel.tsx
@@ -34,7 +34,7 @@ export default function NewWorkoutPanel({
   return (
     <div className="w-full pt-2">
       {workoutTypes && (
-        <h2 className="text-gray-900 text-lg lg:text-2xl">
+        <h2 className="text-lg lg:text-2xl">
           New Workout by Type
         </h2>
       )}
@@ -53,7 +53,7 @@ type NewWorkoutButtonProps = {
 function NewWorkoutButton({ name, onClick }: NewWorkoutButtonProps) {
   return (
     <button className="flex flex-col font-bold" onClick={onClick}>
-      <div className="w-32 h-16 rounded-lg shadow-lg flex flex-row justify-between items-center px-2">
+      <div className="w-32 h-16 rounded-lg shadow-lg flex flex-row justify-between items-center px-2 text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 dark:shadow-2xl">
         <p>{name}</p>
         <i className="fi fi-sr-arrow-alt-circle-right text-3xl inline-flex align-[-0.2rem] text-gold" />
       </div>

diff --git a/app/(protected)/dashboard/RecentWorkoutsPanel.tsx b/app/(protected)/dashboard/RecentWorkoutsPanel.tsx
@@ -18,13 +18,13 @@ export default async function RecentWorkoutsPanel({
   return (
     <div className="w-full">
       <h2 className="text-2xl">Recent Workouts</h2>
-      <div className="flex flex-row gap-2 lg:gap-4 flex-wrap">
+      <div className="flex flex-row gap-2 lg:gap-4 flex-wrap mt-2">
         {wktsWithDetails.length > 0 ? (
           wktsWithDetails.map(({ workout }) => (
             <RecentWorkoutCard key={workout.id} workout={workout} />
           ))
         ) : (
-          <p className="text-gray-500 pt-2">None yet!</p>
+          <p className="text-gray-500 dark:text-gray-300 pt-2">None yet!</p>
         )}
       </div>
     </div>
@@ -66,9 +66,9 @@ async function RecentWorkoutCard({ workout }: { workout: WorkoutWithType }) {
   const name = workout.workout_type_name ?? "Custom Workout";
   return (
     <Link href={`/workouts/${workout.id}`}>
-      <div className="rounded-lg p-2 lg:p-4 shadow-lg w-32 h-32 flex flex-col gap-2">
+      <div className="rounded-lg p-2 lg:p-4 shadow-lg w-32 h-32 flex flex-col gap-2 bg-white dark:bg-gray-800 dark:shadow-2xl">
         <p className="text-sm">{startTimeText}</p>
-        <h2 className="text-gray-900 text-base lg:text-lg">{name}</h2>
+        <h2 className="text-gray-600 dark:text-gray-300 text-base lg:text-lg font-bold">{name}</h2>
       </div>
     </Link>
   );

diff --git a/app/(protected)/dashboard/page.tsx b/app/(protected)/dashboard/page.tsx
@@ -11,7 +11,7 @@ export default async function DashboardPage() {
 
   return (
     <main className="flex flex-col justify-start gap-10 p-10 lg:p-16">
-      <div className="mb-4 text-gray-900 dark:text-gray-100">
+      <div className="mb-4">
         <h1 className="text-2xl lg:text-4xl">Welcome!</h1>
       </div>
       <div className="w-full items-center justify-around lg:flex">

diff --git a/app/(protected)/live/workouts/[workoutId]/CreateNewExerciseGroupWidget.tsx b/app/(protected)/live/workouts/[workoutId]/CreateNewExerciseGroupWidget.tsx
@@ -6,10 +6,10 @@ export default function CreateNewExerciseGroupWidget({
   onClick: () => void;
 }) {
   return (
-    <div className="rounded-lg p-2 lg:p-4 mt-3 whitespace-nowrap flex justify-start">
+    <div className="whitespace-nowrap flex justify-start">
       <button
         className="flex flex-row justify-center items-center text-gold
-                   py-2 m-2 gap-2 text-lg"
+                  ml-2 mt-1 gap-2 text-lg"
         onClick={onClick}
       >
         <i className="fi fi-sr-square-plus inline-flex align-[-0.2rem] text-2xl" />

diff --git a/app/(protected)/live/workouts/[workoutId]/LiveWorkout.tsx b/app/(protected)/live/workouts/[workoutId]/LiveWorkout.tsx
@@ -181,47 +181,49 @@ export default function LiveWorkout({
   const workoutName = workout.workout_type_name || "Custom Workout";
   return (
     <main>
-      <h1 className="text-3xl m-2 text-center my-4 lg:my-10 font-bold">
+      <h1 className="text-3xl text-center my-4 lg:my-10 font-bold dark:text-gray-300">
         {workoutName}
       </h1>
-      {groups.map(({ exerciseType, exercises, key }) => {
-        const setExercises = (exercises: ExerciseOrLoading[]) =>
-          setExercisesForGroup(key, exercises);
-        function onClickCreateNewExercise(): void {
-          openNewExerciseModal({
-            exerciseType: exerciseType as ExerciseType,
-            exercises,
-            setExercises,
-          });
-        }
-        function onClickEditExercise(exerciseId: string): void {
-          openEditExerciseModal(exerciseId, {
-            exerciseType: exerciseType as ExerciseType,
-            exercises,
-            setExercises,
-          });
-        }
-        if (!exerciseType) {
-          return;
-        }
-        return (
-          <ExerciseGroupWidget
-            exerciseType={exerciseType}
-            exercises={exercises}
-            onClickCreateNewExercise={onClickCreateNewExercise}
-            onClickEditExercise={onClickEditExercise}
-            key={key}
-          />
-        );
-      })}
+      <div className="flex flex-col gap-6 px-2">
+        {groups.map(({ exerciseType, exercises, key }) => {
+          const setExercises = (exercises: ExerciseOrLoading[]) =>
+            setExercisesForGroup(key, exercises);
+          function onClickCreateNewExercise(): void {
+            openNewExerciseModal({
+              exerciseType: exerciseType as ExerciseType,
+              exercises,
+              setExercises,
+            });
+          }
+          function onClickEditExercise(exerciseId: string): void {
+            openEditExerciseModal(exerciseId, {
+              exerciseType: exerciseType as ExerciseType,
+              exercises,
+              setExercises,
+            });
+          }
+          if (!exerciseType) {
+            return;
+          }
+          return (
+            <ExerciseGroupWidget
+              exerciseType={exerciseType}
+              exercises={exercises}
+              onClickCreateNewExercise={onClickCreateNewExercise}
+              onClickEditExercise={onClickEditExercise}
+              key={key}
+            />
+          );
+        })}
       <CreateNewExerciseGroupWidget onClick={onClickCreateNewExerciseGroup} />
+      </div>
       {modal}
       <div className="w-full flex flex-row justify-center text-xl font-bold">
         <Link href="/dashboard">
           <button
             className="flex flex-row justify-center items-center
                         rounded-full text-white bg-gold
-                        py-3 px-4 m-2 gap-3"
+                        py-3 px-4 m-2 gap-3 dark:text-gray-700"
           >
             <p>Finish Workout</p>
             <i className="fi fi-br-checkbox inline-flex align-[-0.2rem]" />

diff --git a/app/(protected)/live/workouts/[workoutId]/exerciseGroupWidget/CreateNewExerciseWidget.tsx b/app/(protected)/live/workouts/[workoutId]/exerciseGroupWidget/CreateNewExerciseWidget.tsx
@@ -6,8 +6,8 @@ export default function CreateNewExerciseWidget({
   onClick: () => void;
 }) {
   return (
-    <div className="m-1 flex flex-col justify-start items-center w-20 h-20 shrink-0">
-      <div className="rounded-lg shadow-lg flex flex-col w-full h-full bg-white shrink-0 justify-center items-center">
+    <div className="flex flex-col justify-start items-center w-20 h-20 shrink-0">
+      <div className="rounded-lg shadow-lg flex flex-col w-full h-full  shrink-0 bg-white dark:bg-gray-900 justify-center items-center">
         <button
           className="text-gold text-4xl"
           title="Record new set"

diff --git a/app/(protected)/live/workouts/[workoutId]/exerciseGroupWidget/ExerciseGroupWidget.tsx b/app/(protected)/live/workouts/[workoutId]/exerciseGroupWidget/ExerciseGroupWidget.tsx
@@ -25,11 +25,11 @@ export default function ExerciseGroupWidget({
   onClickEditExercise,
 }: ExerciseGroupWidgetProps) {
   return (
-    <div className="mt-6 mx-2">
+    <div>
       <h2 className="text-xl mx-1">
         <i className="fi fi-ss-gym" /> {exerciseType.name}
       </h2>
-      <div className="flex flex-row justify-left flex-wrap">
+      <div className="flex flex-row justify-left flex-wrap gap-2">
         {exercises.map((ex) => {
           if ("isLoading" in ex) {
             return;

diff --git a/app/(protected)/live/workouts/[workoutId]/exerciseGroupWidget/ExerciseWidget.tsx b/app/(protected)/live/workouts/[workoutId]/exerciseGroupWidget/ExerciseWidget.tsx
@@ -15,8 +15,8 @@ export default function ExerciseWidget({
   onEditButtonClick,
 }: ExerciseWidgetProps) {
   return (
-    <div className="m-1 flex flex-col justify-between items-center w-20 h-[7.5rem] shrink-0">
-      <div className="rounded-lg shadow-lg flex flex-col items-center justify-center relative w-full h-20 bg-white shrink-0">
+    <div className="flex flex-col justify-between items-center w-20 h-[7.5rem] shrink-0">
+      <div className="rounded-lg shadow-lg flex flex-col items-center justify-center relative w-full h-20 bg-white dark:bg-gray-900 shrink-0">
         <SaveStatusOverlayContainer saveStatus={saveStatus} />
         <div className="text-2xl font-bold mt-1">{weight}</div>
         <div className="text-xl">

diff --git a/app/(protected)/workouts/[workoutId]/ExerciseGroupWidget.tsx b/app/(protected)/workouts/[workoutId]/ExerciseGroupWidget.tsx
@@ -10,11 +10,11 @@ export default async function ExerciseGroupWidget({
   exercises,
 }: ExerciseGroupWidgetProps) {
   return (
-    <div className="">
+    <div>
       <h2 className="text-xl">
         <i className="fi fi-ss-gym" /> {exerciseType.name}
       </h2>
-      <div className="flex flex-row justify-left overflow-x-scroll">
+      <div className="flex flex-row justify-left gap-2 overflow-x-scroll pb-4 px-1">
         {exercises.map((ex) => (
           <ExerciseWidget exercise={ex} key={ex.id} />
         ))}
@@ -25,7 +25,7 @@ export default async function ExerciseGroupWidget({
 
 async function ExerciseWidget({ exercise }: { exercise: Exercise }) {
   return (
-    <div className="rounded-lg shadow-lg m-1 py-1 flex flex-col items-center justify-center w-20 h-20 bg-white shrink-0">
+    <div className="rounded-lg shadow-lg flex flex-col items-center justify-center w-20 h-20 bg-white dark:bg-gray-900 shrink-0">
       <div className="text-2xl font-bold mt-1">{exercise.weight}</div>
       <div className="text-xl">
         <i className="fi fi-sr-cross-small inline-flex align-[-0.2rem] text-gray-400" />

diff --git a/app/(protected)/workouts/[workoutId]/WorkoutView.tsx b/app/(protected)/workouts/[workoutId]/WorkoutView.tsx
@@ -37,13 +37,15 @@ export default function WorkoutView({
           </button>
         </Link>
       </div>
-      {groups.map(({ exerciseType, exercises }) => (
-        <ExerciseGroupWidget
-          exerciseType={exerciseType}
-          exercises={exercises}
-          key={exercises[0].id}
-        />
-      ))}
+      <div className="flex flex-col gap-6">
+        {groups.map(({ exerciseType, exercises }) => (
+          <ExerciseGroupWidget
+            exerciseType={exerciseType}
+            exercises={exercises}
+            key={exercises[0].id}
+          />
+        ))}
+      </div>
     </main>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -15,9 +15,9 @@ export const metadata = {
 export default function RootLayout(props: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={`${inter.className} min-h-screen relative`}>
+      <body className={`${inter.className} min-h-screen relative bg-gray-100 dark:bg-gray-700`}>
         <NavBar />
-        <div className="flex flex-row justify-center dark:bg-gray-700">
+        <div className="flex flex-row justify-center text-gray-700 dark:text-gray-100">
           <div className="content-container w-[48rem] flex-shrink">
             {props.children}
           </div>

diff --git a/components/ClientModal.tsx b/components/ClientModal.tsx
@@ -45,7 +45,7 @@ export default function ClientModal({
             className="float-left w-8 h-8 lg:h-11 lg:w-11"
             onClick={handleClose}
           >
-            <i className="fi fi-rs-cross text-gray-900 text-base lg:text-2xl p-2" />
+            <i className="fi fi-rs-cross text-gray-900 dark:text-gray-100 text-base lg:text-2xl p-2" />
           </button>
         </div>
         {children}

diff --git a/components/forms/Form.tsx b/components/forms/Form.tsx
@@ -14,7 +14,7 @@ export default function Form({
   children,
 }: FormProps) {
   return (
-    <div className="flex flex-col items-center dark:bg-gray-700">
+    <div className="flex flex-col items-center">
       <form
         action={action}
         onSubmit={onSubmit}

diff --git a/components/navBar/navBar.tsx b/components/navBar/navBar.tsx
@@ -11,7 +11,7 @@ export default async function NavBar() {
 function NavBarLeft() {
   return (
     <Link href="/" className="flex flex-row justify-start items-center">
-      <h1 className="text-sm lg:text-lg px-2 lg:px-3 font-bold decoration-gold decoration-2 underline underline-offset-4">
+      <h1 className="dark:text-gray-200 text-sm lg:text-lg px-2 lg:px-3 font-bold decoration-gold decoration-2 underline underline-offset-4">
         Flex of <span className="text-gold">Gold</span>
       </h1>
     </Link>
@@ -21,7 +21,7 @@ function NavBarLeft() {
 // This synchronous version is used for Storybook.
 export function SyncNavBar({ userEmail }: { userEmail: String | undefined }) {
   return (
-    <div className="flex flex-row justify-between bg-gray-50 text-gray-800 border-b-[1px] border-gray-300 dark:border-white h-12 sm:h-14">
+    <div className="flex flex-row justify-between bg-white dark:bg-gray-950 text-gray-800 border-b-[1px] border-gray-300 dark:border-0 h-12 sm:h-14">
       <NavBarLeft />
       <NavBarRight userEmail={userEmail} />
     </div>

diff --git a/components/navBar/navBarRight.tsx b/components/navBar/navBarRight.tsx
@@ -32,7 +32,8 @@ export default function NavBarRight({
     </button>
   );
   return (
-    <div className="flex flex-wrap justify-end lg:gap-2 items-center h-full text-sm">
+    <div className="flex flex-wrap justify-end lg:gap-2 items-center h-full text-sm text-gray-800 dark:text-gray-300">
+      <i className="text-lg fi fi-rs-circle-user inline-flex align-[-0.25rem]" />
       <p className="overflow-hidden text-ellipsis">{userEmail}</p>
       {button}
     </div>