From d18c91da23780c9c74a853befcc7636a510f1ad5 Mon Sep 17 00:00:00 2001
From: Melora Hugues <dev@faercol.me>
Date: Sat, 4 Nov 2023 09:14:41 +0100
Subject: [PATCH] feat #32: improve approval UI

---
 polyculeconnect/static/style/index.css  |  6 +++-
 polyculeconnect/templates/approval.html | 48 +++++++++++--------------
 2 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/polyculeconnect/static/style/index.css b/polyculeconnect/static/style/index.css
index 80586bf..feb6197 100644
--- a/polyculeconnect/static/style/index.css
+++ b/polyculeconnect/static/style/index.css
@@ -63,7 +63,7 @@ body {
 
 .form-buttons {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
 }
 
 .form-input {
@@ -91,4 +91,8 @@ body {
 
 .button-accept {
     background-color: var(--logo-blue);
+}
+
+.button-cancel {
+    background-color: var(--logo-pink);
 }
\ No newline at end of file
diff --git a/polyculeconnect/templates/approval.html b/polyculeconnect/templates/approval.html
index df734fc..f0097ad 100644
--- a/polyculeconnect/templates/approval.html
+++ b/polyculeconnect/templates/approval.html
@@ -1,42 +1,34 @@
 {{ template "header.html" . }}
 
-<div class="theme-panel">
-    <h2 class="theme-heading">Grant Access</h2>
-
-    <hr class="dex-separator">
-    <div>
+<div class="container">
+    <div class="container-content">
         {{ if .Scopes }}
-        <div class="dex-subtle-text">{{ .Client }} would like to:</div>
-        <ul class="dex-list">
+        <div>{{ .Client }} would like to:</div>
+        <ul>
             {{ range $scope := .Scopes }}
             <li>{{ $scope }}</li>
             {{ end }}
         </ul>
         {{ else }}
-        <div class="dex-subtle-text">{{ .Client }} has not requested any personal information</div>
+        <div>{{ .Client }} has not requested any personal information</div>
         {{ end }}
     </div>
-    <hr class="dex-separator">
 
-    <div>
-        <div class="theme-form-row">
-            <form method="post">
-                <input type="hidden" name="req" value="{{ .AuthReqID }}" />
-                <input type="hidden" name="approval" value="approve">
-                <button type="submit" class="dex-btn theme-btn--success">
-                    <span class="dex-btn-text">Grant Access</span>
-                </button>
-            </form>
-        </div>
-        <div class="theme-form-row">
-            <form method="post">
-                <input type="hidden" name="req" value="{{ .AuthReqID }}" />
-                <input type="hidden" name="approval" value="rejected">
-                <button type="submit" class="dex-btn theme-btn-provider">
-                    <span class="dex-btn-text">Cancel</span>
-                </button>
-            </form>
-        </div>
+    <div class="form-buttons">
+        <form method="post" class="container-form">
+            <input type="hidden" name="req" value="{{ .AuthReqID }}" />
+            <input type="hidden" name="approval" value="approve">
+            <button type="submit" class="button button-accept">
+                <span>Grant Access</span>
+            </button>
+        </form>
+        <form method="post" class="container-form">
+            <input type="hidden" name="req" value="{{ .AuthReqID }}" />
+            <input type="hidden" name="approval" value="rejected">
+            <button type="submit" class="button button-cancel">
+                <span>Cancel</span>
+            </button>
+        </form>
     </div>
 
 </div>
-- 
2.45.2