ref(ui): Simplify settings Breadcrumbs css (#71083)

Author: evanpurkhiser

static/app/views/settings/components/settingsBreadcrumb/crumb.tsx

@@ -4,10 +4,10 @@ import {space} from 'sentry/styles/space';
 
 const Crumb = styled('div')`
   display: flex;
+  gap: ${space(0.75)};
   align-items: center;
   position: relative;
   color: ${p => p.theme.subText};
-  padding-right: ${space(1)};
   cursor: pointer;
   white-space: nowrap;
 

static/app/views/settings/components/settingsBreadcrumb/divider.tsx

@@ -1,5 +1,3 @@
-import styled from '@emotion/styled';
-
 import {IconChevron} from 'sentry/icons';
 
 type Props = {
@@ -9,21 +7,8 @@ type Props = {
 
 function Divider({isHover, isLast}: Props) {
   return isLast ? null : (
-    <StyledDivider>
-      <StyledIconChevron direction={isHover ? 'down' : 'right'} size="sm" />
-    </StyledDivider>
+    <IconChevron color="gray200" direction={isHover ? 'down' : 'right'} size="xs" />
   );
 }
 
-const StyledIconChevron = styled(IconChevron)`
-  display: block;
-`;
-
-const StyledDivider = styled('span')`
-  display: inline-block;
-  margin-left: 6px;
-  color: ${p => p.theme.gray200};
-  position: relative;
-`;
-
 export default Divider;

static/app/views/settings/components/settingsBreadcrumb/index.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 
 import Link from 'sentry/components/links/link';
 import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
 import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
 import recreateRoute from 'sentry/utils/recreateRoute';
 
@@ -67,8 +68,6 @@ function SettingsBreadcrumb({className, routes, params}: Props) {
   );
 }
 
-export default SettingsBreadcrumb;
-
 const CrumbLink = styled(Link)`
   display: block;
 
@@ -78,9 +77,12 @@ const CrumbLink = styled(Link)`
   }
 `;
 
-export {CrumbLink};
-
 const Breadcrumbs = styled('nav')`
   display: flex;
+  gap: ${space(0.75)};
   align-items: center;
 `;
+
+export {CrumbLink};
+
+export default SettingsBreadcrumb;