feat(ui): Add a border to Sidebar (#29927)

* feat(ui): Add a border to Sidebar in dark mode

static/app/components/sidebar/index.tsx

@@ -456,6 +456,7 @@ export const SidebarWrapper = styled('nav')<{collapsed: boolean}>`
   bottom: 0;
   justify-content: space-between;
   z-index: ${p => p.theme.zIndex.sidebar};
+  border-right: solid 1px ${p => p.theme.sidebarBorder};
   ${responsiveFlex};
   ${p => p.collapsed && `width: ${p.theme.sidebar.collapsedWidth};`};
 
@@ -468,6 +469,8 @@ export const SidebarWrapper = styled('nav')<{collapsed: boolean}>`
     width: auto;
     padding: 0 ${space(1)};
     align-items: center;
+    border-right: none;
+    border-bottom: solid 1px ${p => p.theme.sidebarBorder};
   }
 `;
 

static/app/utils/theme.tsx

@@ -690,6 +690,7 @@ export const lightTheme = {
   level: generateLevelTheme(lightColors),
   sidebarGradient:
     'linear-gradient(294.17deg,#2f1937 35.57%,#452650 92.42%,#452650 92.42%)',
+  sidebarBorder: 'transparent',
 };
 
 const darkAliases = generateAliases(darkColors);
@@ -705,6 +706,7 @@ export const darkTheme: Theme = {
   tag: generateTagTheme(darkColors),
   level: generateLevelTheme(darkColors),
   sidebarGradient: 'linear-gradient(180deg, #181622 0%, #1B1825 100%)',
+  sidebarBorder: darkAliases.border,
 };
 
 export type Theme = typeof lightTheme;