Light mode improvements, empty state on search page

src/components/basics/cardViewHorizontal.vue

@@ -40,12 +40,16 @@ defineProps({
           type="image"
           :loading="loading"
         >
-          <v-img 
-            :src="image" 
-            :height="height"
-            :width="height"
-            cover
-          />
+          <v-sheet
+            color="sheet"
+          >
+            <v-img 
+              :src="image" 
+              :height="height"
+              :width="height"
+              cover
+            />
+          </v-sheet>
         </v-skeleton-loader>
 
         <v-skeleton-loader
@@ -55,6 +59,7 @@ defineProps({
         >
           <v-sheet
             :height="height"
+            color="sheet"
             width="100%"
             class="text-center d-flex justify-center align-center"
           >
@@ -75,6 +80,8 @@ defineProps({
         >
           <v-sheet
             :height="height"
+            color="sheet"
+            class="w-100"
           >
             <div>
               <div class="text-h4 font-weight-black pt-2 h-100">

src/components/basics/cardViewTopImage.vue

@@ -30,67 +30,58 @@ loadLicense(props.image)
 </script>
 
 <template>
-  <v-tooltip
-    :text="license"
-    location="top"
-    open-delay="200"
+  <v-card
+    variant="tonal"
+    :link="link"
   >
-    <template #activator="{ props }">
-      <v-card
-        variant="tonal"
-        :link="link"
-        v-bind="props"
+    <v-skeleton-loader
+      :loading="loading"
+      type="image"
+      height="150"
+    >
+      <v-img
+        :src="image"
+        aspect-ratio="1"
+        max-height="200"
+        cover
       >
-        <v-skeleton-loader
-          :loading="loading"
-          type="image"
-          height="150"
-        >
+        <template #error>
           <v-img
-            :src="image"
+            :src="'http://localhost:3000/static/' + errorImage"
             aspect-ratio="1"
-            max-height="200"
-            cover
-          >
-            <template #error>
-              <v-img
-                :src="'http://localhost:3000/static/' + errorImage"
-                aspect-ratio="1"
-                style="background-color: aliceblue;"
-              />
-            </template>
-          </v-img>
-        </v-skeleton-loader>
+            style="background-color: aliceblue;"
+          />
+        </template>
+      </v-img>
+    </v-skeleton-loader>
 
-        <v-skeleton-loader
-          :loading="loading"
-          type="heading"
-        >
-          <div v-if="title">
-            <v-card-title v-if="!smallerTitle">
-              {{ title }}
-            </v-card-title>
+    <v-skeleton-loader
+      :loading="loading"
+      type="heading"
+    >
+      <div v-if="title">
+        <v-card-title v-if="!smallerTitle">
+          {{ title }}
+        </v-card-title>
 
-            <v-card-title v-else style="font-size: medium">
-              {{ title }}
-            </v-card-title>
-          </div>
-        </v-skeleton-loader>
+        <v-card-title v-else style="font-size: medium">
+          {{ title }}
+        </v-card-title>
+      </div>
+    </v-skeleton-loader>
 
-        <v-skeleton-loader
-          type="sentences"
-          :loading="loading"
-        >
-          <div class="px-4 pb-4 text-disabled" v-if="$slots.default">
-            <slot></slot>
-          </div>
-        </v-skeleton-loader>
+    <v-skeleton-loader
+      type="sentences"
+      :loading="loading"
+    >
+      <div class="px-4 pb-4 text-disabled" v-if="$slots.default">
+        <slot></slot>
+      </div>
+    </v-skeleton-loader>
 
-        <v-card-actions v-if="$slots.actions" class="card-actions position-absolute bottom-0 right-0">
-          <v-spacer />
-          <slot name="actions"></slot>
-        </v-card-actions>
-      </v-card>
-    </template>
-  </v-tooltip>
+    <v-card-actions v-if="$slots.actions" class="card-actions position-absolute bottom-0 right-0">
+      <v-spacer />
+      <slot name="actions"></slot>
+    </v-card-actions>
+  </v-card>
 </template>

src/components/basics/confirmDialog.vue

@@ -20,7 +20,7 @@ function confirmPressed() {
 <template>
   <action-dialog 
     :title="title"
-    max-width="400"
+    max-width="500"
     v-model="showDialog"
     persistent
   >

src/components/basics/sectionDivider.vue

@@ -8,20 +8,28 @@ defineProps({
 
 <template>
   <v-row class="pt-3 d-none d-md-flex">
+    <!-- Left line -->
     <v-col class="d-flex justify-center align-center">
       <v-sheet height="12" width="100%" color="primary" class="rounded-s-lg" />
     </v-col>
     
+    <!-- Title -->
     <v-col class="v-col-auto">
       <v-skeleton-loader
         type="heading"
         :loading="loading"
         width="300"
       >
-        <span class="text-h4">{{ title }}</span>
+        <v-sheet
+          class="text-h4"
+          color="sheet"
+        >
+          {{ title }}
+        </v-sheet>
       </v-skeleton-loader>
     </v-col>
 
+    <!-- Right line -->
     <v-col class="d-flex justify-center align-center">
       <v-sheet height="12" width="100%" color="primary" class="rounded-e-lg" />
     </v-col>

src/components/pageParts/heroImage.vue

@@ -56,6 +56,7 @@ defineProps({
             type="heading"
             :loading="loading"
             width="500"
+            class="text-white"
           >
             <span class="text-h3 font-weight-bold">
               {{ title }}
@@ -77,11 +78,18 @@ defineProps({
 
 
             <!-- Description -->
-            <p class="text-h6 text-medium-emphasis" v-if="!$slots.description">
+            <p
+              class="text-h6 text-white"
+              style="opacity: 0.7;"
+              v-if="!$slots.description"
+            >
               {{ description }}
             </p>
             
-            <p class="text-h6 text-medium-emphasis">
+            <p
+              class="text-h6 text-white"
+              style="opacity: 0.7;"
+            >
               <slot name="description"></slot>
             </p>
           </v-skeleton-loader>