From 60c82fa144a76a032a69c2210e8b79fa3d491ce0 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 27 Jan 2020 11:16:49 +0530
Subject: [PATCH] :lipstick: Updating the UI and style files

---
 assets/css/styles.scss        |  4 ++++
 components/firebase/feeds.vue |  4 ----
 components/history.vue        |  4 ----
 pages/index.vue               | 36 +++++++++++++++++++++++++----------
 pages/settings.vue            | 14 +++++++++++++-
 5 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 7f6c9d5ec60..87cf8afc957 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -387,6 +387,10 @@ h3.title {
   color: var(--fg-light-color);
 }
 
+.bg-color {
+  background-color: transparent;
+}
+
 button {
   display: inline-flex;
   align-items: center;
diff --git a/components/firebase/feeds.vue b/components/firebase/feeds.vue
index 547a8cecd18..076dcdf9776 100644
--- a/components/firebase/feeds.vue
+++ b/components/firebase/feeds.vue
@@ -38,10 +38,6 @@
 .virtual-list {
   max-height: calc(100vh - 288px);
 }
-
-.bg-color {
-  background-color: transparent;
-}
 </style>
 
 <script>
diff --git a/components/history.vue b/components/history.vue
index c769aa30c78..c1266772d70 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -314,10 +314,6 @@ ol li {
   padding: 0 0 8px;
 }
 
-.bg-color {
-  background-color: transparent;
-}
-
 @media (max-width: 720px) {
   .virtual-list.filled {
     min-height: 320px;
diff --git a/pages/index.vue b/pages/index.vue
index cb6bc3d95d4..b926ec18470 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -28,8 +28,8 @@
                 v-model="preRequestScript"
                 :lang="'javascript'"
                 :options="{
-                  maxLines: responseBodyMaxLines,
-                  minLines: '16',
+                  maxLines: '16',
+                  minLines: '8',
                   fontSize: '16px',
                   autoScrollEditorIntoView: true,
                   showPrintMargin: false,
@@ -359,29 +359,42 @@
                 v-model="testScript"
                 :lang="'javascript'"
                 :options="{
-                  maxLines: responseBodyMaxLines,
-                  minLines: '16',
+                  maxLines: '16',
+                  minLines: '8',
                   fontSize: '16px',
                   autoScrollEditorIntoView: true,
                   showPrintMargin: false,
                   useWorker: false
                 }"
               />
-              <label>Test Reports<span v-if="testReports"></span></label>
               <div v-if="testReports">
+                <div class="flex-wrap">
+                  <label>Test Reports</label>
+                  <div>
+                    <button
+                      class="icon"
+                      @click="clearContent('tests', $event)"
+                      v-tooltip.bottom="$t('clear')"
+                    >
+                      <i class="material-icons">clear_all</i>
+                    </button>
+                  </div>
+                </div>
                 <div v-for="testReport in testReports">
-                  <div v-if="testReport.result">
-                    <span :class="testReport.styles.class">
+                  <div v-if="testReport.result" class="flex-wrap">
+                    <span :class="testReport.styles.class" class="info">
                       <i class="material-icons">
                         {{ testReport.styles.icon }}
                       </i>
-                      {{ testReport.result }}
+                      <span>&nbsp; {{ testReport.result }}</span>
                     </span>
                     <ul v-if="testReport.message">
-                      <li>{{ testReport.message }}</li>
+                      <li>
+                        <label>{{ testReport.message }}</label>
+                      </li>
                     </ul>
                   </div>
-                  <div v-else-if="testReport.startBlock">
+                  <div v-else-if="testReport.startBlock" class="info">
                     <h4>{{ testReport.startBlock }}</h4>
                   </div>
                   <div v-else-if="testReport.endBlock"><br /></div>
@@ -2605,6 +2618,9 @@ export default {
           break;
         case "tokenReqs":
           this.tokenReqs = [];
+        case "tests":
+          this.testReports = null;
+          break;
         default:
           (this.label = ""),
             (this.method = "GET"),
diff --git a/pages/settings.vue b/pages/settings.vue
index 1df3fbc3ff9..5b4e13bf2c3 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -172,7 +172,7 @@
             <label for="url">{{ $t("url") }}</label>
             <button
               class="icon"
-              @click="settings.PROXY_URL = `https://postwoman.apollotv.xyz/`"
+              @click="resetProxy"
               v-tooltip.bottom="$t('reset_default')"
             >
               <i class="material-icons">clear_all</i>
@@ -326,6 +326,7 @@ export default {
         PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
       },
 
+      doneButton: '<i class="material-icons">done</i>',
       fb
     };
   },
@@ -456,6 +457,17 @@ export default {
     initSettings() {
       fb.writeSettings("syncHistory", true);
       fb.writeSettings("syncCollections", false);
+    },
+    resetProxy(e) {
+      this.settings.PROXY_URL = `https://postwoman.apollotv.xyz/`;
+      e.target.innerHTML = this.doneButton;
+      this.$toast.info(this.$t("cleared"), {
+        icon: "clear_all"
+      });
+      setTimeout(
+        () => (e.target.innerHTML = '<i class="material-icons">clear_all</i>'),
+        1000
+      );
     }
   },