Skip to content

Commit c24b5cc

Browse files
setchysetchy
authored
refactor: introduce size enum to control all icon/buttons consistently (#1294)
* refactor: introduce size enum to control all icon/buttons consistently * refactor: introduce size enum to control all icon/buttons consistently
1 parent 2c0f041 commit c24b5cc

29 files changed

+346
-95
lines changed

‎src/components/AccountNotifications.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
} from '@primer/octicons-react';
66
import { type FC, useContext, useState } from 'react';
77
import { AppContext } from '../context/App';
8-
import type { Account } from '../types';
8+
import { type Account, Size } from '../types';
99
import type { Notification } from '../typesGitHub';
1010
import { openAccountProfile } from '../utils/links';
1111
import { NotificationRow } from './NotificationRow';
@@ -68,7 +68,7 @@ export const AccountNotifications: FC<IAccountNotifications> = (
6868
onClick={toggleAccountNotifications}
6969
>
7070
<div className="flex gap-3">
71-
<PlatformIcon type={account.platform} size={16} />
71+
<PlatformIcon type={account.platform} size={Size.MEDIUM} />
7272
<button
7373
type="button"
7474
title="Open Profile"
@@ -85,7 +85,7 @@ export const AccountNotifications: FC<IAccountNotifications> = (
8585
title={toggleAccountNotificationsLabel}
8686
onClick={toggleAccountNotifications}
8787
>
88-
<ChevronIcon size={14} />
88+
<ChevronIcon size={Size.SMALL} />
8989
</button>
9090
</div>
9191
</div>

‎src/components/Header.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ArrowLeftIcon } from '@primer/octicons-react';
22
import type { FC, ReactNode } from 'react';
33
import { useNavigate } from 'react-router-dom';
4+
import { Size } from '../types';
45

56
interface IHeader {
67
children: ReactNode;
@@ -17,7 +18,7 @@ export const Header: FC<IHeader> = ({ children }: IHeader) => {
1718
onClick={() => navigate(-1)}
1819
>
1920
<ArrowLeftIcon
20-
size={20}
21+
size={Size.XLARGE}
2122
className="hover:text-gray-400"
2223
aria-label="Go Back"
2324
/>

‎src/components/NotificationRow.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
useState,
1818
} from 'react';
1919
import { AppContext } from '../context/App';
20-
import { IconColor } from '../types';
20+
import { IconColor, Size } from '../types';
2121
import type { Notification } from '../typesGitHub';
2222
import { cn } from '../utils/cn';
2323
import {
@@ -126,7 +126,7 @@ export const NotificationRow: FC<INotificationRow> = ({
126126
title={notificationTitle}
127127
>
128128
<NotificationIcon
129-
size={groupByDate ? 20 : 16}
129+
size={groupByDate ? Size.XLARGE : Size.MEDIUM}
130130
aria-label={notification.subject.type}
131131
/>
132132
</div>
@@ -144,7 +144,7 @@ export const NotificationRow: FC<INotificationRow> = ({
144144
<AvatarIcon
145145
title={repoSlug}
146146
url={repoAvatarUrl}
147-
size="medium"
147+
size={Size.SMALL}
148148
defaultIcon={MarkGithubIcon}
149149
/>
150150
</span>
@@ -180,13 +180,13 @@ export const NotificationRow: FC<INotificationRow> = ({
180180
<AvatarIcon
181181
title={notification.subject.user.login}
182182
url={notification.subject.user.avatar_url}
183-
size="small"
183+
size={Size.XSMALL}
184184
defaultIcon={FeedPersonIcon}
185185
/>
186186
</button>
187187
) : (
188188
<div>
189-
<FeedPersonIcon size={16} className={IconColor.GRAY} />
189+
<FeedPersonIcon size={Size.MEDIUM} className={IconColor.GRAY} />
190190
</div>
191191
)}
192192
<div title={reason.description}>{reason.title}</div>
@@ -261,7 +261,7 @@ export const NotificationRow: FC<INotificationRow> = ({
261261
markNotificationDone(notification);
262262
}}
263263
>
264-
<CheckIcon size={16} aria-label="Mark as Done" />
264+
<CheckIcon size={Size.MEDIUM} aria-label="Mark as Done" />
265265
</button>
266266

267267
<button
@@ -274,7 +274,7 @@ export const NotificationRow: FC<INotificationRow> = ({
274274
markNotificationRead(notification);
275275
}}
276276
>
277-
<ReadIcon size={14} aria-label="Mark as Read" />
277+
<ReadIcon size={Size.SMALL} aria-label="Mark as Read" />
278278
</button>
279279

280280
<button
@@ -283,7 +283,10 @@ export const NotificationRow: FC<INotificationRow> = ({
283283
title="Unsubscribe from Thread"
284284
onClick={unsubscribeFromThread}
285285
>
286-
<BellSlashIcon size={14} aria-label="Unsubscribe from Thread" />
286+
<BellSlashIcon
287+
size={Size.SMALL}
288+
aria-label="Unsubscribe from Thread"
289+
/>
287290
</button>
288291
</div>
289292
</div>

‎src/components/RepositoryNotifications.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
} from '@primer/octicons-react';
88
import { type FC, useCallback, useContext, useState } from 'react';
99
import { AppContext } from '../context/App';
10+
import { Size } from '../types';
1011
import type { Notification } from '../typesGitHub';
1112
import { openRepository } from '../utils/links';
1213
import { NotificationRow } from './NotificationRow';
@@ -59,7 +60,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
5960
<AvatarIcon
6061
title={repoName}
6162
url={avatarUrl}
62-
size="medium"
63+
size={Size.LARGE}
6364
defaultIcon={MarkGithubIcon}
6465
/>
6566
<span
@@ -77,7 +78,10 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
7778
title="Mark Repository as Done"
7879
onClick={markRepoAsDone}
7980
>
80-
<CheckIcon size={16} aria-label="Mark Repository as Done" />
81+
<CheckIcon
82+
size={Size.MEDIUM}
83+
aria-label="Mark Repository as Done"
84+
/>
8185
</button>
8286

8387
<button
@@ -86,7 +90,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
8690
title="Mark Repository as Read"
8791
onClick={markRepoAsRead}
8892
>
89-
<ReadIcon size={14} aria-label="Mark Repository as Read" />
93+
<ReadIcon size={Size.SMALL} aria-label="Mark Repository as Read" />
9094
</button>
9195

9296
<button
@@ -95,7 +99,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
9599
title={toggleRepositoryNotificationsLabel}
96100
onClick={toggleRepositoryNotifications}
97101
>
98-
<ChevronIcon size={14} />
102+
<ChevronIcon size={Size.SMALL} />
99103
</button>
100104
</div>
101105
</div>

‎src/components/Sidebar.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
import { type FC, useContext, useMemo } from 'react';
1010
import { useLocation, useNavigate } from 'react-router-dom';
1111
import { AppContext } from '../context/App';
12+
import { Size } from '../types';
1213
import { quitApp } from '../utils/comms';
1314
import {
1415
openGitHubIssues,
@@ -54,7 +55,7 @@ export const Sidebar: FC = () => {
5455
onClick={() => openGitifyRepository()}
5556
data-testid="gitify-logo"
5657
>
57-
<LogoIcon size="small" aria-label="Open Gitify" />
58+
<LogoIcon size={Size.SMALL} aria-label="Open Gitify" />
5859
</button>
5960

6061
<SidebarButton
@@ -83,7 +84,7 @@ export const Sidebar: FC = () => {
8384
<SidebarButton
8485
title="Refresh Notifications"
8586
icon={SyncIcon}
86-
size={16}
87+
size={Size.MEDIUM}
8788
loading={status === 'loading'}
8889
disabled={status === 'loading'}
8990
onClick={() => refreshNotifications()}
@@ -92,7 +93,7 @@ export const Sidebar: FC = () => {
9293
<SidebarButton
9394
title="Settings"
9495
icon={GearIcon}
95-
size={16}
96+
size={Size.MEDIUM}
9697
onClick={() => toggleSettings()}
9798
/>
9899
</>
@@ -102,7 +103,7 @@ export const Sidebar: FC = () => {
102103
<SidebarButton
103104
title="Quit Gitify"
104105
icon={XCircleIcon}
105-
size={16}
106+
size={Size.MEDIUM}
106107
onClick={() => quitApp()}
107108
/>
108109
)}

‎src/components/__snapshots__/RepositoryNotifications.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/buttons/Button.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { MarkGithubIcon } from '@primer/octicons-react';
22
import { fireEvent, render, screen } from '@testing-library/react';
33
import { shell } from 'electron';
4-
import type { Link } from '../../types';
4+
import { type Link, Size } from '../../types';
55
import { Button, type IButton } from './Button';
66

77
describe('components/buttons/Button.tsx', () => {
@@ -10,7 +10,7 @@ describe('components/buttons/Button.tsx', () => {
1010
const props: IButton = {
1111
name: 'Button',
1212
label: 'button',
13-
size: 16,
13+
size: Size.MEDIUM,
1414
};
1515

1616
beforeEach(() => {

‎src/components/buttons/Button.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Icon } from '@primer/octicons-react';
22
import type { FC } from 'react';
3-
import type { Link } from '../../types';
3+
import { type Link, Size } from '../../types';
44
import { cn } from '../../utils/cn';
55
import { openExternalLink } from '../../utils/comms';
66

@@ -9,7 +9,7 @@ export interface IButton {
99
label: string;
1010
className?: string;
1111
icon?: Icon;
12-
size?: number;
12+
size?: Size;
1313
url?: Link;
1414
onClick?: () => void;
1515
disabled?: boolean;
@@ -36,7 +36,9 @@ export const Button: FC<IButton> = (props: IButton) => {
3636
}
3737
}}
3838
>
39-
{props.icon && <props.icon className="mr-1" size={props.size ?? 14} />}
39+
{props.icon && (
40+
<props.icon className="mr-1" size={props.size ?? Size.MEDIUM} />
41+
)}
4042
{props.name}
4143
</button>
4244
);

‎src/components/buttons/PillButton.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Icon } from '@primer/octicons-react';
22
import type { FC } from 'react';
3-
import type { IconColor } from '../../types';
3+
import { type IconColor, Size } from '../../types';
44

55
export interface IPillButton {
66
key?: string;
@@ -17,7 +17,11 @@ export const PillButton: FC<IPillButton> = (props: IPillButton) => {
1717
type="button"
1818
className="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
1919
>
20-
<props.icon size={12} className={props.color} aria-label={props.title} />
20+
<props.icon
21+
size={Size.XSMALL}
22+
className={props.color}
23+
aria-label={props.title}
24+
/>
2125
{props.metric}
2226
</button>
2327
);

‎src/components/buttons/SidebarButton.test.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { MarkGithubIcon } from '@primer/octicons-react';
22
import { render } from '@testing-library/react';
3+
import { Size } from '../../types';
34
import { type ISidebarButton, SidebarButton } from './SidebarButton';
45

56
describe('components/buttons/SidebarButton.tsx', () => {
@@ -22,4 +23,15 @@ describe('components/buttons/SidebarButton.tsx', () => {
2223
const tree = render(<SidebarButton {...props} />);
2324
expect(tree).toMatchSnapshot();
2425
});
26+
27+
it('should render - medium', () => {
28+
const props: ISidebarButton = {
29+
title: 'Mock Sidebar Button',
30+
metric: 0,
31+
icon: MarkGithubIcon,
32+
size: Size.MEDIUM,
33+
};
34+
const tree = render(<SidebarButton {...props} />);
35+
expect(tree).toMatchSnapshot();
36+
});
2537
});

0 commit comments

Comments
 (0)