small fixes

src/components/NotificationSettings.vue

@@ -99,12 +99,16 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
-    <div class="text-uppercase">Notifications</div>
+  <v-sheet border class="pa-4 d-flex flex-column ga-2">
+    <div class="text-uppercase text-title-large">Notifications</div>
 
     <v-skeleton-loader v-if="loading && !preferences.length" type="list-item, list-item" />
     <div v-else class="d-flex flex-column">
       <v-switch
+        inset="material"
+        size="x-small"
+        true-icon="mdi-check"
+        false-icon="mdi-close"
         v-for="preference in preferences"
         :key="preference.channel"
         :model-value="preference.enabled"
@@ -118,36 +122,43 @@ onMounted(async () => {
       />
     </div>
 
-    <div class="text-uppercase mt-4">Push in this browser</div>
-    <div v-if="permission === 'unsupported'" class="text-medium-emphasis">
-      This browser does not support push notifications
+    <div>
+      <div class="text-uppercase">Push in this browser</div>
+      <div v-if="permission === 'unsupported'" class="text-medium-emphasis">
+        This browser does not support push notifications
+      </div>
+      <div v-else-if="permission === 'denied'" class="text-medium-emphasis">
+        Notifications are blocked — allow them in the browser site settings
+      </div>
+      <v-switch
+        v-else
+        inset="material"
+        size="x-small"
+        true-icon="mdi-check"
+        false-icon="mdi-close"
+        :model-value="deviceEnabled"
+        :label="deviceEnabled ? 'Enabled' : 'Disabled'"
+        :loading="deviceSaving"
+        :disabled="deviceSaving"
+        color="primary"
+        density="compact"
+        hide-details
+        @update:model-value="toggleDevice"
+      />
     </div>
-    <div v-else-if="permission === 'denied'" class="text-medium-emphasis">
-      Notifications are blocked — allow them in the browser site settings
-    </div>
-    <v-switch
-      v-else
-      :model-value="deviceEnabled"
-      :label="deviceEnabled ? 'Enabled' : 'Disabled'"
-      :loading="deviceSaving"
-      :disabled="deviceSaving"
-      color="primary"
-      density="compact"
-      hide-details
-      @update:model-value="toggleDevice"
-    />
 
-    <v-btn
-      class="mt-2"
-      variant="tonal"
-      size="small"
-      prepend-icon="mdi-bell-ring-outline"
-      :loading="testSending"
-      @click="sendTestPush"
-    >
-      Send test push
-    </v-btn>
-  </div>
+    <div>
+      <v-btn
+        class="mt-2"
+        variant="tonal"
+        prepend-icon="mdi-bell-ring-outline"
+        :loading="testSending"
+        @click="sendTestPush"
+      >
+        Send test push
+      </v-btn>
+    </div>
+  </v-sheet>
 </template>
 
 <style scoped lang="scss"></style>

src/components/PasswordChange.vue

@@ -17,12 +17,19 @@ const changePassword = async () => {
 </script>
 
 <template>
-  <v-sheet>
-    <div class="text-uppercase">Change password</div>
-    <div class="d-flex ga-2">
-      <v-text-field placeholder="current password" v-model="passwordData.currentPassword" />
-      <v-text-field placeholder="new password" v-model="passwordData.newPassword" />
-      <v-icon-btn variant="tonal" icon="mdi-check" @click="changePassword" />
+  <v-sheet border class="pa-4 d-flex flex-column ga-2">
+    <div class="text-uppercase text-title-large">Change password</div>
+    <div class="d-flex flex-column ga-2">
+      <v-text-field
+        clearable
+        bg-color="background"
+        placeholder="current password"
+        v-model="passwordData.currentPassword"
+      />
+      <v-text-field clearable bg-color="background" placeholder="new password" v-model="passwordData.newPassword" />
+      <div>
+        <v-btn variant="tonal" prepend-icon="mdi-check" text="Update" @click="changePassword" />
+      </div>
     </div>
   </v-sheet>
 </template>

src/components/SessionsList.vue

@@ -44,20 +44,28 @@ watchEffect(async () => {
 </script>
 
 <template>
-  <div>
-    <div class="text-uppercase">Active sessions</div>
-    <div class="mb-2">
-      <v-btn prepend-icon="mdi-skull" @click="revokeOtherSessions()">revoke other sessions</v-btn>
-    </div>
-    <v-list border density="compact">
+  <v-sheet border class="pa-4 d-flex flex-column ga-2">
+    <div class="text-uppercase text-title-large">Active sessions</div>
+
+    <v-list border class="pa-0">
       <v-list-item class="hover:bg-primary-300" v-for="session in sessions" :key="session.id">
         <div class="text-truncate">{{ session.userAgent }}</div>
         <template #append>
-          <v-icon-btn size="small" @click="revokeSession(session.token)" color="error" icon="mdi-trash-can" />
+          <v-btn
+            @click="revokeSession(session.token)"
+            variant="flat"
+            density="compact"
+            color="error"
+            prepend-icon="mdi-trash-can"
+            text="Revoke"
+          />
         </template>
       </v-list-item>
     </v-list>
-  </div>
+    <div class="mb-2">
+      <v-btn prepend-icon="mdi-skull" @click="revokeOtherSessions()">Revoke other sessions</v-btn>
+    </div>
+  </v-sheet>
 </template>
 
 <style scoped lang="scss"></style>

src/components/StatusFilter.vue

@@ -15,7 +15,10 @@ const selected = ref<string[]>([...status])
 const onUpdate = (val: unknown) => {
   if (!Array.isArray(val)) return
   const order = statusStore.statuses?.map((el) => el.alias) ?? []
-  emit('changed', [...val].sort((a, b) => order.indexOf(a) - order.indexOf(b)))
+  emit(
+    'changed',
+    [...val].sort((a, b) => order.indexOf(a) - order.indexOf(b)),
+  )
 }
 
 watch(
@@ -27,16 +30,7 @@ watch(
 </script>
 
 <template>
-  <v-btn-toggle
-    v-model="selected"
-    divided
-    multiple
-    border
-    size="default"
-    density="comfortable"
-    variant="text"
-    @update:model-value="onUpdate"
-  >
+  <v-btn-toggle v-model="selected" multiple border density="compact" variant="flat" @update:model-value="onUpdate">
     <v-btn slim v-for="el in statusStore.statuses" :color="el.color" :value="el.alias" :key="el.alias" rounded="0">
       <div class="text-default">{{ el.name }}</div>
     </v-btn>

src/components/UserProfile.vue

@@ -21,18 +21,18 @@ const avatar = computed(() => {
 </script>
 
 <template>
-  <div>
+  <v-sheet border class="pa-4 d-flex flex-column ga-2">
     <div v-if="user" class="d-flex ga-4">
       <v-avatar size="x-large" color="info" :image="avatar" />
 
       <div>
-        <div>name: {{ user.name }}</div>
-        <div>email: {{ user.email }}</div>
-        <div>created at: {{ user.createdAt }}</div>
+        <div>Name: {{ user.name }}</div>
+        <div>E-mail: {{ user.email }}</div>
+        <div>Created At: {{ user.createdAt }}</div>
       </div>
     </div>
     <v-skeleton-loader v-else type="avatar, list-item-three-line" />
-  </div>
+  </v-sheet>
 </template>
 
 <style scoped lang="scss"></style>

src/layouts/DefaultLayout.vue

@@ -46,7 +46,7 @@ async function goToSignOut() {
 }
 
 const goToSettings = () => {
-  router.push({ name: 'settings' })
+  router.push({ path: '/settings' })
 }
 
 const fluid = computed(() => {

src/router/index.ts

@@ -46,7 +46,7 @@ const router = createRouter({
     {
       path: '/profile',
       component: ProfileView,
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true, breadcrumb: 'Profile' },
     },
     issuesRoutes,
     calendarRoutes,

src/views/calendar/CalendarView.vue

@@ -337,21 +337,27 @@ function goToday() {
           <v-list-item
             v-for="issue in unscheduled"
             :key="issue.id"
-            class="cursor-grab"
+            class="cursor-grab ma-1 border bg-surface-light px-2 py-0"
             :class="{ 'opacity-50': savingIds.includes(issue.id) }"
             draggable="true"
             @dragstart="onDragStart($event, issue)"
             @dragend="onDragEnd"
           >
             <template #prepend>
-              <v-icon icon="mdi-drag-vertical" size="small" class="mr-1" />
+              <v-icon icon="mdi-drag-vertical" size="small" />
             </template>
-            <v-list-item-title>
-              <router-link :to="`/issues/${issue.key}`" class="text-link font-weight-bold mr-1" draggable="false">
+
+            <div>
+              <div :title="issue.title">{{ issue.title }}</div>
+              <router-link
+                :to="`/issues/${issue.key}`"
+                class="text-link text-decoration-none font-weight-bold text-label-medium"
+                draggable="false"
+              >
                 {{ issue.key }}
               </router-link>
-              <span :title="issue.title">{{ issue.title }}</span>
-            </v-list-item-title>
+            </div>
+
             <template #append>
               <v-btn
                 density="compact"

src/views/settings/SettingsView.vue

@@ -14,7 +14,7 @@ const tab = ref(0)
         <v-tab value="projects" to="/settings/projects">Projects</v-tab>
       </v-tabs>
 
-      <div class="pa-6">
+      <div class="pa-4">
         <router-view />
       </div>
     </v-sheet>

src/views/users/ProfileView.vue

@@ -9,19 +9,17 @@ const session = authClient.useSession()
 </script>
 
 <template>
-  <v-sheet rounded border class="pa-4 d-flex flex-column ga-4">
+  <div class="d-flex flex-column ga-2">
     <div class="text-headline-medium text-uppercase">profile</div>
 
     <user-profile :user="session.data?.user" />
 
-    <v-divider />
     <password-change />
 
-    <v-divider />
     <notification-settings />
 
     <sessions-list />
-  </v-sheet>
+  </div>
 </template>
 
 <style scoped lang="scss"></style>