feat: update dark mode color scheme across components

This commit revises the dark mode color scheme for better consistency and readability. The updates include changes to background colors, borders, and modal components to ensure a cohesive look and feel throughout the application.

Changes include:
- Updated global dark mode background and text colors in `src/index.css`.
- Modified `App.jsx` to remove redundant background color class for dark mode.
- Enhanced `Modal.jsx` with a darker backdrop and content background in dark mode for better contrast.
- Adjusted `NewEntryForm.jsx` and modal components like `DataInputModal.jsx` and `ExportModal.jsx` to use the new dark mode background color.
- Updated `Tab.jsx`, `TableHeading.jsx`, and various input elements in `src/index.css` to align with the new dark color scheme.
- In `TablePage.jsx`, removed commented-out code and adapted overflow background color for dark mode.
- `DataManager.jsx` now uses the introduced `neutral-950` color for dark mode background to maintain consistency.

New files or directories created:
- None

Relevant files updated:
- `src/App.jsx`
- `src/components/Modal.jsx`
- `src/components/NewEntryForm.jsx`
- `src/components/Tab.jsx`
- `src/components/TableHeading.jsx`
- `src/index.css`
- `src/modals/DataInputModal.jsx`
- `src/modals/ExportModal.jsx`
- `src/pages/TablePage.jsx`
- `src/tools/DataManager.jsx`
- `tailwind.config.cjs` for adding the `neutral-950` color.

This update ensures that our application's dark mode is up to par with modern UI standards, offering a better visual experience for users who prefer darker themes.

src/App.jsx

@@ -19,7 +19,7 @@ function App() {
     }
 
     return (
-        <div className="flex flex-col w-full min-h-screen bg-neutral-100 dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 select-none">
+        <div className="flex flex-col w-full min-h-screen text-neutral-800 dark:text-neutral-200 select-none">
             <Notifier />
             <TopNav title="Field Day" auth={auth} />
             <div className="flex flex-grow">

src/components/Modal.jsx

@@ -62,7 +62,7 @@ export default function Modal({
 function ModalOverlay() {
     return (
         <motion.div
-            className="fixed inset-0 bg-neutral-300 dark:bg-neutral-700 opacity-0"
+            className="fixed inset-0 bg-neutral-300 dark:bg-neutral-800 opacity-0"
             key="overlay"
             initial={{ opacity: 0 }}
             animate={{ opacity: 0.75 }}
@@ -93,7 +93,7 @@ function ModalHeader({ title, text }) {
 }
 
 function ModalContent({ children }) {
-    return <div className="bg-white dark:bg-black max-h-full-modal-content-height overflow-auto">{children}</div>;
+    return <div className="bg-white dark:bg-neutral-950 max-h-full-modal-content-height overflow-auto">{children}</div>;
 }
 
 function ModalFooter({ children }) {

src/components/NewEntryForm.jsx

@@ -96,7 +96,7 @@ export default function NewEntryForm({ setData }) {
                 </div>
                 <SessionSummary session={selectedSession} />
             </div>
-            <div className="bg-neutral-100 dark:bg-neutral-800 ">
+            <div className="bg-neutral-100 dark:bg-neutral-700 ">
                 <h1 className='heading p-4'>Choose a Critter</h1>
                 <div className="overflow-x-auto ">
                     <TabBar

src/components/Tab.jsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 
 export default function Tab({ text, icon, active, onClick }) {
     const background = classNames({
-        'bg-white dark:bg-black': active,
-        'bg-neutral-200 dark:bg-neutral-900': !active,
+        'bg-white dark:bg-neutral-950': active,
+        'bg-neutral-200 dark:bg-neutral-800': !active,
     });
     const containerClasses = classNames(
         background,

src/components/TableHeading.jsx

@@ -10,7 +10,7 @@ export const TableHeading = ({ label, active, sortDirection, onClick }) => {
     };
 
     const thClasses = classNames(
-        'sticky top-0 bg-white z-10 border-b border-neutral-800 dark:bg-black p-2 font-semibold cursor-pointer',
+        'sticky top-0 bg-white z-10 border-b border-neutral-800 dark:bg-neutral-950 p-2 font-semibold cursor-pointer',
         { 'text-asu-maroon dark:text-asu-gold': active }
     );
 

src/index.css

@@ -4,7 +4,7 @@
 
 @layer components {
     body {
-        @apply bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-white accent-asu-maroon;
+        @apply bg-neutral-100 dark:bg-neutral-700 text-neutral-900 dark:text-white accent-asu-maroon;
     }
     .title {
         @apply text-7xl pt-5 leading-none;
@@ -35,11 +35,11 @@
     }
 
     select {
-        @apply cursor-pointer w-fit p-1.5 bg-neutral-200 dark:bg-neutral-800 dark:text-white rounded-md border-solid border-2 focus:border-asu-gold h-10;
+        @apply cursor-pointer w-fit p-1.5 bg-neutral-200 dark:bg-neutral-800 dark:text-white rounded-md border-solid border-2 border-neutral-300 dark:border-neutral-500 focus:border-asu-gold h-10;
     }
 
     input {
-        @apply bg-white dark:bg-black dark:text-white focus:outline-asu-gold disabled:border-0 disabled:bg-transparent border border-neutral-300 rounded-lg py-1 px-4 leading-normal w-auto h-10;
+        @apply bg-white dark:bg-black dark:text-white focus:outline-asu-gold disabled:border-0 disabled:bg-transparent border border-neutral-300 dark:border-neutral-500 rounded-lg py-1 px-4 leading-normal w-auto h-10;
     }
 
     textarea {

src/modals/DataInputModal.jsx

@@ -70,7 +70,7 @@ export default function DataInputModal({ showModal, closeModal }) {
                 }}
             >
                 <div className='flex-col w-full-modal-width h-full-modal-content-height max-w-5xl'>
-                    <div className='bg-neutral-100 dark:bg-neutral-800 flex-shrink-0 h-tab-bar'>
+                    <div className='bg-neutral-100 dark:bg-neutral-700 flex-shrink-0 h-tab-bar'>
                         <TabBar
                             tabs={[
                                 {

src/modals/ExportModal.jsx

@@ -36,7 +36,7 @@ export default function ExportModal({ showModal, onCancel }) {
 }
 
 const Tabs = ({ activeTab, setActiveTab, currentProject, setCurrentProject }) => (
-    <div className="flex justify-between items-center overflow-auto bg-neutral-100 dark:bg-neutral-800">
+    <div className="flex justify-between items-center overflow-auto bg-neutral-100 dark:bg-neutral-700">
         <TabBar
             tabs={[
                 { text: 'Sessions', icon: <SessionIcon />, active: activeTab === 'Session Form', onClick: () => setActiveTab('Session Form') },

src/pages/TablePage.jsx

@@ -38,10 +38,6 @@ export default function TablePage() {
     const triggerRerender = () => setRerender(!rerender);
 
     useEffect(() => {
-        // if (additionalConstraints.length > 0) {
-        //     // loadBatch(additionalConstraints)
-        //     // console.log(additionalConstraints)
-        // }
         if (additionalConstraints) {
             console.log(additionalConstraints)
             loadBatch(additionalConstraints)
@@ -111,7 +107,7 @@ export default function TablePage() {
                     setEntries={setEntries}
                     updateConstraints={(newConstraints) => setAdditionalConstraints(newConstraints)}
                 />
-                <div className="flex justify-between overflow-auto">
+                <div className="flex justify-between overflow-auto dark:bg-neutral-800">
                     <TableTools>
                         <Button
                             flexible={true}

src/tools/DataManager.jsx

@@ -83,7 +83,7 @@ export default function DataManager({ name, labels = [], entries = [], setEntrie
     }, [labels]);
 
     return (
-        <motion.div className="bg-white dark:bg-black">
+        <motion.div className="bg-white dark:bg-neutral-950">
             <div className="flex justify-between px-5 items-center">
                 <h1 className="heading pt-4">{name} - Entries</h1>
                 <div className="flex px-5 items-center">

tailwind.config.cjs

@@ -14,7 +14,8 @@ module.exports = {
       },
       colors: {
         'asu-maroon': '#8c1d40',
-        'asu-gold': '#ffc627'
+        'asu-gold': '#ffc627',
+        'neutral-950': '#0F0F0F',
       },
       maxWidth: {
         'full-modal-width': 'calc(90vw)',