feat: improve contrast

envelope-zero · Jan 24, 2024 · 079bab5 · 079bab5
1 parent fb25d4b
commit 079bab5
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 22 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -8,7 +8,7 @@
   }
 
   #root {
-    @apply bg-white dark:bg-slate-800;
+    @apply bg-gray-100 dark:bg-slate-900;
   }
 
   // hide arrows on number inputs
@@ -88,11 +88,11 @@
   }
 
   .box {
-    @apply shadow-sm rounded-md bg-gray-100 dark:bg-slate-700;
+    @apply shadow-sm rounded-lg bg-white dark:bg-slate-800;
   }
 
   .card {
-    @apply bg-white dark:bg-slate-800 shadow-sm overflow-hidden rounded-md border border-gray-200 dark:border-gray-900;
+    @apply bg-white dark:bg-slate-800 shadow-lg md:shadow-md overflow-hidden rounded-lg;
   }
 
   .error {
@@ -107,7 +107,6 @@
     @apply text-blue-600 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-300;
   }
 
-  input,
   textarea {
     @apply border border-gray-300 dark:border-gray-900 rounded-md p-2 dark:bg-slate-800 dark:focus:bg-slate-700 dark:text-gray-100;
   }
@@ -141,7 +140,7 @@
       @apply grid grid-cols-12;
 
       a {
-        @apply text-gray-400 text-sm font-medium col-span-3 text-center flex justify-center items-center dark:border-gray-500;
+        @apply text-gray-500 dark:text-gray-400 text-sm font-medium col-span-3 text-center flex justify-center items-center border-gray-300 dark:border-gray-500;
       }
 
       > div {

diff --git a/src/components/AccountListSwitch.tsx b/src/components/AccountListSwitch.tsx
@@ -7,8 +7,8 @@ type Props = { selected: 'internal' | 'external' }
 const AccountListSwitch = ({ selected }: Props) => {
   const tabClasses = (isActive: boolean) =>
     `${
-      isActive ? 'bg-white dark:bg-slate-600' : ''
-    } text-sm text-center rounded-md p-1 grow`
+      isActive ? 'bg-gray-100 dark:bg-slate-600' : ''
+    } text-sm text-center rounded-md p-2 grow`
 
   const { t }: Translation = useTranslation()
 

diff --git a/src/components/CategoryMonth.tsx b/src/components/CategoryMonth.tsx
@@ -39,7 +39,9 @@ const CategoryMonth = ({
   return (
     <>
       <tr
-        className="border-t border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-slate-700 cursor-pointer"
+        className={`${
+          showEnvelopes ? 'border-y' : 'border-t'
+        } border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-slate-700 cursor-pointer`}
         onClick={() => {
           if (
             category.envelopes.some(envelope => envelope.id === editingEnvelope)

diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
@@ -108,7 +108,7 @@ const Dashboard = ({ budget }: DashboardProps) => {
                 type="month"
                 id="month"
                 value={activeMonth}
-                className="border-none cursor-pointer text-center"
+                className="border-none cursor-pointer text-center bg-transparent"
                 onChange={e => {
                   e.preventDefault()
                   navigate(linkToMonth(e.target.value))
@@ -155,7 +155,7 @@ const Dashboard = ({ budget }: DashboardProps) => {
       ) : (
         <>
           <Error error={error} />
-          <div className="box w-full mt-4 mb-2 text-center text-gray-500">
+          <div className="card w-full my-4 md:mb-8 text-center text-gray-500">
             <div className="py-4 md:py-8">
               <div className="text-gray-500 dark:text-gray-400 font-medium uppercase">
                 {t('dashboard.available')}
@@ -170,7 +170,7 @@ const Dashboard = ({ budget }: DashboardProps) => {
                 })}
               </div>
             </div>
-            <div className="rounded-b-md bg-gray-200 dark:bg-slate-600 py-2 text-sm font-medium dark:text-gray-300">
+            <div className="rounded-b-md bg-gray-100 dark:bg-slate-700 py-2 text-sm font-medium dark:text-gray-300">
               <QuickAllocationForm
                 link={replaceMonthInLinks(budget.links.month, activeMonth)}
                 reloadBudgetMonth={reloadBudgetMonth}
@@ -180,10 +180,10 @@ const Dashboard = ({ budget }: DashboardProps) => {
 
           <div className="px-4 sm:px-6 lg:px-8">
             <div className="mt-4 flex flex-col py-2">
-              <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8 md:card">
+              <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8 card">
                 <div className="inline-block w-full align-middle">
                   <table className="w-full table-fixed">
-                    <thead className="bg-white dark:bg-slate-800">
+                    <thead className="bg-white dark:bg-slate-800 uppercase">
                       <tr>
                         <th
                           scope="col"

diff --git a/src/components/EnvelopeMonth.tsx b/src/components/EnvelopeMonth.tsx
@@ -69,13 +69,7 @@ const EnvelopeMonth = ({
   }
 
   return (
-    <tr
-      className={`hover:bg-gray-50 dark:hover:bg-slate-700 border-t ${
-        i === 0
-          ? 'border-gray-300 dark:border-black'
-          : 'border-gray-200 dark:border-gray-900'
-      }`}
-    >
+    <tr className="hover:bg-gray-50 dark:hover:bg-slate-700">
       <td>
         <Link
           to={`/envelopes/${envelope.id}`}

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -305,7 +305,7 @@ const Layout = ({
 
       <div className={`${hideNav ? '' : 'md:pl-64'} flex flex-col flex-1`}>
         <div
-          className="sticky top-0 z-10 md:hidden px-6 pt-4 bg-white dark:bg-slate-800"
+          className="sticky top-0 z-10 md:hidden px-6 pt-4 bg-gray-100 dark:bg-slate-900"
           ref={headerRef as React.RefObject<HTMLDivElement>}
         >
           <button

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -20,7 +20,7 @@ const Modal = ({ open, setOpen, children }: Props) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500/[.75] dark:bg-slate-900/[.8]  transition-opacity" />
+          <div className="fixed inset-0 bg-gray-800/[.8] dark:bg-slate-700/[.8]  transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">