chore(ui): fmt

pkgs/clan-app/ui/src/components/Button/Button.stories.tsx

@@ -51,7 +51,6 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
         </Button>
       </div>
 
-
       <div>
         <Button data-testid="default-start-icon" {...props} startIcon="Flash">
           Label

pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.css

@@ -1,122 +1,127 @@
 div.sidebar-body {
-    @apply py-4 px-2 h-full;
+  @apply py-4 px-2 h-full;
-    @apply border border-inv-3 rounded-bl-md rounded-br-md;
+  @apply border border-inv-3 rounded-bl-md rounded-br-md;
 
-    &::-webkit-scrollbar {
+  &::-webkit-scrollbar {
-        display: none;
+    display: none;
+  }
+
+  overflow-y: auto;
+  scrollbar-width: none;
+
+  background:
+    linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%),
+    linear-gradient(
+      180deg,
+      theme(colors.bg.inv.1) 0%,
+      theme(colors.bg.inv.3) 100%
+    );
+
+  @apply backdrop-blur-sm;
+
+  .accordion {
+    @apply w-full mb-4;
+
+    &:last-child {
+      @apply mb-0;
     }
 
-    overflow-y: auto;
+    & > .item {
-    scrollbar-width: none;
+      &:last-child {
+        @apply mb-0;
+      }
 
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%),
+      & > .header {
-    linear-gradient(180deg, theme(colors.bg.inv.1) 0%, theme(colors.bg.inv.3) 100%);
+        @apply flex mb-2 px-2;
 
-    @apply backdrop-blur-sm;
+        & > .trigger {
+          @apply inline-flex items-center justify-between w-full;
 
-    .accordion {
+          &:focus-visible {
-        @apply w-full mb-4;
+            @apply z-10;
+            outline: 2px solid hsl(200 98% 39%);
+            outline-offset: 2px;
+          }
 
-        &:last-child {
+          & > .icon {
+            transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+          }
+
+          &[data-expanded] > .icon {
+            transform: rotate(180deg);
+          }
+
+          .section-title {
+            @apply uppercase;
+          }
+        }
+      }
+
+      & > .content {
+        @apply overflow-hidden flex flex-col;
+        @apply py-3 px-1.5 bg-inv-4 rounded-md mb-4;
+
+        animation: slideAccordionUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+
+        &[data-expanded] {
+          animation: slideAccordionDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+        }
+
+        nav * {
+          @apply outline-none;
+        }
+
+        nav > a {
+          @apply block w-full px-2 py-1.5 min-h-7 my-2 rounded-md;
+
+          &:first-child {
+            @apply mt-0;
+          }
+
+          &:last-child {
             @apply mb-0;
+          }
+
+          &:focus-visible {
+            background: linear-gradient(
+              90deg,
+              theme(colors.secondary.900),
+              60%,
+              theme(colors.secondary.600) 100%
+            );
+          }
+
+          &:hover {
+            @apply bg-inv-acc-2;
+          }
+
+          &:active {
+            @apply bg-inv-acc-3;
+          }
+
+          &.active {
+            @apply bg-inv-acc-2;
+          }
         }
-
+      }
-        & > .item {
-            &:last-child {
-                @apply mb-0;
-            }
-
-            & > .header {
-                @apply flex mb-2 px-2;
-
-                & > .trigger {
-                    @apply inline-flex items-center justify-between w-full;
-
-                    &:focus-visible {
-                        @apply z-10;
-                        outline: 2px solid hsl(200 98% 39%);
-                        outline-offset: 2px;
-                    }
-
-                    & > .icon {
-                        transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
-                    }
-
-                    &[data-expanded] > .icon {
-                        transform: rotate(180deg);
-                    }
-
-                    .section-title {
-                        @apply uppercase;
-                    }
-                }
-            }
-
-            & > .content {
-                @apply overflow-hidden flex flex-col;
-                @apply py-3 px-1.5 bg-inv-4 rounded-md mb-4;
-
-                animation: slideAccordionUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
-
-                &[data-expanded] {
-                    animation: slideAccordionDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
-                }
-
-                nav * {
-                    @apply outline-none;
-                }
-
-                nav > a {
-                    @apply block w-full px-2 py-1.5 min-h-7 my-2 rounded-md;
-
-                    &:first-child {
-                        @apply mt-0;
-                    }
-
-                    &:last-child {
-                        @apply mb-0;
-                    }
-
-                    &:focus-visible {
-                        background: linear-gradient(
-                                90deg,
-                                theme(colors.secondary.900),
-                                60%,
-                                theme(colors.secondary.600) 100%
-                        );
-                    }
-
-                    &:hover {
-                        @apply bg-inv-acc-2;
-                    }
-
-                    &:active {
-                        @apply bg-inv-acc-3;
-                    }
-
-                    &.active {
-                        @apply bg-inv-acc-2;
-                    }
-                }
-            }
-        }
     }
+  }
 }
 
 @keyframes slideAccordionDown {
-    from {
+  from {
-        height: 0;
+    height: 0;
-    }
+  }
-    to {
+  to {
-        height: var(--kb-accordion-content-height);
+    height: var(--kb-accordion-content-height);
-    }
+  }
 }
 
 @keyframes slideAccordionUp {
-    from {
+  from {
-        height: var(--kb-accordion-content-height);
+    height: var(--kb-accordion-content-height);
-    }
+  }
-    to {
+  to {
-        height: 0;
+    height: 0;
-    }
+  }
 }