💄 UI stylings

components/collections/addCollection.vue

@@ -24,8 +24,18 @@
             </ul>
             </div>
             <div slot="footer">
-                <button @click="addNewCollection" v-if='!newCollection.hasOwnProperty("collectionIndex")'>Add</button>
-                <button @click="saveCollection" v-if='newCollection.hasOwnProperty("collectionIndex")'>Save</button>
+              <ul>
+                <li>
+                  <button class="icon" @click="addNewCollection" v-if='!newCollection.hasOwnProperty("collectionIndex")'>
+                    <i class="material-icons">add</i>
+                    <span>Create</span>
+                  </button>
+                  <button class="icon" @click="saveCollection" v-if='newCollection.hasOwnProperty("collectionIndex")'>
+                    <i class="material-icons">save</i>
+                    <span>Save</span>
+                  </button>
+                </li>
+              </ul>
             </div>
         </modal>
     </div>
@@ -81,4 +91,4 @@ export default {
         },
     },
 };
-</script>
+</script>

components/collections/collection.vue

@@ -23,13 +23,13 @@
             </button>
           </div>
           <div>
-            <button class="icon" @click="editCollection">
+            <button class="icon" @click="editCollection" v-tooltip="'Edit collection'">
               <i class="material-icons">create</i>
             </button>
-            <button class="icon" @click="removeCollection">
+            <button class="icon" @click="removeCollection" v-tooltip="'Delete collection'">
               <i class="material-icons">delete</i>
             </button>
-            <button class="icon" @click="toggleModal">
+            <button class="icon" @click="toggleModal" v-tooltip="'New Folder'">
               <i class="material-icons">add</i>
             </button>
           </div>
@@ -69,7 +69,8 @@
 
     ul li {
         display: flex;
-        padding-left: 1rem;
+        padding-left: 16px;
+        border-left: 1px solid var(--brd-color);
     }
 </style>
 

components/collections/folder.vue

@@ -14,10 +14,10 @@
             </button>
           </div>
           <div>
-            <button class="icon" @click="editFolder">
+            <button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
               <i class="material-icons">edit</i>
             </button>
-            <button class="icon" @click="removeFolder">
+            <button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
               <i class="material-icons">delete</i>
             </button>
           </div>
@@ -46,7 +46,8 @@
 
     ul li {
         display: flex;
-        padding-left: 1rem;
+        padding-left: 16px;
+        border-left: 1px solid var(--brd-color);
     }
 </style>
 

components/collections/request.vue

@@ -7,10 +7,10 @@
         </button>
       </div>
       <div>
-        <button class="icon" @click="editRequest">
+        <button class="icon" @click="editRequest" v-tooltip="'Edit request'">
           <i class="material-icons">edit</i>
         </button>
-        <button class="icon" @click="removeRequest">
+        <button class="icon" @click="removeRequest" v-tooltip="'Delete collection'">
           <i class="material-icons">delete</i>
         </button>
       </div>
@@ -18,12 +18,15 @@
 </template>
 
 <style scoped>
-    .add-button {
-        padding: 0;
-        width: 20px;
-        margin: 0;
-        height: 20px;
-        border-radius: 50%;
+    ul {
+        display: flex;
+        flex-direction: column;
+    }
+
+    ul li {
+        display: flex;
+        padding-left: 16px;
+        border-left: 1px solid var(--brd-color);
     }
 </style>
 

components/history.vue

@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="gray" label="History">
+  <pw-section class="gray" icon="history" label="History">
     <ul>
       <li id="filter-history">
         <input aria-label="Search" type="text" placeholder="search history" :readonly="history.length === 0" v-model="filterText">

components/section.vue

@@ -1,6 +1,6 @@
 <template>
   <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': noFrameColors }">
-    <legend @click.prevent="collapse"><span>{{ label }}</span><i class="material-icons" v-if="isCollapsed">expand_more</i><i class="material-icons" v-if="!isCollapsed">expand_less</i></legend>
+    <legend @click.prevent="collapse"><i class="material-icons icon">{{ icon }}</i><span>{{ label }}</span><i class="material-icons" v-if="isCollapsed">expand_more</i><i class="material-icons" v-if="!isCollapsed">expand_less</i></legend>
     <div class="collapsible" :class="{ hidden: collapsed }">
       <slot />
     </div>
@@ -11,6 +11,9 @@
   fieldset.no-colored-frames legend {
     color: var(--fg-color);
   }
+  .icon {
+    margin-right: 8px;
+  }
 </style>
 
 <script>
@@ -32,6 +35,10 @@ export default {
       type: String,
       default: "Section"
     },
+    icon: {
+      type: String,
+      default: "lens"
+    },
     collapsed: {
       type: Boolean
     }

pages/index.vue

@@ -38,7 +38,7 @@
         </ul>
       </div>
     </pw-modal>
-    <pw-section class="blue" label="Request" ref="request">
+    <pw-section class="blue" icon="cloud_upload" label="Request" ref="request">
       <ul>
         <li>
           <label for="method">Method</label>
@@ -166,7 +166,7 @@
         </button>
       </div>
     </pw-section>
-    <pw-section class="yellow" label="Code" ref="requestCode" v-if="!isHidden">
+    <pw-section class="yellow" icon="code" label="Code" ref="requestCode" v-if="!isHidden">
       <ul>
         <li>
           <label for="requestType">Request Type</label>
@@ -192,7 +192,7 @@
         </li>
       </ul>
     </pw-section>
-    <pw-section class="purple" id="response" label="Response" ref="response">
+    <pw-section class="purple" icon="cloud_download" id="response" label="Response" ref="response">
       <ul>
         <li>
           <label for="status">status</label>
@@ -234,7 +234,7 @@
       <input id="tab-one" type="radio" name="grp" checked="checked">
       <label for="tab-one">Authentication</label>
       <div class="tab">
-        <pw-section class="cyan" label="Authentication">
+        <pw-section class="cyan" icon="vpn_key" label="Authentication">
           <ul>
             <li>
               <div class="flex-wrap">
@@ -279,7 +279,7 @@
       <input id="tab-two" type="radio" name="grp">
       <label for="tab-two">Headers</label>
       <div class="tab">
-        <pw-section class="orange" label="Headers">
+        <pw-section class="orange" icon="toc" label="Headers">
           <ul>
             <li>
               <div class="flex-wrap">
@@ -322,7 +322,7 @@
       <input id="tab-three" type="radio" name="grp">
       <label for="tab-three">Parameters</label>
       <div class="tab">
-        <pw-section class="pink" label="Parameters">
+        <pw-section class="pink" icon="input" label="Parameters">
           <ul>
             <li>
               <div class="flex-wrap">
@@ -364,7 +364,9 @@
       </div>
     </section>
     <history @useHistory="handleUseHistory" ref="historyComponent"></history>
-    <collections></collections>
+    <pw-section class="blue" icon="folder_special" label="Collections" ref="Collections">
+      <collections></collections>
+    </pw-section>
   </div>
 </template>
 <script>

pages/settings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="cyan" label="Theme">
+    <pw-section class="cyan" icon="color_lens" label="Theme">
       <ul>
         <li>
           <h3 class="title">Background</h3>
@@ -32,7 +32,7 @@
         </li>
       </ul>
     </pw-section>
-		<pw-section class="blue" label="Proxy">
+		<pw-section class="blue" icon="public" label="Proxy">
 			<ul>
 				<li>
 					<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">

pages/websocket.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="blue" label="Request" ref="request">
+    <pw-section class="blue" icon="cloud_upload" label="Request" ref="request">
       <ul>
         <li>
           <label for="url">URL</label>
@@ -18,7 +18,7 @@
         </li>
       </ul>
     </pw-section>
-    <pw-section class="purple" label="Communication" id="response" ref="response">
+    <pw-section class="purple" icon="cloud_download" label="Communication" id="response" ref="response">
       <ul>
         <li>
           <label for="log">Log</label>