Skip to content
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

Jump to bottom

style(toolbar): adjust alert indicator css #76189

Merged
merged 3 commits into from
Aug 15, 2024
Merged

style(toolbar): adjust alert indicator css #76189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c4ee10b
style(toolbar): adjust alert indicator css
michellewzhang Aug 14, 2024
ff4557b
:coffin: rm unused import
michellewzhang Aug 14, 2024
21ae3b9
:pencil2: rename var
michellewzhang Aug 15, 2024
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
12 changes: 12 additions & 0 deletions static/app/components/devtoolbar/components/alerts/alertBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import IndicatorBadge from 'sentry/components/devtoolbar/components/indicatorBadge';

import useAlertsCount from './useAlertsCount';

export default function AlertBadge() {
const {data: count} = useAlertsCount();

if (count === undefined || count < 1) {
return null;
}
return <IndicatorBadge variant="red" />;
}
12 changes: 0 additions & 12 deletions static/app/components/devtoolbar/components/alerts/alertCountBadge.tsx
View file
Open in desktop

This file was deleted.

16 changes: 7 additions & 9 deletions static/app/components/devtoolbar/components/indicatorBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import type React from 'react';
import {css} from '@emotion/react';

import {smallCss} from '../styles/typography';
Expand All @@ -11,26 +10,25 @@ const variants = {
};

interface Props {
icon: React.ReactNode;
variant: keyof typeof variants;
}

export default function IndicatorBadge({icon, variant}: Props) {
return <div css={[smallCss, counterCss, variants[variant]]}>{icon}</div>;
export default function IndicatorBadge({variant}: Props) {
return <div css={[smallCss, badgeCss, variants[variant]]} />;
}

const counterCss = css`
const badgeCss = css`
background: var(--red400);
border-radius: 50%;
border: 1px solid transparent;
box-sizing: content-box;
color: var(--gray100);
height: 1rem;
height: 0.55rem;
line-height: 1rem;
position: absolute;
right: -6px;
top: -6px;
width: 1rem;
right: 2px;
top: 18px;
Copy link
Member

Choose a reason for hiding this comment

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

Css learning question: Is right and top used to position it relative to the panel icon? How does position:absolute work here?

Copy link
Member Author

@michellewzhang michellewzhang Aug 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

@aliu39

Is right and top used to position it relative to the panel icon?

yes!

How does position:absolute work here?

it works so that our top and left are relative to the icon itself, since we want the dot on top of the icon.

image

absolute:

SCR-20240815-izsg

relative w same top & left:
SCR-20240815-izoq

Copy link
Member

Choose a reason for hiding this comment

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

🔥 🔥 thanks for the diagrams!

width: 0.55rem;
display: flex;
align-items: center;
justify-content: center;
Expand Down
4 changes: 2 additions & 2 deletions static/app/components/devtoolbar/components/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import useToolbarRoute from '../hooks/useToolbarRoute';
import {navigationCss} from '../styles/navigation';
import {resetDialogCss} from '../styles/reset';

import AlertCountBadge from './alerts/alertCountBadge';
import AlertBadge from './alerts/alertBadge';
import IconButton from './navigation/iconButton';

export default function Navigation({
Expand Down Expand Up @@ -55,7 +55,7 @@ export default function Navigation({
<NavButton panelName="issues" label="Issues" icon={<IconIssues />} />
<NavButton panelName="feedback" label="User Feedback" icon={<IconMegaphone />} />
<NavButton panelName="alerts" label="Active Alerts" icon={<IconSiren />}>
<AlertCountBadge />
<AlertBadge />
</NavButton>
<NavButton panelName="featureFlags" label="Feature Flags" icon={<IconFlag />} />
<NavButton panelName="releases" label="Releases" icon={<IconReleases />}>
Expand Down
3 changes: 1 addition & 2 deletions static/app/components/devtoolbar/components/releases/sessionStatusBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import IndicatorBadge from 'sentry/components/devtoolbar/components/indicatorBadge';
import useSessionStatus from 'sentry/components/devtoolbar/components/releases/useSessionStatus';
import {IconFire} from 'sentry/icons';

export default function CrashCountBadge() {
const {data} = useSessionStatus();
Expand All @@ -18,7 +17,7 @@ export default function CrashCountBadge() {

// over 10% of sessions were crashes
if (crashPercent > 10) {
return <IndicatorBadge icon={<IconFire size="xs" />} variant="red" />;
return <IndicatorBadge variant="red" />;
}
return null;
}
Loading