Skip to content

refactor(icons): use standard octicons #885

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

Merged
merged 2 commits into from
Mar 20, 2024
Merged

refactor(icons): use standard octicons #885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c42b53c
feat(icons): use octicons
setchy Mar 19, 2024
de0ac09
Merge branch 'main' into feature/octicons
setchy Mar 19, 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
19 changes: 9 additions & 10 deletions src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import { BellIcon } from '@primer/octicons-react';
import {
BellIcon,
GearIcon,
SyncIcon,
XCircleIcon,
} from '@primer/octicons-react';
import { ipcRenderer } from 'electron';
import React, { useCallback, useContext, useMemo } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

import { Logo } from '../components/Logo';
import { AppContext } from '../context/App';
import { IconCog } from '../icons/Cog';
import { IconQuit } from '../icons/Quit';
import { IconRefresh } from '../icons/Refresh';
import { Constants } from '../utils/constants';
import { openExternalLink } from '../utils/comms';

Expand Down Expand Up @@ -78,10 +80,7 @@ export const Sidebar: React.FC = () => {
fetchNotifications();
}}
>
<IconRefresh
className="w-3.5 h-3.5"
aria-label="Refresh Notifications"
/>
<SyncIcon size={16} aria-label="Refresh Notifications" />
</button>

<button
Expand All @@ -95,7 +94,7 @@ export const Sidebar: React.FC = () => {
}
}}
>
<IconCog className="w-4 h-4" aria-label="Settings" />
<GearIcon size={16} aria-label="Settings" />
</button>
</>
)}
Expand All @@ -107,7 +106,7 @@ export const Sidebar: React.FC = () => {
aria-label="Quit Gitify"
onClick={quitApp}
>
<IconQuit className="w-3.5 h-3.5" />
<XCircleIcon size={16} aria-label="Quit Gitify" />
</button>
)}
</div>
Expand Down
80 changes: 38 additions & 42 deletions src/components/__snapshots__/Sidebar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,29 +100,27 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
title="Quit Gitify"
>
<svg
aria-hidden="true"
aria-labelledby="iconQuitId"
className="w-3.5 h-3.5"
aria-hidden="false"
aria-label="Quit Gitify"
className="octicon octicon-x-circle"
fill="currentColor"
focusable="false"
height={16}
role="img"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
style={
{
"display": "inline-block",
"overflow": "visible",
"userSelect": "none",
"verticalAlign": "text-bottom",
}
}
viewBox="0 0 16 16"
width={16}
>
<title
id="iconQuitId"
>
Quit Application
</title>
<g>
<path
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"
fill="currentColor"
opacity={0.4}
/>
<path
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"
fill="currentColor"
/>
</g>
<path
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"
/>
</svg>
</button>
</div>
Expand Down Expand Up @@ -229,29 +227,27 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
title="Quit Gitify"
>
<svg
aria-hidden="true"
aria-labelledby="iconQuitId"
className="w-3.5 h-3.5"
aria-hidden="false"
aria-label="Quit Gitify"
className="octicon octicon-x-circle"
fill="currentColor"
focusable="false"
height={16}
role="img"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
style={
{
"display": "inline-block",
"overflow": "visible",
"userSelect": "none",
"verticalAlign": "text-bottom",
}
}
viewBox="0 0 16 16"
width={16}
>
<title
id="iconQuitId"
>
Quit Application
</title>
<g>
<path
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"
fill="currentColor"
opacity={0.4}
/>
<path
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"
fill="currentColor"
/>
</g>
<path
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"
/>
</svg>
</button>
</div>
Expand Down
27 changes: 0 additions & 27 deletions src/icons/AddAccount.tsx
View file
Open in desktop

This file was deleted.

26 changes: 0 additions & 26 deletions src/icons/Cog.tsx
View file
Open in desktop

This file was deleted.

27 changes: 0 additions & 27 deletions src/icons/Logout.tsx
View file
Open in desktop

This file was deleted.

27 changes: 0 additions & 27 deletions src/icons/Quit.tsx
View file
Open in desktop

This file was deleted.

26 changes: 0 additions & 26 deletions src/icons/Refresh.tsx
View file
Open in desktop

This file was deleted.

18 changes: 10 additions & 8 deletions src/routes/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { ArrowLeftIcon } from '@primer/octicons-react';
import {
ArrowLeftIcon,
PersonAddIcon,
SignOutIcon,
XCircleIcon,
} from '@primer/octicons-react';
import { ipcRenderer } from 'electron';
import React, {
useCallback,
Expand All @@ -12,9 +17,6 @@ import { useNavigate } from 'react-router-dom';
import { FieldCheckbox } from '../components/fields/Checkbox';
import { FieldRadioGroup } from '../components/fields/RadioGroup';
import { AppContext } from '../context/App';
import { IconAddAccount } from '../icons/AddAccount';
import { IconLogOut } from '../icons/Logout';
import { IconQuit } from '../icons/Quit';
import { Appearance } from '../types';
import { apiRequestAuth } from '../utils/api-requests';
import { setAppearance } from '../utils/appearance';
Expand Down Expand Up @@ -172,8 +174,8 @@ export const SettingsRoute: React.FC = () => {
title="Login with GitHub Enterprise"
onClick={goToEnterprise}
>
<IconAddAccount
className="w-5 h-5"
<PersonAddIcon
size={20}
aria-label="Login with GitHub Enterprise"
/>
</button>
Expand All @@ -183,15 +185,15 @@ export const SettingsRoute: React.FC = () => {
title="Logout"
onClick={logoutUser}
>
<IconLogOut className="w-5 h-5" aria-label="Logout" />
<SignOutIcon size={18} aria-label="Logout" />
</button>

<button
className={`${footerButtonClass} mr-0`}
title="Quit Gitify"
onClick={quitApp}
>
<IconQuit className="w-5 h-5" aria-label="Quit Gitify" />
<XCircleIcon size={18} aria-label="Quit Gitify" />
</button>
</div>
</div>
Expand Down
Loading