From 32be24bca9b216c24da621d63bb0e601771d3a07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20B=C3=B6hm?= <spaceman78@gmx.de>
Date: Thu, 15 Aug 2024 02:07:11 +0200
Subject: [PATCH] Refactored stylesheet

---
 .../stylesheets/application.tailwind.css      |  33 ++++-
 app/views/jobs/_job_tr.html.erb               |  46 +++---
 app/views/jobs/index.html.erb                 |  28 ++--
 app/views/layouts/application.html.erb        |   2 +-
 app/views/operator/jobs/_job_tr.html.erb      |  56 ++++----
 app/views/operator/jobs/index.html.erb        | 136 +++++++++---------
 6 files changed, 162 insertions(+), 139 deletions(-)

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 8666d2f..001a22c 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -2,12 +2,35 @@
 @tailwind components;
 @tailwind utilities;
 
-/*
-
 @layer components {
+  .btn {
+    @apply px-4 py-2 font-semibold text-white transition-colors duration-100 bg-opacity-100 shadow bg-hsrm-gray-light hover:bg-opacity-75 ;
+  }
   .btn-primary {
-    @apply py-2 px-4 bg-blue-200;
+    @apply bg-hsrm-red hover:bg-hsrm-red-light;
+  }
+  .badge {
+    @apply text-sm font-medium text-center font-bold rounded-lg uppercase bg-gray-300 bg-opacity-50 px-2 py-1.5 shadow;
+  }
+  .badge-hover {
+    @apply p-1 hover:bg-opacity-75;
+  }
+  .badge-xl {
+    @apply text-2xl;
+  }
+  .badge-status {
+    @apply block w-24;
+  }
+  .icon {
+    @apply inline text-hsrm-gray size-7 drop-shadow hover:text-opacity-75;
+  }
+  .icon-disabled {
+    @apply text-opacity-25 hover:text-opacity-25;
+  }
+  .icon-nohover {
+    @apply hover:text-opacity-100;
+  }
+  .card-status {
+    @apply uppercase bg-opacity-50 shadow-lg min-h-20 hover:bg-opacity-70;
   }
 }
-
-*/
diff --git a/app/views/jobs/_job_tr.html.erb b/app/views/jobs/_job_tr.html.erb
index 19bf5c4..4ccc9f4 100644
--- a/app/views/jobs/_job_tr.html.erb
+++ b/app/views/jobs/_job_tr.html.erb
@@ -1,63 +1,63 @@
-<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-15">
-  <td class="p-3 text-hsrm-gray whitespace-nowrap">
-    <span class="p-1.5 text-lg font-bold uppercase tracking-wider bg-opacity-50 text-status-<%= job.status %> bg-status-<%= job.status %>-light rounded-lg shadow">
+<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-15 text-hsrm-gray whitespace-nowrap">
+  <td class="p-2 py-3 text-center">
+    <span class="badge badge-xl text-status-<%= job.status %> bg-status-<%= job.status %>-light rounded-lg shadow">
       <%= job.id %>
     </span>
   </td>
-  <td class="p-3 text-center text-hsrm-gray">
+  <td class="p-2 py-3 text-center">
     <% if job.pdf.attached? %>
       <%= image_tag(url_for(job.pdf.blob.preview(resize_to_limit: [100, 100])), class: "shadow") %>
       <%#= image_tag job.pdf.preview(resize_to_limit: [50, 50]), class: "mx-auto" %>
     <% end %>
   </td>
-  <td class="p-3 text-hsrm-gray whitespace-nowrap">
+  <td class="p-2 py-3">
     <%= job.costumer_fullname %>
   </td>
-  <td class="p-3 text-hsrm-gray whitespace-nowrap">
+  <td class="p-2 py-3">
     <% if job.pdf.attached? %>
       <%= truncate(job.pdf.filename.to_s, length: 45) %>
     <% end %>
   </td>
-  <td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
-    <span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
+  <td class="p-1 py-3">
+    <span class="badge">
       <%= job.number_of_plans_a0 %>
     </span>
   </td>
-  <td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
-    <span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
+  <td class="p-1 py-3">
+    <span class="badge">
       <%= job.number_of_plans_a1 %>
     </span>
   </td>
-  <td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
-    <span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
+  <td class="p-1 py-3">
+    <span class="badge">
       <%= job.number_of_plans_a2 %>
     </span>
   </td>
-  <td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
-    <span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
+  <td class="p-1 py-3">
+    <span class="badge">
       <%= job.number_of_plans_a3 %>
     </span>
   </td>
-  <td class="p-3 text-right text-hsrm-gray whitespace-nowrap">
-    <span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
+  <td class="p-2 py-3 text-right">
+    <span class="badge">
       <%= job.costum_qm_plan.round(2) %> m²
     </span>
   </td>
-  <td class="p-3 text-right text-hsrm-gray whitespace-nowrap">
-    <span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
+  <td class="p-2 py-3 text-right">
+    <span class="badge">
       <%= job.cost.round(2) %> €
     </span>
   </td>
-  <td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
-    <span class="p-1.5 block text-xs font-medium uppercase tracking-wider bg-opacity-50 w-20 text-center text-status-<%= job.status.to_sym %> bg-status-<%= job.status %>-light rounded-lg shadow">
+  <td class="p-2 py-3">
+    <span class="badge badge-status text-status-<%= job.status.to_sym %> bg-status-<%= job.status %>-light ">
       <%= job.status %>
     </span>
   </td>
-  <td class="p-3 text-right text-hsrm-gray whitespace-nowrap">
+  <td class="p-2 py-3 text-right">
     <% if job.open? %>
-      <%= button_to icon("x-circle", class: "text-hsrm-red size-8 inline", title: "Abbrechen"), cancel_job_path(job), method: :patch, form: {data: {turbo_confirm: 'Den Plottauftrag wirklich abbrechen?'}}, form_class: "inline" %>
+      <%= button_to icon("x-circle", class: "icon size-10 text-hsrm-red", title: "Abbrechen"), cancel_job_path(job), method: :patch, form: {data: {turbo_confirm: 'Den Plottauftrag wirklich abbrechen?'}}, form_class: "inline" %>
     <% else %>
-      <%= icon("x-circle", class: "text-hsrm-gray text-opacity-50 size-8 inline drop-shadow", title: "Kann nicht mehr abgebrochen werden") %>
+      <%= icon("x-circle", class: "icon icon-disabled size-10", title: "Kann nicht mehr abgebrochen werden") %>
     <% end %>
   </td>
 </tr>
diff --git a/app/views/jobs/index.html.erb b/app/views/jobs/index.html.erb
index b66c12f..403ca3a 100644
--- a/app/views/jobs/index.html.erb
+++ b/app/views/jobs/index.html.erb
@@ -2,26 +2,26 @@
 <div class="w-full">
   <%#= render partial: 'layouts/flash' %>
   <% content_for :title, "Current Print Jobs" %>
-  <div class="flex justify-between items-center py-4">
-    <h1 class="font-bold text-hsrm-gray text-4xl">Aktuelle Plottaufträge <span class="font-semibold text-sm"><%= Date.today.strftime("%d.%m.%Y") %></span></h1>
+  <div class="flex items-center justify-between py-4">
+    <h1 class="text-4xl font-bold text-hsrm-gray">Aktuelle Plottaufträge <span class="text-sm font-semibold"><%= Date.today.strftime("%d.%m.%Y") %></span></h1>
     <%= link_to "Plottauftrag aufgeben", new_job_path, class: "px-3 py-2 bg-hsrm-red drop-shadow-lg transition-colors hover:bg-hsrm-red-light text-white block font-medium" %>
   </div>
   <div class="min-w-full overflow-auto shadow-lg">
     <table class="w-full py-8 table-auto">
       <thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
         <tr>
-          <th class="w-1 p-3 text-center"> ID </th>
-          <th class="w-1 p-3 text-center"> Vorschau </th>
-          <th class="p-3 text-left"> Auftraggeber </th>
-          <th class="p-3 text-left"> PDF </th>
-          <th class="w-1 p-3 text-left"> A0 </th>
-          <th class="w-1 p-3 text-left"> A1 </th>
-          <th class="w-1 p-3 text-left"> A2 </th>
-          <th class="w-1 p-3 text-left"> A3 </th>
-          <th class="w-1 p-3 text-center text-nowrap"> no DIN </th>
-          <th class="w-1 p-3 text-center"> Kosten </th>
-          <th class="w-1 p-3 text-center"> Status </th>
-          <th class="w-1 p-3 text-center">Action</th>
+          <th class="w-1 p-2 py-3 text-center"> ID </th>
+          <th class="w-1 p-2 py-3 text-center"> Vorschau </th>
+          <th class="w-1 p-2 py-3 text-left"> Auftraggeber </th>
+          <th class="p-2 py-3 text-left"> PDF </th>
+          <th class="w-1 p-1 py-3 text-left"> A0 </th>
+          <th class="w-1 p-1 py-3 text-left"> A1 </th>
+          <th class="w-1 p-1 py-3 text-left"> A2 </th>
+          <th class="w-1 p-1 py-3 text-left"> A3 </th>
+          <th class="w-1 p-2 py-3 text-center text-nowrap"> no DIN </th>
+          <th class="w-1 p-2 py-3 text-center"> Kosten </th>
+          <th class="w-1 p-2 py-3 text-center"> Status </th>
+          <th class="w-1 p-2 py-3 text-center">Action</th>
         </tr>
       </thead>
       <tbody id='jobs' class="divide-y divivde-gray-300">
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index e2ecc78..4f10460 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -31,7 +31,7 @@
       <nav>
         <ul>
           <li>
-            <a href="#" class="flex items-center px-3 py-2 font-semibold text-white transition-colors duration-100 bg-opacity-100 shadow-lg bg-hsrm-red hover:bg-hsrm-red-light group">
+            <a href="#" class="flex items-center btn btn-primary">
               <span>Anmelden</span>
             </a>
           </li>
diff --git a/app/views/operator/jobs/_job_tr.html.erb b/app/views/operator/jobs/_job_tr.html.erb
index 8170cb2..180334b 100644
--- a/app/views/operator/jobs/_job_tr.html.erb
+++ b/app/views/operator/jobs/_job_tr.html.erb
@@ -1,90 +1,90 @@
-<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-10">
-  <td class="p-3 text-hsrm-gray whitespace-nowrap">
-    <span class="p-1.5 text-lg font-bold uppercase tracking-wider bg-opacity-50 text-status-<%= job.status %> bg-status-<%= job.status %>-light rounded-lg shadow">
+<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-10 text-hsrm-gray whitespace-nowrap">
+  <td class="p-2 py-3 text-center">
+    <span class="badge badge-xl text-status-<%= job.status %> bg-status-<%= job.status %>-light">
       <%= job.id %>
     </span>
   </td>
-  <td class="w-6 p-3 text-hsrm-gray whitespace-nowrap">
+  <td class="p-2 py-3 text-center">
     <% if job.pdf.attached? %>
       <%= link_to_if job.printing?, image_tag(url_for(job.pdf.preview(resize_to_limit: [100, 100])), class:"shadow-lg"), job.pdf, target: "_blank" %>
       <!--<iframe src=<%= url_for(job.pdf) %> width="500" height="700" style="border: none;"></iframe>-->
     <% end %>
   </td>
-  <td class="p-3 text-hsrm-gray whitespace-nowrap">
+  <td class="p-2 py-3">
     <%= job.costumer_fullname %>
   </td>
-  <td class="p-3 text-hsrm-gray whitespace-nowrap">
+  <td class="p-2 py-3">
     <% if job.pdf.attached? %>
       <%= link_to_if job.printing?, icon("document-arrow-down", class: "text-hsrm-gray #{ unless job.printing?; 'text-opacity-25' else; 'hover:text-opacity-75'; end} size-6 inline", title: "Download"), job.pdf, download:true %>
       <%#= link_to job.pdf.filename, rails_blob_path(job.pdf, disposition: "attachment") %>
       <%= link_to_if job.printing?, truncate(job.pdf.filename.to_s, length: 45), job.pdf, download:true %>
-      <span class="p-1.5 bg-gray-300 bg-opacity-50 text-hsrm-gray font-medium rounded-lg ml-2">
+      <span class="ml-2 badge">
         <%=number_to_human_size job.pdf.blob.byte_size%>
       </span>
     <% end %>
   </td>
   <% Job::AVAILABLE_PAGE_FORMATS.each do |din| %>
-    <td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
+    <td class="p-1 py-3">
       <% if job.printing? %>
         <div class="flex flex-col items-center">
-          <span class="inline-block p-1 font-medium bg-gray-300 bg-opacity-50 rounded-lg shadow hover:bg-opacity-75">
+          <span class="badge badge-hover">
             <%= button_to icon("chevron-up", class: "size-5 inline", title: "erhöhen"), increment_page_operator_job_path(job, din:), method: :patch, form_class: "inline" %>
           </span>
         <% end %>
-        <span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg text-center shadow">
+        <span class="badge">
           <%= job.public_send("number_of_plans_#{din}") if job.respond_to? "number_of_plans_#{din}" %>
         </span>
         <% if job.printing? %>
-          <span class="inline-block p-1 font-medium bg-gray-300 bg-opacity-50 rounded-lg shadow hover:bg-opacity-75">
+          <span class="badge badge-hover">
             <%= button_to icon("chevron-down", class: "size-5 inline", title: "verringern"), decrement_page_operator_job_path(job, din:), method: :patch, form_class: "inline" %>
           </span>
         </div>
       <% end %>
     </td>
   <% end %>
-  <td class="p-3 text-right text-hsrm-gray whitespace-nowrap">
-    <span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
+  <td class="p-2 py-3 text-right">
+    <span class="badge">
       <%= job.costum_qm_plan.round(2) %> m²
     </span>
   </td>
-  <td class="p-3 text-right text-hsrm-gray whitespace-nowrap">
-    <span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg shadow">
+  <td class="p-2 py-3 text-right">
+    <span class="badge">
       <%= job.cost.round(2) %> €
     </span>
   </td>
-  <td class="p-3 text-left text-hsrm-gray whitespace-nowrap">
-    <span class="p-1.5 block text-xs font-medium uppercase tracking-wider bg-opacity-50 w-20 text-center text-status-<%= job.status.to_sym %> bg-status-<%= job.status %>-light rounded-lg shadow">
+  <td class="p-2 py-3">
+    <span class="badge badge-status text-status-<%= job.status.to_sym %> bg-status-<%= job.status %>-light">
       <%= job.status %>
     </span>
   </td>
-  <td class="p-3 text-right text-hsrm-gray whitespace-nowrap">
+  <td class="p-2 py-3 text-right">
     <!-- TODO: move logic to model -->
     <% if job.printing? || job.canceled? || job.paid? %>
-      <%= button_to icon("inbox-stack", class: "text-hsrm-gray size-6 inline drop-shadow hover:text-opacity-75", title: "Zurück in die Warteschlange"), operator_job_path(job), method: :patch, params: {:job => {status: :open}}, form_class: "inline" %>
+      <%= button_to icon("inbox-stack", class: "icon", title: "Zurück in die Warteschlange"), operator_job_path(job), method: :patch, params: {:job => {status: :open}}, form_class: "inline" %>
     <% else %>
-      <%= icon("inbox-stack", class: "text-hsrm-gray text-opacity-25 size-6 inline drop-shadow", title: "") %>
+      <%= icon("inbox-stack", class: "icon icon-disabled", title: "") %>
     <% end %>
     <% if job.open? || job.canceled? || job.paid? %>
-      <%= button_to icon("printer", class: "text-hsrm-gray size-6 inline drop-shadow hover:text-opacity-75", title: "Drucken"), operator_job_path(job), method: :patch, params: {:job => {status: :printing}}, form_class: "inline" %>
+      <%= button_to icon("printer", class: "icon", title: "Drucken"), operator_job_path(job), method: :patch, params: {:job => {status: :printing}}, form_class: "inline" %>
     <% else %>
-      <%= icon("printer", class: "text-hsrm-gray text-opacity-25 size-6 inline drop-shadow", title: "") %>
+      <%= icon("printer", class: "icon icon-disabled", title: "") %>
     <% end %>
     <% if job.printing? || job.paid? %>
       <% job.printing? && turbo_confirm = 'Sind die Pläne gedruckt und die Seitenanzahl und QM korrekt?' %>
-      <%= button_to icon("arrow-up-tray", class: "text-hsrm-gray size-6 inline drop-shadow hover:text-opacity-75", title: "Pläne sind fertig gedruckt und bereit abgeholt zu werden."), operator_job_path(job), method: :patch, params: {:job => {status: :pickup}}, form: {data: {turbo_confirm: turbo_confirm}}, form_class: "inline" %>
+      <%= button_to icon("arrow-up-tray", class: "icon", title: "Pläne sind fertig gedruckt und bereit abgeholt zu werden."), operator_job_path(job), method: :patch, params: {:job => {status: :pickup}}, form: {data: {turbo_confirm: turbo_confirm}}, form_class: "inline" %>
     <% else %>
-      <%= icon("arrow-up-tray", class: "text-hsrm-gray text-opacity-25 size-6 inline drop-shadow", title: "") %>
+      <%= icon("arrow-up-tray", class: "icon icon-disabled", title: "") %>
     <% end %>
     <% if job.pickup? || job.printing? %>
       <% job.printing? && turbo_confirm = 'Sind die Pläne gedruckt und die Seitenanzahl und QM korrekt?' %>
-      <%= button_to icon("banknotes", class: "text-hsrm-gray size-6 inline drop-shadow hover:text-opacity-75", title: "Bezahlt"), operator_job_path(job), method: :patch, params: {:job => {status: :paid}}, form: {data: {turbo_confirm: turbo_confirm}}, form_class: "inline" %>
+      <%= button_to icon("banknotes", class: "icon", title: "Bezahlt"), operator_job_path(job), method: :patch, params: {:job => {status: :paid}}, form: {data: {turbo_confirm: turbo_confirm}}, form_class: "inline" %>
     <% else %>
-      <%= icon("banknotes", class: "text-hsrm-gray text-opacity-25 size-6 inline drop-shadow ", title: "") %>
+      <%= icon("banknotes", class: "icon icon-disabled ", title: "") %>
     <% end %>
     <% if job.open? || job.printing? || job.pickup? %>
-      <%= button_to icon("x-circle", class: "text-hsrm-red size-6 inline drop-shadow hover:text-opacity-75", title: "Abbrechen"), operator_job_path(job), method: :patch, params: {:job => {status: :canceled}}, form: {data: {turbo_confirm: 'Den Plottauftrag wirklich abbrechen?'}}, form_class: "inline" %>
+      <%= button_to icon("x-circle", class: "icon text-hsrm-red", title: "Abbrechen"), operator_job_path(job), method: :patch, params: {:job => {status: :canceled}}, form: {data: {turbo_confirm: 'Den Plottauftrag wirklich abbrechen?'}}, form_class: "inline" %>
     <% else %>
-      <%= icon("x-circle", class: "text-hsrm-gray text-opacity-25 size-6 inline drop-shadow", title: "Kann nicht mehr abgebrochen werden") %>
+      <%= icon("x-circle", class: "icon icon-disabled", title: "Kann nicht mehr abgebrochen werden") %>
     <% end %>
   </td>
 </tr>
diff --git a/app/views/operator/jobs/index.html.erb b/app/views/operator/jobs/index.html.erb
index 3a4dc87..e99ffd7 100644
--- a/app/views/operator/jobs/index.html.erb
+++ b/app/views/operator/jobs/index.html.erb
@@ -4,45 +4,45 @@
 </div>
 <div class="flex space-x-4 justify-items-center">
   <%= link_to "#openjobs-h", class: "flex-1" do %>
-    <div class="flex-1 bg-opacity-50 shadow-lg bg-status-open-light text-status-open min-h-28 hover:bg-opacity-70">
-      <h3 class="p-4 text-3xl font-bold">
-        <%= icon("inbox-stack", class: "text-status-open size-8 inline drop-shadow -translate-y-1")  %>
+    <div class="flex-1 card-status bg-status-open-light text-status-open">
+      <h3 class="p-3 text-2xl font-bold">
+        <%= icon("inbox-stack", class: "text-status-open icon icon-nohover")  %>
         Open
-        <span class="block text-right"><%= @openjobs.count %></span>
+        <span class="block text-3xl text-right"><%= @openjobs.count %></span>
       </h3>
     </div>
   <% end %>
   <%= link_to "#printingjobs-h", class: "flex-1" do %>
-    <div class="flex-1 bg-opacity-50 shadow-lg bg-status-printing-light text-status-printing min-h-28 hover:bg-opacity-70">
-      <h3 class="p-4 text-3xl font-bold">
-        <%= icon("printer", class: "text-status-printing size-8 inline drop-shadow -translate-y-1")  %>
+    <div class="flex-1 card-status bg-status-printing-light text-status-printing">
+      <h3 class="p-3 text-2xl font-bold">
+        <%= icon("printer", class: "text-status-printing icon icon-nohover")  %>
         Printing
         <span class="block text-right"><%= @printingjobs.count  %></span>
       </h3>
     </div>
   <% end %>
   <%= link_to "#pickupjobs-h", class: "flex-1" do %>
-    <div class="flex-1 bg-opacity-50 shadow-lg bg-status-pickup-light text-status-pickup min-h-28 hover:bg-opacity-70">
-      <h3 class="p-4 text-3xl font-bold">
-        <%= icon("arrow-up-tray", class: "text-status-pickup size-8 inline drop-shadow -translate-y-1")  %>
+    <div class="flex-1 card-status bg-status-pickup-light text-status-pickup">
+      <h3 class="p-3 text-2xl font-bold">
+        <%= icon("arrow-up-tray", class: "text-status-pickup icon icon-nohover")  %>
         Pickup
         <span class="block text-right"><%= @pickupjobs.count %></span>
       </h3>
     </div>
   <% end %>
   <%= link_to "#paidcanceledjobs-h", class: "flex-1" do %>
-    <div class="flex-1 bg-opacity-50 shadow-lg bg-status-paid-light text-status-paid min-h-28 hover:bg-opacity-70">
-      <h3 class="p-4 text-3xl font-bold">
-        <%= icon("banknotes", class: "text-status-paid size-8 inline drop-shadow -translate-y-1")  %>
+    <div class="flex-1 card-status bg-status-paid-light text-status-paid">
+      <h3 class="p-3 text-2xl font-bold">
+        <%= icon("banknotes", class: "text-status-paid icon icon-nohover")  %>
         Paid
         <span class="block text-right"><%= @paidjobs.count %></span>
       </h3>
     </div>
   <% end %>
   <%= link_to "#paidcanceledjobs-h", class: "flex-1" do %>
-    <div class="flex-1 bg-opacity-50 shadow-lg bg-status-canceled-light text-status-canceled min-h-28 hover:bg-opacity-70">
-      <h3 class="p-4 text-3xl font-bold">
-        <%= icon("x-circle", class: "text-status-canceled size-8 inline drop-shadow -translate-y-1")  %>
+    <div class="flex-1 card-status bg-status-canceled-light text-status-canceled">
+      <h3 class="p-3 text-2xl font-bold">
+        <%= icon("x-circle", class: "text-status-canceled icon icon-nohover")  %>
         Canceled
         <span class="block text-right"><%= @canceledjobs.count %></span>
       </h3>
@@ -56,14 +56,14 @@
     </h1>
     <% if @openjobs.any? %>
       <%= button_to icon("printer", 
-      class: "text-hsrm-gray size-6 inline drop-shadow hover:text-opacity-75 mr-2", 
+      class: "icon icon-nohover size-6 mr-2", 
       title: "Drucken") + "Start next job (" + @openjobs.count.to_s + ")", operator_job_path(@openjobs.first), 
       params:  { :job => { status: :printing} }, 
       method: :patch, 
-      form_class: "inline px-3 py-2 font-semibold bg-green-500 hover:opacity-90 shadow-lg transition-colors duration-100 bg-opacity-100 flex items-center group text-hsrm-gray" %>
+      form_class: "btn bg-green-400 text-black" %>
     <% else %>
-      <span class="flex items-center px-3 py-2 font-semibold text-white transition-colors duration-100 bg-gray-300 bg-opacity-100 shadow-lg group">
-        <%= icon("printer", class: "text-hsrm-gray text-opacity-25 size-6 inline drop-shadow mr-2", title: "") %>
+      <span class="flex items-center bg-gray-300 bg-opacity-80 btn hover:bg-opacity-80 text-hsrm-gray-light">
+        <%= icon("printer", class: "icon icon-nohover size-6 mr-2", title: "") %>
         Start next job
       </span>
     <% end %>
@@ -73,18 +73,18 @@
     <table class="w-full py-8 table-auto">
       <thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
         <tr>
-          <th class="w-1 p-3 text-center"> ID </th>
-          <th class="w-1 p-3 text-center"> Vorschau </th>
-          <th class="p-3 text-left"> Auftraggeber </th>
-          <th class="p-3 text-left"> PDF </th>
-          <th class="w-1 p-3 text-left"> A0 </th>
-          <th class="w-1 p-3 text-left"> A1 </th>
-          <th class="w-1 p-3 text-left"> A2 </th>
-          <th class="w-1 p-3 text-left"> A3 </th>
-          <th class="w-1 p-3 text-center text-nowrap"> no DIN </th>
-          <th class="w-1 p-3 text-center"> Kosten </th>
-          <th class="w-1 p-3 text-center"> Status </th>
-          <th class="w-1 p-3 text-center">Action</th>
+          <th class="w-1 p-2 py-3 text-center"> ID </th>
+          <th class="w-1 p-2 py-3 text-center"> Vorschau </th>
+          <th class="w-1 p-2 py-3 text-left"> Auftraggeber </th>
+          <th class="p-2 py-3 text-left"> PDF </th>
+          <th class="w-1 p-1 py-3 text-left"> A0 </th>
+          <th class="w-1 p-1 py-3 text-left"> A1 </th>
+          <th class="w-1 p-1 py-3 text-left"> A2 </th>
+          <th class="w-1 p-1 py-3 text-left"> A3 </th>
+          <th class="w-1 p-2 py-3 text-center text-nowrap"> no DIN </th>
+          <th class="w-1 p-2 py-3 text-center"> Kosten </th>
+          <th class="w-1 p-2 py-3 text-center"> Status </th>
+          <th class="w-1 p-2 py-3 text-center">Action</th>
         </tr>
       </thead>
       <tbody id='printingjobs' class="divide-y divivde-gray-300">
@@ -102,18 +102,18 @@
     <table class="w-full py-8 table-auto">
       <thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
         <tr>
-          <th class="w-1 p-3 text-center"> ID </th>
-          <th class="w-1 p-3 text-center"> Vorschau </th>
-          <th class="p-3 text-left"> Auftraggeber </th>
-          <th class="p-3 text-left"> PDF </th>
-          <th class="w-1 p-3 text-left"> A0 </th>
-          <th class="w-1 p-3 text-left"> A1 </th>
-          <th class="w-1 p-3 text-left"> A2 </th>
-          <th class="w-1 p-3 text-left"> A3 </th>
-          <th class="w-1 p-3 text-center text-nowrap"> no DIN </th>
-          <th class="w-1 p-3 text-center"> Kosten </th>
-          <th class="w-1 p-3 text-center"> Status </th>
-          <th class="w-1 p-3 text-center">Action</th>
+          <th class="w-1 p-2 py-3 text-center"> ID </th>
+          <th class="w-1 p-2 py-3 text-center"> Vorschau </th>
+          <th class="w-1 p-2 py-3 text-left"> Auftraggeber </th>
+          <th class="p-2 py-3 text-left"> PDF </th>
+          <th class="w-1 p-1 py-3 text-left"> A0 </th>
+          <th class="w-1 p-1 py-3 text-left"> A1 </th>
+          <th class="w-1 p-1 py-3 text-left"> A2 </th>
+          <th class="w-1 p-1 py-3 text-left"> A3 </th>
+          <th class="w-1 p-2 py-3 text-center text-nowrap"> no DIN </th>
+          <th class="w-1 p-2 py-3 text-center"> Kosten </th>
+          <th class="w-1 p-2 py-3 text-center"> Status </th>
+          <th class="w-1 p-2 py-3 text-center">Action</th>
         </tr>
       </thead>
       <tbody id='pickupjobs' class="divide-y divivde-gray-300">
@@ -131,18 +131,18 @@
     <table class="w-full py-8 table-auto">
       <thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
         <tr>
-          <th class="w-1 p-3 text-center"> ID </th>
-          <th class="w-1 p-3 text-center"> Vorschau </th>
-          <th class="p-3 text-left"> Auftraggeber </th>
-          <th class="p-3 text-left"> PDF </th>
-          <th class="w-1 p-3 text-left"> A0 </th>
-          <th class="w-1 p-3 text-left"> A1 </th>
-          <th class="w-1 p-3 text-left"> A2 </th>
-          <th class="w-1 p-3 text-left"> A3 </th>
-          <th class="w-1 p-3 text-center text-nowrap"> no DIN </th>
-          <th class="w-1 p-3 text-center"> Kosten </th>
-          <th class="w-1 p-3 text-center"> Status </th>
-          <th class="w-1 p-3 text-center">Action</th>
+          <th class="w-1 p-2 py-3 text-center"> ID </th>
+          <th class="w-1 p-2 py-3 text-center"> Vorschau </th>
+          <th class="w-1 p-2 py-3 text-left"> Auftraggeber </th>
+          <th class="p-2 py-3 text-left"> PDF </th>
+          <th class="w-1 p-1 py-3 text-left"> A0 </th>
+          <th class="w-1 p-1 py-3 text-left"> A1 </th>
+          <th class="w-1 p-1 py-3 text-left"> A2 </th>
+          <th class="w-1 p-1 py-3 text-left"> A3 </th>
+          <th class="w-1 p-2 py-3 text-center text-nowrap"> no DIN </th>
+          <th class="w-1 p-2 py-3 text-center"> Kosten </th>
+          <th class="w-1 p-2 py-3 text-center"> Status </th>
+          <th class="w-1 p-2 py-3 text-center">Action</th>
         </tr>
       </thead>
       <tbody id='openjobs' class="divide-y divivde-gray-300">
@@ -160,18 +160,18 @@
     <table class="w-full py-8 table-auto">
       <thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
         <tr>
-          <th class="w-1 p-3 text-center"> ID </th>
-          <th class="w-1 p-3 text-center"> Vorschau </th>
-          <th class="p-3 text-left"> Auftraggeber </th>
-          <th class="p-3 text-left"> PDF </th>
-          <th class="w-1 p-3 text-left"> A0 </th>
-          <th class="w-1 p-3 text-left"> A1 </th>
-          <th class="w-1 p-3 text-left"> A2 </th>
-          <th class="w-1 p-3 text-left"> A3 </th>
-          <th class="w-1 p-3 text-center text-nowrap"> no DIN </th>
-          <th class="w-1 p-3 text-center"> Kosten </th>
-          <th class="w-1 p-3 text-center"> Status </th>
-          <th class="w-1 p-3 text-center">Action</th>
+          <th class="w-1 p-2 py-3 text-center"> ID </th>
+          <th class="w-1 p-2 py-3 text-center"> Vorschau </th>
+          <th class="w-1 p-2 py-3 text-left"> Auftraggeber </th>
+          <th class="p-2 py-3 text-left"> PDF </th>
+          <th class="w-1 p-1 py-3 text-left"> A0 </th>
+          <th class="w-1 p-1 py-3 text-left"> A1 </th>
+          <th class="w-1 p-1 py-3 text-left"> A2 </th>
+          <th class="w-1 p-1 py-3 text-left"> A3 </th>
+          <th class="w-1 p-2 py-3 text-center text-nowrap"> no DIN </th>
+          <th class="w-1 p-2 py-3 text-center"> Kosten </th>
+          <th class="w-1 p-2 py-3 text-center"> Status </th>
+          <th class="w-1 p-2 py-3 text-center">Action</th>
         </tr>
       </thead>
       <tbody id='paidcanceledjobs' class="divide-y divivde-gray-300">