Add custom CSS

app/assets/stylesheets/application.tailwind.css

@@ -2,31 +2,125 @@
 @tailwind components;
 @tailwind utilities;
 
-.pagy {
-  @apply flex items-center -space-x-px h-8 text-sm;
-}
+@layer components {
+  #navbar-links {
+    @apply flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white;
+  }
 
-.pagy.info {
-  @apply text-gray-800 dark:text-gray-400;
-}
+  /* ==Alert Start== */
+  .alert-danger {
+    @apply flex items-center p-3 mb-2 text-red-800 rounded-lg bg-red-200;
+  }
 
-.pagy a {
-  @apply flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white;
-}
+  .alert-success {
+    @apply flex items-center p-3 mb-2 text-green-800 rounded-lg bg-green-200;
+  }
 
-.pagy a:not([href]) {
-  /* disabled links */
-  cursor: default;
-}
+  .alert-warning {
+    @apply flex items-center p-3 mb-2 text-yellow-800 rounded-lg bg-yellow-200;
+  }
+  /* ==Alert End== */
 
-.pagy a.current {
-  @apply z-10 text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white;
-}
+  /* ==Button Start== */
+  .btn-danger {
+    @apply cursor-pointer text-center inline-flex items-center text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800;
+  }
 
-.pagy a:first-child {
-  @apply ms-0 border-e-0 rounded-s-lg;
-}
+  .btn-dark {
+    @apply cursor-pointer text-center inline-flex items-center text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700;
+  }
+
+  .btn-primary {
+    @apply cursor-pointer text-center inline-flex items-center text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800;
+  }
+
+  .btn-success {
+    @apply cursor-pointer text-center inline-flex items-center text-white bg-green-600 hover:bg-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800;
+  }
+  /* ==Button End== */
+
+  .card-wrapper {
+    @apply w-fit mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-14 mt-10 mb-5;
+  }
+
+  /* ==Form Start== */
+  .form-input {
+    @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500;
+  }
+
+  .form-label {
+    @apply block mb-2 text-sm font-medium text-gray-900 dark:text-white;
+  }
+
+  .form-switch {
+    @apply ms-3 relative w-11 h-6 bg-gray-200 rounded-full dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600;
+  }
+  /* ==Form End== */
+
+  .h1-label {
+    @apply text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white;
+  }
+
+  .modal-btn-close {
+    @apply absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white;
+  }
+
+  .modal-center {
+    @apply overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-[calc(100%-1rem)] max-h-full;
+  }
+
+  .order-section-container {
+    @apply w-full py-8 px-4 mx-auto max-w-2xl lg:py-16 bg-white rounded-lg shadow dark:border md:mt-0 xl:p-0 dark:bg-gray-800 dark:border-gray-700;
+  }
+
+  /* ==Pagy Start== */
+  .pagy {
+    @apply flex items-center -space-x-px h-8 text-sm;
+  }
+
+  .pagy.info {
+    @apply text-gray-800 dark:text-gray-400;
+  }
+
+  .pagy a {
+    @apply flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white;
+  }
+
+  .pagy a:not([href]) {
+    /* disabled links */
+    cursor: default;
+  }
+
+  .pagy a.current {
+    @apply z-10 text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white;
+  }
+
+  .pagy a:first-child {
+    @apply ms-0 border-e-0 rounded-s-lg;
+  }
+
+  .pagy a:last-child {
+    @apply rounded-e-lg;
+  }
+  /* ==Pagy End== */
+
+  .section-container {
+    @apply w-full py-8 px-4 mx-auto max-w-2xl lg:py-16 bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md md:max-w-lg xl:p-0 dark:bg-gray-800 dark:border-gray-700;
+  }
+
+  .sidebar-link {
+    @apply flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700;
+  }
+
+  .sidebar-link-icon {
+    @apply flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white;
+  }
+
+  .site-form-input {
+    @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block p-2.5;
+  }
 
-.pagy a:last-child {
-  @apply rounded-e-lg;
+  .strong-label {
+    @apply block mb-1 font-medium text-gray-900 dark:text-white;
+  }
 }

app/helpers/admin_helper.rb

@@ -18,61 +18,6 @@ def sidebar_link_icon_active_class(kontroller)
     kontroller.include?(controller_name) ? "text-gray-900 dark:text-white" : ""
   end
 
-  def sidebar_link_class
-    "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
-  end
-
-  def sidebar_link_icon_class
-    "flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400" \
-      " group-hover:text-gray-900 dark:group-hover:text-white"
-  end
-
-  def h1_label_class
-    "text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white"
-  end
-
-  def strong_label_class
-    "block mb-1 font-medium text-gray-900 dark:text-white"
-  end
-
-  def span_label_class
-    "text-gray-900 dark:text-white"
-  end
-
-  def form_label_class
-    "block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-  end
-
-  def form_input_class
-    "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600" \
-      " focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600" \
-      " dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-  end
-
-  def form_button_class
-    "cursor-pointer w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none" \
-      " focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600" \
-      " dark:hover:bg-primary-700 dark:focus:ring-primary-800"
-  end
-
-  def new_record_button_with_icon_class
-    "text-center inline-flex items-center text-white bg-primary-600 hover:bg-primary-700 focus:ring-4" \
-      " focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5" \
-      " dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
-  end
-
-  def button_with_icon_class
-    "text-center inline-flex items-center border border-gray-300 text-white bg-gray-800 hover:bg-gray-900" \
-      " focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" \
-      " dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
-  end
-
-  def delete_button_with_icon_class
-    "text-center inline-flex items-center border border-red-300 text-white bg-red-800 hover:bg-red-900" \
-      " focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" \
-      " dark:bg-red-800 dark:hover:bg-red-700 dark:focus:ring-red-700 dark:border-red-700"
-  end
-
   def status_badge(is_active)
     tag.span(
       is_active ? ACTIVE_LABEL : INACTIVE_LABEL,

app/helpers/application_helper.rb

@@ -68,11 +68,6 @@ def items_option_selected
   end
   # rubocop:enable Rails/OutputSafety
 
-  def site_form_input_class
-    "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600" \
-      " focus:border-primary-600 block p-2.5"
-  end
-
   def custom_image_tag( # rubocop:disable Metrics/ParameterLists
     image,
     variant: nil,

app/javascript/controllers/site/cart_controller.js

@@ -99,7 +99,7 @@ export default class extends Controller {
     if (errorContainer.hasChildNodes()) {
       [...errorContainer.childNodes].forEach((el) => el.remove());
     }
-    errorContainer.classList.add("p-4");
+    errorContainer.classList.add("p-3");
     errorEl.classList.add("text-sm", "font-medium");
     errorEl.innerText = error;
     errorContainer.appendChild(errorEl);

app/views/admin/categories/_category.html.slim

@@ -1,23 +1,23 @@
-section id="#{dom_id category}" class="w-full py-8 px-4 mx-auto max-w-2xl lg:py-16 bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md md:max-w-lg xl:p-0 dark:bg-gray-800 dark:border-gray-700"
+section id="#{dom_id category}" class="section-container"
   div class="p-6 space-y-4 md:space-y-6 sm:p-8"
     p
-      strong class=strong_label_class Status:
+      strong class="strong-label" Status:
       = status_badge(category.active)
     p
-      strong class=strong_label_class Name:
-      span class=span_label_class =< category.name
+      strong class="strong-label" Name:
+      span class="text-gray-900 dark:text-white" =< category.name
     p
-      strong class=strong_label_class Description:
-      span class=span_label_class =< category.description
+      strong class="strong-label" Description:
+      span class="text-gray-900 dark:text-white" =< category.description
     div
-      => link_to edit_admin_category_path(category), class: button_with_icon_class do
+      => link_to edit_admin_category_path(category), class: "btn-dark border border-gray-300 dark:border-gray-700 me-2 mb-2" do
         i class="fa-solid fa-pen w-3.5 h-3.5 me-2"
         | Edit this category
-      =< link_to admin_categories_path, class: button_with_icon_class do
+      =< link_to admin_categories_path, class: "btn-dark border border-gray-300 dark:border-gray-700 me-2 mb-2" do
         i class="fa-solid fa-arrow-left w-3.5 h-3.5 me-2"
         | Back to categories
       button[data-modal-target="popup-modal" data-modal-toggle="popup-modal" type="button"
-        class=delete_button_with_icon_class
+        class="btn-danger border border-red-300 dark:border-red-700 me-2 mb-2"
       ]
         i class="fa-solid fa-trash w-3.5 h-3.5 me-2"
         | Delete this category

app/views/admin/categories/_content.html.slim

@@ -7,9 +7,9 @@
         div class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none"
           i class="fa-solid fa-magnifying-glass w-4 h-4 text-gray-500 dark:text-gray-400"
         = f.search_field :name, value: params[:name], id: "name-search", placeholder: "Search for categories",
-          class: "ps-10 #{form_input_class}"
+          class: "ps-10 form-input"
     div class="mb-1"
-      select name="count_per_page" class=form_input_class
+      select name="count_per_page" class="form-input"
         == items_option_selected
 = turbo_frame_tag "data-table", "data-turbo-action": "advance" do
   == render "table"

app/views/admin/categories/_form.html.slim

@@ -1,31 +1,31 @@
-section class="w-full py-8 px-4 mx-auto max-w-2xl lg:py-16 bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md md:max-w-lg xl:p-0 dark:bg-gray-800 dark:border-gray-700"
+section class="section-container"
   div class="p-6 space-y-4 md:space-y-6 sm:p-8"
-    h1 class=h1_label_class = category.id? ? "Editing category" : "New category"
+    h1 class="h1-label" = category.id? ? "Editing category" : "New category"
     = form_with(model: [:admin, category], class: "contents") do |form|
       == render "shared/errors", errors: category&.errors&.full_messages || []
       .my-5
         = form.label :active, class: "inline-flex items-center cursor-pointer"
           = form.check_box :active, class: "sr-only peer"
           span class="text-sm font-medium text-gray-900 dark:text-white" Status
-          div class="ms-3 relative w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"
+          div class="peer form-switch"
       .my-5
-        = form.label :name, class: form_label_class
+        = form.label :name, class: "form-label"
         = form.text_field :name, required: true, placeholder: "Category 1",
-          class: form_input_class
+          class: "form-input"
       .my-5
-        = form.label :description, class: form_label_class
+        = form.label :description, class: "form-label"
         = form.text_area :description,
-          class: form_input_class
+          class: "form-input"
       .my-5
-        = form.label :image, class: form_label_class
+        = form.label :image, class: "form-label"
         = form.file_field :image, accept: "image/*",
-          class: form_input_class
-      = form.submit class: form_button_class
+          class: "form-input"
+      = form.submit class: "btn-primary"
     div
       - if category.id?
-        => link_to admin_category_path(@category), class: button_with_icon_class do
+        => link_to admin_category_path(@category), class: "btn-dark border border-gray-300 dark:border-gray-700 me-2 mb-2" do
           i class="fa-solid fa-eye w-3.5 h-3.5 me-2"
           | Show this category
-      =< link_to admin_categories_path, class: button_with_icon_class do
+      =< link_to admin_categories_path, class: "btn-dark border border-gray-300 dark:border-gray-700 me-2 mb-2" do
         i class="fa-solid fa-arrow-left w-3.5 h-3.5 me-2"
         | Back to categories

app/views/admin/categories/index.html.slim

@@ -4,8 +4,8 @@
   == render "shared/alert"
   == render "shared/notice"
   .flex.justify-between.items-center.mb-4
-    h1 class=h1_label_class Categories
-    = link_to new_admin_category_path, class: new_record_button_with_icon_class do
+    h1 class="h1-label" Categories
+    = link_to new_admin_category_path, class: "btn-primary" do
       i class="fa-solid fa-plus w-3.5 h-3.5 me-2"
       | New Category
   == render "content"

app/views/admin/customers/_content.html.slim

@@ -7,9 +7,9 @@
         div class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none"
           i class="fa-solid fa-magnifying-glass w-4 h-4 text-gray-500 dark:text-gray-400"
         = f.search_field :name, value: params[:name], id: "name-search", placeholder: "Search for customer",
-          class: "ps-10 #{form_input_class}"
+          class: "ps-10 form-input"
     div class="mb-1"
-      select name="count_per_page" class=form_input_class
+      select name="count_per_page" class="form-input"
         == items_option_selected
 = turbo_frame_tag "data-table", "data-turbo-action": "advance" do
   == render "table"

app/views/admin/customers/index.html.slim

@@ -1,5 +1,5 @@
 - title "Admin | Customers"
 
 .w-full
-  h1 class="mb-4 #{h1_label_class}" Customers
+  h1 class="mb-4 h1-label" Customers
   == render "content"

app/views/admin/dashboard/index.html.slim

@@ -1,11 +1,12 @@
 - title "Admin | Dashboard"
 
 .w-full
-  h1 class="mb-4 #{h1_label_class}" Dashboard
+  h1 class="mb-4 h1-label" Dashboard
   .flex.justify-between.items-center.flex-wrap.mt-8.max-w-4xl
     h2 class="mb-4 text-xl font-medium leading-tight tracking-tight text-gray-900 dark:text-white"
       | Daily Stats
-    div class="flex flex-col gap-10 justify-between w-full md:flex-row p-3 shadow-md bg-white border-b sm:rounded-lg dark:bg-gray-800 dark:border-gray-700"
+    div class=("flex flex-col gap-10 justify-between w-full md:flex-row p-3 shadow-md bg-white border-b sm:rounded-lg" \
+      " dark:bg-gray-800 dark:border-gray-700")
       div class="max-w-sm rounded overflow-hidden shadow-xl bg-gradient-to-r from-gray-900 to-gray-500"
         .px-6.py-4
           div class="font-bold text-xl text-white mb-2" Revenue

app/views/admin/orders/_content.html.slim

@@ -8,16 +8,16 @@
           div class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none"
             i class="fa-solid fa-magnifying-glass w-4 h-4 text-gray-500 dark:text-gray-400"
           = f.search_field :order_code, value: params[:order_code], id: "order_code-search", placeholder: "Search for order id",
-            class: "ps-10 #{form_input_class}"
+            class: "ps-10 form-input"
       div class="mb-1"
         label for="customer-search" class="sr-only" Search
         div class="relative"
           div class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none"
             i class="fa-solid fa-magnifying-glass w-4 h-4 text-gray-500 dark:text-gray-400"
           = f.search_field :customer, value: params[:customer], id: "customer-search", placeholder: "Search for customer",
-            class: "ps-10 #{form_input_class}"
+            class: "ps-10 form-input"
     div class="mb-1"
-      select name="count_per_page" class=form_input_class
+      select name="count_per_page" class="form-input"
         == items_option_selected
 = turbo_frame_tag "data-table", "data-turbo-action": "advance" do
   == render "table"