diff --git a/static/app/components/progressRing.tsx b/static/app/components/progressRing.tsx index 6007816c175183..a64c17d44a2a76 100644 --- a/static/app/components/progressRing.tsx +++ b/static/app/components/progressRing.tsx @@ -55,7 +55,7 @@ const Text = styled('div')>` justify-content: center; height: 100%; width: 100%; - color: ${p => p.theme.chartLabel}; + color: ${p => p.theme.textColor}; font-size: ${p => p.theme.fontSizeExtraSmall}; transition: color 100ms; ${p => p.textCss?.(p)} diff --git a/static/app/components/sidebar/index.tsx b/static/app/components/sidebar/index.tsx index 1d772e41c7c106..3c48204028e5e6 100644 --- a/static/app/components/sidebar/index.tsx +++ b/static/app/components/sidebar/index.tsx @@ -597,59 +597,62 @@ function Sidebar() { hidePanel={hidePanel} {...sidebarItemProps} /> - - togglePanel(SidebarPanelKey.ONBOARDING_WIZARD)} - hidePanel={hidePanel} - {...sidebarItemProps} - /> - - - - {HookStore.get('sidebar:bottom-items').length > 0 && - HookStore.get('sidebar:bottom-items')[0]({ - orientation, - collapsed, - hasPanel, - organization, - })} - - togglePanel(SidebarPanelKey.BROADCASTS)} - hidePanel={hidePanel} - organization={organization} - /> - togglePanel(SidebarPanelKey.SERVICE_INCIDENTS)} - hidePanel={hidePanel} - /> - - - {!horizontal && ( - - + + togglePanel(SidebarPanelKey.ONBOARDING_WIZARD)} + hidePanel={hidePanel} {...sidebarItemProps} - icon={} - label={collapsed ? t('Expand') : t('Collapse')} - onClick={toggleCollapse} /> - )} + + {HookStore.get('sidebar:bottom-items').length > 0 && + HookStore.get('sidebar:bottom-items')[0]({ + orientation, + collapsed, + hasPanel, + organization, + })} + + togglePanel(SidebarPanelKey.BROADCASTS)} + hidePanel={hidePanel} + organization={organization} + /> + togglePanel(SidebarPanelKey.SERVICE_INCIDENTS)} + hidePanel={hidePanel} + /> + + {!horizontal && ( + + + } + label={collapsed ? t('Expand') : t('Collapse')} + onClick={toggleCollapse} + /> + + )} + )} @@ -658,18 +661,8 @@ function Sidebar() { export default Sidebar; -const responsiveFlex = css` - display: flex; - flex-direction: column; - - @media (max-width: ${theme.breakpoints.medium}) { - flex-direction: row; - } -`; - export const SidebarWrapper = styled('nav')<{collapsed: boolean}>` - background: ${p => p.theme.sidebarGradient}; - color: ${p => p.theme.sidebar.color}; + background: ${p => p.theme.background}; line-height: 1; padding: 12px 0 2px; /* Allows for 32px avatars */ width: ${p => p.theme.sidebar[p.collapsed ? 'collapsedWidth' : 'expandedWidth']}; @@ -679,8 +672,14 @@ 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}; + border-right: solid 1px ${p => p.theme.border}; + + display: flex; + flex-direction: column; + + @media (max-width: ${theme.breakpoints.medium}) { + flex-direction: row; + } @media (max-width: ${p => p.theme.breakpoints.medium}) { top: 0; @@ -696,14 +695,46 @@ export const SidebarWrapper = styled('nav')<{collapsed: boolean}>` } `; +const SidebarGradientWrapper = styled('div')` + &:after { + top: 0; + left: 0; + width: 100%; + height: 12px; + content: ''; + display: block; + position: absolute; + transform: translateY(-100%); + background: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, transparent 100%); + opacity: 0; + + @media (max-height: 675px) and (min-width: ${p => p.theme.breakpoints.medium}) { + opacity: 1; + } + } +`; + const SidebarSectionGroup = styled('div')` - ${responsiveFlex}; + display: flex; + flex-direction: column; + position: relative; + + @media (max-width: ${theme.breakpoints.medium}) { + flex-direction: row; + } + flex-shrink: 0; /* prevents shrinking on Safari */ gap: 1px; `; const SidebarSectionGroupPrimary = styled('div')` - ${responsiveFlex}; + display: flex; + flex-direction: column; + + @media (max-width: ${theme.breakpoints.medium}) { + flex-direction: row; + } + /* necessary for child flexing on msedge and ff */ min-height: 0; min-width: 0; @@ -722,11 +753,12 @@ const PrimaryItems = styled('div')` flex-direction: column; gap: 1px; -ms-overflow-style: -ms-autohiding-scrollbar; + @media (max-height: 675px) and (min-width: ${p => p.theme.breakpoints.medium}) { border-bottom: 1px solid ${p => p.theme.sidebarBorder}; padding-bottom: ${space(1)}; - box-shadow: rgba(0, 0, 0, 0.15) 0px -10px 10px inset; } + @media (max-width: ${p => p.theme.breakpoints.medium}) { overflow-y: visible; flex-direction: row; @@ -735,8 +767,8 @@ const PrimaryItems = styled('div')` border-right: 1px solid ${p => p.theme.sidebarBorder}; padding-right: ${space(1)}; margin-right: ${space(0.5)}; - box-shadow: rgba(0, 0, 0, 0.15) -10px 0px 10px inset; - ::-webkit-scrollbar { + + &::-webkit-scrollbar { display: none; } } @@ -758,8 +790,8 @@ const SidebarSection = styled(SidebarSectionGroup)<{ noMargin?: boolean; noPadding?: boolean; }>` - ${p => !p.noMargin && `margin: ${space(1)} 0`}; - ${p => !p.noPadding && `padding: 0 ${space(2)}`}; + ${p => !p.noMargin && `margin: ${space(1)} 0;`} + ${p => !p.noPadding && `padding: 0 ${space(2)};`} @media (max-width: ${p => p.theme.breakpoints.small}) { margin: 0; diff --git a/static/app/components/sidebar/onboardingStatus.tsx b/static/app/components/sidebar/onboardingStatus.tsx index 2ccc8650e47f92..071931f09a4a1b 100644 --- a/static/app/components/sidebar/onboardingStatus.tsx +++ b/static/app/components/sidebar/onboardingStatus.tsx @@ -6,11 +6,7 @@ import styled from '@emotion/styled'; import {OnboardingContext} from 'sentry/components/onboarding/onboardingContext'; import OnboardingSidebar from 'sentry/components/onboardingWizard/sidebar'; import {getMergedTasks} from 'sentry/components/onboardingWizard/taskConfig'; -import ProgressRing, { - RingBackground, - RingBar, - RingText, -} from 'sentry/components/progressRing'; +import ProgressRing, {RingBar, RingText} from 'sentry/components/progressRing'; import {isDone} from 'sentry/components/sidebar/utils'; import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; @@ -122,14 +118,14 @@ export default function OnboardingStatus({ const Heading = styled('div')` transition: color 100ms; font-size: ${p => p.theme.fontSizeLarge}; - color: ${p => p.theme.white}; + color: ${p => p.theme.textColor}; margin-bottom: ${space(0.25)}; `; const Remaining = styled('div')` transition: color 100ms; font-size: ${p => p.theme.fontSizeSmall}; - color: ${p => p.theme.gray300}; + color: ${p => p.theme.textColor}; display: grid; grid-template-columns: max-content max-content; gap: ${space(0.75)}; @@ -143,24 +139,23 @@ const PendingSeenIndicator = styled('div')` width: 7px; `; -const hoverCss = (p: {theme: Theme}) => css` - background: rgba(255, 255, 255, 0.05); +const hoverCss = (p: {theme: Theme}, type: 'hover' | 'active') => css` + background: ${type === 'hover' + ? p.theme.backgroundSecondary + : p.theme.backgroundTertiary}; - ${RingBackground} { - stroke: rgba(255, 255, 255, 0.3); - } ${RingBar} { - stroke: ${p.theme.green200}; + stroke: ${p.theme.green300}; } ${RingText} { - color: ${p.theme.white}; + color: ${p.theme.textColor}; } ${Heading} { - color: ${p.theme.white}; + color: ${p.theme.textColor}; } ${Remaining} { - color: ${p.theme.white}; + color: ${p.theme.textColor}; } `; @@ -173,9 +168,9 @@ const Container = styled('div')<{isActive: boolean}>` align-items: center; transition: background 100ms; - ${p => p.isActive && hoverCss(p)}; + ${p => p.isActive && hoverCss(p, 'active')}; &:hover { - ${hoverCss}; + ${p => hoverCss(p, p.isActive ? 'active' : 'hover')}; } `; diff --git a/static/app/components/sidebar/sidebarAccordion.tsx b/static/app/components/sidebar/sidebarAccordion.tsx index 7d7eb39e6c7bc8..1dd74f27e01036 100644 --- a/static/app/components/sidebar/sidebarAccordion.tsx +++ b/static/app/components/sidebar/sidebarAccordion.tsx @@ -144,7 +144,7 @@ const SidebarAccordionExpandButton = styled(Button)<{sidebarCollapsed?: boolean} &:hover, a:hover &, a[active] & { - color: ${p => p.theme.white}; + color: ${p => p.theme.textColor}; } ${p => p.sidebarCollapsed && `display: none;`} diff --git a/static/app/components/sidebar/sidebarDropdown/index.tsx b/static/app/components/sidebar/sidebarDropdown/index.tsx index 63ccd46fceac5f..57d9eaefc1f923 100644 --- a/static/app/components/sidebar/sidebarDropdown/index.tsx +++ b/static/app/components/sidebar/sidebarDropdown/index.tsx @@ -212,7 +212,7 @@ const OrgOrUserName = styled(TextOverflow)` font-size: ${p => p.theme.fontSizeLarge}; line-height: 1.2; font-weight: bold; - color: ${p => p.theme.white}; + color: ${p => p.theme.textColor}; text-shadow: 0 0 6px rgba(255, 255, 255, 0); transition: 0.15s text-shadow linear; `; @@ -237,7 +237,7 @@ const SidebarDropdownActor = styled('button')` text-shadow: 0 0 6px rgba(255, 255, 255, 0.1); } ${UserNameOrEmail} { - color: ${p => p.theme.white}; + color: ${p => p.theme.textColor}; } } `; diff --git a/static/app/components/sidebar/sidebarItem.tsx b/static/app/components/sidebar/sidebarItem.tsx index 2768a89ce10773..26f58efd0f7a0e 100644 --- a/static/app/components/sidebar/sidebarItem.tsx +++ b/static/app/components/sidebar/sidebarItem.tsx @@ -1,7 +1,5 @@ import {Fragment, isValidElement, useCallback, useMemo} from 'react'; import isPropValid from '@emotion/is-prop-valid'; -import type {Theme} from '@emotion/react'; -import {css} from '@emotion/react'; import styled from '@emotion/styled'; import type {LocationDescriptor} from 'history'; @@ -191,13 +189,12 @@ function SidebarItem({ - + {icon} {!collapsed && !isTop && ( @@ -269,30 +266,11 @@ export function isItemActive( export default SidebarItem; -const getActiveStyle = ({active, theme}: {active?: string; theme?: Theme}) => { - if (!active) { - return ''; - } - return css` - color: ${theme?.white}; - - &:active, - &:focus, - &:hover { - color: ${theme?.white}; - } - - &:before { - background-color: ${theme?.active}; - } - `; -}; - const StyledSidebarItem = styled(Link, { shouldForwardProp: p => typeof p === 'string' && isPropValid(p), })` display: flex; - color: inherit; + color: ${p => p.theme.textColor}; position: relative; cursor: pointer; font-size: 15px; @@ -328,7 +306,7 @@ const StyledSidebarItem = styled(Link, { &:hover, &:focus-visible { - color: ${p => p.theme.white}; + color: ${p => p.theme.textColor}; } &:focus { @@ -340,7 +318,19 @@ const StyledSidebarItem = styled(Link, { box-shadow: 0 0 0 2px ${p => p.theme.purple300}; } - ${getActiveStyle}; + &.Active { + color: ${p => p.theme.textColor}; + + &:active, + &:focus, + &:hover { + color: ${p => p.theme.textColor}; + } + + &:before { + background-color: ${p => p.theme.purple300}; + } + } `; const SidebarItemWrapper = styled('div')<{collapsed?: boolean}>` @@ -348,8 +338,8 @@ const SidebarItemWrapper = styled('div')<{collapsed?: boolean}>` align-items: center; justify-content: center; width: 100%; + padding-right: ${p => (!p.collapsed ? space(1) : space(0))}; - ${p => !p.collapsed && `padding-right: ${space(1)};`} @media (max-width: ${p => p.theme.breakpoints.medium}) { padding-right: 0; } @@ -381,29 +371,12 @@ const SidebarItemLabel = styled('span')` overflow: hidden; `; -const getCollapsedBadgeStyle = ({collapsed, theme}) => { - if (!collapsed) { - return ''; - } - - return css` - text-indent: -99999em; - position: absolute; - right: 0; - top: 1px; - background: ${theme.red300}; - width: ${theme.sidebar.smallBadgeSize}; - height: ${theme.sidebar.smallBadgeSize}; - border-radius: ${theme.sidebar.smallBadgeSize}; - line-height: ${theme.sidebar.smallBadgeSize}; - box-shadow: ${theme.sidebar.boxShadow}; - `; -}; - -const SidebarItemBadge = styled(({collapsed: _, ...props}) => )` +const SidebarItemBadge = styled(({collapsed, ...props}) => ( + +))` display: block; text-align: center; - color: ${p => p.theme.white}; + color: ${p => p.theme.textColor}; font-size: 12px; background: ${p => p.theme.red300}; width: ${p => p.theme.sidebar.badgeSize}; @@ -411,7 +384,18 @@ const SidebarItemBadge = styled(({collapsed: _, ...props}) => p.theme.sidebar.badgeSize}; line-height: ${p => p.theme.sidebar.badgeSize}; - ${getCollapsedBadgeStyle}; + &.Collapsed { + text-indent: -99999em; + position: absolute; + right: 0; + top: 1px; + background: ${p => p.theme.red300}; + width: ${p => p.theme.sidebar.smallBadgeSize}; + height: ${p => p.theme.sidebar.smallBadgeSize}; + border-radius: ${p => p.theme.sidebar.smallBadgeSize}; + line-height: ${p => p.theme.sidebar.smallBadgeSize}; + box-shadow: ${p => p.theme.sidebar.boxShadow}; + } `; const CollapsedFeatureBadge = styled(FeatureBadge)`