[front] - refactor: streamline shadow styling in SidebarMenu components

- Replace inline shadow styles with a `shadow-fade` utility class for consistency and maintainability - Apply the new `shadow-fade` class to elements within the `SidebarMenu.tsx` file
dust-tt · Nov 26, 2024 · 5c171b1 · 5c171b1
1 parent ff6f6ab
commit 5c171b1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/front/components/assistant/conversation/SidebarMenu.tsx b/front/components/assistant/conversation/SidebarMenu.tsx
@@ -202,10 +202,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
         <div className="flex h-0 min-h-full w-full overflow-y-auto">
           <div className="flex w-full flex-col">
             {isMultiSelect ? (
-              <div
-                className="z-50 flex justify-between gap-2 p-2"
-                style={{ boxShadow: "0px 0px 12px 12px #F6F8FB" }}
-              >
+              <div className="shadow-fade z-50 flex justify-between gap-2 p-2">
                 <Button
                   variant={
                     selectedConversations.length === 0 ? "outline" : "warning"
@@ -222,10 +219,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
                 />
               </div>
             ) : (
-              <div
-                className="z-50 flex justify-end gap-2 py-2 pr-2"
-                style={{ boxShadow: "0px 0px 12px 12px #F6F8FB" }}
-              >
+              <div className="shadow-fade z-50 flex justify-end gap-2 p-2">
                 <Button
                   href={`/w/${owner.sId}/assistant/new`}
                   label="New"

diff --git a/front/styles/global.css b/front/styles/global.css
@@ -51,6 +51,11 @@ main {
   top: 4px;
 }
 
+.shadow-fade {
+  @apply bg-structure-50;
+  box-shadow: 0 0 12px 12px theme("colors.structure.50.DEFAULT");
+}
+
 @keyframes shake {
   10%,
   90% {