From 9bf781aa552dbfec1dabfd1401a8af72ac72314d Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Thu, 13 Feb 2020 20:16:13 +0100
Subject: [PATCH] refactor: tidy up vue components folder

---
 client/src/App.vue                               |  4 ++--
 .../src/components/{ => Common}/DotsLoader.vue   |  0
 .../{ => Common}/LazyBackgroundImage.vue         |  0
 client/src/components/{ => Common}/Ripple.vue    |  0
 .../{Dropdown.vue => Common/Tooltip.vue}         | 14 +++++++-------
 .../src/components/{ => Form}/LoadingButton.vue  |  0
 client/src/components/{ => Form}/SearchForm.vue  |  2 +-
 .../components/{ => Form}/SearchFormDropdown.vue |  2 +-
 .../{ => Form}/SearchFormDropdownPlayer.vue      |  0
 .../src/components/{ => Form}/SwitchToggle.vue   |  0
 .../{ => Global}/NotificationsContainer.vue      |  2 +-
 .../{ => Global}/PopupNotification.vue           |  0
 .../src/components/{ => Global}/SVGContainer.vue |  0
 .../src/components/{ => Layout}/MainFooter.vue   |  0
 client/src/components/Match/DetailedMatch.vue    |  2 +-
 .../Match/DetailedMatchGlobalStats.vue           |  8 ++++----
 .../src/components/Match/DetailedMatchTeam.vue   | 16 ++++++++--------
 client/src/components/Match/Match.vue            | 14 +++++++-------
 client/src/components/Match/MatchItems.vue       |  8 ++++----
 .../Summoner/Champions/ChampionsSearch.vue       |  2 +-
 .../Summoner/Overview/SummonerChampions.vue      |  8 ++++----
 .../Summoner/Overview/SummonerMates.vue          |  8 ++++----
 .../Summoner/Overview/SummonerStats.vue          | 12 ++++++------
 .../src/components/Summoner/RecentActivity.vue   |  8 ++++----
 .../components/Summoner/Records/RecordCard.vue   |  1 +
 client/src/layouts/Default.vue                   |  6 +++---
 client/src/views/Home.vue                        |  4 ++--
 client/src/views/Summoner.vue                    |  4 ++--
 28 files changed, 63 insertions(+), 62 deletions(-)
 rename client/src/components/{ => Common}/DotsLoader.vue (100%)
 rename client/src/components/{ => Common}/LazyBackgroundImage.vue (100%)
 rename client/src/components/{ => Common}/Ripple.vue (100%)
 rename client/src/components/{Dropdown.vue => Common/Tooltip.vue} (91%)
 rename client/src/components/{ => Form}/LoadingButton.vue (100%)
 rename client/src/components/{ => Form}/SearchForm.vue (98%)
 rename client/src/components/{ => Form}/SearchFormDropdown.vue (95%)
 rename client/src/components/{ => Form}/SearchFormDropdownPlayer.vue (100%)
 rename client/src/components/{ => Form}/SwitchToggle.vue (100%)
 rename client/src/components/{ => Global}/NotificationsContainer.vue (84%)
 rename client/src/components/{ => Global}/PopupNotification.vue (100%)
 rename client/src/components/{ => Global}/SVGContainer.vue (100%)
 rename client/src/components/{ => Layout}/MainFooter.vue (100%)

diff --git a/client/src/App.vue b/client/src/App.vue
index 83fa32b..4e27cd1 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -12,8 +12,8 @@
 import { mapActions } from 'vuex'
 import Default from '@/layouts/Default.vue'
 import Home from '@/layouts/Home.vue'
-import NotificationsContainer from '@/components/NotificationsContainer.vue'
-import SVGContainer from '@/components/SVGContainer.vue'
+import NotificationsContainer from '@/components/Global/NotificationsContainer.vue'
+import SVGContainer from '@/components/Global/SVGContainer.vue'
 
 export default {
   components: {
diff --git a/client/src/components/DotsLoader.vue b/client/src/components/Common/DotsLoader.vue
similarity index 100%
rename from client/src/components/DotsLoader.vue
rename to client/src/components/Common/DotsLoader.vue
diff --git a/client/src/components/LazyBackgroundImage.vue b/client/src/components/Common/LazyBackgroundImage.vue
similarity index 100%
rename from client/src/components/LazyBackgroundImage.vue
rename to client/src/components/Common/LazyBackgroundImage.vue
diff --git a/client/src/components/Ripple.vue b/client/src/components/Common/Ripple.vue
similarity index 100%
rename from client/src/components/Ripple.vue
rename to client/src/components/Common/Ripple.vue
diff --git a/client/src/components/Dropdown.vue b/client/src/components/Common/Tooltip.vue
similarity index 91%
rename from client/src/components/Dropdown.vue
rename to client/src/components/Common/Tooltip.vue
index 1de72b5..b7be143 100644
--- a/client/src/components/Dropdown.vue
+++ b/client/src/components/Common/Tooltip.vue
@@ -3,16 +3,16 @@
     <!-- trigger -->
     <div
       ref="trigger"
-      @mouseenter="showDropdown"
+      @mouseenter="showTooltip"
       @mousemove="mousemove"
-      @mouseleave="hideDropdown"
+      @mouseleave="hideTooltip"
       :aria-expanded="isOpen"
       aria-haspopup="true"
     >
       <slot name="trigger"></slot>
     </div>
 
-    <!-- dropdown content -->
+    <!-- tooltip content -->
     <div
       v-show="isOpen"
       ref="content"
@@ -58,7 +58,7 @@ export default {
   },
 
   methods: {
-    checkDropdownVisibility() {
+    checkTooltipVisibility() {
       this.directionChecked = true
       const contentRect = this.$refs.content.getBoundingClientRect()
       const triggerRect = this.$refs.trigger.getBoundingClientRect()
@@ -74,7 +74,7 @@ export default {
     height() {
       return this.$refs.content ? this.$refs.content.clientHeight : 0
     },
-    hideDropdown() {
+    hideTooltip() {
       this.isOpen = false
       this.directionBottom = true
       this.directionRight = true
@@ -86,10 +86,10 @@ export default {
 
       if (!this.directionChecked) {
         await this.$nextTick()
-        this.checkDropdownVisibility()
+        this.checkTooltipVisibility()
       }
     },
-    showDropdown(event) {
+    showTooltip(event) {
       this.left = event.clientX
       this.top = event.clientY
       this.isOpen = true
diff --git a/client/src/components/LoadingButton.vue b/client/src/components/Form/LoadingButton.vue
similarity index 100%
rename from client/src/components/LoadingButton.vue
rename to client/src/components/Form/LoadingButton.vue
diff --git a/client/src/components/SearchForm.vue b/client/src/components/Form/SearchForm.vue
similarity index 98%
rename from client/src/components/SearchForm.vue
rename to client/src/components/Form/SearchForm.vue
index 41a9011..3fdd40a 100644
--- a/client/src/components/SearchForm.vue
+++ b/client/src/components/Form/SearchForm.vue
@@ -69,7 +69,7 @@
 
 <script>
 import { mapActions, mapState } from 'vuex'
-import SearchFormDropdown from '@/components/SearchFormDropdown.vue'
+import SearchFormDropdown from '@/components/Form/SearchFormDropdown.vue'
 
 export default {
   components: {
diff --git a/client/src/components/SearchFormDropdown.vue b/client/src/components/Form/SearchFormDropdown.vue
similarity index 95%
rename from client/src/components/SearchFormDropdown.vue
rename to client/src/components/Form/SearchFormDropdown.vue
index 0d2b775..085bd80 100644
--- a/client/src/components/SearchFormDropdown.vue
+++ b/client/src/components/Form/SearchFormDropdown.vue
@@ -44,7 +44,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import SearchFormDropdownPlayer from '@/components/SearchFormDropdownPlayer.vue'
+import SearchFormDropdownPlayer from '@/components/Form/SearchFormDropdownPlayer.vue'
 
 export default {
   components: {
diff --git a/client/src/components/SearchFormDropdownPlayer.vue b/client/src/components/Form/SearchFormDropdownPlayer.vue
similarity index 100%
rename from client/src/components/SearchFormDropdownPlayer.vue
rename to client/src/components/Form/SearchFormDropdownPlayer.vue
diff --git a/client/src/components/SwitchToggle.vue b/client/src/components/Form/SwitchToggle.vue
similarity index 100%
rename from client/src/components/SwitchToggle.vue
rename to client/src/components/Form/SwitchToggle.vue
diff --git a/client/src/components/NotificationsContainer.vue b/client/src/components/Global/NotificationsContainer.vue
similarity index 84%
rename from client/src/components/NotificationsContainer.vue
rename to client/src/components/Global/NotificationsContainer.vue
index c2bbec9..6b78d73 100644
--- a/client/src/components/NotificationsContainer.vue
+++ b/client/src/components/Global/NotificationsContainer.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import PopupNotification from '@/components/PopupNotification.vue'
+import PopupNotification from '@/components/Global/PopupNotification.vue'
 import { mapState } from 'vuex' 
 
 export default {
diff --git a/client/src/components/PopupNotification.vue b/client/src/components/Global/PopupNotification.vue
similarity index 100%
rename from client/src/components/PopupNotification.vue
rename to client/src/components/Global/PopupNotification.vue
diff --git a/client/src/components/SVGContainer.vue b/client/src/components/Global/SVGContainer.vue
similarity index 100%
rename from client/src/components/SVGContainer.vue
rename to client/src/components/Global/SVGContainer.vue
diff --git a/client/src/components/MainFooter.vue b/client/src/components/Layout/MainFooter.vue
similarity index 100%
rename from client/src/components/MainFooter.vue
rename to client/src/components/Layout/MainFooter.vue
diff --git a/client/src/components/Match/DetailedMatch.vue b/client/src/components/Match/DetailedMatch.vue
index ba8439d..5d804ed 100644
--- a/client/src/components/Match/DetailedMatch.vue
+++ b/client/src/components/Match/DetailedMatch.vue
@@ -29,7 +29,7 @@
 import { mapState } from 'vuex'
 import DetailedMatchGlobalStats from '@/components/Match/DetailedMatchGlobalStats.vue'
 import DetailedMatchTeam from '@/components/Match/DetailedMatchTeam.vue'
-import SwitchToggle from '@/components/SwitchToggle.vue'
+import SwitchToggle from '@/components/Form/SwitchToggle.vue'
 
 export default {
   components: {
diff --git a/client/src/components/Match/DetailedMatchGlobalStats.vue b/client/src/components/Match/DetailedMatchGlobalStats.vue
index 3b90eff..119b6a5 100644
--- a/client/src/components/Match/DetailedMatchGlobalStats.vue
+++ b/client/src/components/Match/DetailedMatchGlobalStats.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="allyTeam ? 'text-left' : 'text-right'">
     <div v-if="team.bans">
-      <Dropdown
+      <Tooltip
         v-for="ban in team.bans"
         :key="'ban-' + ban.pickTurn"
         :class="{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}"
@@ -27,7 +27,7 @@
             <div>{{ ban.champion.id ? ban.champion.name : 'No ban' }}</div>
           </div>
         </template>
-      </Dropdown>
+      </Tooltip>
     </div>
     <div
       :class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'"
@@ -73,11 +73,11 @@
 </template>
 
 <script>
-import Dropdown from '@/components/Dropdown'
+import Tooltip from '@/components/Common/Tooltip.vue'
 
 export default {
   components: {
-    Dropdown,
+    Tooltip,
   },
 
   props: {
diff --git a/client/src/components/Match/DetailedMatchTeam.vue b/client/src/components/Match/DetailedMatchTeam.vue
index fc84d7b..2ada4d6 100644
--- a/client/src/components/Match/DetailedMatchTeam.vue
+++ b/client/src/components/Match/DetailedMatchTeam.vue
@@ -71,7 +71,7 @@
                 </div>
               </div>
               <div class="ml-1 flex flex-col justify-around">
-                <Dropdown>
+                <Tooltip>
                   <template v-slot:trigger>
                     <div
                       :style="{backgroundImage: `url(${player.firstSum ? player.firstSum.icon : null})`}"
@@ -91,8 +91,8 @@
                       </div>
                     </div>
                   </template>
-                </Dropdown>
-                <Dropdown>
+                </Tooltip>
+                <Tooltip>
                   <template v-slot:trigger>
                     <div
                       :style="{backgroundImage: `url(${player.secondSum ? player.secondSum.icon : null})`}"
@@ -114,7 +114,7 @@
                       </div>
                     </div>
                   </template>
-                </Dropdown>
+                </Tooltip>
               </div>
               <div class="ml-2px flex flex-col justify-around">
                 <div
@@ -204,14 +204,14 @@
 
 <script>
 import { mapState } from 'vuex'
-import DotsLoader from '@/components/DotsLoader'
-import Dropdown from '@/components/Dropdown'
-import MatchItems from '@/components/Match/MatchItems'
+import DotsLoader from '@/components/Common/DotsLoader.vue'
+import Tooltip from '@/components/Common/Tooltip.vue'
+import MatchItems from '@/components/Match/MatchItems.vue'
 
 export default {
   components: {
     DotsLoader,
-    Dropdown,
+    Tooltip,
     MatchItems,
   },
 
diff --git a/client/src/components/Match/Match.vue b/client/src/components/Match/Match.vue
index f490d33..5fbe4b9 100644
--- a/client/src/components/Match/Match.vue
+++ b/client/src/components/Match/Match.vue
@@ -127,7 +127,7 @@
           <div class="ml-auto flex flex-col items-center justify-center">
             <img class="w-5 h-5" src="@/assets/img/icons/Stopwatch.svg" alt="Stopwatch" />
             <div class="text-lg text-teal-400 font-medium">{{ data.time|secToTime }}</div>
-            <Dropdown>
+            <Tooltip>
               <template v-slot:trigger>
                 <div class="text-xs text-white font-medium">{{ data.date }}</div>
               </template>
@@ -140,7 +140,7 @@
                   <div>{{ data.fullDate.time }}</div>
                 </div>
               </template>
-            </Dropdown>
+            </Tooltip>
           </div>
         </div>
       </div>
@@ -151,15 +151,15 @@
 
 <script>
 import { mapActions, mapState, mapGetters } from 'vuex'
-import Dropdown from '@/components/Dropdown'
-import DetailedMatch from '@/components/Match/DetailedMatch'
-import MatchItems from '@/components/Match/MatchItems'
-import Ripple from '@/components/Ripple.vue'
+import Tooltip from '@/components/Common/Tooltip.vue'
+import DetailedMatch from '@/components/Match/DetailedMatch.vue'
+import MatchItems from '@/components/Match/MatchItems.vue'
+import Ripple from '@/components/Common/Ripple.vue'
 
 export default {
   components: {
     DetailedMatch,
-    Dropdown,
+    Tooltip,
     MatchItems,
     Ripple,
   },
diff --git a/client/src/components/Match/MatchItems.vue b/client/src/components/Match/MatchItems.vue
index 61a1975..e9b3728 100644
--- a/client/src/components/Match/MatchItems.vue
+++ b/client/src/components/Match/MatchItems.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="oneRow ? 'ml-2 items-center' : 'items-2-rows flex-wrap'" class="flex">
-    <Dropdown v-for="(item, index) in items" :key="index">
+    <Tooltip v-for="(item, index) in items" :key="index">
       <template v-slot:trigger>
         <div
           :style="{backgroundImage: item ? `url('${item.image}')` : null}"
@@ -24,16 +24,16 @@
           </div>
         </div>
       </template>
-    </Dropdown>
+    </Tooltip>
   </div>
 </template>
 
 <script>
-import Dropdown from '@/components/Dropdown.vue'
+import Tooltip from '@/components/Common/Tooltip.vue'
 
 export default {
   components: {
-    Dropdown
+    Tooltip
   },
 
   props: {
diff --git a/client/src/components/Summoner/Champions/ChampionsSearch.vue b/client/src/components/Summoner/Champions/ChampionsSearch.vue
index b38c717..dbd64b1 100644
--- a/client/src/components/Summoner/Champions/ChampionsSearch.vue
+++ b/client/src/components/Summoner/Champions/ChampionsSearch.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import Ripple from '@/components/Ripple.vue'
+import Ripple from '@/components/Common/Ripple.vue'
 
 export default {
   components: {
diff --git a/client/src/components/Summoner/Overview/SummonerChampions.vue b/client/src/components/Summoner/Overview/SummonerChampions.vue
index e089dd3..2e29ce5 100644
--- a/client/src/components/Summoner/Overview/SummonerChampions.vue
+++ b/client/src/components/Summoner/Overview/SummonerChampions.vue
@@ -9,7 +9,7 @@
         <use xlink:href="#layers" />
       </svg>
       <div class="absolute right-0 top-0 mt-3 mr-2">
-        <Dropdown>
+        <Tooltip>
           <template v-slot:trigger>
             <svg class="w-4 h-4 cursor-pointer">
               <use xlink:href="#info" />
@@ -27,7 +27,7 @@
               </div>
             </div>
           </template>
-        </Dropdown>
+        </Tooltip>
       </div>
     </div>
     <div v-if="stats.champion.length">
@@ -87,11 +87,11 @@
 
 <script>
 import { mapState } from 'vuex'
-import Dropdown from '@/components/Dropdown.vue'
+import Tooltip from '@/components/Common/Tooltip.vue'
 
 export default {
   components: {
-    Dropdown,
+    Tooltip,
   },
 
   computed: {
diff --git a/client/src/components/Summoner/Overview/SummonerMates.vue b/client/src/components/Summoner/Overview/SummonerMates.vue
index f7678b6..e69c35e 100644
--- a/client/src/components/Summoner/Overview/SummonerMates.vue
+++ b/client/src/components/Summoner/Overview/SummonerMates.vue
@@ -28,7 +28,7 @@
             >{{ mate.name }}</router-link>
             <div class="w-1/4">{{ mate.wins }} / {{ mate.losses }}</div>
             <div class="w-1/4">
-              <Dropdown>
+              <Tooltip>
                 <template v-slot:trigger>
                   <div class="bg-blue-900 rounded-full h-2 cursor-pointer">
                     <div
@@ -49,7 +49,7 @@
                     </div>
                   </div>
                 </template>
-              </Dropdown>
+              </Tooltip>
             </div>
           </li>
         </ul>
@@ -64,11 +64,11 @@
 
 <script>
 import { mapState } from 'vuex'
-import Dropdown from '@/components/Dropdown.vue'
+import Tooltip from '@/components/Common/Tooltip.vue'
 
 export default {
   components: {
-    Dropdown,
+    Tooltip,
   },
 
   data() {
diff --git a/client/src/components/Summoner/Overview/SummonerStats.vue b/client/src/components/Summoner/Overview/SummonerStats.vue
index 86e8b25..d4d5196 100644
--- a/client/src/components/Summoner/Overview/SummonerStats.vue
+++ b/client/src/components/Summoner/Overview/SummonerStats.vue
@@ -9,7 +9,7 @@
         <use xlink:href="#graph" />
       </svg>
       <div class="absolute right-0 top-0 mt-3 mr-2">
-        <Dropdown>
+        <Tooltip>
           <template v-slot:trigger>
             <svg class="w-4 h-4 cursor-pointer">
               <use xlink:href="#info" />
@@ -27,7 +27,7 @@
               </div>
             </div>
           </template>
-        </Dropdown>
+        </Tooltip>
       </div>
     </div>
     <div class="mt-2 flex items-center py-2">
@@ -36,7 +36,7 @@
         :key="index"
         class="flex flex-col items-center w-1/5"
       >
-        <Dropdown>
+        <Tooltip>
           <template v-slot:trigger>
             <div class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer">
               <div
@@ -69,7 +69,7 @@
               >{{ calculateWinrate(role.wins, role.count).winrate|round }}%</div>
             </div>
           </template>
-        </Dropdown>
+        </Tooltip>
         <div
           :style="{backgroundImage: `url(${require('@/assets/img/roles/' + role.role + '.png')})`}"
           class="mt-1 w-4 h-4 bg-center bg-cover"
@@ -226,12 +226,12 @@
 
 <script>
 import { mapState } from 'vuex'
-import Dropdown from '@/components/Dropdown.vue'
+import Tooltip from '@/components/Common/Tooltip.vue'
 import { gameModes } from '@/data/data.js'
 
 export default {
   components: {
-    Dropdown,
+    Tooltip,
   },
 
   computed: {
diff --git a/client/src/components/Summoner/RecentActivity.vue b/client/src/components/Summoner/RecentActivity.vue
index bdabed0..63b7de6 100644
--- a/client/src/components/Summoner/RecentActivity.vue
+++ b/client/src/components/Summoner/RecentActivity.vue
@@ -31,7 +31,7 @@
             class="ml-1 flex flex-col flex-wrap"
             style="width: calc(20px * 15); height: calc(20px * 7)"
           >
-            <Dropdown v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
+            <Tooltip v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
               <template v-slot:trigger>
                 <div
                   :class="[getCaseMargin(index), getCaseColor(day.matches)]"
@@ -46,7 +46,7 @@
                   </div>
                 </div>
               </template>
-            </Dropdown>
+            </Tooltip>
           </div>
         </div>
       </div>
@@ -55,11 +55,11 @@
 </template>
 
 <script>
-import Dropdown from '@/components/Dropdown.vue'
+import Tooltip from '@/components/Common/Tooltip.vue'
 
 export default {
   components: {
-    Dropdown,
+    Tooltip,
   },
 
   props: {
diff --git a/client/src/components/Summoner/Records/RecordCard.vue b/client/src/components/Summoner/Records/RecordCard.vue
index 60bbc2b..5b0b099 100644
--- a/client/src/components/Summoner/Records/RecordCard.vue
+++ b/client/src/components/Summoner/Records/RecordCard.vue
@@ -32,6 +32,7 @@
 
 <script>
 import { timeDifference } from '@/helpers/functions.js'
+
 export default {
   props: {
     color: {
diff --git a/client/src/layouts/Default.vue b/client/src/layouts/Default.vue
index e4be460..f5b7e7b 100644
--- a/client/src/layouts/Default.vue
+++ b/client/src/layouts/Default.vue
@@ -127,10 +127,10 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex'
 import FilterSeason from '@/components/Summoner/FilterSeason.vue'
-import LazyBackground from '@/components/LazyBackgroundImage.vue'
-import MainFooter from '@/components/MainFooter.vue'
+import LazyBackground from '@/components/Common/LazyBackgroundImage.vue'
+import MainFooter from '@/components/Layout/MainFooter.vue'
 import RecentActivity from '@/components/Summoner/RecentActivity.vue'
-import SearchForm from '@/components/SearchForm.vue'
+import SearchForm from '@/components/Form/SearchForm.vue'
 import HeaderLoader from '@/components/Summoner/HeaderLoader.vue'
 import SummonerRanked from '@/components/Summoner/SummonerRanked.vue'
 
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index cf0b347..fc63b8d 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import LazyBackground from '@/components/LazyBackgroundImage.vue'
-import SearchForm from '@/components/SearchForm.vue'
+import LazyBackground from '@/components/Common/LazyBackgroundImage.vue'
+import SearchForm from '@/components/Form/SearchForm.vue'
 
 export default {
   components: {
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index c5e10e6..3c12523 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -6,7 +6,7 @@
       <SummonerMates />
     </div>
     <div class="w-9/12">
-      <div v-if="current" class="mb-4">
+      <div v-if="current && current.participants" class="mb-4">
         <LiveMatch />
       </div>
       <div v-if="overview.matches.length">
@@ -36,7 +36,7 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex'
 import LiveMatch from '@/components/Match/LiveMatch.vue'
-import LoadingButton from '@/components/LoadingButton.vue'
+import LoadingButton from '@/components/Form/LoadingButton.vue'
 import Match from '@/components/Match/Match.vue'
 import OverviewLoader from '@/components/Summoner/Overview/OverviewLoader.vue'
 import SummonerChampions from '@/components/Summoner/Overview/SummonerChampions.vue'