From fad28ee40bfa3c8ef4e9e3cd119d542a9f006b84 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Wed, 20 Nov 2019 06:16:02 +0530
Subject: [PATCH] Compact UI. fixe #314

---
 components/graphql/field.vue | 26 ++++++++++----------------
 components/graphql/type.vue  | 15 +++++----------
 pages/graphql.vue            |  2 --
 pages/index.vue              |  7 -------
 pages/settings.vue           |  2 --
 pages/websocket.vue          |  2 --
 6 files changed, 15 insertions(+), 39 deletions(-)

diff --git a/components/graphql/field.vue b/components/graphql/field.vue
index c8b9d01f9..2710913d7 100644
--- a/components/graphql/field.vue
+++ b/components/graphql/field.vue
@@ -13,33 +13,27 @@
 
 <style>
 .field-box {
-  padding: 1em;
-  border-radius: 5px;
-  border-style: solid;
-  border-width: 0.01em;
-  border-color: var(--fg-color);
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
+  padding: 16px;
+  margin: 4px 0;
 }
+
 .field-title {
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .field-deprecated {
   background-color: yellow;
   color: black;
   display: inline-block;
-  padding: 0.2em;
-  padding-left: 0.4em;
-  padding-right: 0.4em;
-  margin-top: 1em;
-  border-radius: 5px;
-  font-weight: bold;
+  padding: 4px 8px;
+  margin: 4px 0;
+  border-radius: 4px;
+  font-weight: 700;
 }
 
 .field-desc {
-  opacity: 0.7;
-  margin-top: 0.5em;
+  color: var(--fg-light-color);
+  margin-top: 4px;
 }
 </style>
 
diff --git a/components/graphql/type.vue b/components/graphql/type.vue
index e4730dbe1..b33bdb209 100644
--- a/components/graphql/type.vue
+++ b/components/graphql/type.vue
@@ -16,22 +16,17 @@
 
 <style>
 .type-box {
-  padding: 1em;
-  border-radius: 5px;
-  border-style: solid;
-  border-width: 0.01em;
-  border-color: var(--fg-color);
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
+  padding: 16px;
+  margin: 4px 0;
 }
 
 .type-desc {
-  opacity: 0.7;
-  margin-top: 0.5em;
+  color: var(--fg-light-color);
+  margin-top: 4px;
 }
 
 .type-title {
-  font-weight: bold;
+  font-weight: 700;
 }
 </style>
 
diff --git a/pages/graphql.vue b/pages/graphql.vue
index ca16fd34c..25c8a7f47 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -23,8 +23,6 @@
           </ul>
         </pw-section>
 
-        <br />
-
         <pw-section class="green" label="Schema" ref="schema">
           <Editor
             :value="schemaString"
diff --git a/pages/index.vue b/pages/index.vue
index 49861bb5a..edb8239c7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -309,13 +309,10 @@
           </div>
         </pw-section>
 
-        <br />
-
         <section id="options">
           <input id="tab-one" type="radio" name="options" checked="checked" />
           <label for="tab-one">Authentication</label>
           <div class="tab">
-            <br />
 
             <pw-section
               class="cyan"
@@ -402,7 +399,6 @@
           <input id="tab-two" type="radio" name="options" />
           <label for="tab-two">Headers</label>
           <div class="tab">
-            <br />
 
             <pw-section class="orange" label="Headers" ref="headers">
               <ul>
@@ -484,7 +480,6 @@
           <input id="tab-three" type="radio" name="options" />
           <label for="tab-three">Parameters</label>
           <div class="tab">
-            <br />
 
             <pw-section class="pink" label="Parameters" ref="parameters">
               <ul>
@@ -563,8 +558,6 @@
           </div>
         </section>
 
-        <br />
-
         <pw-section
           class="purple"
           id="response"
diff --git a/pages/settings.vue b/pages/settings.vue
index 6a5b641d5..c8c8c5866 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -56,8 +56,6 @@
       </ul>
     </pw-section>
 
-    <br />
-
     <pw-section class="blue" label="Proxy" ref="proxy">
       <ul>
         <li>
diff --git a/pages/websocket.vue b/pages/websocket.vue
index 2e92061c2..75ea1fc11 100644
--- a/pages/websocket.vue
+++ b/pages/websocket.vue
@@ -30,8 +30,6 @@
       </ul>
     </pw-section>
 
-    <br />
-
     <pw-section
       class="purple"
       label="Communication"