From 0e9f70094dbcd9e9b18b409f8ced4edb04a9f4e2 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Wed, 22 Apr 2026 17:10:53 -0400
Subject: [PATCH] style(ui): replace dark mode opacity-based colors with
 explicit hex values

---
 src/shared/components/Breadcrumb.js   |  4 ++--
 src/shared/components/Card.js         |  6 +++---
 src/shared/components/FilterTabs.js   |  6 +++---
 src/shared/components/LoadingState.js | 14 +++++++-------
 src/shared/components/Modal.js        |  4 ++--
 src/shared/components/Table.js        | 15 ++++++++-------
 6 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/shared/components/Breadcrumb.js b/src/shared/components/Breadcrumb.js
index 303fd55..ec4e7a3 100644
--- a/src/shared/components/Breadcrumb.js
+++ b/src/shared/components/Breadcrumb.js
@@ -6,7 +6,7 @@ const Breadcrumb = ({ items = [], className = '' }) => {
   return (
     <nav
       aria-label="Breadcrumb"
-      className={`inline-flex self-start bg-white dark:bg-neutral-800/30 border border-neutral-200 dark:border-neutral-700/30 rounded-xl overflow-hidden ${className}`}
+      className={`inline-flex self-start bg-white dark:bg-[#0B0B0B] border border-neutral-200 dark:border-[#1B1B1B] rounded-xl overflow-hidden ${className}`}
     >
       <ol className="flex items-center">
         {items.map((item, index) => (
@@ -25,7 +25,7 @@ const Breadcrumb = ({ items = [], className = '' }) => {
                   item.active
                     ? 'text-black dark:text-white cursor-default'
                     : item.onClick
-                      ? 'text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700/20 cursor-pointer'
+                      ? 'text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-950 cursor-pointer'
                       : 'text-neutral-400 cursor-default',
                 ].filter(Boolean).join(' ')}
               >
diff --git a/src/shared/components/Card.js b/src/shared/components/Card.js
index f66e539..13535cf 100644
--- a/src/shared/components/Card.js
+++ b/src/shared/components/Card.js
@@ -19,7 +19,7 @@ const Card = ({
     const isLightDark = variant === 'lightDark';
 
     const variants = {
-        default: 'rounded-xl bg-white dark:bg-neutral-800/30 border-neutral-200 dark:border-neutral-700/30',
+        default: 'rounded-xl bg-white dark:bg-[#0B0B0B] border-neutral-200 dark:border-[#1B1B1B]',
         elevated: 'rounded-xl bg-neutral-50/80 dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50',
         outline: 'rounded-xl bg-transparent border-neutral-300 dark:border-neutral-700/50',
         solid: 'rounded-xl bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700',
@@ -56,8 +56,8 @@ const Card = ({
         lg: 'flex flex-col gap-6'
     };
 
-    const headerBorderClass = 'border-neutral-200 dark:border-neutral-700/30';
-    const footerBorderClass = 'border-neutral-200 dark:border-neutral-700/30';
+    const headerBorderClass = 'border-neutral-200 dark:border-[#1B1B1B]';
+    const footerBorderClass = 'border-neutral-200 dark:border-[#1B1B1B]';
     const titleClass = 'text-sm font-medium text-neutral-900 dark:text-white';
     const subtitleClass = 'text-xs text-neutral-500 dark:text-neutral-400 mt-1';
 
diff --git a/src/shared/components/FilterTabs.js b/src/shared/components/FilterTabs.js
index 94a5570..9a7d56a 100644
--- a/src/shared/components/FilterTabs.js
+++ b/src/shared/components/FilterTabs.js
@@ -4,17 +4,17 @@ import React from 'react';
 
 const FilterTabs = ({ tabs = [], value, onChange, className = ''}) => {
   return (
-    <div className={`inline-flex self-start border border-neutral-200 dark:border-neutral-700/30 rounded-xl overflow-hidden ${className}`}>
+    <div className={`inline-flex self-start border border-neutral-200 dark:border-[#1B1B1B] rounded-xl overflow-hidden ${className}`}>
       {tabs.map((tab, index) => (
         <button
           key={tab.key}
           onClick={() => onChange(tab.key)}
           className={[
             'px-3 py-1.5 text-xs font-medium transition-colors cursor-pointer',
-            index !== 0 ? 'border-l border-neutral-200 dark:border-neutral-700/30' : '',
+            index !== 0 ? 'border-l border-neutral-200 dark:border-[#1B1B1B]' : '',
             value === tab.key
               ? 'bg-neutral-100 dark:bg-neutral-700/40 text-neutral-900 dark:text-white'
-              : 'bg-white dark:bg-neutral-800/30 text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700/20',
+              : 'bg-white dark:bg-[#0B0B0B] text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-950',
           ].filter(Boolean).join(' ')}
         >
           {tab.label}
diff --git a/src/shared/components/LoadingState.js b/src/shared/components/LoadingState.js
index eb29d0f..c6f2459 100644
--- a/src/shared/components/LoadingState.js
+++ b/src/shared/components/LoadingState.js
@@ -30,7 +30,7 @@ export const LoadingSpinner = ({
 
     const colors = {
         white: 'border-neutral-300 dark:border-white/20 border-t-neutral-600 dark:border-t-white',
-        neutral: 'border-neutral-300 dark:border-neutral-700/30 border-t-neutral-500 dark:border-t-neutral-400',
+        neutral: 'border-neutral-300 dark:border-[#1B1B1B] border-t-neutral-500 dark:border-t-neutral-400',
         primary: 'border-blue-500/20 border-t-blue-500'
     };
 
@@ -53,11 +53,11 @@ export const PageLoading = ({ message = 'Loading...' }) => (
 
 // Table skeleton
 export const TableSkeleton = ({ rows = 5, columns = 4 }) => (
-    <div className="bg-neutral-100/80 dark:bg-neutral-800/30 border border-neutral-200 dark:border-neutral-700/30 rounded-xl overflow-hidden">
+    <div className="bg-neutral-100/80 dark:bg-[#0B0B0B] border border-neutral-200 dark:border-[#1B1B1B] rounded-xl overflow-hidden">
         <div className="overflow-x-auto">
             <table className="w-full">
                 <thead>
-                    <tr className="border-b border-neutral-200 dark:border-neutral-700/30">
+                    <tr className="border-b border-neutral-200 dark:border-[#1B1B1B]">
                         {Array.from({ length: columns }).map((_, index) => (
                             <th key={index} className="px-6 py-4 text-left">
                                 <Skeleton height="h-4" width="60%" />
@@ -67,7 +67,7 @@ export const TableSkeleton = ({ rows = 5, columns = 4 }) => (
                 </thead>
                 <tbody className="divide-y divide-neutral-200 dark:divide-neutral-700/30">
                     {Array.from({ length: rows }).map((_, rowIndex) => (
-                        <tr key={rowIndex} className="hover:bg-neutral-50 dark:hover:bg-neutral-700/20 transition-colors">
+                        <tr key={rowIndex} className="hover:bg-neutral-50 dark:hover:bg-neutral-950 transition-colors">
                             {Array.from({ length: columns }).map((_, colIndex) => (
                                 <td key={colIndex} className="px-6 py-4 whitespace-nowrap">
                                     <Skeleton height="h-4" width={`${60 + Math.random() * 30}%`} />
@@ -87,9 +87,9 @@ export const CardSkeleton = ({
     lines = 3, 
     hasFooter = false 
 }) => (
-    <div className="bg-neutral-100/80 dark:bg-neutral-800/30 border border-neutral-200 dark:border-neutral-700/30 rounded-xl p-6">
+    <div className="bg-neutral-100/80 dark:bg-[#0B0B0B] border border-neutral-200 dark:border-[#1B1B1B] rounded-xl p-6">
         {hasHeader && (
-            <div className="border-b border-neutral-200 dark:border-neutral-700/30 pb-4 mb-6">
+            <div className="border-b border-neutral-200 dark:border-[#1B1B1B] pb-4 mb-6">
                 <Skeleton height="h-5" width="40%" className="mb-2" />
                 <Skeleton height="h-3" width="60%" />
             </div>
@@ -106,7 +106,7 @@ export const CardSkeleton = ({
         </div>
         
         {hasFooter && (
-            <div className="border-t border-neutral-200 dark:border-neutral-700/30 pt-4 mt-6">
+            <div className="border-t border-neutral-200 dark:border-[#1B1B1B] pt-4 mt-6">
                 <Skeleton height="h-8" width="30%" />
             </div>
         )}
diff --git a/src/shared/components/Modal.js b/src/shared/components/Modal.js
index b7fcdbd..7ded6cb 100644
--- a/src/shared/components/Modal.js
+++ b/src/shared/components/Modal.js
@@ -73,7 +73,7 @@ const Modal = ({
                 <Dialog.Panel
                     className={`
                         w-full ${sizeClasses[size]}
-                        bg-white dark:bg-neutral-900
+                        bg-white dark:bg-[#0B0B0B]
                         border border-neutral-200 dark:border-neutral-800
                         rounded-lg
                         shadow-xl
@@ -109,7 +109,7 @@ const Modal = ({
 
                     {/* Footer */}
                     {resolvedFooter && (
-                        <div className="px-4 py-3 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/30">
+                        <div className="px-4 py-3 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-[#0B0B0B]">
                             {resolvedFooter}
                         </div>
                     )}
diff --git a/src/shared/components/Table.js b/src/shared/components/Table.js
index 8cf12e0..742766c 100644
--- a/src/shared/components/Table.js
+++ b/src/shared/components/Table.js
@@ -60,7 +60,7 @@ const Table = ({
     );
 
     const SkeletonRow = () => (
-        <tr className="hover:bg-neutral-100 dark:hover:bg-neutral-700/20 transition-colors">
+        <tr className="hover:bg-neutral-100 dark:hover:bg-neutral-950 transition-colors">
             {columns.map((column, index) => (
                 <td key={index} className={`${sizeClasses.cell} ${column.noWrap !== false ? '' : 'whitespace-nowrap'}`}>
                     {column.skeleton ? (
@@ -176,7 +176,7 @@ const Table = ({
     const to = Math.min(currentPage * limit, total);
 
     const PaginationBar = () => (
-        <div className="px-4 py-3 border-t border-neutral-200 dark:border-neutral-700/30">
+        <div className="px-4 py-3 border-t border-neutral-200 dark:border-[#1B1B1B]">
             <div className="flex items-center justify-between gap-4">
                 <div className="flex items-center gap-2 shrink-0">
                     {loading ? (
@@ -268,7 +268,7 @@ const Table = ({
             <div className="hidden lg:block overflow-x-auto">
                 <table className="w-full">
                     <thead>
-                        <tr className="border-b border-neutral-200 dark:border-neutral-700/30">
+                        <tr className="border-b border-neutral-200 dark:border-[#1B1B1B]">
                             {columns.map((column) => (
                                 <th
                                     key={column.key}
@@ -292,16 +292,17 @@ const Table = ({
                             <EmptyState />
                         ) : (
                             data.map((item, index) => {
+                                const isLast = index === data.length - 1;
                                 const { className: extraClassName, ...rowExtraProps } = getRowProps ? getRowProps(item) : {};
                                 return (
                                     <tr
                                         key={item.id || index}
-                                        className={`hover:bg-neutral-100 dark:hover:bg-neutral-700/20 transition-colors ${onRowClick ? 'cursor-pointer' : ''} ${extraClassName || ''}`}
+                                        className={`hover:bg-neutral-50 dark:hover:bg-neutral-950 transition-colors ${onRowClick ? 'cursor-pointer' : ''} ${extraClassName || ''}`}
                                         onClick={onRowClick ? () => onRowClick(item) : undefined}
                                         {...rowExtraProps}
                                     >
-                                        {columns.map((column) => (
-                                            <td key={column.key} className={`${sizeClasses.cell} ${column.noWrap !== false ? '' : 'whitespace-nowrap'}`}>
+                                        {columns.map((column, colIdx) => (
+                                            <td key={column.key} className={`${sizeClasses.cell} ${column.noWrap !== false ? '' : 'whitespace-nowrap'} ${isLast && colIdx === 0 ? 'rounded-bl-xl' : ''} ${isLast && colIdx === columns.length - 1 ? 'rounded-br-xl' : ''}`}>
                                                 {renderCellContent(item, column)}
                                             </td>
                                         ))}
@@ -331,7 +332,7 @@ const Table = ({
                         return (
                             <div
                                 key={item.id || index}
-                                className={`${onRowClick ? 'cursor-pointer' : ''} ${extraClassName || ''}`}
+                                className={`${onRowClick ? 'cursor-pointer' : ''} ${extraClassName || ''} ${index === data.length - 1 ? 'rounded-b-xl' : ''}`}
                                 onClick={onRowClick ? () => onRowClick(item) : undefined}
                                 {...rowExtraProps}
                             >