docs(NotificationsMenu): update styling

kelliedlynch · Nov 10, 2022 · e1f09d2 · e1f09d2
1 parent 7f144b6
commit e1f09d2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 19 deletions.
diff --git a/packages/docs/src/components/app/Toc.vue b/packages/docs/src/components/app/Toc.vue
@@ -61,7 +61,6 @@
           <v-col
             v-for="sponsor of sponsors"
             :key="sponsor.slug"
-            :cols="sponsor.metadata.tier === -1 ? 12 : 6"
             class="d-inline-flex"
           >
             <sponsor-card
@@ -71,7 +70,7 @@
             />
           </v-col>
 
-          <v-col cols="12">
+          <v-col cols="12" class="mt-3">
             <sponsor-link block size="large" />
           </v-col>
 
@@ -218,7 +217,7 @@
 
   const sponsors = computed(() => (
     sponsorStore.sponsors
-      .filter(sponsor => sponsor.metadata.tier <= 2)
+      .filter(sponsor => sponsor.metadata.tier <= 1)
       .sort((a, b) => {
         const aTier = a.metadata.tier
         const bTier = b.metadata.tier

diff --git a/packages/docs/src/components/app/bar/NotificationsMenu.vue b/packages/docs/src/components/app/bar/NotificationsMenu.vue
@@ -63,42 +63,34 @@
       </div>
 
       <template v-else>
-        <v-list :lines="false">
+        <v-list lines="three">
           <template
             v-for="(notification, i) in notifications"
             :key="notification.slug"
           >
 
             <v-divider
               v-if="i !== 0"
-              class="my-3"
-              inset
+              class="my-1"
             />
 
             <v-list-item
               :ripple="false"
               class="py-2"
             >
-              <template #prepend>
-                <div class="mr-3 text-h6 mt-n16">
-                  {{ notification.metadata.emoji }}
-                </div>
-              </template>
+              <v-list-item-title class="text-wrap text-h6 mb-1">
+                <span>{{ notification.metadata.emoji }}</span>
 
-              <v-list-item-title
-                class="text-wrap text-h6 mb-1"
-                v-text="notification.title"
-              />
+                <span class="ps-3"> {{ notification.title }}</span>
+              </v-list-item-title>
 
-              <v-list-item-subtitle
-                class="text-caption"
-              >
+              <div class="text-caption text-medium-emphasis ps-10">
                 {{ notification.metadata.text }}
 
                 <app-link :href="notification.metadata.action">
                   {{ notification.metadata.action_text }}
                 </app-link>
-              </v-list-item-subtitle>
+              </div>
 
               <template #append>
                 <v-btn