Skip to content

feat: Improve settings UI #454

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
Dec 12, 2020
Merged

feat: Improve settings UI #454

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
5f61bcb
feat: add Icons to settings
manosim Dec 12, 2020
9c0ef0f
chore: Fix tests
manosim Dec 12, 2020
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
27 changes: 27 additions & 0 deletions src/icons/AddAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import * as React from 'react';

export const IconAddAccount = ({ className = '' }: { className?: string }) => {
return (
<svg
aria-hidden="true"
className={className}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
role="img"
aria-labelledby="iconAddAccountId"
>
<title id="iconAddAccountId">Add Account</title>
<g>
<path
fill="currentColor"
d="M640 224v32a16 16 0 01-16 16h-64v64a16 16 0 01-16 16h-32a16 16 0 01-16-16v-64h-64a16 16 0 01-16-16v-32a16 16 0 0116-16h64v-64a16 16 0 0116-16h32a16 16 0 0116 16v64h64a16 16 0 0116 16z"
opacity={0.4}
/>
<path
fill="currentColor"
d="M224 256A128 128 0 1096 128a128 128 0 00128 128zm89.6 32h-16.7a174.08 174.08 0 01-145.8 0h-16.7A134.43 134.43 0 000 422.4V464a48 48 0 0048 48h352a48 48 0 0048-48v-41.6A134.43 134.43 0 00313.6 288z"
/>
</g>
</svg>
);
};
27 changes: 27 additions & 0 deletions src/icons/Logout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import * as React from 'react';

export const IconLogOut = ({ className = '' }: { className?: string }) => {
return (
<svg
aria-hidden="true"
className={className}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
role="img"
aria-labelledby="iconLogoutId"
>
<title id="iconLogoutId">Logout from all accounts</title>
<g>
<path
fill="currentColor"
d="M180 448H96a96 96 0 01-96-96V160a96 96 0 0196-96h84a12 12 0 0112 12v40a12 12 0 01-12 12H96a32 32 0 00-32 32v192a32 32 0 0032 32h84a12 12 0 0112 12v40a12 12 0 01-12 12z"
opacity={0.4}
/>
<path
fill="currentColor"
d="M353 88.3l151.9 150.6a24 24 0 010 34.1l-152 150.8a24.08 24.08 0 01-33.9-.1l-21.9-21.9a24.07 24.07 0 01.8-34.7l77.6-71.1H184a23.94 23.94 0 01-24-24v-32a23.94 23.94 0 0124-24h191.5l-77.6-71.1a24 24 0 01-.7-34.6l21.9-21.9a24 24 0 0133.9-.1z"
/>
</g>
</svg>
);
};
27 changes: 27 additions & 0 deletions src/icons/Quit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import * as React from 'react';

export const IconQuit = ({ className = '' }: { className?: string }) => {
return (
<svg
aria-hidden="true"
className={className}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
role="img"
aria-labelledby="iconQuitId"
>
<title id="iconQuitId">Quit Application</title>
<g>
<path
fill="currentColor"
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"
opacity={0.4}
/>
<path
fill="currentColor"
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"
/>
</g>
</svg>
);
};
84 changes: 78 additions & 6 deletions src/js/routes/__snapshots__/settings.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,24 +151,96 @@ exports[`routes/settings.tsx should render itself & its children 1`] = `
<div>
<button
aria-label="Login with GitHub Enterprise"
className="bg-gray-400 hover:bg-gray-500 hover:text-white rounded py-1 px-2 my-1 mx-2 text-sm focus:outline-none"
className="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
onClick={[Function]}
>
Add Enterprise
<svg
aria-hidden="true"
aria-labelledby="iconAddAccountId"
className="w-5 h-5"
role="img"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<title
id="iconAddAccountId"
>
Add Account
</title>
<g>
<path
d="M640 224v32a16 16 0 01-16 16h-64v64a16 16 0 01-16 16h-32a16 16 0 01-16-16v-64h-64a16 16 0 01-16-16v-32a16 16 0 0116-16h64v-64a16 16 0 0116-16h32a16 16 0 0116 16v64h64a16 16 0 0116 16z"
fill="currentColor"
opacity={0.4}
/>
<path
d="M224 256A128 128 0 1096 128a128 128 0 00128 128zm89.6 32h-16.7a174.08 174.08 0 01-145.8 0h-16.7A134.43 134.43 0 000 422.4V464a48 48 0 0048 48h352a48 48 0 0048-48v-41.6A134.43 134.43 0 00313.6 288z"
fill="currentColor"
/>
</g>
</svg>
</button>
<button
aria-label="Logout"
className="bg-gray-400 hover:bg-gray-500 hover:text-white rounded py-1 px-2 my-1 mx-2 text-sm focus:outline-none"
className="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
onClick={[Function]}
>
Logout
<svg
aria-hidden="true"
aria-labelledby="iconLogoutId"
className="w-5 h-5"
role="img"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<title
id="iconLogoutId"
>
Logout from all accounts
</title>
<g>
<path
d="M180 448H96a96 96 0 01-96-96V160a96 96 0 0196-96h84a12 12 0 0112 12v40a12 12 0 01-12 12H96a32 32 0 00-32 32v192a32 32 0 0032 32h84a12 12 0 0112 12v40a12 12 0 01-12 12z"
fill="currentColor"
opacity={0.4}
/>
<path
d="M353 88.3l151.9 150.6a24 24 0 010 34.1l-152 150.8a24.08 24.08 0 01-33.9-.1l-21.9-21.9a24.07 24.07 0 01.8-34.7l77.6-71.1H184a23.94 23.94 0 01-24-24v-32a23.94 23.94 0 0124-24h191.5l-77.6-71.1a24 24 0 01-.7-34.6l21.9-21.9a24 24 0 0133.9-.1z"
fill="currentColor"
/>
</g>
</svg>
</button>
<button
aria-label="Quit Gitify"
className="bg-gray-400 hover:bg-gray-500 hover:text-white rounded py-1 px-2 my-1 mx-2 text-sm focus:outline-none mr-0"
className="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none mr-0"
onClick={[Function]}
>
Quit
<svg
aria-hidden="true"
aria-labelledby="iconQuitId"
className="w-5 h-5"
role="img"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<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>
</svg>
</button>
</div>
</div>
Expand Down
13 changes: 8 additions & 5 deletions src/js/routes/settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import { ArrowLeftIcon } from '@primer/octicons-react';
import { AppState, SettingsState } from '../../types/reducers';
import { fetchNotifications, updateSetting, logout } from '../actions';
import { FieldCheckbox } from '../components/ui/checkbox';
import { IconAddAccount } from '../../icons/AddAccount';
import { IconLogOut } from '../../icons/Logout';
import { IconQuit } from '../../icons/Quit';
import { updateTrayIcon } from '../utils/comms';

const isLinux = remote.process.platform === 'linux';
Expand Down Expand Up @@ -54,10 +57,10 @@ export class SettingsRoute extends React.Component<IProps> {
}

render() {
const { hasMultipleAccounts, settings } = this.props;
const { settings } = this.props;

const footerButtonClass =
'bg-gray-400 hover:bg-gray-500 hover:text-white rounded py-1 px-2 my-1 mx-2 text-sm focus:outline-none';
'hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none';

return (
<div className="flex flex-1 flex-col">
Expand Down Expand Up @@ -129,23 +132,23 @@ export class SettingsRoute extends React.Component<IProps> {
aria-label="Login with GitHub Enterprise"
onClick={this.goToEnterprise.bind(this)}
>
Add Enterprise
<IconAddAccount className="w-5 h-5" />
</button>

<button
className={footerButtonClass}
aria-label="Logout"
onClick={this.logout.bind(this)}
>
{hasMultipleAccounts ? 'Logout from all accounts' : 'Logout'}
<IconLogOut className="w-5 h-5" />
</button>

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