Small change in the dropdown + tailwind config

client/src/components/SearchForm.vue

@@ -10,8 +10,9 @@
       >
       <div class="absolute right-0 vertical-center flex items-center h-full mr-2">
         <div
+          v-bind:class="{'bg-teal-600' : dropdown}"
           @click="dropdown = !dropdown"
-          class="cursor-pointer flex items-center px-2 py-1 rounded-lg hover:bg-teal-700"
+          class="cursor-pointer flex items-center px-2 py-1 rounded"
         >
           <span class="selected font-bold">{{ selectedRegion }}</span>
           <v-icon name="caret-down" class="ml-1"></v-icon>
@@ -28,20 +29,17 @@
         <div
           v-if="dropdown"
           @click="dropdown = !dropdown"
-          class="absolute right-0 text-white rounded-b-lg shadow cursor-pointer mr-2"
+          class="absolute right-0 text-white rounded-b shadow cursor-pointer mr-2 offsetDropDown"
         >
           <div
             v-for="(region, index) in regions"
             :key="region"
             @click="selectedRegion = region"
-            class="px-4 py-1 text-xs bg-teal-600 hover:bg-teal-500"
+            class="px-4b py-1 text-xs bg-teal-600 hover:bg-teal-500"
             :class="classRegions(index)"
-          >
-            {{ region }}
-          </div>
+          >{{ region }}</div>
         </div>
       </transition>
-
     </div>
 
     <button class="input btn w-20 rounded-lg ml-2 relative" type="submit">
@@ -57,34 +55,55 @@ export default {
   },
   data() {
     return {
-      summoner: '',
+      summoner: "",
       dropdown: false,
-      regions: ['BR', 'EUNE', 'EUW', 'JP', 'KR', 'LAN', 'LAS', 'NA', 'OCE', 'TR', 'RU'],
-      selectedRegion: 'EUW'
+      regions: [
+        "BR",
+        "EUNE",
+        "EUW",
+        "JP",
+        "KR",
+        "LAN",
+        "LAS",
+        "NA",
+        "OCE",
+        "TR",
+        "RU"
+      ],
+      selectedRegion: "EUW"
     };
   },
   methods: {
     classRegions(index) {
       return {
-        'rounded-t-lg': index === 0,
-        'rounded-b-lg': index === this.regions.length - 1
-      }
+        "rounded-t": index === 0,
+        "rounded-b": index === this.regions.length - 1
+      };
     },
     formSubmit() {
-      console.log('form submit child');
-      this.$emit('formSubmit', this.summoner, this.selectedRegion.toLowerCase());
+      console.log("form submit child");
+      this.$emit(
+        "formSubmit",
+        this.summoner,
+        this.selectedRegion.toLowerCase()
+      );
     }
   }
-}
+};
 </script>
 
 <style scoped>
+.offsetDropDown {
+  top: 57px;
+  right: 1px;
+}
+
 .bounce-enter-active {
-  animation: bounce-in .5s;
+  animation: bounce-in 0.5s;
 }
 
 .bounce-leave-active {
-  animation: bounce-in .5s reverse;
+  animation: bounce-in 0.5s reverse;
 }
 
 @keyframes bounce-in {

client/tailwind.config.js

@@ -128,6 +128,7 @@ module.exports = {
       '2': '0.5rem',
       '3': '0.75rem',
       '4': '1rem',
+      '4b': '1.15rem',
       '5': '1.25rem',
       '6': '1.5rem',
       '8': '2rem',
@@ -307,7 +308,10 @@ module.exports = {
       screen: '100vh',
     },
     padding: theme => theme('spacing'),
-    margin: theme => ({ auto: 'auto', ...theme('spacing') }),
+    margin: theme => ({
+      auto: 'auto',
+      ...theme('spacing')
+    }),
     negativeMargin: theme => theme('spacing'),
     objectPosition: {
       bottom: 'bottom',