dashboard: use solid backgrounds and boxes

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="center center-title">
-              <div class="tab">
+              Danger Zone
-                <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 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>
 
-                    <button onclick="document.location.hash='#unfreeze-domain-modal'" class="button green-button">Unfreeze Domain</button>
+            <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">
-                  <div class="box" v-if="domains[cd].state != 'frozen'">
+                      Freezing your domain will disable new comments and voting temporarily. You may unfreeze the domain later.
-                    <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>
                   </div>
+                  <div class="right">
+                    <button onclick="document.location.hash='#freeze-domain-modal'"
+                            class="button orange-button">Freeze</button>
                   </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>
-
+                <div class="action-button" v-if="domains[cd].state == 'frozen'">
-                  <button id="big-red-button" class="button big-red-button" onclick="document.location.hash='#delete-domain-modal'">Delete Domain</button>
+                  <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>
                 </div>
               </div>
             </div>

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,
       },

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;
+    background: $gray-1;
-    -moz-box-shadow: inset -2px 0px 0 -1px $gray-4;
-    box-shadow: inset -2px 0px 0 -1px $gray-4;
   }
 
   .selected {
-    color: $blue-6;
+    color: $blue-7;
-    -webkit-box-shadow: inset -2px 0px 0 -1px $blue-6;
+    background: $gray-2;
-    -moz-box-shadow: inset -2px 0px 0 -1px $blue-6;
-    box-shadow: inset -2px 0px 0 -1px $blue-6;
   }
 
   .selected:hover {
     color: $blue-7;
-    -webkit-box-shadow: inset -2px 0px 0 -1px $blue-6;
+    background: $gray-2;
-    -moz-box-shadow: inset -2px 0px 0 -1px $blue-6;
-    box-shadow: inset -2px 0px 0 -1px $blue-6;
   }
 }
 
@@ -626,12 +661,11 @@ foreignObject {
 }
 
 .red-button {
-  border: 1px solid $gray-3;
+  color: $red-8;
-  outline: none;
 }
 
 .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 {