Dark mode improvements

src/lib/components/Apps/components/Poll/components/Poll.svelte

@@ -46,7 +46,7 @@
   }
 </script>
 
-<div class="p-4 bg-white dark:bg-gray-800 border-2 rounded-md mb-3">
+<div class="p-4 bg-white dark:bg-black border-2 rounded-md mb-3">
   {#if selectedOptionToView}
     <div>
       <div class="flex items-center mb-5">
@@ -140,7 +140,7 @@
     {:else}
       {#each poll.options as option, index}
         <button
-          class="bg-white dark:bg-gray-800 rounded-md border-2 border-gray-500 {didUserSelect(
+          class="bg-white dark:bg-black rounded-md border-2 border-gray-500 {didUserSelect(
             option
           ) &&
             'focus:border-primary-700 border-primary-700'} text-black p-2 w-full mb-3 text-left relative"

src/lib/components/Apps/components/Poll/index.svelte

@@ -13,33 +13,33 @@
     {
       label: 'Rich Harris',
       value: 'rich-harris',
-      avatar: 'https://i.pravatar.cc/150?img=1',
+      avatar: 'https://i.pravatar.cc/150?img=1'
     },
     {
       label: 'Linus Torvalds',
       value: 'linus-torvalds',
-      avatar: 'https://i.pravatar.cc/150?img=2',
+      avatar: 'https://i.pravatar.cc/150?img=2'
     },
     {
       label: 'Elon Musk',
       value: 'elon-musk',
-      avatar: 'https://i.pravatar.cc/150?img=3',
+      avatar: 'https://i.pravatar.cc/150?img=3'
     },
     {
       label: 'Satoshi Nakamoto',
       value: 'satoshi-nakamoto',
-      avatar: 'https://i.pravatar.cc/150?img=4',
-    },
+      avatar: 'https://i.pravatar.cc/150?img=4'
+    }
   ];
   const tabs = [
     {
       label: 'My polls',
-      value: 0,
+      value: 0
     },
     {
       label: 'Other polls',
-      value: 1,
-    },
+      value: 1
+    }
   ];
 
   let selectedTab = 0;
@@ -54,7 +54,7 @@
       options: [
         {
           label: 'Dan Abrahmov',
-          selectedBy: [],
+          selectedBy: []
         },
         {
           label: 'Evan You',
@@ -62,25 +62,25 @@
             {
               label: 'Rich Harris',
               value: 'rich-harris',
-              avatar: 'https://i.pravatar.cc/150?img=1',
+              avatar: 'https://i.pravatar.cc/150?img=1'
             },
             {
               label: 'Linus Torvalds',
               value: 'linus-torvalds',
-              avatar: 'https://i.pravatar.cc/150?img=2',
-            },
-          ],
+              avatar: 'https://i.pravatar.cc/150?img=2'
+            }
+          ]
         },
         {
           label: 'Rich Harris',
-          selectedBy: [],
+          selectedBy: []
         },
         {
           label: 'Yehuda Katz',
-          selectedBy: [],
-        },
-      ],
-    },
+          selectedBy: []
+        }
+      ]
+    }
   ];
 
   function handleCreatePoll() {
@@ -92,9 +92,9 @@
       polls = [
         {
           ...poll,
-          author: users.find((u) => u.value === userId),
+          author: users.find((u) => u.value === userId)
         },
-        ...polls,
+        ...polls
       ];
     }
 
@@ -122,16 +122,12 @@
                   // Select if already selected
                   option.selectedBy = [
                     ...option.selectedBy,
-                    users.find((user) => user.value === userId),
+                    users.find((user) => user.value === userId)
                   ];
                 }
-              } else if (
-                option.selectedBy.find((user) => user.value === userId)
-              ) {
+              } else if (option.selectedBy.find((user) => user.value === userId)) {
                 // This makes the user to select only one option
-                option.selectedBy = option.selectedBy.filter(
-                  (user) => user.value !== userId
-                );
+                option.selectedBy = option.selectedBy.filter((user) => user.value !== userId);
               }
 
               return option;
@@ -139,7 +135,7 @@
           }
 
           return poll;
-        }),
+        })
       ];
     };
   }
@@ -186,7 +182,7 @@
         {/if}
       {:else}
         <div
-          class="bg-gray-100 dark:bg-gray-700 border rounded-md h-60 flex items-center justify-center"
+          class="bg-gray-100 dark:bg-neutral-800 border rounded-md h-60 flex items-center justify-center"
         >
           <h2 class="text-xl font-bold">No polls to display</h2>
         </div>