feat #32: improve approval UI

polyculeconnect/static/style/index.css

@@ -63,7 +63,7 @@ body {
 
 .form-buttons {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
 }
 
 .form-input {
@@ -92,3 +92,7 @@ body {
 .button-accept {
     background-color: var(--logo-blue);
 }
+
+.button-cancel {
+    background-color: var(--logo-pink);
+}

polyculeconnect/templates/approval.html

@@ -1,10 +1,7 @@
 {{ 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">
@@ -18,26 +15,22 @@
     </div>
     <hr class="dex-separator">
 
-    <div>
-        <div class="theme-form-row">
-            <form method="post">
+    <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="dex-btn theme-btn--success">
+            <button type="submit" class="button button-accept">
                 <span class="dex-btn-text">Grant Access</span>
             </button>
         </form>
-        </div>
-        <div class="theme-form-row">
-            <form method="post">
+        <form method="post" class="container-form">
             <input type="hidden" name="req" value="{{ .AuthReqID }}" />
             <input type="hidden" name="approval" value="rejected">
-                <button type="submit" class="dex-btn theme-btn-provider">
+            <button type="submit" class="button button-cancel">
                 <span class="dex-btn-text">Cancel</span>
             </button>
         </form>
     </div>
-    </div>
 
 </div>