From 63334998a87b86d1ec26d15f139dc9ad123ef017 Mon Sep 17 00:00:00 2001 From: JonasBa Date: Fri, 18 Apr 2025 11:24:56 -0400 Subject: [PATCH 1/3] nav: chonk compatible nav --- static/app/components/sidebar/index.tsx | 8 ++-- .../components/sidebar/sidebarAccordion.tsx | 3 +- .../sidebar/sidebarDropdown/index.tsx | 13 +++--- .../sidebar/sidebarDropdownMenu.styled.tsx | 8 ++-- static/app/components/sidebar/sidebarItem.tsx | 45 ++++++++++++------- static/app/utils/theme/theme.chonk.tsx | 2 +- 6 files changed, 49 insertions(+), 30 deletions(-) diff --git a/static/app/components/sidebar/index.tsx b/static/app/components/sidebar/index.tsx index b72861e1ee2ba7..6f39ea34964303 100644 --- a/static/app/components/sidebar/index.tsx +++ b/static/app/components/sidebar/index.tsx @@ -665,7 +665,8 @@ const PrimaryItems = styled('div')` @media (max-height: 675px) and (min-width: ${p => p.theme.breakpoints.medium}) { border-bottom: 1px solid ${p => p.theme.sidebar.border}; padding-bottom: ${space(1)}; - box-shadow: rgba(0, 0, 0, 0.15) 0px -10px 10px inset; + box-shadow: ${p => + p.theme.isChonk ? 'none' : 'rgba(0, 0, 0, 0.15) 0px -10px 10px inset'}; } @media (max-width: ${p => p.theme.breakpoints.medium}) { overflow-y: hidden; @@ -673,10 +674,11 @@ const PrimaryItems = styled('div')` flex-direction: row; height: 100%; align-items: center; - border-right: 1px solid ${p => p.theme.sidebar.border}; padding-right: ${space(1)}; margin-right: ${space(0.5)}; - box-shadow: rgba(0, 0, 0, 0.15) -10px 0px 10px inset; + border-right: none; + box-shadow: ${p => + p.theme.isChonk ? 'none' : 'rgba(0, 0, 0, 0.15) -10px 0px 10px inset'}; ::-webkit-scrollbar { display: none; } diff --git a/static/app/components/sidebar/sidebarAccordion.tsx b/static/app/components/sidebar/sidebarAccordion.tsx index 404569ccfa7e83..5afb1bc5c93f87 100644 --- a/static/app/components/sidebar/sidebarAccordion.tsx +++ b/static/app/components/sidebar/sidebarAccordion.tsx @@ -19,6 +19,7 @@ import {ExpandedContext} from 'sentry/components/sidebar/expandedContextProvider import {IconChevron} from 'sentry/icons'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; +import {isChonkTheme} from 'sentry/utils/theme/withChonk'; import {useLocalStorageState} from 'sentry/utils/useLocalStorageState'; import useMedia from 'sentry/utils/useMedia'; import {useNavigate} from 'sentry/utils/useNavigate'; @@ -275,7 +276,7 @@ const SidebarAccordionExpandButton = styled(Button)<{sidebarCollapsed?: boolean} &:hover, a:hover &, a[active] & { - color: ${p => p.theme.white}; + color: ${p => (isChonkTheme(p.theme) ? p.theme.colors.blue400 : p.theme.white)}; } ${p => p.sidebarCollapsed && `display: none;`} diff --git a/static/app/components/sidebar/sidebarDropdown/index.tsx b/static/app/components/sidebar/sidebarDropdown/index.tsx index b07e95a183916b..33be822951e357 100644 --- a/static/app/components/sidebar/sidebarDropdown/index.tsx +++ b/static/app/components/sidebar/sidebarDropdown/index.tsx @@ -23,6 +23,7 @@ import {t} from 'sentry/locale'; import ConfigStore from 'sentry/stores/configStore'; import {useLegacyStore} from 'sentry/stores/useLegacyStore'; import {space} from 'sentry/styles/space'; +import {isChonkTheme} from 'sentry/utils/theme/withChonk'; import useApi from 'sentry/utils/useApi'; import useOrganization from 'sentry/utils/useOrganization'; import useProjects from 'sentry/utils/useProjects'; @@ -213,8 +214,9 @@ const OrgOrUserName = styled(TextOverflow)` font-size: ${p => p.theme.fontSizeLarge}; line-height: 1.2; font-weight: ${p => p.theme.fontWeightBold}; - color: ${p => p.theme.white}; - text-shadow: 0 0 6px rgba(255, 255, 255, 0); + color: ${p => (isChonkTheme(p.theme) ? p.theme.black : p.theme.white)}; + text-shadow: ${p => + isChonkTheme(p.theme) ? 'none' : '0 0 6px rgba(255, 255, 255, 0)'}; transition: 0.15s text-shadow linear; `; @@ -235,10 +237,11 @@ const SidebarDropdownActor = styled('button')` &:hover { ${OrgOrUserName} { - text-shadow: 0 0 6px rgba(255, 255, 255, 0.1); + text-shadow: ${p => + isChonkTheme(p.theme) ? 'none' : '0 0 6px rgba(255, 255, 255, 0.1)'}; } ${UserNameOrEmail} { - color: ${p => p.theme.white}; + color: ${p => (isChonkTheme(p.theme) ? p.theme.black : p.theme.white)}; } } `; @@ -246,7 +249,7 @@ const SidebarDropdownActor = styled('button')` const AvatarStyles = (p: {collapsed: boolean; theme: Theme}) => css` margin: ${space(0.25)} 0; margin-right: ${p.collapsed ? '0' : space(1.5)}; - box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: ${isChonkTheme(p.theme) ? 'none' : '0 2px 0 rgba(0, 0, 0, 0.08)'}; border-radius: 6px; /* Fixes background bleeding on corners */ @media (max-width: ${p.theme.breakpoints.medium}) { diff --git a/static/app/components/sidebar/sidebarDropdownMenu.styled.tsx b/static/app/components/sidebar/sidebarDropdownMenu.styled.tsx index 42e0d5f5273e72..e093702e3c7b1f 100644 --- a/static/app/components/sidebar/sidebarDropdownMenu.styled.tsx +++ b/static/app/components/sidebar/sidebarDropdownMenu.styled.tsx @@ -6,9 +6,11 @@ const SidebarDropdownMenu = (p: {theme: Theme}) => css` background: ${p.theme.background}; color: ${p.theme.textColor}; border-radius: 4px; - box-shadow: - 0 0 0 1px rgba(0, 0, 0, 0.08), - 0 4px 20px 0 rgba(0, 0, 0, 0.3); + border: ${p.theme.isChonk ? `1px solid ${p.theme.border}` : 'none'}; + border-bottom: ${p.theme.isChonk ? `2px solid ${p.theme.border}` : 'none'}; + box-shadow: ${p.theme.isChonk + ? 'none' + : '0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 20px 0 rgba(0, 0, 0, 0.3)'}; padding: 5px 0; width: 250px; z-index: 1000; diff --git a/static/app/components/sidebar/sidebarItem.tsx b/static/app/components/sidebar/sidebarItem.tsx index a17cc3c06d5518..c7b42596fbc95a 100644 --- a/static/app/components/sidebar/sidebarItem.tsx +++ b/static/app/components/sidebar/sidebarItem.tsx @@ -1,5 +1,5 @@ import {Fragment, isValidElement, useCallback, useContext, useMemo} from 'react'; -import type {Theme} from '@emotion/react'; +import {type Theme, useTheme} from '@emotion/react'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; import type {LocationDescriptor} from 'history'; @@ -16,6 +16,7 @@ import {space} from 'sentry/styles/space'; import {defined} from 'sentry/utils'; import {trackAnalytics} from 'sentry/utils/analytics'; import localStorage from 'sentry/utils/localStorage'; +import {isChonkTheme} from 'sentry/utils/theme/withChonk'; import normalizeUrl from 'sentry/utils/url/normalizeUrl'; import useOrganization from 'sentry/utils/useOrganization'; import useRouter from 'sentry/utils/useRouter'; @@ -151,6 +152,7 @@ function SidebarItem({ badgeTitle, ...props }: SidebarItemProps) { + const theme = useTheme(); const {setExpandedItemId, shouldAccordionFloat} = useContext(ExpandedContext); const router = useRouter(); // label might be wrapped in a guideAnchor @@ -242,6 +244,7 @@ function SidebarItem({ {({additionalContent}) => ( { if (!active) { return ''; @@ -384,21 +387,23 @@ const getActiveStyle = ({ &:active, &:focus, &:hover { - color: ${theme?.gray400}; + color: ${isChonkTheme(theme) ? theme.subText : theme.gray400}; } `; } return css` - color: ${theme?.white}; + color: ${isChonkTheme(theme) ? theme.colors.blue400 : theme.white}; &:active, &:focus, &:hover { - color: ${theme?.white}; + color: ${isChonkTheme(theme) ? theme.colors.blue400 : theme.white}; } &:before { - background-color: ${theme?.active}; + background-color: ${!!theme && isChonkTheme(theme) + ? theme.colors.chonk.blue400 + : theme.active}; } `; }; @@ -407,12 +412,17 @@ const StyledSidebarItem = styled(Link, { shouldForwardProp: p => !['isInFloatingAccordion', 'hasNewNav', 'index', 'organization'].includes(p), })` + color: ${p => + isChonkTheme(p.theme) + ? p.theme.subText + : p.isInFloatingAccordion + ? p.theme.gray400 + : 'inherit'}; + height: ${p => (p.isInFloatingAccordion ? '35px' : p.hasNewNav ? '40px' : '30px')}; display: flex; - color: ${p => (p.isInFloatingAccordion ? p.theme.gray400 : 'inherit')}; position: relative; cursor: pointer; font-size: 15px; - height: ${p => (p.isInFloatingAccordion ? '35px' : p.hasNewNav ? '40px' : '30px')}; flex-shrink: 0; border-radius: ${p => p.theme.borderRadius}; transition: none; @@ -458,11 +468,11 @@ const StyledSidebarItem = styled(Link, { if (p.isInFloatingAccordion) { return css` background-color: ${p.theme.hover}; - color: ${p.theme.gray400}; + color: ${isChonkTheme(p.theme) ? p.theme.subText : p.theme.gray400}; `; } return css` - color: ${p.theme.white}; + color: ${isChonkTheme(p.theme) ? p.theme.colors.chonk.blue400 : p.theme.white}; `; }} } @@ -483,10 +493,10 @@ const SidebarItemWrapper = styled('div')<{collapsed?: boolean; hasNewNav?: boole display: flex; align-items: center; justify-content: center; - ${p => p.hasNewNav && 'flex-direction: column;'} width: 100%; - + ${p => p.hasNewNav && 'flex-direction: column;'} ${p => !p.collapsed && `padding-right: ${space(1)};`} + @media (max-width: ${p => p.theme.breakpoints.medium}) { padding-right: 0; } @@ -541,26 +551,27 @@ const getCollapsedBadgeStyle = ({collapsed, theme}: any) => { } return css` + background: ${theme.red300}; text-indent: -99999em; position: absolute; right: 0; top: 1px; - background: ${theme.red300}; width: 11px; height: 11px; border-radius: 11px; line-height: 11px; - box-shadow: 0 3px 3px #2f2936; + box-shadow: ${theme.isChonk ? 'none' : '0 3px 3px #2f2936'}; `; }; // @ts-expect-error TS(7031): Binding element '_' implicitly has an 'any' type. const SidebarItemBadge = styled(({collapsed: _, ...props}) => )` + color: ${p => p.theme.white}; + background: ${p => + isChonkTheme(p.theme) ? p.theme.colors.chonk.red400 : p.theme.red300}; display: block; text-align: center; - color: ${p => p.theme.white}; font-size: 12px; - background: ${p => p.theme.red300}; width: 22px; height: 22px; border-radius: 22px; @@ -576,6 +587,6 @@ const CollapsedFeatureBadge = styled(FeatureBadge)` `; const StyledInteractionStateLayer = styled(InteractionStateLayer)` - height: ${16 * 2 + 40}px; + height: 72px; width: 70px; `; diff --git a/static/app/utils/theme/theme.chonk.tsx b/static/app/utils/theme/theme.chonk.tsx index d3c9f4f6908692..a3e9ff2a82a5f5 100644 --- a/static/app/utils/theme/theme.chonk.tsx +++ b/static/app/utils/theme/theme.chonk.tsx @@ -1072,7 +1072,7 @@ export const DO_NOT_USE_lightChonkTheme: ChonkTheme = { scrollbarThumbColor: '#A0A0A0', scrollbarColorTrack: 'rgba(45,26,50,92.42)', // end of the gradient which is used for background gradient: lightAliases.background, - border: 'transparent', + border: lightAliases.border, superuser: '#880808', }, }; From 014668d0b146c96a0ff17f16caed345816bdb38e Mon Sep 17 00:00:00 2001 From: JonasBa Date: Fri, 18 Apr 2025 11:26:31 -0400 Subject: [PATCH 2/3] nav: fix org and username hover style --- static/app/components/sidebar/sidebarDropdown/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/components/sidebar/sidebarDropdown/index.tsx b/static/app/components/sidebar/sidebarDropdown/index.tsx index 33be822951e357..43e947fa520a8c 100644 --- a/static/app/components/sidebar/sidebarDropdown/index.tsx +++ b/static/app/components/sidebar/sidebarDropdown/index.tsx @@ -214,7 +214,7 @@ const OrgOrUserName = styled(TextOverflow)` font-size: ${p => p.theme.fontSizeLarge}; line-height: 1.2; font-weight: ${p => p.theme.fontWeightBold}; - color: ${p => (isChonkTheme(p.theme) ? p.theme.black : p.theme.white)}; + color: ${p => (isChonkTheme(p.theme) ? p.theme.textColor : p.theme.white)}; text-shadow: ${p => isChonkTheme(p.theme) ? 'none' : '0 0 6px rgba(255, 255, 255, 0)'}; transition: 0.15s text-shadow linear; @@ -241,7 +241,7 @@ const SidebarDropdownActor = styled('button')` isChonkTheme(p.theme) ? 'none' : '0 0 6px rgba(255, 255, 255, 0.1)'}; } ${UserNameOrEmail} { - color: ${p => (isChonkTheme(p.theme) ? p.theme.black : p.theme.white)}; + color: ${p => (isChonkTheme(p.theme) ? p.theme.textColor : p.theme.white)}; } } `; From b86aeae4e71b1ee8e7e5437ab4956a27c7d67780 Mon Sep 17 00:00:00 2001 From: JonasBa Date: Fri, 18 Apr 2025 11:28:06 -0400 Subject: [PATCH 3/3] nav: fix theme colors --- static/app/utils/theme/theme.chonk.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/app/utils/theme/theme.chonk.tsx b/static/app/utils/theme/theme.chonk.tsx index a3e9ff2a82a5f5..ae21bd20679038 100644 --- a/static/app/utils/theme/theme.chonk.tsx +++ b/static/app/utils/theme/theme.chonk.tsx @@ -1142,11 +1142,11 @@ export const DO_NOT_USE_darkChonkTheme: ChonkTheme = { }, sidebar: { - background: lightAliases.background, + background: darkAliases.background, scrollbarThumbColor: '#A0A0A0', scrollbarColorTrack: 'rgba(45,26,50,92.42)', // end of the gradient which is used for background - gradient: `none`, - border: 'transparent', + gradient: darkAliases.background, + border: darkAliases.border, superuser: '#880808', }, };