Skip to content

Commit 96fdac5

Browse files
setchyadufr
setchy
authored and
adufr
committed
refactor(icons): use standard octicons (gitify-app#885)
1 parent c22fa59 commit 96fdac5

File tree

11 files changed

+95
-259
lines changed

11 files changed

+95
-259
lines changed

‎src/components/Sidebar.tsx

+9-10
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import { BellIcon } from '@primer/octicons-react';
1+
import {
2+
BellIcon,
3+
GearIcon,
4+
SyncIcon,
5+
XCircleIcon,
6+
} from '@primer/octicons-react';
27
import { ipcRenderer } from 'electron';
38
import React, { useCallback, useContext, useMemo } from 'react';
49
import { useNavigate, useLocation } from 'react-router-dom';
510

611
import { Logo } from '../components/Logo';
712
import { AppContext } from '../context/App';
8-
import { IconCog } from '../icons/Cog';
9-
import { IconQuit } from '../icons/Quit';
10-
import { IconRefresh } from '../icons/Refresh';
1113
import { Constants } from '../utils/constants';
1214
import { openExternalLink } from '../utils/comms';
1315

@@ -78,10 +80,7 @@ export const Sidebar: React.FC = () => {
7880
fetchNotifications();
7981
}}
8082
>
81-
<IconRefresh
82-
className="w-3.5 h-3.5"
83-
aria-label="Refresh Notifications"
84-
/>
83+
<SyncIcon size={16} aria-label="Refresh Notifications" />
8584
</button>
8685

8786
<button
@@ -95,7 +94,7 @@ export const Sidebar: React.FC = () => {
9594
}
9695
}}
9796
>
98-
<IconCog className="w-4 h-4" aria-label="Settings" />
97+
<GearIcon size={16} aria-label="Settings" />
9998
</button>
10099
</>
101100
)}
@@ -107,7 +106,7 @@ export const Sidebar: React.FC = () => {
107106
aria-label="Quit Gitify"
108107
onClick={quitApp}
109108
>
110-
<IconQuit className="w-3.5 h-3.5" />
109+
<XCircleIcon size={16} aria-label="Quit Gitify" />
111110
</button>
112111
)}
113112
</div>

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

+38-42
Original file line numberDiff line numberDiff line change
@@ -99,29 +99,27 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
9999
title="Quit Gitify"
100100
>
101101
<svg
102-
aria-hidden="true"
103-
aria-labelledby="iconQuitId"
104-
className="w-3.5 h-3.5"
102+
aria-hidden="false"
103+
aria-label="Quit Gitify"
104+
className="octicon octicon-x-circle"
105+
fill="currentColor"
106+
focusable="false"
107+
height={16}
105108
role="img"
106-
viewBox="0 0 512 512"
107-
xmlns="http://www.w3.org/2000/svg"
109+
style={
110+
{
111+
"display": "inline-block",
112+
"overflow": "visible",
113+
"userSelect": "none",
114+
"verticalAlign": "text-bottom",
115+
}
116+
}
117+
viewBox="0 0 16 16"
118+
width={16}
108119
>
109-
<title
110-
id="iconQuitId"
111-
>
112-
Quit Application
113-
</title>
114-
<g>
115-
<path
116-
d="M272 0a23.94 23.94 0 0124 24v240a23.94 23.94 0 01-24 24h-32a23.94 23.94 0 01-24-24V24a23.94 23.94 0 0124-24z"
117-
fill="currentColor"
118-
opacity={0.4}
119-
/>
120-
<path
121-
d="M504 256c0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4A248 248 0 01111.8 54.2a24.07 24.07 0 0135 7.7L162.6 90a24 24 0 01-6.6 31 168 168 0 00100 303c91.6 0 168.6-74.2 168-169.1a168.07 168.07 0 00-68.1-134 23.86 23.86 0 01-6.5-30.9l15.8-28.1a24 24 0 0134.8-7.8A247.51 247.51 0 01504 256z"
122-
fill="currentColor"
123-
/>
124-
</g>
120+
<path
121+
d="M2.344 2.343h-.001a8 8 0 0 1 11.314 11.314A8.002 8.002 0 0 1 .234 10.089a8 8 0 0 1 2.11-7.746Zm1.06 10.253a6.5 6.5 0 1 0 9.108-9.275 6.5 6.5 0 0 0-9.108 9.275ZM6.03 4.97 8 6.94l1.97-1.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-1.97 1.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L6.94 8 4.97 6.03a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018Z"
122+
/>
125123
</svg>
126124
</button>
127125
</div>
@@ -227,29 +225,27 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
227225
title="Quit Gitify"
228226
>
229227
<svg
230-
aria-hidden="true"
231-
aria-labelledby="iconQuitId"
232-
className="w-3.5 h-3.5"
228+
aria-hidden="false"
229+
aria-label="Quit Gitify"
230+
className="octicon octicon-x-circle"
231+
fill="currentColor"
232+
focusable="false"
233+
height={16}
233234
role="img"
234-
viewBox="0 0 512 512"
235-
xmlns="http://www.w3.org/2000/svg"
235+
style={
236+
{
237+
"display": "inline-block",
238+
"overflow": "visible",
239+
"userSelect": "none",
240+
"verticalAlign": "text-bottom",
241+
}
242+
}
243+
viewBox="0 0 16 16"
244+
width={16}
236245
>
237-
<title
238-
id="iconQuitId"
239-
>
240-
Quit Application
241-
</title>
242-
<g>
243-
<path
244-
d="M272 0a23.94 23.94 0 0124 24v240a23.94 23.94 0 01-24 24h-32a23.94 23.94 0 01-24-24V24a23.94 23.94 0 0124-24z"
245-
fill="currentColor"
246-
opacity={0.4}
247-
/>
248-
<path
249-
d="M504 256c0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4A248 248 0 01111.8 54.2a24.07 24.07 0 0135 7.7L162.6 90a24 24 0 01-6.6 31 168 168 0 00100 303c91.6 0 168.6-74.2 168-169.1a168.07 168.07 0 00-68.1-134 23.86 23.86 0 01-6.5-30.9l15.8-28.1a24 24 0 0134.8-7.8A247.51 247.51 0 01504 256z"
250-
fill="currentColor"
251-
/>
252-
</g>
246+
<path
247+
d="M2.344 2.343h-.001a8 8 0 0 1 11.314 11.314A8.002 8.002 0 0 1 .234 10.089a8 8 0 0 1 2.11-7.746Zm1.06 10.253a6.5 6.5 0 1 0 9.108-9.275 6.5 6.5 0 0 0-9.108 9.275ZM6.03 4.97 8 6.94l1.97-1.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-1.97 1.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L6.94 8 4.97 6.03a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018Z"
248+
/>
253249
</svg>
254250
</button>
255251
</div>

‎src/icons/AddAccount.tsx

-27
This file was deleted.

‎src/icons/Cog.tsx

-26
This file was deleted.

‎src/icons/Logout.tsx

-27
This file was deleted.

‎src/icons/Quit.tsx

-27
This file was deleted.

‎src/icons/Refresh.tsx

-26
This file was deleted.

‎src/routes/Settings.tsx

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { ArrowLeftIcon } from '@primer/octicons-react';
1+
import {
2+
ArrowLeftIcon,
3+
PersonAddIcon,
4+
SignOutIcon,
5+
XCircleIcon,
6+
} from '@primer/octicons-react';
27
import { ipcRenderer } from 'electron';
38
import React, {
49
useCallback,
@@ -12,9 +17,6 @@ import { useNavigate } from 'react-router-dom';
1217
import { FieldCheckbox } from '../components/fields/Checkbox';
1318
import { FieldRadioGroup } from '../components/fields/RadioGroup';
1419
import { AppContext } from '../context/App';
15-
import { IconAddAccount } from '../icons/AddAccount';
16-
import { IconLogOut } from '../icons/Logout';
17-
import { IconQuit } from '../icons/Quit';
1820
import { Appearance } from '../types';
1921
import { apiRequestAuth } from '../utils/api-requests';
2022
import { setAppearance } from '../utils/appearance';
@@ -190,8 +192,8 @@ export const SettingsRoute: React.FC = () => {
190192
title="Login with GitHub Enterprise"
191193
onClick={goToEnterprise}
192194
>
193-
<IconAddAccount
194-
className="w-5 h-5"
195+
<PersonAddIcon
196+
size={20}
195197
aria-label="Login with GitHub Enterprise"
196198
/>
197199
</button>
@@ -201,15 +203,15 @@ export const SettingsRoute: React.FC = () => {
201203
title="Logout"
202204
onClick={logoutUser}
203205
>
204-
<IconLogOut className="w-5 h-5" aria-label="Logout" />
206+
<SignOutIcon size={18} aria-label="Logout" />
205207
</button>
206208

207209
<button
208210
className={`${footerButtonClass} mr-0`}
209211
title="Quit Gitify"
210212
onClick={quitApp}
211213
>
212-
<IconQuit className="w-5 h-5" aria-label="Quit Gitify" />
214+
<XCircleIcon size={18} aria-label="Quit Gitify" />
213215
</button>
214216
</div>
215217
</div>

0 commit comments

Comments
 (0)