Change dropdown styling

frontend/components/dropdown/Dropdown.vue

 <template>
   <div :key="dataReady">
-    <vue-dropdown
-      ref="dropdown"
-      class="dropdown"
-      :config="config"
-      @setSelectedOption="setNewSelectedOption($event)"
-    />
+    <b-dropdown :text="dataset">
+      <b-dropdown-item
+        v-for="(item, idx) in config.options" :key="idx"
+        @click.native="setNewSelectedOption(item)"
+      > 
+        {{ item.value }}
+      </b-dropdown-item>
+    </b-dropdown>
   </div>
 </template>
 
@@ -25,13 +27,8 @@ export default {
     return {
       config: {
         options: [],
-        width: 200,
-        placeholder: "Choose folder",
-        backgroundColor: "white",
-        textColor: "#1E889B",
-        border: ""
       },
-      folder: [],
+      dataset: '',
       dataReady: false
     }
   },
@@ -42,6 +39,18 @@ export default {
       })
     }
     await this.getOptions()
+    if (this.dropdownValue) {
+      this.dataset = this.dropdownValue
+    } else {
+      this.dataset = "Choose Folder"
+      console.log("Dataset: ", this.dataset)
+      if (!this.isFolderNotExist()) {
+        if (!this.isUpload) {
+          this.dataset = this.config.options[0].value
+        }
+      }
+      this.$emit("onDatasetChanged", this.dataset)
+    }
     this.dataReady = true
   },
   methods: {
@@ -58,19 +67,6 @@ export default {
           })
         }
       }
-      if (this.dropdownValue) {
-        this.config.placeholder = this.dropdownValue
-      } else {
-        if (!this.isFolderNotExist()) {
-          if (this.isUpload) {
-            this.config.placeholder = this.config.options[1].value
-          } else {
-            this.config.placeholder = this.config.options[0].value
-          }
-          this.dataset = this.config.placeholder
-          this.$emit("onDatasetChanged", this.dataset)
-        }
-      }
     },
     isFolderNotExist () {
       if (this.isUpload) {
@@ -80,7 +76,6 @@ export default {
       }
     },
     async setNewSelectedOption(selectedOption) {
-      this.config.placeholder = selectedOption.value
       this.dataset = selectedOption.value
       if (this.dataset === "Add New Folder") {
         this.createNewFolder()
@@ -89,29 +84,36 @@ export default {
     },
     createNewFolder() {
       this.$swal.fire({
-        title: "New folder name",
+        title: "New folder name: ",
         input:'text',
         inputValidator: (value) => {
           if (!value) {
             return 'You need to write something!'
           } else {
-            this.config.placeholder = value
             this.dataset = value
             this.$emit("onDatasetChanged", this.dataset)
           }
         },
         confirmButtonColor: '#11616F',
         showCancelButton: true
-      }) 
+      }).then((result) => {
+        console.log("Result: ", result)
+        if (!result.value) {
+          this.dataset = "Choose Folder"
+          console.log("Dataset: ", this.dataset)
+        }
+      })
     },
   }
 }
 </script>
 
-<style scoped>
-  .dropdown {
-    -webkit-box-shadow: 2px 5px 5px 0px rgba(0,0,0,0.15);
-    -moz-box-shadow: 2px 5px 5px 0px rgba(0,0,0,0.15);
-    box-shadow: 2px 5px 5px 0px rgba(0,0,0,0.15);
+<style>
+  .dropdown .btn {
+    background-color: #1E889B;
+    color: white;
+    font-family: "Open Sans Bold";
+    border: 0;
+    border-radius: 7px;
   }
 </style>
\ No newline at end of file

frontend/components/label/Label.vue

@@ -2,24 +2,11 @@
   <div class="col">
     <div class="ml-4">
       <div class="row">
-        <div class="col">
-          <h5 class="title users-margin"> 
-            {{ title }}
-          </h5>
-        </div>
-      </div>
-      <br>
-      <div class="row form-title-margin">
         <div class="col">
           <div class="flex-display">
-            <input
-              id="imagesID"
-              type="text"
-              class="form-control form-border field-length form-content"
-              placeholder="Search for file name..."
-              name="imagesID"
-              @input="debounceWrapper"
-            >
+            <h5 class="title users-margin"> 
+              {{ title }}
+            </h5>
             <div class="slot-margin">
               <slot />
             </div>
@@ -27,6 +14,19 @@
         </div>
       </div>
       <br>
+      <div class="row form-title-margin">
+        <div class="col">
+          <input
+            id="imagesID"
+            type="text"
+            class="form-control form-border field-length form-content"
+            placeholder="Search for file name..."
+            name="imagesID"
+            @input="debounceWrapper"
+          >
+        </div>
+      </div>
+      <br>
       <b-row v-if="images" :key="updateUI">
         <b-col v-for="id in Object.keys(images)" :key="id">
           <div id="container">
@@ -242,8 +242,8 @@ export default {
   }
 
   .slot-margin {
-    margin-left: 1.5rem;
-    margin-top: -0.15rem;
+    margin-left: 2.25rem;
+    margin-top: 3.25rem;
   }
 
   .flex-display {

frontend/pages/main/coco.vue

@@ -175,7 +175,7 @@ export default {
 
   .margin-dropdown {
     margin-top: 3.5rem;
-    margin-left: -0.775rem;
+    margin-left: -0.1rem;
   }
 
 </style>
\ No newline at end of file

frontend/pages/main/upload.vue

@@ -208,7 +208,7 @@ export default {
     },
     async handleUpload(){
       this.files = this.$refs.myDropzone.getAcceptedFiles()
-      if (!this.dataset) {
+      if (!this.dataset || this.dataset === "Choose Folder") {
         this.invalidFolder()
       } else {
         if(this.files.length === 0){