Skip to content

ref(sidebar): change sidebar to light color in light mode #68177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

ref(sidebar): change sidebar to light color in light mode #68177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion static/app/components/progressRing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const Text = styled('div')<Omit<TextProps, 'theme'>>`
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)}
Expand Down
172 changes: 102 additions & 70 deletions static/app/components/sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -597,59 +597,62 @@ function Sidebar() {
hidePanel={hidePanel}
{...sidebarItemProps}
/>
<SidebarSection noMargin noPadding>
<OnboardingStatus
org={organization}
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.ONBOARDING_WIZARD)}
hidePanel={hidePanel}
{...sidebarItemProps}
/>
</SidebarSection>

<SidebarSection>
{HookStore.get('sidebar:bottom-items').length > 0 &&
HookStore.get('sidebar:bottom-items')[0]({
orientation,
collapsed,
hasPanel,
organization,
})}
<SidebarHelp
orientation={orientation}
collapsed={collapsed}
hidePanel={hidePanel}
organization={organization}
/>
<Broadcasts
orientation={orientation}
collapsed={collapsed}
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.BROADCASTS)}
hidePanel={hidePanel}
organization={organization}
/>
<ServiceIncidents
orientation={orientation}
collapsed={collapsed}
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.SERVICE_INCIDENTS)}
hidePanel={hidePanel}
/>
</SidebarSection>

{!horizontal && (
<SidebarSection>
<SidebarCollapseItem
id="collapse"
data-test-id="sidebar-collapse"

<SidebarGradientWrapper>
<SidebarSection noMargin noPadding>
<OnboardingStatus
org={organization}
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.ONBOARDING_WIZARD)}
hidePanel={hidePanel}
{...sidebarItemProps}
icon={<IconChevron direction={collapsed ? 'right' : 'left'} size="sm" />}
label={collapsed ? t('Expand') : t('Collapse')}
onClick={toggleCollapse}
/>
</SidebarSection>
)}
<SidebarSection>
{HookStore.get('sidebar:bottom-items').length > 0 &&
HookStore.get('sidebar:bottom-items')[0]({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit:

This line can be simplified and we dont need the if statement prior to this

Suggested change
HookStore.get('sidebar:bottom-items')[0]({
HookStore.get('sidebar:bottom-items')?.at(0)?.({

orientation,
collapsed,
hasPanel,
organization,
})}
<SidebarHelp
orientation={orientation}
collapsed={collapsed}
hidePanel={hidePanel}
organization={organization}
/>
<Broadcasts
orientation={orientation}
collapsed={collapsed}
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.BROADCASTS)}
hidePanel={hidePanel}
organization={organization}
/>
<ServiceIncidents
orientation={orientation}
collapsed={collapsed}
currentPanel={activePanel}
onShowPanel={() => togglePanel(SidebarPanelKey.SERVICE_INCIDENTS)}
hidePanel={hidePanel}
/>
</SidebarSection>
{!horizontal && (
<SidebarSection>
<SidebarCollapseItem
id="collapse"
data-test-id="sidebar-collapse"
{...sidebarItemProps}
icon={
<IconChevron direction={collapsed ? 'right' : 'left'} size="sm" />
}
label={collapsed ? t('Expand') : t('Collapse')}
onClick={toggleCollapse}
/>
</SidebarSection>
)}
</SidebarGradientWrapper>
</SidebarSectionGroup>
)}
</SidebarWrapper>
Expand All @@ -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']};
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}
}
Expand All @@ -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;
Expand Down
31 changes: 13 additions & 18 deletions static/app/components/sidebar/onboardingStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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)};
Expand All @@ -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};
}
`;

Expand All @@ -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')};
}
`;
2 changes: 1 addition & 1 deletion static/app/components/sidebar/sidebarAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;`}
Expand Down
4 changes: 2 additions & 2 deletions static/app/components/sidebar/sidebarDropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
Expand All @@ -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};
}
}
`;
Expand Down
Loading