Fix shadows and borders in dark mode

app/assets/tailwind/maybe-design-system.css

@@ -250,11 +250,11 @@
     --color-destructive: var(--color-red-400);
     --color-shadow: --alpha(#000000 / 8%);
 
-    --shadow-xs: 0px 1px 2px 0px --alpha(var(--color-white) / 6%);
+    --shadow-xs: 0px 1px 2px 0px --alpha(var(--color-white) / 8%);
-    --shadow-sm: 0px 1px 6px 0px --alpha(var(--color-white) / 6%);
+    --shadow-sm: 0px 1px 6px 0px --alpha(var(--color-white) / 8%);
-    --shadow-md: 0px 4px 8px -2px --alpha(var(--color-white) / 6%);
+    --shadow-md: 0px 4px 8px -2px --alpha(var(--color-white) / 8%);
-    --shadow-lg: 0px 12px 16px -4px --alpha(var(--color-white) / 6%);
+    --shadow-lg: 0px 12px 16px -4px --alpha(var(--color-white) / 8%);
-    --shadow-xl: 0px 20px 24px -4px --alpha(var(--color-white) / 6%);
+    --shadow-xl: 0px 20px 24px -4px --alpha(var(--color-white) / 8%);
   }
 
   button {

app/assets/tailwind/maybe-design-system/background-utils.css

@@ -10,7 +10,7 @@
   @apply bg-gray-100;
 
   @variant theme-dark {
-    @apply bg-gray-800;
+    @apply bg-gray-900;
   }
 }
 

app/components/filled_icon_component.rb

@@ -1,7 +1,7 @@
 class FilledIconComponent < ViewComponent::Base
   attr_reader :icon, :text, :hex_color, :size, :rounded, :variant
 
-  VARIANTS = %i[default text surface].freeze
+  VARIANTS = %i[default text surface container].freeze
 
   SIZES = {
     sm: {
@@ -38,7 +38,7 @@ class FilledIconComponent < ViewComponent::Base
       "flex justify-center items-center",
       size_classes,
       radius_classes,
-      variant == :surface ? "bg-surface-inset fg-gray" : "border"
+      transparent? ? "border" : solid_bg_class
     )
   end
 
@@ -62,6 +62,19 @@ class FilledIconComponent < ViewComponent::Base
   end
 
   private
+    def solid_bg_class
+      case variant
+      when :surface
+        "bg-surface-inset"
+      when :container
+        "bg-container-inset"
+      end
+    end
+
+    def transparent?
+      variant.in?(%i[default text])
+    end
+
     def size_classes
       SIZES[size][:container_size]
     end

app/views/pages/dashboard/_balance_sheet.html.erb

@@ -102,7 +102,7 @@
       <% else %>
         <div class="py-10 flex flex-col items-center">
           <%= render FilledIconComponent.new(
-            variant: :surface,
+            variant: :container,
             icon: classification_group.icon,
           ) %>
 

app/views/pages/dashboard/_no_account_empty_state.html.erb

@@ -1,17 +0,0 @@
-<div class="flex justify-center items-center h-[800px]">
-  <div class="text-center flex flex-col gap-4 items-center max-w-[300px]">
-    <%= icon "layers", size: "lg" %>
-
-    <div class="space-y-1 text-sm">
-      <p class="text-primary font-medium"><%= t(".no_account_title") %></p>
-      <p class="text-secondary"><%= t(".no_account_subtitle") %></p>
-    </div>
-
-    <%= render LinkComponent.new(
-      text: t(".new_account"),
-      href: new_account_path,
-      icon: "plus",
-      frame: :modal
-    ) %>
-  </div>
-</div>

app/views/pages/dashboard/_no_accounts_graph_placeholder.html.erb

@@ -1,7 +1,7 @@
 <div class="h-[300px] lg:h-[340px] bg-container shadow-border-xs rounded-xl py-4 flex flex-col items-center justify-center">
   <div class="space-y-3 text-center flex flex-col items-center">
     <%= render FilledIconComponent.new(
-      variant: :surface,
+      variant: :container,
       icon: "layers",
     ) %>