fix dark theme styling

lauragift21 · Mar 14, 2024 · f64cc4d · f64cc4d
1 parent 12d8287
commit f64cc4d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 15 deletions.
diff --git a/app/components/Nav.tsx b/app/components/Nav.tsx
@@ -1,6 +1,6 @@
 export const Nav = () => {
   return (
-    <nav class="bg-white border-gray-200 dark:bg-gray-900">
+    <nav class="bg-white border-gray-200 dark:bg-gray-800">
       <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
         <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
           <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Staff Hub Logo" />

diff --git a/app/islands/form.tsx b/app/islands/form.tsx
@@ -37,21 +37,21 @@ const EmployeeForm: FC = ({ locations, departments}) => {
 
   return (
     <form onSubmit={handleSubmit} method='POST' className="mt-6 space-y-4 flex flex-col justify-items-start">
-      <h1 className="text-3xl font-semibold"> Add a New Employee</h1>
+      <h1 className="text-3xl font-semibold dark:text-white"> Add a New Employee</h1>
       <div>
-        <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
+        <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-white">Name</label>
         <input
           type="text"
           name="name"
           id="name"
           value={employee.name}
           onChange={handleChange}
           required
-          className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+          className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 "
         />
       </div>
       <div>
-        <label htmlFor="role" className="block text-sm font-medium text-gray-700">Role</label>
+        <label htmlFor="role" className="block text-sm font-medium text-gray-700 dark:text-white">Role</label>
         <input
           type="text"
           name="position"
@@ -63,7 +63,7 @@ const EmployeeForm: FC = ({ locations, departments}) => {
         />
       </div>
       <div>
-        <label htmlFor="Start Date" className="block text-sm font-medium text-gray-700">Start Date</label>
+        <label htmlFor="Start Date" className="block text-sm font-medium text-gray-700 dark:text-white">Start Date</label>
         <input
           type="date"
           name="join_date"
@@ -75,17 +75,17 @@ const EmployeeForm: FC = ({ locations, departments}) => {
         />
       </div>
       <div>
-        <label htmlFor="image" className="block text-sm font-medium text-gray-700">Image</label>
+        <label htmlFor="image" className="block text-sm font-medium text-gray-700 dark:text-white">Image</label>
         <input
           type="file"
           name="image_url"
           id="image_url"
           onChange={handleChange}
-          className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+          className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:text-white"
         />
       </div>
       <div>
-        <label htmlFor="department" className="block text-sm font-medium text-gray-700">Department</label>
+        <label htmlFor="department" className="block text-sm font-medium text-gray-700 dark:text-white">Department</label>
         <select
           name="department_id"
           id="department_id"
@@ -104,7 +104,7 @@ const EmployeeForm: FC = ({ locations, departments}) => {
       </div>
 
       <div>
-        <label htmlFor="location" className="block text-sm font-medium text-gray-700">Location</label>
+        <label htmlFor="location" className="block text-sm font-medium text-gray-700 dark:text-white">Location</label>
         <select
           name="location_id"
           id="location_id"
@@ -124,7 +124,7 @@ const EmployeeForm: FC = ({ locations, departments}) => {
 
       <button
         type="submit"
-        className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:text-white"
       >
         Add Employee
       </button>

diff --git a/app/routes/_renderer.tsx b/app/routes/_renderer.tsx
@@ -24,7 +24,7 @@ export default jsxRenderer(({ children, title }) => {
         <Script src="/app/client.ts" async />
       </head>
       <Nav />
-      <body className="max-w-screen-xl mx-auto p-4">{children}</body>
+      <body className="max-w-screen-xl mx-auto p-4 dark:bg-gray-800">{children}</body>
       <Footer />
     </html>
   )

diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -30,13 +30,13 @@ export const GET = createRoute(async (c) => {
       </h1>
       <p className="text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400"></p>
       <section className="my-12">
-        <button type="button" class="inline-flex items-center font-bolder mr-10 px-10 py-2.5 text-xl font-medium text-center text-gray-500 shadow-lg rounded-lg hover:bg-blue-200 hover:text-blue-400 border border-blue-400 focus:ring-4 focus:outline-none focus:ring-blue-300">
+        <button type="button" class="inline-flex items-center font-bolder mr-10 px-10 py-2.5 text-xl font-medium text-center text-gray-500 shadow-lg rounded-lg hover:bg-blue-200 hover:text-blue-400 border border-blue-400 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:text-white">
           {employees.length} <span className="px-1 text-sm">People</span>
         </button>
-        <button type="button" class="inline-flex items-center font-bolder mr-10 px-10 py-2.5 text-xl font-medium text-center text-gray-500 shadow-lg rounded-lg hover:bg-red-200 hover:text-red-400 border border-red-400 focus:ring-4 focus:outline-none focus:ring-red-300">
+        <button type="button" class="inline-flex items-center font-bolder mr-10 px-10 py-2.5 text-xl font-medium text-center text-gray-500 shadow-lg rounded-lg hover:bg-red-200 hover:text-red-400 border border-red-400 focus:ring-4 focus:outline-none focus:ring-red-300 dark:text-white">
           {departments.length} <span className="px-1 text-sm">Departments</span>
         </button>
-        <button type="button" class="inline-flex items-center font-bolder px-10 py-2.5 text-xl font-medium text-center text-gray-500 shadow-lg rounded-lg hover:bg-indigo-200 hover:text-indigo-400 border border-indigo-400 focus:ring-4 focus:outline-none focus:ring-indigo-300">
+        <button type="button" class="inline-flex items-center font-bolder px-10 py-2.5 text-xl font-medium text-center text-gray-500 shadow-lg rounded-lg hover:bg-indigo-200 hover:text-indigo-400 border border-indigo-400 focus:ring-4 focus:outline-none focus:ring-indigo-300 dark:text-white">
           {locations.length} <span className="px-1 text-sm">Locations</span>
         </button>
       </section>