From 65ea597c080ba158e4a987db0eb4bdd47049cdd6 Mon Sep 17 00:00:00 2001
From: Adhityaa Chandrasekar <adtac@adtac.in>
Date: Fri, 12 Apr 2019 20:21:46 -0400
Subject: [PATCH] dashboard: use solid backgrounds and boxes

---
 frontend/dashboard.html           | 68 +++++++++++++++++++------------
 frontend/js/dashboard.js          |  2 +-
 frontend/sass/dashboard-main.scss | 68 +++++++++++++++++++++++--------
 3 files changed, 93 insertions(+), 45 deletions(-)

diff --git a/frontend/dashboard.html b/frontend/dashboard.html
index dba5904..80b6922 100644
--- a/frontend/dashboard.html
+++ b/frontend/dashboard.html
@@ -355,39 +355,53 @@
       <div id="danger-view" class="view hidden">
         <div class="view-inside">
           <div class="mid-view">
-            <div class="tabs-container">
-              <div class="tab">
-                <ul class="tabs">
-                  <li class="tab-link original current" data-tab="danger-tab-1">Freeze Comments</li>
-                  <li class="tab-link current" data-tab="danger-tab-2">Delete Domain</li>
-                </ul>
+            <div class="center center-title">
+              Danger Zone
+            </div>
 
-                <div id="danger-tab-1" class="content original current">
-                  <div class="box" v-if="domains[cd].state == 'frozen'">
-                    <div class="box-subtitle">
-                      If you desire to re-allow comments again on your website, you can do so. You can, of course, freeze the site again in the future.
+            <div class="action-buttons-container">
+              <div class="action-buttons">
+                <div class="action-button" v-if="domains[cd].state != 'frozen'">
+                  <div class="left">
+                    <div class="title">
+                      Freeze Domain
+                    </div>
+                    <div class="subtitle">
+                      Freezing your domain will disable new comments and voting temporarily. You may unfreeze the domain later.
                     </div>
-
-                    <button onclick="document.location.hash='#unfreeze-domain-modal'" class="button green-button">Unfreeze Domain</button>
                   </div>
-
-                  <div class="box" v-if="domains[cd].state != 'frozen'">
-                    <div class="box-subtitle">
-                      If you desire to temporarily freeze new comments (domain-wide), thereby making it read-only, you can do so. You can choose to unfreeze later; this is temporary.
-                    </div>
-
-                    <button id="orange-button" onclick="document.location.hash='#freeze-domain-modal'" class="button orange-button">Freeze Domain</button>
+                  <div class="right">
+                    <button onclick="document.location.hash='#freeze-domain-modal'"
+                            class="button orange-button">Freeze</button>
                   </div>
                 </div>
-              </div>
-
-              <div id="danger-tab-2" class="content">
-                <div class="box">
-                  <div class="box-subtitle">
-                    Want to completely remove Commento from your website? This will permanently delete all comments and there is literally no way to retrieve your data once you do this.
+                <div class="action-button" v-if="domains[cd].state == 'frozen'">
+                  <div class="left">
+                    <div class="title">
+                      Unfreeze Domain
+                    </div>
+                    <div class="subtitle">
+                      Unfreezing your domain will allow readers to create new comments and vote on comments again. You may re-freeze the domain later.
+                    </div>
+                  </div>
+                  <div class="right">
+                    <button onclick="document.location.hash='#unfreeze-domain-modal'"
+                            class="button green-button">Unfreeze</button>
+                  </div>
+                </div>
+                <div class="action-button">
+                  <div class="left">
+                    <div class="title">
+                      Delete Domain
+                    </div>
+                    <div class="subtitle">
+                      This will permanently delete all comments and all data associated with your domain. There is literally no way to retrieve your data once you do this. Please be certain.
+                    </div>
+                  </div>
+                  <div class="right">
+                    <button onclick="document.location.hash='#delete-domain-modal'"
+                            class="button big-red-button">Delete</button>
                   </div>
-
-                  <button id="big-red-button" class="button big-red-button" onclick="document.location.hash='#delete-domain-modal'">Delete Domain</button>
                 </div>
               </div>
             </div>
diff --git a/frontend/js/dashboard.js b/frontend/js/dashboard.js
index bd455d8..bf68905 100644
--- a/frontend/js/dashboard.js
+++ b/frontend/js/dashboard.js
@@ -59,7 +59,7 @@
       {
         "id": "danger",
         "text": "Danger Zone",
-        "meaning": "Delete or freeze domain",
+        "meaning": "Here be dragons",
         "selected": false,
         "open": global.dangerOpen,
       },
diff --git a/frontend/sass/dashboard-main.scss b/frontend/sass/dashboard-main.scss
index e20e505..3d64f2f 100644
--- a/frontend/sass/dashboard-main.scss
+++ b/frontend/sass/dashboard-main.scss
@@ -30,9 +30,12 @@ body {
     margin: 0px;
     padding: 0px;
     list-style: none;
-    border-bottom: 1px solid $gray-4;
+    border-bottom: 1px solid $gray-1;
 
     li {
+      font-weight: bold;
+      color: $gray-7;
+      font-size: 14px;
       background: none;
       display: inline-block;
       padding: 10px 15px;
@@ -42,8 +45,14 @@ body {
     }
 
     li.current {
-      border-bottom: 1px solid $blue-6;
       transition: all 0.1s;
+      background: $gray-1;
+      color: $blue-7;
+    }
+
+    li.current:hover {
+      background: $gray-1;
+      color: $blue-7;
     }
   }
 
@@ -66,6 +75,38 @@ body {
   }
 }
 
+.action-buttons-container {
+  .action-buttons {
+    .action-button {
+      padding: 8px 16px 8px 16px;
+      display: flex;
+      border: 1px solid $gray-2;
+      margin: 8px;
+
+      .left {
+        padding: 8px;
+
+        .title {
+          font-weight: bold;
+          color: $gray-7;
+          font-size: 14px;
+        }
+
+        .subtitle {
+          color: $gray-6;
+          font-size: 14px;
+        }
+      }
+
+      .right {
+        float: right;
+        height: 100%;
+        margin: auto;
+      }
+    }
+  }
+}
+
 @import "email-main.scss";
 
 .mod-emails-container {
@@ -240,7 +281,7 @@ body {
     }
 
     .setting-subtitle {
-      color: $gray-5;
+      color: $gray-6;
     }
 
     .super-setting {
@@ -265,23 +306,17 @@ body {
 
   .pane-setting:hover {
     color: $gray-6;
-    -webkit-box-shadow: inset -2px 0px 0 -1px $gray-4;
-    -moz-box-shadow: inset -2px 0px 0 -1px $gray-4;
-    box-shadow: inset -2px 0px 0 -1px $gray-4;
+    background: $gray-1;
   }
 
   .selected {
-    color: $blue-6;
-    -webkit-box-shadow: inset -2px 0px 0 -1px $blue-6;
-    -moz-box-shadow: inset -2px 0px 0 -1px $blue-6;
-    box-shadow: inset -2px 0px 0 -1px $blue-6;
+    color: $blue-7;
+    background: $gray-2;
   }
 
   .selected:hover {
     color: $blue-7;
-    -webkit-box-shadow: inset -2px 0px 0 -1px $blue-6;
-    -moz-box-shadow: inset -2px 0px 0 -1px $blue-6;
-    box-shadow: inset -2px 0px 0 -1px $blue-6;
+    background: $gray-2;
   }
 }
 
@@ -626,12 +661,11 @@ foreignObject {
 }
 
 .red-button {
-  border: 1px solid $gray-3;
-  outline: none;
+  color: $red-8;
 }
 
 .red-button:hover {
-  border: 1px solid $red-6;
+  color: $red-7;
 }
 
 .green-button {
@@ -647,7 +681,7 @@ foreignObject {
 }
 
 .orange-button {
-  color: $orange-7;
+  color: $orange-8;
 }
 
 .orange-button:hover {