💄 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>