Clean up and improve items-table styling

Closes #9

app/assets/stylesheets/application.css

@@ -231,12 +231,17 @@ textarea:invalid {
   text-decoration: underline 1px var(--color-border-gray);
   text-underline-offset: 0.25em;
 }
-[name=cancel],
 .auxiliary {
-  border-color: var(--color-border-gray);
+  border-color: var(--color-nav-gray);
   color: var(--color-nav-gray);
   fill: var(--color-nav-gray);
 }
+table .button {
+  border-color: var(--color-border-gray);
+  font-weight: normal;
+  height: 100%;
+  padding: 0.4em;
+}
 .button:focus-visible,
 .tab:focus-visible,
 .tab:hover {
@@ -259,13 +264,6 @@ textarea:invalid {
   color: var(--color-blue);
   text-decoration-color: var(--color-blue);
 }
-table .button {
-  border-color: var(--color-border-gray);
-  color: var(--color-table-gray);
-  font-weight: normal;
-  height: 100%;
-  padding: 0.4em;
-}
 
 
 /* NOTE: collapse gaps around empty rows (`topside`) once possible with
@@ -360,20 +358,20 @@ header {
   line-height: 2.2em;
   pointer-events: auto;
 }
-.flash:before {
+.flash::before {
-  filter: invert();
+  filter: invert(1);
   height: 1.4em;
   margin: 0 0.5em;
   width: 1.4em;
 }
-.flash.alert:before {
+.flash.alert::before {
   content: url('pictograms/alert-outline.svg');
 }
 .flash.alert {
   border-color: var(--color-red);
   background-color: var(--color-red);
 }
-.flash.notice:before {
+.flash.notice::before {
   content: url('pictograms/check-circle-outline.svg');
 }
 .flash.notice {
@@ -437,15 +435,18 @@ header {
 
 .tabular-form table {
   border: none;
-  border-spacing: 0.4em 0;
+  border-spacing: 0;
-  margin-inline: -0.4em;
 }
 .tabular-form table td {
   border: none;
+  padding-inline-start: 0.4em;
   vertical-align: middle;
 }
-.tabular-form table td {
+.tabular-form table td:first-child {
-  padding-inline: 0;
+  padding-inline-start: 0;
+}
+.tabular-form table td:last-child {
+  padding-inline-end: 0;
 }
 .tabular-form table :is(form, input, select, textarea):only-child {
   margin-inline-start: 0;

app/views/measurements/_form.html.erb

@@ -33,7 +33,7 @@
   <div class="flex reverse">
     <%= form.button id: :create_measurement_button, disabled: true -%>
     <%= image_link_to t(:cancel), "close-outline", measurements_path, name: :cancel,
-      class: 'dangerous', onclick: render_turbo_stream('form_close') %>
+      class: 'auxiliary dangerous', onclick: render_turbo_stream('form_close') %>
   </div>
 <% end %>
 

config/environments/test.rb

@@ -58,7 +58,4 @@ Rails.application.configure do
   # config.action_view.annotate_rendered_view_with_filenames = true
 
   config.log_level = :info
-
-  # Allow Capybara's dynamic test server host (127.0.0.1:<random_port>)
-  config.hosts << '127.0.0.1'
 end