From 641e36977bbc2e2aa87eafc5e24ca0fcc9f4499e Mon Sep 17 00:00:00 2001
From: Klaas van Schelven <klaas@vanschelven.com>
Date: Mon, 20 Nov 2023 17:11:57 +0100
Subject: [PATCH] Resolve/mute buttons at top of detail page (not yet
 implemented)

---
 issues/templates/issues/issue_detail.html | 18 ++++---
 theme/static/css/dist/styles.css          | 59 +++++++++++++++++++++++
 2 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/issues/templates/issues/issue_detail.html b/issues/templates/issues/issue_detail.html
index fa1a7b0..e9c017c 100644
--- a/issues/templates/issues/issue_detail.html
+++ b/issues/templates/issues/issue_detail.html
@@ -2,15 +2,19 @@
 {% load static %}
 
 {% block content %}
-<div class="m-4">
-    <h1 class="text-4xl mt-4">{{ issue.get_main_exception.type }}</h1>
-    <div class="text-xl">{{ issue.get_main_exception.value }}</div>
-    {% if parsed_data.request %}<div class="italic mt-4">{{ parsed_data.request.method }} {{ parsed_data.request.url }}</div>{% endif %}
-    <div><span class="font-bold">ingest.management.commands.raise_exception</span> in <span class="font-bold">raise_exception</span></div>
+<div class="m-4 flex">
+    <div>
+        <h1 class="text-4xl">{{ issue.get_main_exception.type }}</h1>
+        <div class="text-xl">{{ issue.get_main_exception.value }}</div>
+        {% if parsed_data.request %}<div class="italic mt-4">{{ parsed_data.request.method }} {{ parsed_data.request.url }}</div>{% endif %}
+        <div><span class="font-bold">ingest.management.commands.raise_exception</span> in <span class="font-bold">raise_exception</span></div>
+    </div>
+    <div class="ml-auto">
+        <button class="font-bold text-slate-800 border-slate-500 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 bg-cyan-200 hover:bg-cyan-400 active:ring rounded-md">Resolve</button>
+        <button class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 hover:bg-slate-200 active:ring rounded-md">Mute</button>
+    </div>
 </div>
 
-
-
 <div class="ml-4 mb-4 mr-4 border-2">
 
 <div class="flex bg-slate-50 border-b-2">
diff --git a/theme/static/css/dist/styles.css b/theme/static/css/dist/styles.css
index 8b73f2f..fed61b4 100644
--- a/theme/static/css/dist/styles.css
+++ b/theme/static/css/dist/styles.css
@@ -836,6 +836,10 @@ select {
   margin-top: 1.5rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .block {
   display: block;
 }
@@ -981,6 +985,31 @@ select {
   border-color: rgb(100 116 139 / var(--tw-border-opacity));
 }
 
+.border-cyan-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(21 94 117 / var(--tw-border-opacity));
+}
+
+.border-cyan-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(8 145 178 / var(--tw-border-opacity));
+}
+
+.border-cyan-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(14 116 144 / var(--tw-border-opacity));
+}
+
+.border-slate-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 65 85 / var(--tw-border-opacity));
+}
+
+.border-slate-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 41 59 / var(--tw-border-opacity));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1006,6 +1035,16 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-cyan-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(6 182 212 / var(--tw-bg-opacity));
+}
+
+.bg-cyan-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1126,6 +1165,16 @@ select {
   color: rgb(8 145 178 / var(--tw-text-opacity));
 }
 
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-slate-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 41 59 / var(--tw-text-opacity));
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1154,6 +1203,16 @@ select {
   background-color: rgb(148 163 184 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-cyan-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 94 117 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-cyan-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 211 238 / var(--tw-bg-opacity));
+}
+
 .active\:ring:active {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);