From e1889c1db05f2e8f0ae35194d5a021ff47109e1e Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 26 Aug 2019 14:37:02 +0530
Subject: [PATCH] :art: Updated status color codes

---
 assets/css/styles.scss | 10 +++++-----
 pages/websocket.vue    | 19 ++++++-------------
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 05362c9ec..0bba48c1a 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -262,21 +262,21 @@ ol li {
 }
 
 .info-response {
-  background-color: #ffeb3b;
+  background-color: #FFEB3B;
 }
 
 .success-response {
-  background-color: #66BB6A;
+  background-color: #4BB543;
 }
 
 .redir-response {
-  background-color: #ff5722;
+  background-color: #FF5722;
 }
 
 .cl-error-response {
-  background-color: #ef5350;
+  background-color: #A63232;
 }
 
 .sv-error-response {
-  background-color: #b71c1c;
+  background-color: #B71C1C;
 }
diff --git a/pages/websocket.vue b/pages/websocket.vue
index cb24a92ca..cd371346c 100644
--- a/pages/websocket.vue
+++ b/pages/websocket.vue
@@ -7,9 +7,9 @@
           <label for="url">URL</label>
           <input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
         </li>
-        <li class="no-grow">
+        <li>
           <label>&nbsp;</label>
-          <button class="action" :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
+          <button :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
         </li>
       </ul>
     </pw-section>
@@ -18,7 +18,7 @@
       <ul>
         <li>
           <label for="log">Log</label>
-          <div id="log" name="log" class="log" readonly>
+          <div id="log" name="log" class="log">
               <span v-if="communication.log">
                 <span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
               </span>
@@ -33,9 +33,9 @@
           <input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
         </li>
 
-        <li class="no-grow">
+        <li>
           <label>&nbsp;</label>
-          <button class="action" name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
+          <button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
         </li>
       </ul>
     </pw-section>
@@ -44,13 +44,6 @@
 </template>
 
 <style lang="scss">
-  .no-grow { flex-grow: 0; }
-  .action {
-    padding-left: 30px;
-    padding-right: 30px;
-    width: 150px;
-  }
-
   div.log {
     margin: 4px;
     padding: 8px 16px;
@@ -58,7 +51,7 @@
     border-radius: 4px;
     background-color: var(--bg-dark-color);
     color: var(--fg-color);
-    height: 300px;
+    height: 256px;
     overflow: auto;
 
     &, span {