Extract some styles

excid3 · Oct 21, 2024 · 799cf72 · 799cf72
1 parent ef7d580
commit 799cf72
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 11 deletions.
diff --git a/app/assets/stylesheets/madmin/application.css b/app/assets/stylesheets/madmin/application.css
@@ -3,16 +3,59 @@
  * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
  * inclusion directly in any other asset bundle and remove this file.
  *
- *= require trix
 */
 
 @import url("../trix.css");
 @import url("./actiontext.css");
 
+#sidebar {
+  background-color: rgb(249 250 251);
+}
+
 .form-input {
   width: 100%;
 }
 
+.btn {
+  border-radius: 0.25rem;
+  border-width: 1px;
+  display: inline-block;
+  font-weight: 600;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+
+  &.btn-small {
+    padding-bottom: 0.25rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-top: 0.25rem;
+  }
+
+  &.btn-secondary {
+    background-color: white;
+    color: rgb(31 41 55);
+    border-color: rgb(156 163 175);
+
+    &:hover {
+      background-color: rgb(243 244 246);
+    }
+  }
+
+  &.btn-danger {
+    background-color: white;
+    color: rgb(239 68 68);
+    border-color: rgb(239 68 68);
+
+    &:hover {
+      background-color: rgb(243 244 246);
+    }
+  }
+}
+
+
+
 .pagy {
   display: inline-flex;
   isolation: isolate;

diff --git a/app/views/layouts/madmin/application.html.erb b/app/views/layouts/madmin/application.html.erb
@@ -14,7 +14,7 @@
   </head>
   <body class="min-h-screen">
     <div class="md:flex w-full min-h-screen">
-      <div id="sidebar" class="md:w-64 p-4 flex-shrink-0 border-r">
+      <div id="sidebar" class="md:w-64 p-4 flex-shrink-0 shadow">
         <%= render "navigation" -%>
       </div>
       <main class="flex-grow p-4 overflow-x-scroll" role="main">

diff --git a/app/views/madmin/application/_form.html.erb b/app/views/madmin/application/_form.html.erb
@@ -21,5 +21,5 @@
     </div>
   <% end %>
 
-  <%= form.submit class: "bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" %>
+  <%= form.submit class: "btn btn-secondary" %>
 <% end %>
diff --git a/app/views/madmin/application/_menu_resources.html.erb b/app/views/madmin/application/_menu_resources.html.erb
@@ -4,6 +4,6 @@
   <%= nav_link_to resource.friendly_name.pluralize, resource.index_path, class: "block p-2 rounded hover:bg-gray-100", starts_with: resource.index_path, active_class: "font-bold text-black" %>
 <% end %>
 
-<div class="mt-auto">
+<div class="mt-4">
   <%= link_to "View Madmin on GitHub", "https://github.com/excid3/madmin", target: :_blank, class: "block p-2 rounded text-gray-500 hover:bg-gray-100" %>
 </div>
diff --git a/app/views/madmin/application/_navigation.html.erb b/app/views/madmin/application/_navigation.html.erb
@@ -18,11 +18,11 @@
         </svg>
       </button>
 
-      <div class="absolute top-12 right-0 bg-white rounded-lg min-w-64 shadow-lg hidden md:flex flex-col flex-grow justify-between" data-dropdown-target="menu">
+      <div class="absolute top-12 right-0 z-10 bg-white rounded-lg min-w-64 shadow-lg hidden md:flex flex-col flex-grow justify-between" data-dropdown-target="menu">
         <%= render "menu_resources" %>
       </div>
     </div>
-    <div class="hidden md:block">
+    <div class="hidden md:block md:mt-4">
       <%= render "menu_resources" %>
     </div>
   </div>

diff --git a/app/views/madmin/application/index.html.erb b/app/views/madmin/application/index.html.erb
@@ -12,7 +12,7 @@
       <% end %>
     </form>
 
-    <%= link_to resource.new_path, class: "bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" do %>
+    <%= link_to resource.new_path, class: "btn btn-secondary" do %>
       New <span class="hidden md:inline"><%= resource.friendly_name %></span>
     <% end %>
   </div>
@@ -51,8 +51,8 @@
           <% end %>
 
           <td class="px-4 py-2 text-right">
-            <%= link_to "View", resource.show_path(record), class: "inline-block bg-white hover:bg-gray-100 text-gray-800 font-semibold py-1 px-2 border border-gray-400 rounded shadow" %>
-            <%= link_to "Edit", resource.edit_path(record), class: "inline-block bg-white hover:bg-gray-100 text-gray-800 font-semibold py-1 px-2 border border-gray-400 rounded shadow" %>
+            <%= link_to "View", resource.show_path(record), class: "btn btn-secondary btn-small" %>
+            <%= link_to "Edit", resource.edit_path(record), class: "btn btn-secondary btn-small" %>
           </td>
         </tr>
       <% end %>

diff --git a/app/views/madmin/application/show.html.erb b/app/views/madmin/application/show.html.erb
@@ -9,8 +9,8 @@
     <% resource.member_actions.each do |action| %>
       <%= instance_eval(&action)  %>
     <% end %>
-    <%= link_to "Edit", resource.edit_path(@record), class: "block bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" %>
-    <%= button_to "Delete", resource.show_path(@record), method: :delete, data: { turbo_confirm: "Are you sure?" }, class: "bg-white hover:bg-gray-100 text-red-500 font-semibold py-2 px-4 border border-red-500 rounded shadow pointer-cursor" %>
+    <%= link_to "Edit", resource.edit_path(@record), class: "btn btn-secondary" %>
+    <%= button_to "Delete", resource.show_path(@record), method: :delete, data: { turbo_confirm: "Are you sure?" }, class: "btn btn-danger" %>
   </div>
 </div>