More styling

lib/outlook_web/components/core_components.ex

@@ -416,10 +416,10 @@ defmodule OutlookWeb.CoreComponents do
     ~H"""
     <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
       <div>
-        <h1 class="text-lg font-semibold leading-8 text-zinc-800">
+        <h1 class="text-lg font-semibold leading-8 text-stone-800 dark:text-stone-300 ">
           <%= render_slot(@inner_block) %>
         </h1>
-        <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
+        <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-stone-600">
           <%= render_slot(@subtitle) %>
         </p>
       </div>
@@ -538,7 +538,7 @@ defmodule OutlookWeb.CoreComponents do
     <div class="mt-16">
       <.link
         navigate={@navigate}
-        class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
+        class="text-sm font-semibold leading-6 text-stone-900 hover:text-stone-700 dark:text-stone-300 hover:dark:text-stone-200"
       >
         <Heroicons.arrow_left solid class="w-3 h-3 stroke-current inline" />
         <%= render_slot(@inner_block) %>

lib/outlook_web/components/layouts/public.html.heex

@@ -6,8 +6,8 @@
   </a>
   <.dark_mode_widget />
 </header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
+<main class="px-2 py-4 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-4xl">
+  <div class="mx-auto max-w-xl">
     <.flash kind={:info} title="Success!" flash={@flash} />
     <.flash kind={:error} title="Error!" flash={@flash} />
     <%= @inner_content %>