Display all bands grouped by genre, create m:n association between Band and Genre in database

software/src/components/cardWithTopImage.vue

@@ -7,7 +7,7 @@ defineProps({
 
 <template>
   <v-card
-    variant="outlined"
+    variant="tonal"
     link
   >
     <v-img

software/src/components/navigation/navigationPrependItems.vue

@@ -15,7 +15,20 @@
     height="100%"
     :rounded="false"
   >
-    {{ $t('menu.shopping.allEvents', 2) }}
+    {{ $t('menu.allEvents', 2) }}
+  </v-btn>
+
+  <v-divider vertical />
+
+
+  <v-btn
+    variant="text"
+    to="/shows/bands"
+    prepend-icon="mdi-music-clef-treble"
+    height="100%"
+    :rounded="false"
+  >
+    {{ $t('menu.allBands') }}
   </v-btn>
 
   <v-divider vertical />
@@ -28,20 +41,7 @@
     height="100%"
     :rounded="false"
   >
-    {{ $t('menu.shopping.allLocations', 2) }}
-  </v-btn>
-
-  <v-divider vertical />
-
-
-  <v-btn
-    variant="text"
-    to="/shows/genres"
-    prepend-icon="mdi-music-clef-treble"
-    height="100%"
-    :rounded="false"
-  >
-    {{ $t('menu.shopping.allGenres', 2) }}
+    {{ $t('menu.allLocations', 2) }}
   </v-btn>
 
   <v-divider vertical />

software/src/components/outlinedButton.vue

@@ -3,7 +3,7 @@ defineProps({
   prependIcon: String,
   color: {
     type: String,
-    default: "primary"
+    default: "secondary"
   }
 })
 </script>

software/src/components/sectionDivider.vue

@@ -3,13 +3,6 @@ defineProps({
   title: String,
   image: String
 })
-
-function backgroundStyle(image: string) {
-  return {
-    "background-image": 'http://localhost:3000/static/cities/hannover.jpg',
-    height: `100px`
-  }
-}
 </script>
 
 <template>
@@ -29,7 +22,7 @@ function backgroundStyle(image: string) {
           <v-spacer />
 
           <v-col class="v-col-auto">
-            <span class="text-h3" style="color: white;">{{ title }}</span>
+            <span class="text-h4" style="color: white;">{{ title }}</span>
           </v-col>
 
           <v-spacer />
@@ -44,7 +37,7 @@ function backgroundStyle(image: string) {
     </v-col>
     
     <v-col class="v-col-auto">
-      <span class="text-h6">{{ title }}</span>
+      <span class="text-h4">{{ title }}</span>
     </v-col>
 
     <v-col class="d-flex justify-center align-center">