due date

src/components/IssueDate.vue

@@ -36,24 +36,33 @@ const cancel = () => {
 <template>
   <div class="issue-due-date">
     <template v-if="!editing">
-      <v-sheet class="pa-4 cursor-pointer due-date-sheet" @click="startEdit">
-        {{ formatted() }}
-      </v-sheet>
+      <v-hover #default="{ isHovering, props }">
+        <v-sheet v-bind="props" class="cursor-pointer d-flex align-center ga-1" @click="startEdit">
+          <div>{{ formatted() }}</div>
+          <v-icon v-if="isHovering" icon="mdi-pencil" size="small" />
+        </v-sheet>
+      </v-hover>
     </template>
 
     <template v-else>
-      <v-date-input autofocus class="mb-1" hide-details v-model="draft" variant="outlined" />
+      <div class="d-flex ga-1 align-center">
+        <v-date-input
+          input-format="dd-mm-yyyy"
+          autofocus
+          class="mb-1"
+          hide-details
+          prepend-icon=""
+          v-model="draft"
+          density="compact"
+          variant="outlined"
+          persistent-placeholder
+        />
 
-      <div class="d-flex justify-end ga-1">
-        <v-btn density="compact" variant="text" text="Cancel" @click="cancel" />
-        <v-btn density="compact" color="primary" variant="flat" text="Save" @click="save" />
+        <v-btn density="compact" prepend-icon="mdi-cancel" variant="text" text="Cancel" @click="cancel" />
+        <v-btn density="compact" prepend-icon="mdi-check" color="primary" variant="flat" text="Save" @click="save" />
       </div>
     </template>
   </div>
 </template>
 
-<style scoped lang="scss">
-.due-date-sheet:hover {
-  background-color: rgba(var(--v-theme-on-surface), 0.06);
-}
-</style>
+<style scoped lang="scss"></style>