From a0fa933430ff98e746d2d8e7b7ac66144d68e995 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 17 Sep 2019 15:25:32 +0530
Subject: [PATCH] :zap: Improving Lighthouse score

---
 assets/css/styles.scss         |  24 +++----
 assets/css/themes.scss         |   6 +-
 components/history.vue         |   4 +-
 components/settings/swatch.vue | 112 +++++++++++++++++----------------
 pages/index.vue                |  12 ++--
 pages/websocket.vue            |   2 +-
 6 files changed, 82 insertions(+), 78 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index d1059e540..3b92759d2 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -11,16 +11,17 @@ $responsiveWidth: 720px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 ::placeholder {
   color: var(--fg-color);
-  opacity: 0.3;
+  opacity: 0.2;
 }
 
 * {
@@ -91,7 +92,7 @@ button {
   align-items: center;
   justify-content: center;
   margin: 4px;
-  padding: 8px 16px;
+  padding: 0 16px;
   border-radius: 8px;
   background-color: var(--ac-color);
   color: var(--act-color);
@@ -101,6 +102,8 @@ button {
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   fill: var(--act-color);
+  height: 41px;
+  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.02);
 
   span {
     display: inline-flex;
@@ -187,7 +190,6 @@ pre {
   margin: 4px;
   padding: 8px;
   border-radius: 8px;
-  width: calc(100% - 8px);
   background-color: var(--brd-color);
   color: var(--fg-color);
   font-size: 18px;
@@ -208,6 +210,7 @@ pre {
 
 code {
   height: 336px;
+  border-radius: 8px;
 }
 
 .hljs,
@@ -256,13 +259,13 @@ input[type="checkbox"] {
 .disabled,
 [disabled] {
   background-color: var(--err-color);
-  color: #b2b2b2;
-  fill: #b2b2b2;
+  color: var(--fg-color);
+  fill: var(--fg-color);
   cursor: default;
 
   &.icon {
-    color: #b2b2b2;
-    fill: #b2b2b2;
+    color: var(--fg-color);
+    fill: var(--fg-color);
   }
 }
 
@@ -451,8 +454,7 @@ input[type="radio"] + label {
 }
 
 input[type="radio"]:checked + label {
-  color: var(--ac-color);
-  border-color: var(--ac-color);
+  border-color: var(--fg-color);
 }
 
 input[type="radio"]:checked + label + div.tab {
diff --git a/assets/css/themes.scss b/assets/css/themes.scss
index 67f48f424..e868a8334 100644
--- a/assets/css/themes.scss
+++ b/assets/css/themes.scss
@@ -11,13 +11,13 @@
   // Background color
   --bg-color: #282a36;
   // Auto-complete color
-  --atc-color: #3C4556;
+  --atc-color: #20212b;
   // Text color
-  --fg-color: #d0d1dc;
+  --fg-color: #c4c6d4;
   // Border color
   --brd-color: #333545;
   // Error color
-  --err-color: #3C4556;
+  --err-color: #303341;
   // Active color
   --ac-color: #50fa7b;
   // Active text color
diff --git a/components/history.vue b/components/history.vue
index 4e42f4807..d772ce4d6 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -22,14 +22,14 @@
         </li>
         <div class="show-on-small-screen">
           <li>
-            <button class="icon" :id="'delete-button#'+index" :disabled="isClearingHistory" @click="deleteHistory(entry)">
+            <button class="icon" :id="'delete-button#'+index" :disabled="isClearingHistory" @click="deleteHistory(entry)" aria-label="Delete">
               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                 <path d="M5.633 22.031c1.135 1.313 3.735 1.969 6.334 1.969 2.601 0 5.199-.656 6.335-1.969.081-.404 3.698-18.468 3.698-18.882 0-2.473-7.338-3.149-10-3.149-4.992 0-10 1.242-10 3.144 0 .406 3.556 18.488 3.633 18.887zm6.418-16.884c-4.211 0-7.625-.746-7.625-1.667s3.414-1.667 7.625-1.667 7.624.746 7.624 1.667-3.413 1.667-7.624 1.667z"/>
               </svg>
             </button>
           </li>
           <li>
-            <button class="icon" :id="'use-button#'+index" :disabled="isClearingHistory" @click="useHistory(entry)">
+            <button class="icon" :id="'use-button#'+index" :disabled="isClearingHistory" @click="useHistory(entry)" aria-label="Edit">
               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                 <path d="M19.769 9.923l-12.642 12.639-7.127 1.438 1.438-7.128 12.641-12.64 5.69 5.691zm1.414-1.414l2.817-2.82-5.691-5.689-2.816 2.817 5.69 5.692z"/>
               </svg>
diff --git a/components/settings/swatch.vue b/components/settings/swatch.vue
index 5339a8391..301ee8038 100644
--- a/components/settings/swatch.vue
+++ b/components/settings/swatch.vue
@@ -1,68 +1,70 @@
 <template>
-    <div class="color" :data-color="color">
-        <span :style="{backgroundColor: color}" class="preview">
-            <svg v-if="active" class="activeTick" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z"/></svg>
-        </span>
-        {{ name || color }}
-    </div>
+  <div class="color" :data-color="color">
+    <span :style="{backgroundColor: color}" class="preview">
+      <svg v-if="active" class="activeTick" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+        <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/>
+      </svg>
+    </span>
+    {{ name || color }}
+  </div>
 </template>
 
 <style lang="scss">
-    .color {
-        display: inline-block;
-        vertical-align: middle;
+  .color {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    margin: 4px;
+    background-color: var(--brd-color);
+    color: var(--fg-color);
+    border-radius: 8px;
+    cursor: pointer;
+    height: 41px;
 
-        padding: 8px 16px;
-        margin: 4px;
-        background-color: rgba(93, 93, 93, 0.2);
-        border-radius: 8px;
-        cursor: pointer;
-
-        &.active {
-            background-color: rgba(93, 93, 93, 0.3);
-        }
-
-        .preview {
-            vertical-align: middle;
-            display: inline-block;
-            width: 32px;
-            height: 32px;
-            border-radius: 100%;
-            margin-right: 8px;
-
-            position: relative;
-            .activeTick {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                fill: white;
-            }
-        }
+    &.active {
+      background-color: var(--bg-dark-color);
     }
 
-    .color.vibrant {
-        .preview .activeTick {
-            fill: black;
-        }
+    .preview {
+      vertical-align: middle;
+      display: inline-block;
+      border-radius: 100%;
+      margin-right: 8px;
+      padding: 16px;
+      position: relative;
+
+      .activeTick {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          fill: #fff;
+      }
     }
+  }
+
+  .color.vibrant {
+    .preview .activeTick {
+      fill: #000;
+    }
+  }
 </style>
 
 <script>
-    export default {
-        props: {
-            'color': {
-                type: String,
-                required: true
-            },
-            'name': {
-                type: String
-            },
-
-            'active': {
-                type: Boolean,
-                default: false
-            }
-        }
+  export default {
+    props: {
+      'color': {
+        type: String,
+        required: true
+      },
+      'name': {
+        type: String
+      },
+      'active': {
+        type: Boolean,
+        default: false
+      }
     }
+  }
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index a05acbd47..e4a4d4280 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -144,10 +144,10 @@
       <div v-if="!rawInput">
         <ul v-for="(param, index) in bodyParams" :key="index">
           <li>
-            <input :placeholder="'Key '+(index+1)" :name="'bparam'+index" v-model="param.key" @keyup.prevent="setRouteQueryState" autofocus>
+            <input :placeholder="'key '+(index+1)" :name="'bparam'+index" v-model="param.key" @keyup.prevent="setRouteQueryState" autofocus>
           </li>
           <li>
-            <input :placeholder="'Value '+(index+1)" :id="'bvalue'+index" :name="'bvalue'+index" v-model="param.value" @keyup.prevent="setRouteQueryState">
+            <input :placeholder="'value '+(index+1)" :id="'bvalue'+index" :name="'bvalue'+index" v-model="param.value" @keyup.prevent="setRouteQueryState">
           </li>
           <div>
             <li>
@@ -283,10 +283,10 @@
           </ul>
           <ul v-for="(header, index) in headers" :key="index">
             <li>
-              <input :placeholder="'Header '+(index+1)" :name="'header'+index" v-model="header.key" @keyup.prevent="setRouteQueryState" autofocus>
+              <input :placeholder="'header '+(index+1)" :name="'header'+index" v-model="header.key" @keyup.prevent="setRouteQueryState" autofocus>
             </li>
             <li>
-              <input :placeholder="'Value '+(index+1)" :name="'value'+index" v-model="header.value" @keyup.prevent="setRouteQueryState">
+              <input :placeholder="'value '+(index+1)" :name="'value'+index" v-model="header.value" @keyup.prevent="setRouteQueryState">
             </li>
             <div>
               <li>
@@ -322,10 +322,10 @@
           </ul>
           <ul v-for="(param, index) in params" :key="index">
             <li>
-              <input :placeholder="'Parameter '+(index+1)" :name="'param'+index" v-model="param.key" autofocus>
+              <input :placeholder="'parameter '+(index+1)" :name="'param'+index" v-model="param.key" autofocus>
             </li>
             <li>
-              <input :placeholder="'Value '+(index+1)" :name="'value'+index" v-model="param.value">
+              <input :placeholder="'value '+(index+1)" :name="'value'+index" v-model="param.value">
             </li>
             <div>
               <li>
diff --git a/pages/websocket.vue b/pages/websocket.vue
index 78fa2a53e..fcee649e5 100644
--- a/pages/websocket.vue
+++ b/pages/websocket.vue
@@ -64,7 +64,7 @@
     padding: 8px 16px;
     width: calc(100% - 8px);
     border-radius: 8px;
-    background-color: var(--bg-dark-color);
+    background-color: var(--brd-color);
     color: var(--fg-color);
     height: 256px;
     overflow: auto;