feat: improve list demos

shuriken-ui · Dec 10, 2023 · b5cbf15 · b5cbf15
1 parent 0a2f6fe
commit b5cbf15
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 21 deletions.
diff --git a/src/plugins/components/list/list.doc.mdx b/src/plugins/components/list/list.doc.mdx
@@ -22,7 +22,7 @@ Lists are an important part of any website or application. The list component le
 
 Lists can be used to display basic list items. Below is an example of an unordered list.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ListStories.Unordered} />
 </div>
 
@@ -32,7 +32,7 @@ Lists can be used to display basic list items. Below is an example of an unorder
 
 Lists can be used to display basic list items. Below is an example of an ordered list.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ListStories.Ordered} />
 </div>
 
@@ -42,7 +42,7 @@ Lists can be used to display basic list items. Below is an example of an ordered
 
 Lists can be used to display more complex list items. Below is an example of a media list featuring a title and a subtitle.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ListStories.MediaText} />
 </div>
 
@@ -52,7 +52,7 @@ Lists can be used to display more complex list items. Below is an example of a m
 
 Lists can be used to display more complex list items. Below is an example of a media list featuring an icon.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ListStories.MediaIcon} />
 </div>
 
@@ -62,7 +62,7 @@ Lists can be used to display more complex list items. Below is an example of a m
 
 Lists can be used to display more complex list items. Below is an example of a media list featuring an avatar.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ListStories.MediaAvatar} />
 </div>
 

diff --git a/src/plugins/components/list/list.stories.ts b/src/plugins/components/list/list.stories.ts
@@ -81,7 +81,7 @@ export const MediaText: Story = {
       <li class="nui-list-item">
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Finish project UX
           </h6>
@@ -95,7 +95,7 @@ export const MediaText: Story = {
       <li class="nui-list-item">
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Meet with Andy at 3:00pm
           </h6>
@@ -109,7 +109,7 @@ export const MediaText: Story = {
       <li class="nui-list-item">
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Get groceries for Anna
           </h6>
@@ -123,7 +123,7 @@ export const MediaText: Story = {
       <li class="nui-list-item">
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Pay water bill
           </h6>
@@ -169,7 +169,7 @@ export const MediaIcon: Story = {
         </svg>
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Finish project UX
           </h6>
@@ -204,7 +204,7 @@ export const MediaIcon: Story = {
         </svg>
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Meet with Andy at 3:00pm
           </h6>
@@ -239,7 +239,7 @@ export const MediaIcon: Story = {
         </svg>
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Get groceries for Anna
           </h6>
@@ -274,7 +274,7 @@ export const MediaIcon: Story = {
         </svg>
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Pay water bill
           </h6>
@@ -300,11 +300,11 @@ export const MediaAvatar: Story = {
         ${Avatar({
           src: 'https://apollux.cssninja.io/img/avatars/15.svg',
           srcDark: 'https://apollux.cssninja.io/img/avatars/15.svg',
-          size: 'sm',
+          size: 'xs',
         })}
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Finish project UX
           </h6>
@@ -319,11 +319,11 @@ export const MediaAvatar: Story = {
         ${Avatar({
           src: 'https://apollux.cssninja.io/img/avatars/10.svg',
           srcDark: 'https://apollux.cssninja.io/img/avatars/10.svg',
-          size: 'sm',
+          size: 'xs',
         })}
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Meet with Andy at 3:00pm
           </h6>
@@ -338,11 +338,11 @@ export const MediaAvatar: Story = {
         ${Avatar({
           src: 'https://apollux.cssninja.io/img/avatars/24.svg',
           srcDark: 'https://apollux.cssninja.io/img/avatars/24.svg',
-          size: 'sm',
+          size: 'xs',
         })}
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Get groceries for Anna
           </h6>
@@ -357,11 +357,11 @@ export const MediaAvatar: Story = {
         ${Avatar({
           src: 'https://apollux.cssninja.io/img/avatars/25.svg',
           srcDark: 'https://apollux.cssninja.io/img/avatars/25.svg',
-          size: 'sm',
+          size: 'xs',
         })}
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Pay water bill
           </h6>