Put debug log in a modal

Also dedupe close-button style

// FREEBIE

background.html

@@ -307,22 +307,24 @@
     <button class='close'>&times;</button>
   </script>
   <script type='text/x-tmpl-mustache' id='debug-log'>
-    <a class='x close'>&times;</a>
+    <div class='content'>
-    <h1>{{ title }}</h1>
+      <a class='x close'>&times;</a>
-    <p> {{ debugLogExplanation }}</p>
+      <h1>{{ title }}</h1>
-    <form>
+      <p> {{ debugLogExplanation }}</p>
-      <textarea rows='5'></textarea>
+      <form>
-      <input class='submit' type='submit' value='{{ submit }}' />
+        <textarea rows='5'></textarea>
-      <button class='close'>{{ cancel }}</button>
+        <input class='submit' type='submit' value='{{ submit }}' />
-    </form>
+        <button class='close'>{{ cancel }}</button>
-    <div class='result'>
+      </form>
-      <a target='_blank'></a>
+      <div class='result'>
-      <div><button class='close'>{{ close }}</button></div>
+        <a target='_blank'></a>
+        <div><button class='close'>{{ close }}</button></div>
+      </div>
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='settings'>
     <div class='content'>
-      <div class='close'>x</div>
+      <a class='x close'>&times;</a>
       <h3>Notifications</h3>
       <div>
         <input type='radio' name='notifications' id='notification-setting-message' value='message'>

js/views/debug_log_view.js

@@ -7,7 +7,7 @@
 
     Whisper.DebugLogView = Whisper.View.extend({
         templateName: 'debug-log',
-        className: 'debug-log',
+        className: 'debug-log modal',
         initialize: function() {
             this.render();
             this.$('textarea').val(console.get());

stylesheets/_global.scss

@@ -414,32 +414,12 @@ $avatar-size: 44px;
 }
 
 .debug-log {
-  position: absolute;
+  &.modal .content {
-  width: 100%;
+    max-width: 90%;
-  height: 100%;
+  }
-  top: 0;
-  left: 0;
-  padding: 1em;
-  background: $grey_l;
-  z-index: 1;
-  overflow-y: auto;
 
-  a.x {
+  ::-webkit-scrollbar-thumb {
-    display: inline-block;
+    background: rgba(0,0,0,0.15);
-    float: right;
-    cursor: pointer;
-
-    font-family: sans-serif;
-    color: white;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    padding: 0px;
-
-    background: #666;
-    color: #fff;
-    text-align: center;
-    font-size: 19px;
   }
 
   textarea {
@@ -490,4 +470,22 @@ $avatar-size: 44px;
     overflow: auto;
     box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
   }
+
+  a.x {
+    display: inline-block;
+    float: right;
+    cursor: pointer;
+
+    font-family: sans-serif;
+    color: white;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    padding: 0px;
+
+    background: #666;
+    color: #fff;
+    text-align: center;
+    font-size: 19px;
+  }
 }

stylesheets/_index.scss

@@ -262,19 +262,3 @@ input.search {
     top: -30px;
   }
 }
-.settings {
-  .close {
-    float: right;
-    font-family: sans-serif;
-    color: white;
-    cursor: pointer;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    padding: 0px;
-
-    background: #666;
-    color: #fff;
-    text-align: center;
-  }
-}

stylesheets/manifest.css

@@ -328,50 +328,30 @@ img.emoji {
 @keyframes rotate {
   to {
     transform: rotate(360deg); } }
-.debug-log {
+.debug-log.modal .content {
-  position: absolute;
+  max-width: 90%; }
+.debug-log ::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15); }
+.debug-log textarea {
   width: 100%;
-  height: 100%;
+  resize: vertical; }
-  top: 0;
+.debug-log button, .debug-log input[type=submit] {
-  left: 0;
+  border-radius: 4px;
+  border: solid 1px #ccc;
+  cursor: pointer;
+  margin: 1em auto;
   padding: 1em;
+  font-family: inherit;
+  color: #616161;
   background: #f3f3f3;
-  z-index: 1;
+  box-shadow: 0 0 10px -5px rgba(97, 97, 97, 0.5); }
-  overflow-y: auto; }
+  .debug-log button:hover, .debug-log input[type=submit]:hover {
-  .debug-log a.x {
+    color: black;
-    display: inline-block;
+    box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); }
-    float: right;
+.debug-log .result {
-    cursor: pointer;
+  display: none;
-    font-family: sans-serif;
+  text-align: center;
-    color: white;
+  -webkit-user-select: text; }
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    padding: 0px;
-    background: #666;
-    color: #fff;
-    text-align: center;
-    font-size: 19px; }
-  .debug-log textarea {
-    width: 100%;
-    resize: vertical; }
-  .debug-log button, .debug-log input[type=submit] {
-    border-radius: 4px;
-    border: solid 1px #ccc;
-    cursor: pointer;
-    margin: 1em auto;
-    padding: 1em;
-    font-family: inherit;
-    color: #616161;
-    background: #f3f3f3;
-    box-shadow: 0 0 10px -5px rgba(97, 97, 97, 0.5); }
-    .debug-log button:hover, .debug-log input[type=submit]:hover {
-      color: black;
-      box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); }
-  .debug-log .result {
-    display: none;
-    text-align: center;
-    -webkit-user-select: text; }
 
 .modal {
   position: absolute;
@@ -391,6 +371,20 @@ img.emoji {
     border-radius: 10px;
     overflow: auto;
     box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); }
+  .modal a.x {
+    display: inline-block;
+    float: right;
+    cursor: pointer;
+    font-family: sans-serif;
+    color: white;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    padding: 0px;
+    background: #666;
+    color: #fff;
+    text-align: center;
+    font-size: 19px; }
 
 .gutter {
   padding: 36px 0 0; }
@@ -593,19 +587,6 @@ input.search {
     border-color: transparent transparent #2eace0 transparent;
     top: -30px; }
 
-.settings .close {
-  float: right;
-  font-family: sans-serif;
-  color: white;
-  cursor: pointer;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  padding: 0px;
-  background: #666;
-  color: #fff;
-  text-align: center; }
-
 .conversation-title {
   display: block;
   line-height: 36px;