Skip to content

Commit 7d93a71

Browse files
setchysetchy
authored
feat: continue primer component and design token migration (#1749)
* feat: migrate to primer design tokens Signed-off-by: Adam Setch <[email protected]> * feat: migrate to primer design tokens Signed-off-by: Adam Setch <[email protected]> * feat: migrate to primer design tokens Signed-off-by: Adam Setch <[email protected]> * feat: migrate to primer design tokens Signed-off-by: Adam Setch <[email protected]> * feat: migrate to primer design tokens Signed-off-by: Adam Setch <[email protected]> * feat: migrate to primer design tokens Signed-off-by: Adam Setch <[email protected]> * feat: migrate to primer design tokens Signed-off-by: Adam Setch <[email protected]> * feat: migrate to primer design tokens Signed-off-by: Adam Setch <[email protected]> * feat: migrate to primer design tokens Signed-off-by: Adam Setch <[email protected]> --------- Signed-off-by: Adam Setch <[email protected]>
1 parent b4c40bf commit 7d93a71

File tree

85 files changed

+7979
-7407
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+7979
-7407
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@
140140
"@discordapp/twemoji": "15.1.0",
141141
"@electron/notarize": "2.5.0",
142142
"@primer/octicons-react": "19.14.0",
143+
"@primer/primitives": "^10.3.4",
143144
"@primer/react": "36.27.0",
144145
"@testing-library/react": "16.2.0",
145146
"@types/jest": "29.5.14",

‎pnpm-lock.yaml

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/renderer/App.css

+15
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
/** GitHub Primer Design System */
2+
/* Size & Typography */
3+
@import "@primer/primitives/dist/css/base/size/size.css";
4+
@import "@primer/primitives/dist/css/base/typography/typography.css";
5+
@import "@primer/primitives/dist/css/functional/size/border.css";
6+
@import "@primer/primitives/dist/css/functional/size/breakpoints.css";
7+
@import "@primer/primitives/dist/css/functional/size/size.css";
8+
@import "@primer/primitives/dist/css/functional/size/viewport.css";
9+
@import "@primer/primitives/dist/css/functional/typography/typography.css";
10+
11+
/* Themes and Colors */
12+
/* TODO Add support for setting color modes (dark_dimmed) - see #1748 */
13+
@import "@primer/primitives/dist/css/functional/themes/light.css";
14+
@import "@primer/primitives/dist/css/functional/themes/dark.css";
15+
116
html,
217
body,
318
#root {

‎src/renderer/App.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ function RequireAuth({ children }) {
3535

3636
export const App = () => {
3737
return (
38-
<ThemeProvider>
38+
// TODO Add support for setting color modes (dark_dimmed) - see #1748
39+
<ThemeProvider dayScheme="light" nightScheme="dark">
3940
<BaseStyles>
4041
<AppProvider>
4142
<Router>

‎src/renderer/components/AllRead.tsx

+9-20
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { type FC, useContext, useMemo } from 'react';
22

3-
import { Stack } from '@primer/react';
4-
53
import { AppContext } from '../context/App';
64
import { Constants } from '../utils/constants';
75
import { hasFiltersSet } from '../utils/filters';
8-
import { Centered } from './primitives/Centered';
9-
import { EmojiText } from './primitives/EmojiText';
6+
import { EmojiSplash } from './layout/EmojiSplash';
7+
8+
interface IAllRead {
9+
fullHeight?: boolean;
10+
}
1011

11-
export const AllRead: FC = () => {
12+
export const AllRead: FC<IAllRead> = ({ fullHeight = true }: IAllRead) => {
1213
const { settings } = useContext(AppContext);
1314

1415
const hasFilters = hasFiltersSet(settings);
@@ -21,21 +22,9 @@ export const AllRead: FC = () => {
2122
[],
2223
);
2324

24-
return (
25-
<Centered>
26-
<Stack direction="vertical" align="center">
27-
<div className="mt-2 mb-5 text-5xl">
28-
<EmojiText text={emoji} />
29-
</div>
25+
const heading = `No new ${hasFilters ? 'filtered ' : ''} notifications`;
3026

31-
{hasFilters ? (
32-
<div className="mb-2 text-xl font-semibold">
33-
No new filtered notifications
34-
</div>
35-
) : (
36-
<div className="mb-2 text-xl font-semibold">No new notifications</div>
37-
)}
38-
</Stack>
39-
</Centered>
27+
return (
28+
<EmojiSplash emoji={emoji} heading={heading} fullHeight={fullHeight} />
4029
);
4130
};

‎src/renderer/components/Oops.tsx

+9-21
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,25 @@
11
import { type FC, useMemo } from 'react';
22

3-
import { Stack } from '@primer/react';
43
import type { GitifyError } from '../types';
5-
import { Centered } from './primitives/Centered';
6-
import { EmojiText } from './primitives/EmojiText';
4+
import { EmojiSplash } from './layout/EmojiSplash';
75

86
interface IOops {
97
error: GitifyError;
8+
fullHeight?: boolean;
109
}
1110

12-
export const Oops: FC<IOops> = ({ error }: IOops) => {
11+
export const Oops: FC<IOops> = ({ error, fullHeight = true }: IOops) => {
1312
const emoji = useMemo(
1413
() => error.emojis[Math.floor(Math.random() * error.emojis.length)],
1514
[error],
1615
);
1716

1817
return (
19-
<Centered>
20-
<Stack direction="vertical" align="center">
21-
<div className="mt-2 text-5xl">
22-
<EmojiText text={emoji} />
23-
</div>
24-
25-
<div className="mb-2 text-xl font-semibold">{error.title}</div>
26-
{error.descriptions.map((description, i) => {
27-
return (
28-
// biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean
29-
<div className="mb-2 text-center" key={`error_description_${i}`}>
30-
{description}
31-
</div>
32-
);
33-
})}
34-
</Stack>
35-
</Centered>
18+
<EmojiSplash
19+
emoji={emoji}
20+
heading={error.title}
21+
subHeadings={error.descriptions}
22+
fullHeight={fullHeight}
23+
/>
3624
);
3725
};

‎src/renderer/components/Sidebar.tsx

+70-68
Original file line numberDiff line numberDiff line change
@@ -69,80 +69,82 @@ export const Sidebar: FC = () => {
6969
}, [notifications]);
7070

7171
return (
72-
<div className="fixed left-12 -ml-12 flex h-full w-12 flex-col overflow-y-auto bg-gitify-sidebar">
73-
<div className="flex flex-1 flex-col">
74-
<Stack
75-
direction="vertical"
76-
align="center"
77-
gap="condensed"
78-
padding="normal"
79-
>
80-
<IconButton
81-
icon={LogoIcon}
82-
aria-label={APPLICATION.NAME}
83-
description="Home"
84-
unsafeDisableTooltip={false}
85-
size="small"
86-
variant="invisible"
87-
tooltipDirection="e"
88-
onClick={() => navigate('/', { replace: true })}
89-
data-testid="sidebar-home"
90-
/>
91-
92-
<IconButton
93-
icon={BellIcon}
94-
aria-label="Notifications"
95-
description={`${notificationsCount} unread notifications`}
96-
unsafeDisableTooltip={false}
97-
size="small"
98-
variant={notificationsCount > 0 ? 'primary' : 'invisible'}
99-
tooltipDirection="e"
100-
onClick={() => openGitHubNotifications(primaryAccountHostname)}
101-
data-testid="sidebar-notifications"
102-
sx={{ color: 'white' }}
103-
/>
104-
105-
{/* TODO - explore https://primer.style/components/selectpanel/react/alpha/ for a better UI for filters */}
106-
{isLoggedIn && (
107-
<IconButton
108-
icon={FilterIcon}
109-
aria-label="Filters"
110-
description="Filter notifications"
111-
unsafeDisableTooltip={false}
112-
size="small"
113-
variant={hasFiltersSet(settings) ? 'primary' : 'invisible'}
114-
tooltipDirection="e"
115-
onClick={() => toggleFilters()}
116-
data-testid="sidebar-filter-notifications"
117-
sx={{ color: 'white' }}
118-
/>
119-
)}
120-
72+
<Stack
73+
direction="vertical"
74+
justify="space-between"
75+
className="fixed left-12 -ml-12 w-12 h-full bg-gitify-sidebar"
76+
>
77+
<Stack
78+
direction="vertical"
79+
align="center"
80+
gap="condensed"
81+
padding="normal"
82+
>
83+
<IconButton
84+
icon={LogoIcon}
85+
aria-label={APPLICATION.NAME}
86+
description="Home"
87+
unsafeDisableTooltip={false}
88+
size="small"
89+
variant="invisible"
90+
tooltipDirection="e"
91+
onClick={() => navigate('/', { replace: true })}
92+
data-testid="sidebar-home"
93+
/>
94+
95+
<IconButton
96+
icon={BellIcon}
97+
aria-label="Notifications"
98+
description={`${notificationsCount} unread notifications`}
99+
unsafeDisableTooltip={false}
100+
size="small"
101+
variant={notificationsCount > 0 ? 'primary' : 'invisible'}
102+
tooltipDirection="e"
103+
onClick={() => openGitHubNotifications(primaryAccountHostname)}
104+
data-testid="sidebar-notifications"
105+
sx={{ color: 'white' }}
106+
/>
107+
108+
{/* TODO - explore https://primer.style/components/selectpanel/react/alpha/ for a better UI for filters */}
109+
{isLoggedIn && (
121110
<IconButton
122-
icon={IssueOpenedIcon}
123-
aria-label="My issues"
111+
icon={FilterIcon}
112+
aria-label="Filters"
113+
description="Filter notifications"
124114
unsafeDisableTooltip={false}
125115
size="small"
126-
variant="invisible"
116+
variant={hasFiltersSet(settings) ? 'primary' : 'invisible'}
127117
tooltipDirection="e"
128-
onClick={() => openGitHubIssues(primaryAccountHostname)}
129-
data-testid="sidebar-my-issues"
118+
onClick={() => toggleFilters()}
119+
data-testid="sidebar-filter-notifications"
130120
sx={{ color: 'white' }}
131121
/>
122+
)}
132123

133-
<IconButton
134-
icon={GitPullRequestIcon}
135-
aria-label="My pull requests"
136-
unsafeDisableTooltip={false}
137-
size="small"
138-
variant="invisible"
139-
tooltipDirection="e"
140-
onClick={() => openGitHubPulls(primaryAccountHostname)}
141-
data-testid="sidebar-my-pull-requests"
142-
sx={{ color: 'white' }}
143-
/>
144-
</Stack>
145-
</div>
124+
<IconButton
125+
icon={IssueOpenedIcon}
126+
aria-label="My issues"
127+
unsafeDisableTooltip={false}
128+
size="small"
129+
variant="invisible"
130+
tooltipDirection="e"
131+
onClick={() => openGitHubIssues(primaryAccountHostname)}
132+
data-testid="sidebar-my-issues"
133+
sx={{ color: 'white' }}
134+
/>
135+
136+
<IconButton
137+
icon={GitPullRequestIcon}
138+
aria-label="My pull requests"
139+
unsafeDisableTooltip={false}
140+
size="small"
141+
variant="invisible"
142+
tooltipDirection="e"
143+
onClick={() => openGitHubPulls(primaryAccountHostname)}
144+
data-testid="sidebar-my-pull-requests"
145+
sx={{ color: 'white' }}
146+
/>
147+
</Stack>
146148

147149
<Stack
148150
direction="vertical"
@@ -195,6 +197,6 @@ export const Sidebar: FC = () => {
195197
/>
196198
)}
197199
</Stack>
198-
</div>
200+
</Stack>
199201
);
200202
};

0 commit comments

Comments
 (0)