fix css

components/Ui/EventList.vue

@@ -1,13 +1,11 @@
 <template>
   <div>
-    <v-list  height="380">
+    <v-list  height="420">
 
       <v-list-item
         class="event-item"
         v-for="event in events"
         :key="event.id"
-        :subtitle="date.format(event.datetimeStart, 'fullDateWithWeekday')"
-        :title="event.name"
       >
         <template v-slot:prepend>
           <v-avatar color="grey-lighten-1">
@@ -15,12 +13,23 @@
           </v-avatar>
         </template>
 
+        <template #default>
+          <div
+            class="flex-grow-1"
+            @click="$emit('edit', event.id)"
+          >
+            <span class="text-subtitle-1">{{event.name}}</span>
+            <br>
+            <span class="text-subtitle-2">{{date.format(event.datetimeStart, 'fullDateWithWeekday')}}</span>
+          </div>
+        </template>
+
         <template v-slot:append>
-          <v-avatar  @click="$emit('edit', event.id)">
+          <v-avatar class="edit-btn"  @click="$emit('edit', event.id)">
             <v-icon>fas fa-pencil</v-icon>
           </v-avatar>
 
-          <UiButtonDelete :entity="event">
+          <UiButtonDelete :entity="event" class="delete-btn">
             <v-avatar>
               <v-icon>fas fa-trash</v-icon>
             </v-avatar>
@@ -74,11 +83,20 @@ const date = useDate()
 <style scoped>
 .event-item {
   margin-top: 20px;
-  color: rgb(var(--v-theme-on-primary-alt));
+  color: rgb(var(--v-theme-neutral-strong));
+  .text-subtitle-2{
+    text-transform: capitalize !important;
+    color: rgb(var(--v-theme-neutral-subtitle));
+  }
 }
-
 .pagination-btn[disabled] {
   opacity: 0.3;
 }
-
+.edit-btn{
+  cursor: pointer;
+}
+:deep(.v-list-item):hover{
+  cursor: pointer;
+  background-color: rgb(var(--v-theme-neutral));
+}
 </style>

config/theme.ts

@@ -69,6 +69,7 @@ export const lightTheme: Theme = {
     'on-neutral-strong': '#ecf0f5',
 
     neutral: '#e6e6e6',
+    'neutral-subtitle': '#a6a6a6',
     'on-neutral': '#666666',
     'on-neutral--clickable': '#00997d',