Upravy UI, refaktoring, davkove upravy a mazani fotek

src/pages/profile/poi/PointsOfInterestPage.vue

@@ -5,6 +5,8 @@ import {useAppStore} from "stores/App";
 import POIList from "components/poi/POIList.vue";
 import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import {flights} from "src/composables/objects/flight";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 onMounted(() => {
   fetchPOIList();
@@ -15,19 +17,14 @@ useAppStore().setPageTitle("Zajímavá místa")
 
 <template>
   <BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
-
-  <div class="q-pa-md q-gutter-sm" v-else-if="!loading && pointsOfInterest.length === 0">
-    <q-banner class="bg-light-blue text-white">
-      <template v-slot:avatar>
-        <q-icon name="info"/>
-      </template>
-      Nemáš tu uložené žádné zajímavé místo. Přidej si let, nastav si tam ručně trasu a jednotlivé body se zobrazí
-      i v tomto seznamu.
-      <template v-slot:action>
-        <q-btn flat color="white" :to="{name: 'addPoi'}" label="Přidat"/>
-      </template>
-    </q-banner>
-  </div>
+  <BasicInfoBanner
+    v-else-if="!loading && pointsOfInterest.length === 0"
+    :route-add="{name: 'addPoi'}"
+    label-add="Přidat"
+  >
+    Nemáš tu uložené žádné zajímavé místo. Přidej si let, nastav si tam ručně trasu a jednotlivé body se zobrazí
+    i v tomto seznamu.
+  </BasicInfoBanner>
 
   <POIList
     v-else