Merge pull request #25 from JohnathanCrow/dev

Styling fixes, consistency
JohnathanCrow · Dec 10, 2024 · df0f877 · df0f877
2 parents dc63197 + 728a3a5
commit df0f877
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 101 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -191,7 +191,7 @@ function App() {
         <div className="flex flex-col lg:flex-row gap-8 justify-center">
           <div className="w-full lg:w-[calc(50%-180px)]">
             <div className="flex items-center justify-between mb-6">
-              <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2">
                 <ShoppingCart className="w-8 h-8 text-blue-600" />
                 <h1 className="text-3xl font-bold app-title">Shopping List</h1>
                 <button
@@ -207,7 +207,7 @@ function App() {
               <div className="flex gap-2 lg:hidden">
                 <button
                   onClick={handleBackupDatabase}
-                  className="flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors"
+                  className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
                   title="Export Database"
                 >
                   <Download className="w-4 h-4" />
@@ -223,15 +223,15 @@ function App() {
                 </button>
                 <button
                   onClick={() => setShowResetModal(true)}
-                  className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+                  className="flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
                   title="Reset Database"
                 >
                   <X className="w-4 h-4" />
                   Reset
                 </button>
               </div>
             </div>
-            <div className="space-y-6">
+            <div className="space-y-4">
               <AddItemForm onAddItem={handleAddItem} />
               <ItemList
                 items={items}
@@ -246,7 +246,7 @@ function App() {
             <div className="hidden lg:flex gap-2 mb-6">
               <button
                 onClick={handleBackupDatabase}
-                className="flex items-center justify-center gap-2 flex-1 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors"
+                className="flex items-center justify-center gap-2 flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
                 title="Export Database"
               >
                 <Download className="w-4 h-4" />

diff --git a/src/components/AddItemForm.tsx b/src/components/AddItemForm.tsx
@@ -24,7 +24,7 @@ export function AddItemForm({ onAddItem }: AddItemFormProps) {
           value={name}
           onChange={(e) => setName(e.target.value)}
           placeholder="Add new item..."
-          className="flex-1 px-4 py-2 rounded-lg bg-gray-800 text-gray-400 placeholder-gray-400 border border-gray-700 focus:outline-none focus:border-blue-500 text-base"
+          className="flex-1 px-4 py-2 rounded-lg bg-gray-800 text-gray-400 placeholder-gray-500 border border-gray-700 focus:outline-none focus:border-blue-600/50 text-base"
         />
         <button
           type="submit"

diff --git a/src/components/EditItemModal.tsx b/src/components/EditItemModal.tsx
@@ -19,45 +19,48 @@ export function EditItemModal({ item, onSave, onClose }: EditItemModalProps) {
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
-      <div className="bg-gray-800 rounded-lg p-6 w-full max-w-md">
-        <div className="flex justify-between items-center mb-4">
-          <h3 className="text-xl font-semibold text-white">Edit Item</h3>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-white transition-colors"
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
-
-        <form onSubmit={handleSubmit}>
-          <input
-            type="text"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            placeholder="Item name"
-            className="w-full px-3 py-2 rounded-lg bg-gray-700 text-white placeholder-gray-400 border border-gray-600 focus:outline-none focus:border-blue-500 mb-4"
-            autoFocus
-          />
-
-          <div className="flex gap-4">
+    <>
+      <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-40" />
+      <div className="fixed inset-0 flex items-center justify-center z-50">
+        <div className="bg-gray-800 rounded-lg p-6 w-full max-w-md">
+          <div className="flex justify-between items-center mb-4">
+            <h3 className="text-xl font-semibold text-white">Edit Item</h3>
             <button
-              type="button"
               onClick={onClose}
-              className="flex-1 px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors"
+              className="text-gray-400 hover:text-white transition-colors"
             >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-            >
-              Save
+              <X className="w-5 h-5" />
             </button>
           </div>
-        </form>
+
+          <form onSubmit={handleSubmit}>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Edit item..."
+              className="w-full px-3 py-2 rounded-lg bg-gray-700 text-gray-400 placeholder-gray-500 border border-gray-600 focus:outline-none focus:border-blue-500/50 mb-4"
+              autoFocus
+            />
+
+            <div className="flex gap-4">
+              <button
+                type="button"
+                onClick={onClose}
+                className="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              >
+                Save
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/components/ExportList.tsx b/src/components/ExportList.tsx
@@ -51,15 +51,13 @@ export function ExportList({ items, onClose }: ExportListProps) {
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
       <div className="bg-gray-800 rounded-lg p-6 w-full max-w-md">
         <div className="flex justify-between items-center mb-4">
-          <h3 className="text-xl font-semibold text-white">Export List</h3>
           <button
             onClick={onClose}
             className="text-gray-400 hover:text-white transition-colors"
           >
             <X className="w-5 h-5" />
           </button>
         </div>
-
         <div ref={listRef} className="bg-gray-700 p-4 rounded-lg mb-4">
           <h4 className="text-lg font-semibold mb-2">Shopping List</h4>
           {items.map((item) => (

diff --git a/src/components/InfoModal.tsx b/src/components/InfoModal.tsx
@@ -7,7 +7,7 @@ interface InfoModalProps {
 
 export function InfoModal({ onClose }: InfoModalProps) {
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center backdrop-blur-sm">
       <div className="bg-gray-800 rounded-lg p-5 w-full max-w-2xl">
         <div className="flex justify-between items-center mb-4">
           <h3 className="text-xl font-semibold text-white">Usage</h3>

diff --git a/src/components/ItemList.tsx b/src/components/ItemList.tsx
@@ -51,7 +51,7 @@ export function ItemList({
                       <div className="flex items-center gap-3 flex-1">
                         <div
                           {...provided.dragHandleProps}
-                          className="text-gray-400 cursor-grab"
+                          className="text-gray-500 cursor-grab"
                         >
                           <GripVertical className="w-5 h-5" />
                         </div>
@@ -60,8 +60,8 @@ export function ItemList({
                             onClick={() => onToggleWeeklyShop(item.id)}
                             className={`p-2 rounded-full transition-colors ${
                               item.inWeeklyShop
-                                ? "bg-emerald-500 hover:bg-emerald-600"
-                                : "bg-gray-700 hover:bg-gray-600"
+                                ? "bg-green-600 hover:bg-emerald-700"
+                                : "bg-gray-700 hover:bg-gray-400"
                             }`}
                             title={
                               item.inWeeklyShop
@@ -70,14 +70,14 @@ export function ItemList({
                             }
                           >
                             {item.inWeeklyShop ? (
-                              <Check className="w-4 h-4 text-white" />
+                              <Check className="w-4 h-4 text-gray-200" />
                             ) : (
-                              <Plus className="w-4 h-4 text-white" />
+                              <Plus className="w-4 h-4 text-gray-200" />
                             )}
                           </button>
                         )}
                         {item.type === "divider" && (
-                          <span className="font-bold text-gray-400 text-base">
+                          <span className="font-bold text-gray-200 text-base">
                             {item.name}
                           </span>
                         )}
@@ -90,14 +90,14 @@ export function ItemList({
                       <div className="flex items-center gap-2">
                         <button
                           onClick={() => setEditingItemId(item.id)}
-                          className="p-2 text-gray-400 hover:text-blue-600 transition-colors"
+                          className="p-2 text-gray-500 hover:text-blue-500 transition-colors"
                           title="Edit Item"
                         >
                           <Pencil className="w-4 h-4" />
                         </button>
                         <button
                           onClick={() => onDeleteItem(item.id)}
-                          className="p-2 text-gray-400 hover:text-red-400 transition-colors"
+                          className="p-2 text-gray-500 hover:text-red-500 transition-colors"
                           title="Delete Item"
                         >
                           <X className="w-4 h-4" />

diff --git a/src/components/NoteModal.tsx b/src/components/NoteModal.tsx
@@ -17,7 +17,7 @@ export function NoteModal({ item, onSave, onClose }: NoteModalProps) {
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center backdrop-blur-sm">
       <div className="bg-gray-800 rounded-lg p-6 w-full max-w-md">
         <div className="flex justify-between items-center mb-4">
           <h3 className="text-xl font-semibold text-white">Add Note to {item.name}</h3>
@@ -35,7 +35,7 @@ export function NoteModal({ item, onSave, onClose }: NoteModalProps) {
             value={note}
             onChange={(e) => setNote(e.target.value)}
             placeholder="Add note..."
-            className="w-full px-3 py-2 rounded-lg bg-gray-700 text-white placeholder-gray-400 border border-gray-600 focus:outline-none focus:border-blue-500 mb-4"
+            className="w-full px-3 py-2 rounded-lg bg-gray-700 text-gray-400 placeholder-gray-500 border border-gray-600 focus:outline-none focus:border-blue-600/50 mb-4"
             autoFocus
           />
 

diff --git a/src/components/ResetDatabase.tsx b/src/components/ResetDatabase.tsx
@@ -8,7 +8,7 @@ interface ResetDatabaseProps {
 
 export function ResetDatabase({ onReset, onClose }: ResetDatabaseProps) {
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center backdrop-blur-sm">
       <div className="bg-gray-800 rounded-lg p-6 w-full max-w-md">
         <div className="flex items-center gap-3 mb-4 text-red-500">
           <AlertTriangle className="w-6 h-6" />

diff --git a/src/components/WeeklyShop.tsx b/src/components/WeeklyShop.tsx
@@ -102,36 +102,36 @@ export function WeeklyShop({
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-3">
             <ListPlus className="w-6 h-6 text-blue-600" />
-            <h2 className="text-xl font-semibold text-white">List</h2>
+            <h2 className="text-xl font-semibold text-gray-200">List</h2>
             <span className="bg-blue-600 text-white px-2 py-1 rounded-full text-sm">
               {weeklyItems.length}
             </span>
           </div>
           <div className="flex gap-3">
             <button
               onClick={handleCopyToClipboard}
-              className="p-2 text-gray-400 hover:text-green-600 transition-colors"
+              className="p-2 text-gray-400 hover:text-green-500 transition-colors"
               title="Copy to Clipboard"
             >
               <Clipboard className="w-5 h-5" />
             </button>
             <button
               onClick={handleExportText}
-              className="p-2 text-gray-400 hover:text-green-600 transition-colors"
+              className="p-2 text-gray-400 hover:text-green-500 transition-colors"
               title="Save as Text File"
             >
               <FileText className="w-5 h-5" />
             </button>
             <button
               onClick={handleExportImage}
-              className="p-2 text-gray-400 hover:text-green-600 transition-colors"
+              className="p-2 text-gray-400 hover:text-green-500 transition-colors"
               title="Save as Image File"
             >
               <FileImage className="w-5 h-5" />
             </button>
             <button
               onClick={onResetWeeklyShop}
-              className="p-2 text-gray-400 hover:text-red-400 transition-colors"
+              className="p-2 text-gray-400 hover:text-red-500 transition-colors"
               title="Clear List"
             >
               <Trash2 className="w-5 h-5" />
@@ -142,10 +142,10 @@ export function WeeklyShop({
         <div className="space-y-2">
           {weeklyItems.length === 0 ? (
             <p className="text-gray-400 text-base">
-              Add items to your weekly shop
+              Add items from your database to your list...
             </p>
           ) : (
-            <div className="space-y-0 bg-gray-700 rounded-lg">
+            <div className="space-y-0 bg-gray-400/5 rounded-lg">
               {weeklyItems.map((item) => (
                 <div
                   key={item.id}
@@ -159,8 +159,8 @@ export function WeeklyShop({
                       onClick={() => setEditingNoteId(item.id)}
                       className={`p-1.5 rounded-lg transition-colors ${
                         item.note
-                          ? "text-yellow-600 hover:text-yellow-300"
-                          : "text-gray-400 hover:text-gray-300"
+                          ? "text-yellow-400 hover:text-yellow-600"
+                          : "text-gray-400 hover:text-yellow-600"
                       }`}
                       title="Add/Edit Note"
                     >
@@ -171,12 +171,12 @@ export function WeeklyShop({
                       min="1"
                       value={item.quantity}
                       onChange={(e) => onUpdateQuantity(item.id, parseInt(e.target.value) || 1)}
-                      className="w-12 px-2 py-1 rounded text-gray-400 dark:text-white border border-gray-300/40 dark:border-gray-500 focus:outline-none focus:border-blue-500/50 text-sm bg-white/10"
+                      className="w-12 px-2 py-1 rounded text-gray-400 dark:text-white border border-gray-400/20 dark:border-gray-400/20 focus:outline-none focus:border-blue-600/50 text-sm bg-gray-800"
                       title="Change Quantity"
                     />
                     <button
                       onClick={() => onToggleWeeklyShop(item.id)}
-                      className="p-1.5 text-gray-400 hover:text-red-400 transition-colors"
+                      className="p-1.5 text-gray-400 hover:text-red-500 transition-colors"
                       title="Remove Item"
                     >
                       <X className="w-4 h-4" />

diff --git a/src/contexts/ThemeContext.tsx.backup b/src/contexts/ThemeContext.tsx.backup