chore: change sidebar-item focus border

RocketChat · Oct 5, 2023 · 6f98273 · 6f98273
1 parent 695d42a
commit 6f98273
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.stories.tsx b/packages/fuselage/src/components/Sidebar/Sidebar.stories.tsx
@@ -358,25 +358,25 @@ export const Admin: ComponentStory<typeof Sidebar> = () => (
       </Box>
     </Box>
     <Divider />
-    <SidebarItem is='a' clickable>
+    <SidebarItem is='a' clickable href='#'>
       <Box display='flex' justifyContent='center' pb={8}>
         <Icon name='import' mi={4} size='x20' />
         Import
       </Box>
     </SidebarItem>
-    <SidebarItem is='a' clickable>
+    <SidebarItem is='a' clickable href='#'>
       <Box display='flex' justifyContent='center' pb={8}>
         <Icon name='user' mi={4} size='x20' />
         Users
       </Box>
     </SidebarItem>
-    <SidebarItem is='a' clickable>
+    <SidebarItem is='a' clickable href='#'>
       <Box display='flex' justifyContent='center' pb={8}>
         <Icon name='hashtag' mi={4} size='x20' />
         Rooms
       </Box>
     </SidebarItem>
-    <SidebarItem is='a' clickable>
+    <SidebarItem is='a' clickable href='#'>
       <Box display='flex' justifyContent='center' pb={8}>
         <Icon name='cube' mi={4} size='x20' />
         Apps

diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss b/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss
@@ -215,21 +215,20 @@ $sidebar-banner-color-danger: theme(
       @include typography.use-with-truncated-text();
       flex: 1 0;
 
-      margin-inline: lengths.margin(-2);
+      margin-inline: lengths.margin(-4);
     }
 
     &--clickable {
       @include clickable;
+      border: 2px solid transparent;
 
       @include on-hover {
         @include use-no-shadow;
-        // color: $sidebar-item-color-hover;
         background-color: $sidebar-color-surface-hover;
       }
 
       @include on-focus-visible {
-        border: 1px solid $sidebar-color-stroke-focus;
-        // @include use-focus-shadow-inset($sidebar-item-color-focus);
+        border: 2px solid $sidebar-color-stroke-focus;
       }
     }