fix: Fix styles.

gsmlg-dev · Jul 8, 2024 · aac7a9d · aac7a9d
1 parent 5325239
commit aac7a9d
Show file tree

Hide file tree

Showing 18 changed files with 177 additions and 146 deletions.
diff --git a/apps/duskmoon_storybook_web/assets/css/app.css b/apps/duskmoon_storybook_web/assets/css/app.css
@@ -183,3 +183,4 @@ app-bar {
   width: 100%;
   height: fit-content;
 }
+
diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/components/layouts/app.html.heex b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/components/layouts/app.html.heex
@@ -3,7 +3,8 @@
   <.dm_simple_appbar
     title={"Duskmoon UI"}
     class={[
-      "bg-blue-600 text-slate-200 dark:bg-neutral-900 dark:text-slate-50",
+      "sticky top-0 z-50",
+      "bg-primary",
       "shadow dark:shadow-slate-600"
     ]}
   >
@@ -21,6 +22,7 @@
   </.dm_simple_appbar>
 <% else %>
   <.dm_appbar
+    class="sticky top-0 z-50"
     title={"Duskmoon UI"}
   >
     <:menu to={~p"/storybook"}>
@@ -37,12 +39,13 @@
   </.dm_appbar>
 <% end %>
 
-<main class="container min-h-[calc(100vh-56px)] flex flex-row justify-start items-start overflow-hidden">
+<main class="container flex flex-row justify-start items-start relative">
   <.flash_group flash={@flash} />
   <.dm_left_menu
     class={[
-      "w-64 min-h-[calc(100vh-56px)]",
-      "dark:text-slate-50 dark:bg-neutral-900"
+      "sticky top-0",
+      "w-64 my-2 rounded min-h-[calc(100vh-56px)]",
+      "bg-base-300 [--tw-bg-opacity:0.3]"
     ]}
     active={assigns[:active_menu]}
   >

diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/components/layouts/root.html.heex b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/components/layouts/root.html.heex
@@ -14,8 +14,6 @@
   <body
     class={[
       "flex flex-col items-center",
-      "bg-slate-50 text-neutral-800",
-      "dark:bg-neutral-800 dark:text-slate-50",
     ]}
   >
     <%= @inner_content %>

diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/bsi.html.heex b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/bsi.html.heex
@@ -1,10 +1,10 @@
-<.dm_breadcrumb class="bg-white h-6 text-slate-400">
+<.dm_breadcrumb class="px-4">
   <:crumb>Icon</:crumb>
   <:crumb>Bootstrap Icon</:crumb>
 </.dm_breadcrumb>
+
 <.dm_card class={[
   "w-full h-full overflow-auto",
-  "text-slate-900 bg-slate-50 dark:text-slate-50 dark:bg-slate-900",
 ]}>
   <:title class="flex flex-row justify-center items-center">
     <span class="text-4xl text-blue-600 hover:text-blue-400">
@@ -26,15 +26,16 @@
   </div>
   <div class="flex flex-row mt-4 mb-2">
     <.form for={@conn} action={~p"/bsi"} method="get" class={["flex flex-row gap-2"]}>
-      <.dm_input label="Icon Name" name="filter" value={@filter} />
-      <.button type="submit">Search</.button>
+      <.dm_input field_class="flex" label="Icon Name" name="filter" value={@filter} />
+      <button type="submit" class="btn btn-primary">Search</button>
     </.form>
   </div>
   <div class="flex flex-row flex-wrap gap-4">
     <div 
       :for={icon_name <- @bsi_icons} 
-      class="border flex flex-col w-40 h-40 items-center justify-center">
-      <div class="text-blue-400"><embed><%= icon_name %></embed></div>
+      class="border flex flex-col w-40 h-40 items-center justify-center p-4"
+    >
+      <div class="text-primary"><embed><%= icon_name %></embed></div>
       <div class="flex items-center justify-center">
         <.dm_bsi name={icon_name} class="w-24 h-24" />
       </div>

diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/hook.html.heex b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/hook.html.heex
@@ -1,16 +1,11 @@
 <.dm_breadcrumb
-    class={[
-        "h-6",
-        "bg-white text-slate-400",
-        "dark:bg-gray-900 text-slate-600",
-    ]}
+  class="px-4"
 >
-    <:crumb>Hooks</:crumb>
-    <:crumb>WebComponentHook</:crumb>
+  <:crumb>Hooks</:crumb>
+  <:crumb>WebComponentHook</:crumb>
 </.dm_breadcrumb>
 <.dm_card class={[
-    "w-[100%_!important] h-[calc(100vh-56px-2em)_!important] overflow-auto",
-    "text-slate-900 bg-slate-50 dark:text-slate-50 dark:bg-slate-900",
+    "w-full h-full overflow-auto",
 ]}>
     <:title class="flex flex-row justify-center items-center">
         <span class="text-4xl text-blue-600 hover:text-blue-400">

diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/mdi.html.heex b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/mdi.html.heex
@@ -1,43 +1,45 @@
-<.dm_breadcrumb class="bg-white h-6 text-slate-400">
+<.dm_breadcrumb class="px-4">
     <:crumb>Icon</:crumb>
     <:crumb>Material Design Icon</:crumb>
 </.dm_breadcrumb>
 <.dm_card class={[
     "w-full h-full overflow-auto",
-    "text-slate-900 bg-slate-50 dark:text-slate-50 dark:bg-slate-900",
 ]}>
-    <:title class="flex flex-row justify-center items-center">
-        <span class="text-4xl text-blue-600 hover:text-blue-400">
-            Material Design Icons
-        </span>
-    </:title>
-    <div class="mockup-window bg-base-300 border">
-        <.dm_markdown
-            class="mx-6"
-            content={"""
-            ## Example
+  <:title class="flex flex-row justify-center items-center">
+    <span class="text-4xl text-blue-600 hover:text-blue-400">
+      Material Design Icons
+    </span>
+  </:title>
+  <div class="mockup-window bg-base-300 border">
+    <.dm_markdown
+        class="mx-6"
+        content={"""
+        ## Example
 
-            ```html
-            <!-- icon_name is matrial icon name -->
-            <.dm_mdi name={icon_name} class="w-12 h-12" />
-            ```
-            """}
-        />
-    </div>
-    <div class="flex flex-row mt-4 mb-2">
-        <.form for={@conn} action={~p"/mdi"} method="get" class={["flex flex-row gap-2"]}>
-            <.dm_input label="Icon Name" name="filter" value={@filter} />
-            <.button type="submit">Search</.button>
-        </.form>
-    </div>
-    <div class="flex flex-row flex-wrap gap-4">
-        <%= for icon_name <- @mdi_icons do %>
-        <div class="border flex flex-col w-40 h-40 items-center justify-center">
-            <div class="text-blue-400"><embed><%= icon_name %></embed></div>
-            <div class="flex items-center justify-center">
-                <.dm_mdi name={icon_name} class="w-24 h-24" />
-            </div>
-        </div>
-        <% end %>
+        ```html
+        <!-- icon_name is matrial icon name -->
+        <.dm_mdi name={icon_name} class="w-12 h-12" />
+        ```
+        """}
+    />
+  </div>
+  <div class="flex flex-row mt-4 mb-2">
+    <.form for={@conn} action={~p"/mdi"} method="get" class={["flex flex-row gap-2"]}>
+      <.dm_input field_class="flex" label="Icon Name" name="filter" value={@filter} />
+      <button type="submit" class="btn btn-primary">Search</button>
+    </.form>
+  </div>
+  <div class="flex flex-row flex-wrap gap-4">
+    <div 
+      :for={icon_name <- @mdi_icons}
+      class="border flex flex-col w-40 h-40 items-center justify-center p-4"
+    >
+      <div class="text-primary">
+        <embed><%= icon_name %></embed>
+      </div>
+      <div class="flex items-center justify-center">
+        <.dm_mdi name={icon_name} class="w-24 h-24" />
+      </div>
     </div>
+  </div>
 </.dm_card>
diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex
@@ -127,7 +127,7 @@
           Left Menu
         </.link>
         <.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="loading" href="/storybook/components/loading">
-          <.dm_mdi name={"loading"} class="w-4 h-4 animate-spin z-[-1]" />
+          <span class="loading loading-spinner loading-xs"></span>
           Loading
         </.link>
         <.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="markdown" href="/storybook/components/markdown">

diff --git a/.../duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/actionbar.story.exs b/.../duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/actionbar.story.exs
@@ -2,7 +2,7 @@ defmodule DuskmoonStorybookWeb.Storybook.Components.Actionbar do
   # :live_component or :page are also available
   use PhoenixStorybook.Story, :component
 
-  def function, do: &PhoenixDuskmoon.Actionbar.dm_actionbar/1
+  def function, do: &PhoenixDuskmoon.Component.Actionbar.dm_actionbar/1
   def description, do: "A actionbar element."
 
   def variations do

diff --git a/...duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/breadcrumb.story.exs b/...duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/breadcrumb.story.exs
@@ -2,7 +2,7 @@ defmodule DuskmoonStorybookWeb.Storybook.Components.Breadcrumb do
   # :live_component or :page are also available
   use PhoenixStorybook.Story, :component
 
-  def function, do: &PhoenixDuskmoon.Breadcrumb.dm_breadcrumb/1
+  def function, do: &PhoenixDuskmoon.Component.Breadcrumb.dm_breadcrumb/1
   def description, do: "A breadcrumb element."
 
   def variations do

diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/card.story.exs b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/card.story.exs
@@ -2,7 +2,7 @@ defmodule DuskmoonStorybookWeb.Storybook.Components.Card do
   # :live_component or :page are also available
   use PhoenixStorybook.Story, :component
 
-  def function, do: &PhoenixDuskmoon.Card.dm_card/1
+  def function, do: &PhoenixDuskmoon.Component.Card.dm_card/1
   def description, do: "A card element."
 
   def variations do

diff --git a/.../duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/left_menu.story.exs b/.../duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/left_menu.story.exs
@@ -2,7 +2,7 @@ defmodule DuskmoonStorybookWeb.Storybook.Components.LeftMenu do
   # :live_component or :page are also available
   use PhoenixStorybook.Story, :component
 
-  def function, do: &PhoenixDuskmoon.LeftMenu.dm_left_menu/1
+  def function, do: &PhoenixDuskmoon.Component.LeftMenu.dm_left_menu/1
   def description, do: "A left menu element."
 
   def variations do

diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/loading.story.exs b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/loading.story.exs
@@ -2,7 +2,7 @@ defmodule DuskmoonStorybookWeb.Storybook.Components.Loading do
   # :live_component or :page are also available
   use PhoenixStorybook.Story, :component
 
-  def function, do: &PhoenixDuskmoon.Loading.dm_loading_ex/1
+  def function, do: &PhoenixDuskmoon.Component.Loading.dm_loading_ex/1
   def description, do: "Loading Effect EX."
 
   def variations do

diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/markdown.story.exs b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/markdown.story.exs
@@ -2,7 +2,7 @@ defmodule DuskmoonStorybookWeb.Storybook.Components.Markdown do
   # :live_component or :page are also available
   use PhoenixStorybook.Story, :component
 
-  def function, do: &PhoenixDuskmoon.Markdown.dm_markdown/1
+  def function, do: &PhoenixDuskmoon.Component.Markdown.dm_markdown/1
   def description, do: "A markdown render element."
 
   def variations do

diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/modal.story.exs b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/modal.story.exs
@@ -1,7 +1,7 @@
 defmodule DuskmoonStorybookWeb.Storybook.Components.Modal do
   use PhoenixStorybook.Story, :component
 
-  def function, do: &PhoenixDuskmoon.Modal.dm_modal/1
+  def function, do: &PhoenixDuskmoon.Component.Modal.dm_modal/1
 
   def imports do
     [{PhoenixDuskmoon.Modal, dm_show_modal: 0}]

diff --git a/...duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/pagination.story.exs b/...duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/pagination.story.exs
@@ -2,7 +2,7 @@ defmodule DuskmoonStorybookWeb.Storybook.Components.Pagination do
   # :live_component or :page are also available
   use PhoenixStorybook.Story, :component
 
-  def function, do: &PhoenixDuskmoon.Pagination.dm_pagination/1
+  def function, do: &PhoenixDuskmoon.Component.Pagination.dm_pagination/1
   def description, do: "A pagination element."
 
   def variations do

diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/tab.story.exs b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/tab.story.exs
@@ -1,7 +1,7 @@
 defmodule DuskmoonStorybookWeb.Storybook.Components.Tab do
   use PhoenixStorybook.Story, :component
 
-  def function, do: &PhoenixDuskmoon.Tab.dm_tab/1
+  def function, do: &PhoenixDuskmoon.Component.Tab.dm_tab/1
 
   def variations do
     [

diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/table.story.exs b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/storybook/components/table.story.exs
@@ -2,7 +2,7 @@ defmodule DuskmoonStorybookWeb.Storybook.Components.Table do
   # :live_component or :page are also available
   use PhoenixStorybook.Story, :component
 
-  def function, do: &PhoenixDuskmoon.Table.dm_table/1
+  def function, do: &PhoenixDuskmoon.Component.Table.dm_table/1
   def description, do: "A table element."
 
   def variations do