From ee58075d3ff765ec17a7426f968aceb8a4704d1f Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 22 Oct 2019 14:43:54 +0530
Subject: [PATCH] :art: Basic stylings

---
 components/collections/collection.vue | 60 +++++++++++++--------------
 components/collections/folder.vue     | 46 ++++++++++----------
 components/collections/index.vue      | 37 ++++++-----------
 components/collections/request.vue    | 21 +++++++---
 pages/index.vue                       |  2 +-
 5 files changed, 83 insertions(+), 83 deletions(-)

diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 138c41bca..51c218f8f 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -9,21 +9,36 @@
         >
         </addFolder>
 
-        <div class="header">
-            <i @click="toggleShowChildren" v-show='!showChildren' class="material-icons">arrow_right</i>
-            <i @click="toggleShowChildren" v-show='showChildren' class="material-icons">arrow_drop_down</i>
-            <label @click="toggleShowChildren">
-                {{collection.name}}
-            </label>
-            <button class="add-button" @click="editCollection">e</button>
-            <button class="add-button" @click="removeCollection">x</button>
-            <button class="add-button" @click="toggleModal">+</button>
+        <div class="flex-wrap">
+          <div>
+            <button class="icon" @click="toggleShowChildren" v-show='!showChildren'>
+              <i class="material-icons">arrow_right</i>
+            </button>
+            <button class="icon" @click="toggleShowChildren" v-show='showChildren'>
+              <i class="material-icons">arrow_drop_down</i>
+            </button>
+            <button class="icon" @click="toggleShowChildren">
+              <i class="material-icons">folder</i>
+              <span>{{collection.name}}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="editCollection">
+              <i class="material-icons">create</i>
+            </button>
+            <button class="icon" @click="removeCollection">
+              <i class="material-icons">delete</i>
+            </button>
+            <button class="icon" @click="toggleModal">
+              <i class="material-icons">add</i>
+            </button>
+          </div>
         </div>
-        
+
         <div v-show="showChildren">
             <ul>
                 <li v-for="(folder, index) in collection.folders" :key="folder.name">
-                    <folder 
+                    <folder
                         :folder="folder"
                         :folderIndex="index"
                         :collection-index="collectionIndex"
@@ -34,7 +49,7 @@
 
             <ul>
                 <li v-for="(request, index) in collection.requests" :key="index">
-                    <request 
+                    <request
                         :request="request"
                         :collection-index="collectionIndex"
                         :folder-index="-1"
@@ -53,25 +68,8 @@
     }
 
     ul li {
-        padding-left: 1rem;
-    }
-
-    .header {
         display: flex;
-        align-items: center;
-    }
-
-    label {
-        padding-left: .5rem;
-    }
-
-    .add-button {
-        padding: 0;
-        width: 20px;
-        margin: 0;
-        margin-right: .2rem;
-        height: 20px;
-        border-radius: 50%;
+        padding-left: 1rem;
     }
 </style>
 
@@ -135,4 +133,4 @@ export default {
         },
     }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index 5706d0ed9..b2cda6186 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -1,17 +1,32 @@
 <template>
     <div>
-        <div class="header">
-            <i @click="toggleShowChildren" v-show='!showChildren' class="material-icons">arrow_right</i>
-            <i @click="toggleShowChildren" v-show='showChildren' class="material-icons">arrow_drop_down</i>
-            <div @click="toggleShowChildren">{{folder.name}}</div>
-            <button class="add-button" @click="editFolder">e</button>
-            <button class="add-button" @click="removeFolder">x</button>
+        <div class="flex-wrap">
+          <div>
+            <button class="icon" @click="toggleShowChildren" v-show='!showChildren'>
+              <i class="material-icons">arrow_right</i>
+            </button>
+            <button class="icon" @click="toggleShowChildren" v-show='showChildren'>
+              <i class="material-icons">arrow_drop_down</i>
+            </button>
+            <button class="icon" @click="toggleShowChildren">
+              <i class="material-icons">folder_open</i>
+              <span>{{folder.name}}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="editFolder">
+              <i class="material-icons">edit</i>
+            </button>
+            <button class="icon" @click="removeFolder">
+              <i class="material-icons">delete</i>
+            </button>
+          </div>
         </div>
 
         <div v-show="showChildren">
             <ul>
                 <li v-for="(request, index) in folder.requests" :key="index">
-                    <request 
+                    <request
                         :request="request"
                         :collection-index="collectionIndex"
                         :folder-index="folderIndex"
@@ -30,21 +45,8 @@
     }
 
     ul li {
-        padding-left: 1rem;
-    }
-
-    .header {
         display: flex;
-        align-items: center;
-    }
-
-    .add-button {
-        padding: 0;
-        width: 20px;
-        margin: 0;
-        margin-right: .2rem;
-        height: 20px;
-        border-radius: 50%;
+        padding-left: 1rem;
     }
 </style>
 
@@ -88,4 +90,4 @@ export default {
         },
     }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 8539a05cc..7fef8fcaf 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -11,13 +11,20 @@
 
     <exportCollection :show="showExportModal" v-on:hide-model='toggleExport'></exportCollection>
 
-    <div class='header'>
-      <Label>Collections</label>
-      <button class="collection-button" @click="toggleModal">+</button>
-      <button class="export-button" @click="toggleExport">Export</button>
+    <div class='flex-wrap'>
+      <h3 class="title">Collections</h3>
+      <div>
+        <button class="icon" @click="toggleModal">
+          <i class="material-icons">add</i>
+          <span>New</span>
+        </button>
+        <button class="icon" @click="toggleExport">
+          <i class="material-icons">import_export</i>
+          <span>Export</span>
+        </button>
+      </div>
     </div>
-    
-    
+
     <ul>
       <li v-for="(collection, index) in collections" :key="collection.name">
         <collection
@@ -35,24 +42,6 @@
     display: flex;
     flex-direction: column;
   }
-
-  .header {
-    display: flex;
-    align-items: center;
-  }
-
-  .collection-button {
-    padding: 0;
-    width: 20px;
-    margin: 0;
-    height: 20px;
-    border-radius: 50%;
-  }
-
-  .export-button {
-    padding: 10px 8px;
-    height: 15px;
-  }
 </style>
 
 <script>
diff --git a/components/collections/request.vue b/components/collections/request.vue
index f48300e8e..734bfbde3 100644
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -1,8 +1,19 @@
 <template>
-    <div @click='selectRequest()'>
-        {{request.name}}
-        <button class="add-button" @click="editRequest">e</button>
-        <button class="add-button" @click="removeRequest">x</button>
+    <div class="flex-wrap">
+      <div>
+        <button class="icon" @click="selectRequest()">
+          <i class="material-icons">star</i>
+          <span>{{request.name}}</span>
+        </button>
+      </div>
+      <div>
+        <button class="icon" @click="editRequest">
+          <i class="material-icons">edit</i>
+        </button>
+        <button class="icon" @click="removeRequest">
+          <i class="material-icons">delete</i>
+        </button>
+      </div>
     </div>
 </template>
 
@@ -42,4 +53,4 @@ export default {
         },
     },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 51e0c0d18..1993ce0c6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1148,7 +1148,7 @@
           contentType: this.contentType,
           requestType: this.requestType,
         };
-        
+
         if (this.selectedRequest.url) {
           this.editRequest = Object.assign({}, this.selectedRequest, this.editRequest);
         }