From 6f98273c455d8a7d0e7ccbace4d226174ad78b36 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Thu, 5 Oct 2023 12:09:00 -0300
Subject: [PATCH] chore: change sidebar-item focus border

---
 .../fuselage/src/components/Sidebar/Sidebar.stories.tsx   | 8 ++++----
 .../fuselage/src/components/Sidebar/Sidebar.styles.scss   | 7 +++----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.stories.tsx b/packages/fuselage/src/components/Sidebar/Sidebar.stories.tsx
index 5bf23633ab..51a7c1cbd9 100644
--- 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
index 1067eb323d..f71ebef540 100644
--- 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;
       }
     }