CSS is better

Upgraded to Rails 7.1.3.3

app/assets/stylesheets/application.css

@@ -14,15 +14,72 @@
  *= require_self
  */
 
-body, nav, main, footer {
-  padding: 1rem;
-  margin: 1rem;
+/*
+ * https://github.com/Lazzzer00/Best-CSS-Reset-2024
+ */
+*, *::before, *::after{
+    box-sizing: border-box;
 }
 
+*{
+    margin: 0;
+    padding: 0;
+}
+
+ul[role='list'], ol[role='list']{
+    list-style: none;
+}
+
+html:focus-within{
+    scroll-behavior: smooth;
+}
+
+a:not([class]){
+    text-decoration-skip-ink: auto;
+}
+
+img, picture, svg, video, canvas{
+    max-width: 100%;
+    height: auto;
+    vertical-align: middle;
+    font-style: italic;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+input, button, textarea, select{
+    font: inherit;
+}
+
+@media (prefers-reduced-motion: reduce){
+    html:focus-within {
+        scroll-behavior: auto;
+    }
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+        transition: none;
+    }
+}
+
+
+
+body, html{
+    height: 100%;
+    scroll-behavior: smooth;
+    padding:1rem;
+}
+
+/*
+ * Other CSS
+ */
+
 menu {
   display: flex;
   list-style: none;
-  padding: 1rem;
+  padding:1rem;
   background-color: #daeafa;
   border-radius:1rem;
 }
@@ -32,6 +89,17 @@ menu > li {
   flex-grow: 1;
 }
 
+.domain {
+  background-color: #efefef;
+  border-radius:1rem;
+  padding:1rem;
+}
+.domain-header {
+    background-color: #fefefe;
+    border-radius:1rem;
+    padding:1rem 1rem;
+}
+
 .domain-header h2 {
   display: flex;
 }
@@ -42,7 +110,14 @@ menu > li {
 
 .domain-header button {
   margin:0 0 0 10px;
+}
 
+.email-list {
+  border-radius:1rem;
+  border:1rem black;
+  background-color:#e7eae7;
+  padding:2rem;
+  margin:1rem 0;
 }
 
 .email-list li {
@@ -54,14 +129,13 @@ menu > li {
   padding:0 10px;
 }
 
-main, body {
-    padding:1rem;
-    margin:1rem;
-}
-
 footer {
+  margin-top:1rem;
   background-color:#efefef;
-  margin:0 1rem;
   padding:1rem;
   border-radius:1rem;
 }
+
+footer ul, footer h3 , footer li {
+  margin:10px;
+}

app/views/domains/show.html.erb

@@ -1,21 +1,21 @@
-<div>
+<div class="domain">
   <div class="domain-header">
     <h2><%= @domain.domain %> <%#= link_to "Edit", edit_domain_path(@domain) %> <%= button_to "Delete", @domain, method: :delete %></h2>
   </div>
   <div class="email-list">
-    <h3>Credentials (<%= @domain.credentials.count %>) <%= link_to "Add #{@domain.domain} email address", new_domain_credential_path(@domain) %></h2>
+    <h3>Credentials (<%= @domain.credentials.count %>) <%= link_to "Add #{@domain.domain} email address", new_domain_credential_path(@domain) %></h3>
       <ul>
         <% @domain.credentials.each do |credential| %>
         <li><%= credential.email %> <%= link_to "Edit", edit_domain_credential_path(@domain,credential) %> <%= button_to "Delete this email address", [@domain, credential], method: :delete %></li>
         <% end %>
       </ul>
-
-    <hr/>
-
-    <h3>Virtuals (<%= @domain.virtuals.count %>) <%= link_to "Add #{@domain.domain} virtual email", new_domain_virtual_path(@domain) %></h2>
+  </div>
+  <hr/>
+  <div class="email-list">
+    <h3>Virtuals (<%= @domain.virtuals.count %>) <%= link_to "Add #{@domain.domain} virtual email", new_domain_virtual_path(@domain) %></h3>
     <ul>
       <% @domain.virtuals.each do |virtual| %>
-      <li><%= virtual.email%> >> <%= virtual.destination%> <%= link_to "Edit", edit_domain_virtual_path(@domain,virtual)%> <%= button_to "Delete", [@domain, virtual], method: :delete, style: "display:inline" %></li>
+      <li><%= virtual.email%> >> <%= virtual.destination%> <%= link_to "Edit", edit_domain_virtual_path(@domain,virtual)%> <%= button_to "Delete", [@domain, virtual], method: :delete, data: { confirm: "Are you sure?" } %></li>
       <% end %>
     </ul>
 

app/views/layouts/application.html.erb

@@ -22,8 +22,8 @@
 
 
   <main>
-    <% if notice %><div class="bg-green-lightest green-darkest px-5 py-3 br-3 border-l bw-6 bc-green"><%= notice %></div><% end %>
-    <% if alert %><div class="bg-red-lightest red-darkest px-5 py-3 br-3 border-l bw-6 bc-red"><%= alert %></div><% end %>
+    <% if notice %><div class=""><%= notice %></div><% end %>
+    <% if alert %><div class=""><%= alert %></div><% end %>
     <%= yield %>
   </main>
   <footer>
@@ -32,7 +32,7 @@
     <hr/>
     <h3>To-Do (In order of importance):</h3>
     <ul>
-      <li>Tests for controllers and integration</li>
+      <li>Edit - plus tests</li>
       <li>2FA</li>
     </ul>
   </footer>