From b7ac58b31a5c4824cd5dc05323e05d1e1b8699b9 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 13 Sep 2019 23:17:34 +0530
Subject: [PATCH] :lipstick: Minor UI update

---
 assets/css/styles.scss |  1 +
 pages/websocket.vue    | 27 ++++++++++++++++++++++-----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index b14cb7268..a747de106 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -294,6 +294,7 @@ input[type="checkbox"] {
 [disabled] {
   background-color: var(--err-color);
   color: #b2b2b2;
+  fill: #b2b2b2;
   cursor: default;
 
   &.icon {
diff --git a/pages/websocket.vue b/pages/websocket.vue
index 641e90942..56d11d507 100644
--- a/pages/websocket.vue
+++ b/pages/websocket.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="cyan" label="Request" ref="request">
+    <pw-section class="blue" label="Request" ref="request">
       <ul>
         <li>
           <label for="url">URL</label>
@@ -8,7 +8,17 @@
         </li>
         <li>
           <label for="action" class="hide-on-small-screen">&nbsp;</label>
-          <button :disabled="!urlValid" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
+          <button :disabled="!urlValid" name="action" @click="toggleConnection">
+            {{ toggleConnectionVerb }}
+            <span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" v-if="!connectionState">
+                <path d="M21.921 2.081c2.771 2.772 2.771 7.269 0 10.042l-3.84 3.839-2.121-2.122 3.839-3.84c1.599-1.598 1.599-4.199-.001-5.797-1.598-1.599-4.199-1.599-5.797-.001l-3.84 3.839-2.121-2.121 3.84-3.839c2.771-2.773 7.267-2.773 10.041 0zm-8.082 13.879l-3.84 3.839c-1.598 1.6-4.199 1.599-5.799 0-1.598-1.598-1.598-4.2 0-5.797l3.84-3.84-2.121-2.121-3.84 3.84c-2.771 2.772-2.772 7.268 0 10.041 2.773 2.772 7.27 2.773 10.041 0l3.84-3.84-2.121-2.122z"/>
+              </svg>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" v-if="connectionState">
+                <path d="M14.9 19.143l-2.78 2.779c-2.771 2.772-7.268 2.772-10.041 0-2.772-2.773-2.771-7.269 0-10.041l2.779-2.779 2.121 2.121-2.779 2.779c-1.598 1.598-1.598 4.2 0 5.797 1.6 1.6 4.201 1.6 5.799 0l2.779-2.777 2.122 2.121zm-3.02-17.063l-2.779 2.779 2.121 2.121 2.78-2.779c1.598-1.598 4.199-1.598 5.795.001 1.602 1.598 1.602 4.199.004 5.797l-2.779 2.779 2.121 2.121 2.779-2.778c2.771-2.773 2.771-7.269 0-10.041-2.774-2.772-7.27-2.772-10.042 0zm-5.945-.795l1.44-.204.438 3.083-1.438.205-.44-3.084zm-4.855 6.09l.206-1.441 3.084.44-.206 1.44-3.084-.439zm4.793-2.521l-1.028 1.03-2.205-2.203 1.029-1.029 2.204 2.202zm12.191 17.86l-1.441.204-.438-3.083 1.439-.205.44 3.084zm4.856-6.09l-.207 1.441-3.084-.439.207-1.441 3.084.439zm-4.793 2.52l1.027-1.029 2.205 2.204-1.029 1.029-2.203-2.204z"/>
+              </svg>
+            </span>
+          </button>
         </li>
       </ul>
     </pw-section>
@@ -31,7 +41,14 @@
         </li>
         <li>
           <label for="send" class="hide-on-small-screen">&nbsp;</label>
-          <button name="send" :disabled="!connectionState" @click="sendMessage">Send</button>
+          <button name="send" :disabled="!connectionState" @click="sendMessage">
+            Send
+            <span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <path d="M0 12l11 3.1 7-8.1-8.156 5.672-4.312-1.202 15.362-7.68-3.974 14.57-3.75-3.339-2.17 2.925v-.769l-2-.56v7.383l4.473-6.031 4.527 4.031 6-22z" />
+              </svg>
+            </span>
+          </button>
         </li>
       </ul>
     </pw-section>
@@ -149,13 +166,13 @@
         this.communication.log.push({
           payload: `An error has occurred.`,
           source: 'info',
-          color: 'red',
+          color: '#ff5555',
           ts: (new Date()).toLocaleTimeString()
         });
         if (error != null) this.communication.log.push({
           payload: error,
           source: 'info',
-          color: 'red',
+          color: '#ff5555',
           ts: (new Date()).toLocaleTimeString()
         });
       },