diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index cc4bdee3a..eda622c32 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -7,7 +7,7 @@ import { useLocation, } from 'react-router-dom'; -import { BaseStyles, ThemeProvider } from '@primer/react'; +import { BaseStyles, Box, ThemeProvider } from '@primer/react'; import { Loading } from './components/Loading'; import { Sidebar } from './components/Sidebar'; @@ -47,7 +47,7 @@ export const App = () => { -
+ @@ -93,7 +93,7 @@ export const App = () => { element={} /> -
+ diff --git a/src/renderer/components/avatars/AvatarWithFallback.tsx b/src/renderer/components/avatars/AvatarWithFallback.tsx index 8610c922e..a2f6149a3 100644 --- a/src/renderer/components/avatars/AvatarWithFallback.tsx +++ b/src/renderer/components/avatars/AvatarWithFallback.tsx @@ -26,12 +26,15 @@ export const AvatarWithFallback: React.FC = ({ const [isBroken, setIsBroken] = useState(false); const isNonHuman = isNonHumanUser(userType); + + // TODO explore using AnchoredOverlay component (https://primer.style/components/anchored-overlay/react/alpha) to render Avatar Card on hover return ( {!src || isBroken ? ( isNonHuman ? ( @@ -48,7 +51,12 @@ export const AvatarWithFallback: React.FC = ({ onError={() => setIsBroken(true)} /> )} - {name && {name}} + {name && ( + // TODO add truncation logic for long names + + {name} + + )} ); }; diff --git a/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap b/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap index 16d16b195..ad94442ee 100644 --- a/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap +++ b/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap @@ -6,7 +6,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback "baseElement":
@gitify-app @@ -41,7 +41,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback , "container":
@gitify-app @@ -133,7 +133,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback "baseElement":
@gitify-app @@ -168,7 +168,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback , "container":
@gitify-app @@ -256,7 +256,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback icon when the image fails to load (isBroken = true) - human user 1`] = `
@gitify-app @@ -285,7 +285,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback icon when the image fails to load (isBroken = true) - non human user 1`] = `
@gitify-app @@ -318,7 +318,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar "baseElement":
@gitify-app @@ -347,7 +347,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar , "container":
@gitify-app @@ -433,7 +433,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar "baseElement":
@gitify-app @@ -462,7 +462,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar , "container":
@gitify-app diff --git a/src/renderer/components/fields/Checkbox.tsx b/src/renderer/components/fields/Checkbox.tsx index 84b55f0b0..4a0fd8581 100644 --- a/src/renderer/components/fields/Checkbox.tsx +++ b/src/renderer/components/fields/Checkbox.tsx @@ -1,4 +1,7 @@ import type { FC, ReactNode } from 'react'; + +import { Stack } from '@primer/react'; + import { cn } from '../../utils/cn'; import { Tooltip } from './Tooltip'; @@ -13,32 +16,34 @@ export interface ICheckbox { export const Checkbox: FC = (props: ICheckbox) => { return ( -
-
- + + -
- - {props.tooltip && ( - - )} -
-
-
+ + {props.tooltip && ( + + )} + ); }; diff --git a/src/renderer/components/fields/RadioGroup.tsx b/src/renderer/components/fields/RadioGroup.tsx index 990254158..d395edeb4 100644 --- a/src/renderer/components/fields/RadioGroup.tsx +++ b/src/renderer/components/fields/RadioGroup.tsx @@ -1,4 +1,7 @@ import type { ChangeEvent, FC } from 'react'; + +import { Stack } from '@primer/react'; + import type { RadioGroupItem } from '../../types'; import { FieldLabel } from './FieldLabel'; @@ -12,33 +15,38 @@ export interface IRadioGroup { export const RadioGroup: FC = (props: IRadioGroup) => { return ( -
+ -
- {props.options.map((item) => { - const name = `${props.name}_${item.value.toLowerCase()}`; + {props.options.map((item) => { + const name = `radio-${props.name}-${item.value}`.toLowerCase(); - return ( -
- - -
- ); - })} -
-
+ return ( + + + + + ); + })} + ); }; diff --git a/src/renderer/components/fields/Tooltip.test.tsx b/src/renderer/components/fields/Tooltip.test.tsx index bd76b4bb0..ae81a48d4 100644 --- a/src/renderer/components/fields/Tooltip.test.tsx +++ b/src/renderer/components/fields/Tooltip.test.tsx @@ -3,7 +3,7 @@ import { type ITooltip, Tooltip } from './Tooltip'; describe('renderer/components/fields/Tooltip.tsx', () => { const props: ITooltip = { - name: 'tooltip', + name: 'test', tooltip: 'This is some tooltip text', }; @@ -15,7 +15,7 @@ describe('renderer/components/fields/Tooltip.tsx', () => { it('should display on mouse enter / leave', () => { render(); - const tooltipElement = screen.getByLabelText('tooltip'); + const tooltipElement = screen.getByTestId('tooltip-test'); fireEvent.mouseEnter(tooltipElement); expect(tooltipElement).toMatchSnapshot(); diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/fields/Tooltip.tsx index 4a89746d5..377494bbb 100644 --- a/src/renderer/components/fields/Tooltip.tsx +++ b/src/renderer/components/fields/Tooltip.tsx @@ -1,4 +1,5 @@ import { QuestionIcon } from '@primer/octicons-react'; +import { Box } from '@primer/react'; import { type FC, type ReactNode, useState } from 'react'; export interface ITooltip { @@ -10,21 +11,22 @@ export const Tooltip: FC = (props: ITooltip) => { const [showTooltip, setShowTooltip] = useState(false); return ( - setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)} + data-testid={`tooltip-${props.name}`} > {showTooltip && ( -
-
+ + {props.tooltip} -
-
+ + )} - + ); }; diff --git a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap index fd71ec0d4..9f0e78ed3 100644 --- a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap +++ b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap @@ -6,56 +6,54 @@ exports[`renderer/components/fields/Checkbox.tsx should render 1`] = ` "baseElement":
-
- -
- -
-
-
-
- , - "container":
-
-
-
- -
+ Appearance +
+ , + "container":
+
+ + +
, "debug": [Function], "findAllByAltText": [Function], diff --git a/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap b/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap index 5f74db2a9..519825efd 100644 --- a/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap +++ b/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap @@ -6,7 +6,13 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = ` "baseElement":
-
- , - "container":
-
- -
-
+ , + "container":
+
+ +
+ + +
+
+ + +
+
, "debug": [Function], "findAllByAltText": [Function], @@ -171,7 +199,13 @@ exports[`renderer/components/fields/RadioGroup.tsx should render as disabled 1`] "baseElement":
-
- , - "container":
-
- -
-
+ , + "container":
+
+ +
+ + +
+
+ + +
+
, "debug": [Function], "findAllByAltText": [Function], diff --git a/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap index d65bd91d4..e5931df76 100644 --- a/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap +++ b/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap @@ -1,10 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter / leave 1`] = ` -
This is some tooltip text
- +
`; exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter / leave 2`] = ` - - +
`; exports[`renderer/components/fields/Tooltip.tsx should render 1`] = ` @@ -64,10 +66,11 @@ exports[`renderer/components/fields/Tooltip.tsx should render 1`] = ` "asFragment": [Function], "baseElement":
- - +
, "container":
- - +
, "debug": [Function], "findAllByAltText": [Function], diff --git a/src/renderer/components/notifications/AccountNotifications.tsx b/src/renderer/components/notifications/AccountNotifications.tsx index db2f0fabc..a749bfaae 100644 --- a/src/renderer/components/notifications/AccountNotifications.tsx +++ b/src/renderer/components/notifications/AccountNotifications.tsx @@ -1,7 +1,7 @@ import { type FC, type MouseEvent, useContext, useMemo, useState } from 'react'; import { GitPullRequestIcon, IssueOpenedIcon } from '@primer/octicons-react'; -import { Button, IconButton } from '@primer/react'; +import { Box, Button, Stack } from '@primer/react'; import { AppContext } from '../../context/App'; import { type Account, type GitifyError, Size } from '../../types'; @@ -16,6 +16,7 @@ import { import { AllRead } from '../AllRead'; import { Oops } from '../Oops'; import { AvatarWithFallback } from '../avatars/AvatarWithFallback'; +import { HoverButton } from '../primitives/HoverButton'; import { HoverGroup } from '../primitives/HoverGroup'; import { NotificationRow } from './NotificationRow'; import { RepositoryNotifications } from './RepositoryNotifications'; @@ -34,6 +35,9 @@ export const AccountNotifications: FC = ( const { settings } = useContext(AppContext); + const [showAccountNotifications, setShowAccountNotifications] = + useState(true); + const groupedNotifications = Object.values( notifications.reduce( (acc: { [key: string]: Notification[] }, notification) => { @@ -51,10 +55,7 @@ export const AccountNotifications: FC = ( [notifications], ); - const [showAccountNotifications, setShowAccountNotifications] = - useState(true); - - const toggleAccountNotifications = () => { + const actionToggleAccountNotifications = () => { setShowAccountNotifications(!showAccountNotifications); }; @@ -69,70 +70,63 @@ export const AccountNotifications: FC = ( return ( <> {showAccountHeader && ( -
- - - - ) => { - // Don't trigger onClick of parent element. - event.stopPropagation(); - openGitHubIssues(account.hostname); - }} - data-testid="account-issues" - /> - - ) => { // Don't trigger onClick of parent element. event.stopPropagation(); - openGitHubPulls(account.hostname); + openAccountProfile(account); }} - data-testid="account-pull-requests" - /> - - - -
+ data-testid="account-profile" + > + + + + + openGitHubIssues(account.hostname)} + /> + + openGitHubPulls(account.hostname)} + /> + + + + + )} {showAccountNotifications && ( diff --git a/src/renderer/components/notifications/NotificationFooter.tsx b/src/renderer/components/notifications/NotificationFooter.tsx index 37655d41e..dba9c20ac 100644 --- a/src/renderer/components/notifications/NotificationFooter.tsx +++ b/src/renderer/components/notifications/NotificationFooter.tsx @@ -29,7 +29,7 @@ export const NotificationFooter: FC = ({ > {notification.subject.user ? ( ) => { // Don't trigger onClick of parent element. event.stopPropagation(); diff --git a/src/renderer/components/notifications/NotificationHeader.tsx b/src/renderer/components/notifications/NotificationHeader.tsx index 7863429a7..2e41e7b22 100644 --- a/src/renderer/components/notifications/NotificationHeader.tsx +++ b/src/renderer/components/notifications/NotificationHeader.tsx @@ -1,6 +1,6 @@ import { type FC, type MouseEvent, useContext } from 'react'; -import { Box, Stack, Tooltip } from '@primer/react'; +import { Box, Stack } from '@primer/react'; import { AppContext } from '../../context/App'; import { GroupBy, Opacity, Size } from '../../types'; @@ -28,9 +28,10 @@ export const NotificationHeader: FC = ({ return ( groupByDate && ( - - + + ) => { // Don't trigger onClick of parent element. @@ -47,17 +48,17 @@ export const NotificationHeader: FC = ({ userType={notification.repository.owner.type} /> - - - {notificationNumber} - - + + {notificationNumber} + + + ) ); }; diff --git a/src/renderer/components/notifications/NotificationRow.tsx b/src/renderer/components/notifications/NotificationRow.tsx index da29a6ba4..31dd24b1f 100644 --- a/src/renderer/components/notifications/NotificationRow.tsx +++ b/src/renderer/components/notifications/NotificationRow.tsx @@ -1,13 +1,7 @@ -import { - type FC, - type MouseEvent, - useCallback, - useContext, - useState, -} from 'react'; +import { type FC, useCallback, useContext, useState } from 'react'; import { BellSlashIcon, CheckIcon, ReadIcon } from '@primer/octicons-react'; -import { IconButton, Tooltip } from '@primer/react'; +import { Box, Stack, Text, Tooltip } from '@primer/react'; import { AppContext } from '../../context/App'; import { GroupBy, Opacity, Size } from '../../types'; @@ -20,6 +14,7 @@ import { getNotificationTypeIconColor, } from '../../utils/icons'; import { openNotification } from '../../utils/links'; +import { HoverButton } from '../primitives/HoverButton'; import { HoverGroup } from '../primitives/HoverGroup'; import { NotificationFooter } from './NotificationFooter'; import { NotificationHeader } from './NotificationHeader'; @@ -62,10 +57,19 @@ export const NotificationRow: FC = ({ settings, ]); - const unsubscribeFromThread = (event: MouseEvent) => { - // Don't trigger onClick of parent element. - event.stopPropagation(); + const actionMarkAsDone = () => { + setAnimateExit(!settings.delayNotificationState); + setShowAsRead(settings.delayNotificationState); + markNotificationsAsDone([notification]); + }; + + const actionMarkAsRead = () => { + setAnimateExit(!settings.delayNotificationState); + setShowAsRead(settings.delayNotificationState); + markNotificationsAsRead([notification]); + }; + const actionUnsubscribeFromThread = () => { unsubscribeNotification(notification); }; @@ -82,92 +86,92 @@ export const NotificationRow: FC = ({ : ''; const notificationTitle = - `${notification.subject.title} ${notificationNumber}`.trim(); + `${notification.subject.title} ${notificationNumber && `[${notificationNumber}]`}`.trim(); const groupByDate = settings.groupBy === GroupBy.DATE; return ( -
-
+ -
- -
handleNotification()} - > - -
handleNotification()} > - {notification.subject.title} - + + - {notificationNumber} - -
- - -
- - {!animateExit && ( - - {isMarkAsDoneFeatureSupported(notification.account) && ( - + {notification.subject.title} + + + {notificationNumber} + + + + + + + {!animateExit && ( + + { - setAnimateExit(!settings.delayNotificationState); - setShowAsRead(settings.delayNotificationState); - markNotificationsAsDone([notification]); - }} - data-testid="notification-mark-as-done" + enabled={isMarkAsDoneFeatureSupported(notification.account)} + testid="notification-mark-as-done" + action={actionMarkAsDone} /> - )} - - { - setAnimateExit(!settings.delayNotificationState); - setShowAsRead(settings.delayNotificationState); - markNotificationsAsRead([notification]); - }} - data-testid="notification-mark-as-read" - /> - - - - )} -
+ + + + + + )} + + ); }; diff --git a/src/renderer/components/notifications/RepositoryNotifications.test.tsx b/src/renderer/components/notifications/RepositoryNotifications.test.tsx index 2aadeb17b..72cb19b65 100644 --- a/src/renderer/components/notifications/RepositoryNotifications.test.tsx +++ b/src/renderer/components/notifications/RepositoryNotifications.test.tsx @@ -47,7 +47,7 @@ describe('renderer/components/notifications/RepositoryNotifications.tsx', () => , ); - fireEvent.click(screen.getByText(props.repoName)); + fireEvent.click(screen.getByTestId('open-repository')); expect(openExternalLinkMock).toHaveBeenCalledTimes(1); expect(openExternalLinkMock).toHaveBeenCalledWith( @@ -64,7 +64,7 @@ describe('renderer/components/notifications/RepositoryNotifications.tsx', () => , ); - fireEvent.click(screen.getByLabelText('Mark repository as read')); + fireEvent.click(screen.getByTestId('repository-mark-as-read')); expect(markNotificationsAsRead).toHaveBeenCalledWith( mockGitHubNotifications, @@ -80,7 +80,7 @@ describe('renderer/components/notifications/RepositoryNotifications.tsx', () => , ); - fireEvent.click(screen.getByLabelText('Mark repository as done')); + fireEvent.click(screen.getByTestId('repository-mark-as-done')); expect(markNotificationsAsDone).toHaveBeenCalledWith( mockGitHubNotifications, @@ -103,7 +103,7 @@ describe('renderer/components/notifications/RepositoryNotifications.tsx', () => render(); }); - fireEvent.click(screen.getByLabelText('Hide repository notifications')); + fireEvent.click(screen.getByTestId('repository-toggle')); const tree = render(); expect(tree).toMatchSnapshot(); diff --git a/src/renderer/components/notifications/RepositoryNotifications.tsx b/src/renderer/components/notifications/RepositoryNotifications.tsx index 1714f6a52..ec227e663 100644 --- a/src/renderer/components/notifications/RepositoryNotifications.tsx +++ b/src/renderer/components/notifications/RepositoryNotifications.tsx @@ -1,5 +1,5 @@ import { CheckIcon, ReadIcon } from '@primer/octicons-react'; -import { Button, IconButton } from '@primer/react'; +import { Box, Button, Stack } from '@primer/react'; import { type FC, type MouseEvent, useContext, useState } from 'react'; import { AppContext } from '../../context/App'; @@ -10,6 +10,7 @@ import { isMarkAsDoneFeatureSupported } from '../../utils/features'; import { getChevronDetails } from '../../utils/helpers'; import { openRepository } from '../../utils/links'; import { AvatarWithFallback } from '../avatars/AvatarWithFallback'; +import { HoverButton } from '../primitives/HoverButton'; import { HoverGroup } from '../primitives/HoverGroup'; import { NotificationRow } from './NotificationRow'; @@ -31,7 +32,19 @@ export const RepositoryNotifications: FC = ({ const avatarUrl = repoNotifications[0].repository.owner.avatar_url; - const toggleRepositoryNotifications = () => { + const actionMarkAsDone = () => { + setAnimateExit(!settings.delayNotificationState); + setShowAsRead(settings.delayNotificationState); + markNotificationsAsDone(repoNotifications); + }; + + const actionMarkAsRead = () => { + setAnimateExit(!settings.delayNotificationState); + setShowAsRead(settings.delayNotificationState); + markNotificationsAsRead(repoNotifications); + }; + + const actionToggleRepositoryNotifications = () => { setShowRepositoryNotifications(!showRepositoryNotifications); }; @@ -43,17 +56,21 @@ export const RepositoryNotifications: FC = ({ return ( <> -
-
-
- {!animateExit && ( - - {isMarkAsDoneFeatureSupported(repoNotifications[0].account) && ( - + ) => { - // Don't trigger onClick of parent element. - event.stopPropagation(); - setAnimateExit(!settings.delayNotificationState); - setShowAsRead(settings.delayNotificationState); - markNotificationsAsDone(repoNotifications); - }} + enabled={isMarkAsDoneFeatureSupported( + repoNotifications[0].account, + )} + testid="repository-mark-as-done" + action={actionMarkAsDone} /> - )} - ) => { - // Don't trigger onClick of parent element. - event.stopPropagation(); - setAnimateExit(!settings.delayNotificationState); - setShowAsRead(settings.delayNotificationState); - markNotificationsAsRead(repoNotifications); - }} - /> + - - - )} -
+ + + )} + + {showRepositoryNotifications && repoNotifications.map((notification) => ( diff --git a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap index 38eaea97a..bbce270de 100644 --- a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap @@ -6,10 +6,280 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende "baseElement":
+
+
+
+
+ 🔥 +
+
+ Error title +
+
+
+ Error description +
+
+
+
+ , + "container":
+ +
-
- 🔥 -
-
- Error title -
+ 🔥
- Error description + Error title
-
-
-
- , - "container":
- -
-
-
-
- 🔥 -
-
- Error title -
-
-
- Error description +
+
+ Error description
@@ -565,210 +585,226 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende "baseElement":
-
-
-
+
+ gitify-app/notifications-test + + gitify-app/notifications-test + +
+
+
+
+
+
+ + I am a robot and this is a test! + +
+
+
+
gitify-app/notifications-test - - gitify-app/notifications-test -
- -
+
+ + Updated + + + May 20, 2017 + +
+
+ +
+ + + 1 + +
+ + +
+ + + 1 + +
+ +
+
+ + + +
+
+
+
+
+ + +
- gitify-app +
+ gitify-app/notifications-test + + gitify-app/notifications-test + +
+
+
- Updated + Improve the UI - - May 20, 2017 - +
- - - - + +
+
-
- - - 1 - -
- + Authored + + + May 20, 2017 + +
+
+
+ + + + + + +
+
+
+ , + "container":
+ +
- + + + +
-
gitify-app/notifications-test
- -
+
+
- Improve the UI + I am a robot and this is a test!
- +
- Authored + Updated May 20, 2017
+ > + +
+ + + 1 + +
+ + +
+ + + 1 + +
+ +
- , - "container":
-
-
- - - -
-
- -
-
- gitify-app/notifications-test - - gitify-app/notifications-test - -
-
- -
-
-
- - I am a robot and this is a test! - -
-
- gitify-app +
+ gitify-app/notifications-test + + gitify-app/notifications-test + +
+
+
- Updated + Improve the UI - - May 20, 2017 - +
- - - - + +
+
-
- - - 1 - -
- + Authored + + + May 20, 2017 + +
+
-
-
- - - - - - -
-
-
-
- - - -
-
- - - -
-
-
+ + + -
-
-
-
-
+
-
-
-
-
- - - - - + +
, @@ -2336,7 +2440,231 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende "baseElement":
+
+ Repository Notifications +
+
+ , + "container":
+ - , - "container":
- +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`renderer/components/notifications/AccountNotifications.tsx should render itself - no notifications 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ +
- - - - - - +
+ 🎊 +
+
+ No new notifications +
+
+
-
- Repository Notifications -
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; - -exports[`renderer/components/notifications/AccountNotifications.tsx should render itself - no notifications 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
+ , + "container":
+ - , - "container":
-
+ + + +
+
+
+
+
+
+ Repository Notifications +
-
+ , + "container":
+ - , - "container":
-
Repository Notifications diff --git a/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap index 6f826c09f..be82bab33 100644 --- a/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap +++ b/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap @@ -17,10 +17,10 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
-
gitify-app/notifications-test
- -
+
+
, "container":
-
gitify-app/notifications-test
- -
+
+
, "debug": [Function], @@ -171,26 +167,24 @@ exports[`renderer/components/notifications/NotificationHeader.tsx should render "baseElement":
-
gitify-app/notifications-test
- -
, "container":
-
gitify-app/notifications-test
- -
, "debug": [Function], @@ -336,26 +328,24 @@ exports[`renderer/components/notifications/NotificationHeader.tsx should render "baseElement":
-
gitify-app/notifications-test
- -
+
+
, "container":
-
gitify-app/notifications-test
- -
+
+
, "debug": [Function], diff --git a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap index 6ba008acd..33eb3a69f 100644 --- a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap +++ b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap @@ -6,11 +6,17 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its "baseElement":
-
-
+
+
+
+
+ gitify-app/notifications-test + + gitify-app/notifications-test + +
+
+
+
+
+
+ + I am a robot and this is a test! + +
+
+
+
+ gitify-app +
+
+
+ + Updated + + + May 20, 2017 + +
+
+ +
+ + + 1 + +
+ + +
+ + + 1 + +
+ +
+
+
+
+ + + + + +
+
+
+
+ , + "container":
+
+
+ + + +
+
+
gitify-app/notifications-test
- -
+
+
I am a robot and this is a test!
- , - "container":
-
-
- - - -
-
-
- -
-
- gitify-app/notifications-test - - gitify-app/notifications-test - -
-
- -
-
-
- - I am a robot and this is a test! - -
-
-
-
- gitify-app -
-
-
- - Updated - - - May 20, 2017 - -
-
- -
- - - 1 - -
- - -
- - - 1 - -
- -
-
-
-
- - - - - - -
-
, "debug": [Function], "findAllByAltText": [Function], @@ -799,16 +831,22 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its "baseElement":
-
-
-
- - I am a robot and this is a test! - - -
-
- gitify-app -
-
-
- Updated + I am a robot and this is a test! - - May 20, 2017 - +
-
-
+
+
+ + Updated + + + May 20, 2017 + +
+
+ +
+ + + 1 + +
+ + +
+ + + 1 + +
+ +
+
+
+
+ + + + + + +
+
+
+
+ , + "container":
+
+
+ + + +
+
+ + I am a robot and this is a test! + + +
+
+
+
+ gitify-app +
+
+
+ + Updated + + + May 20, 2017 + +
+
+ +
+
- , - "container":
-
-
- - - -
-
-
- - I am a robot and this is a test! - - -
-
-
-
- gitify-app -
-
-
- - Updated - - - May 20, 2017 - -
-
- -
- - - 1 - -
- - -
- - - 1 - -
- -
-
-
-
- - - - - - -
-
, "debug": [Function], "findAllByAltText": [Function], @@ -1490,54 +1558,406 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its "baseElement":
+
+ + + +
+
+ + I am a robot and this is a test! + +
+
+
+
+ gitify-app +
+
+
+ + Updated + + + May 20, 2017 + +
+
+ +
+ + + 1 + +
+ + +
+ + + 1 + +
+ +
+
+
+
+ + + + + + +
+
+
+
+ , + "container":
+
+
- + + + +
I am a robot and this is a test!
- , - "container":
-
-
- - - -
-
-
- - I am a robot and this is a test! - -
-
-
-
- gitify-app -
-
-
- - Updated - - - May 20, 2017 - -
-
- -
- - - 1 - -
- - -
- - - 1 - -
- -
-
-
-
- - - - - - -
-
, "debug": [Function], "findAllByAltText": [Function], diff --git a/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap index 42c36333e..8d885b24a 100644 --- a/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap +++ b/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap @@ -6,16 +6,23 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re "baseElement":
+
+ + + + + + +
+
+
+ NotificationRow +
+
+ NotificationRow +
+
+ , + "container":
+
+
+
@@ -133,6 +355,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re data-loading="false" data-no-visuals="true" data-size="small" + data-testid="repository-mark-as-read" sx="[object Object]" type="button" > @@ -170,6 +393,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re data-loading="false" data-no-visuals="true" data-size="small" + data-testid="repository-toggle" sx="[object Object]" type="button" > @@ -201,210 +425,6 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re
-
- NotificationRow -
-
- NotificationRow -
-
- , - "container":
-
-
- -
-
- - - - - - -
NotificationRow @@ -473,16 +493,23 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to "baseElement":
-
-
- + +
+
+ + + + + + +
+
+
+ NotificationRow +
+
+ NotificationRow +
+
+ , + "container":
+
+
+
@@ -810,6 +1068,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to data-loading="false" data-no-visuals="true" data-size="small" + data-testid="repository-mark-as-read" sx="[object Object]" type="button" > @@ -847,6 +1106,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to data-loading="false" data-no-visuals="true" data-size="small" + data-testid="repository-toggle" sx="[object Object]" type="button" > @@ -871,222 +1131,12 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to aria-hidden="true" class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX" data-direction="s" - id=":r1f:" - popover="auto" - > - Hide repository notifications - -
-
-
- NotificationRow -
-
- NotificationRow -
-
- , - "container":
-
-
- -
-
- - - - - - + Hide repository notifications + +
@@ -1156,16 +1206,23 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us "baseElement":
+
+ + + + + + +
+
+
+ NotificationRow +
+
+ NotificationRow +
+
+ , + "container":
+
+
+
@@ -1289,6 +1567,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us data-loading="false" data-no-visuals="true" data-size="small" + data-testid="repository-mark-as-read" sx="[object Object]" type="button" > @@ -1326,6 +1605,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us data-loading="false" data-no-visuals="true" data-size="small" + data-testid="repository-toggle" sx="[object Object]" type="button" > @@ -1357,216 +1637,6 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us
-
- NotificationRow -
-
- NotificationRow -
-
- , - "container":
-
-
- -
-
- - - - - - -
NotificationRow diff --git a/src/renderer/components/primitives/HoverButton.test.tsx b/src/renderer/components/primitives/HoverButton.test.tsx new file mode 100644 index 000000000..a09534dc5 --- /dev/null +++ b/src/renderer/components/primitives/HoverButton.test.tsx @@ -0,0 +1,34 @@ +import { MarkGithubIcon } from '@primer/octicons-react'; +import { render } from '@testing-library/react'; +import { HoverButton } from './HoverButton'; + +describe('renderer/components/primitives/HoverButton.tsx', () => { + it('should render', () => { + const mockAction = jest.fn(); + + const tree = render( + , + ); + expect(tree).toMatchSnapshot(); + }); + + it('should render - disabled', () => { + const mockAction = jest.fn(); + + const tree = render( + , + ); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/renderer/components/primitives/HoverButton.tsx b/src/renderer/components/primitives/HoverButton.tsx new file mode 100644 index 000000000..4cb8f8ff6 --- /dev/null +++ b/src/renderer/components/primitives/HoverButton.tsx @@ -0,0 +1,33 @@ +import type { FC } from 'react'; + +import type { Icon } from '@primer/octicons-react'; +import { IconButton } from '@primer/react'; + +interface IHoverButton { + label: string; + icon: Icon; + enabled?: boolean; + testid: string; + action: () => void; +} + +export const HoverButton: FC = ({ + enabled = true, + ...props +}: IHoverButton) => { + return ( + enabled && ( + { + event.stopPropagation(); + props.action(); + }} + data-testid={props.testid} + /> + ) + ); +}; diff --git a/src/renderer/components/primitives/HoverGroup.test.tsx b/src/renderer/components/primitives/HoverGroup.test.tsx index 582ac2af9..40eef7485 100644 --- a/src/renderer/components/primitives/HoverGroup.test.tsx +++ b/src/renderer/components/primitives/HoverGroup.test.tsx @@ -3,7 +3,7 @@ import { HoverGroup } from './HoverGroup'; describe('renderer/components/primitives/HoverGroup.tsx', () => { it('should render', () => { - const tree = render(Hover Group); + const tree = render(Hover Group); expect(tree).toMatchSnapshot(); }); }); diff --git a/src/renderer/components/primitives/HoverGroup.tsx b/src/renderer/components/primitives/HoverGroup.tsx index a924d6dff..7d6e18b16 100644 --- a/src/renderer/components/primitives/HoverGroup.tsx +++ b/src/renderer/components/primitives/HoverGroup.tsx @@ -1,18 +1,27 @@ import type { FC, ReactNode } from 'react'; import { Stack } from '@primer/react'; +import { cn } from '../../utils/cn'; interface IHoverGroup { + bgColor: string; children: ReactNode; } -export const HoverGroup: FC = ({ children }: IHoverGroup) => { +export const HoverGroup: FC = ({ + bgColor, + children, +}: IHoverGroup) => { return ( {children} diff --git a/src/renderer/components/primitives/Title.tsx b/src/renderer/components/primitives/Title.tsx index 953ef596f..acaa79686 100644 --- a/src/renderer/components/primitives/Title.tsx +++ b/src/renderer/components/primitives/Title.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; import type { Icon } from '@primer/octicons-react'; -import { Heading, Stack } from '@primer/react'; +import { Box, Heading, Stack } from '@primer/react'; interface ITitle { icon: Icon; @@ -12,15 +12,17 @@ interface ITitle { export const Title: FC = ({ size = 2, ...props }) => { return ( - - - {props.children} - + + + + {props.children} + + ); }; diff --git a/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap index f05169e64..7008c4ec5 100644 --- a/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap +++ b/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap @@ -46,37 +46,41 @@ exports[`renderer/components/primitives/Header.tsx should render itself & its ch
- -

- Test Header -

+ +

+ Test Header +

+
@@ -125,37 +129,41 @@ exports[`renderer/components/primitives/Header.tsx should render itself & its ch
- -

- Test Header -

+ +

+ Test Header +

+
diff --git a/src/renderer/components/primitives/__snapshots__/HoverButton.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/HoverButton.test.tsx.snap new file mode 100644 index 000000000..832ab41a0 --- /dev/null +++ b/src/renderer/components/primitives/__snapshots__/HoverButton.test.tsx.snap @@ -0,0 +1,201 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renderer/components/primitives/HoverButton.tsx should render - disabled 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ , + "container":
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`renderer/components/primitives/HoverButton.tsx should render 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + +
+ , + "container":
+ + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; diff --git a/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap index 896caa0d2..23d473a89 100644 --- a/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap +++ b/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap @@ -6,7 +6,7 @@ exports[`renderer/components/primitives/HoverGroup.tsx should render 1`] = ` "baseElement":
, "container":
- -

- Legend -

+ +

+ Legend +

+
@@ -44,37 +48,41 @@ exports[`renderer/routes/components/primitives/Title.tsx should render the title
- -

- Legend -

+ +

+ Legend +

+
diff --git a/src/renderer/components/settings/AppearanceSettings.test.tsx b/src/renderer/components/settings/AppearanceSettings.test.tsx index 5864e5918..6ad51e4e7 100644 --- a/src/renderer/components/settings/AppearanceSettings.test.tsx +++ b/src/renderer/components/settings/AppearanceSettings.test.tsx @@ -140,7 +140,7 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Detailed notifications')); + fireEvent.click(screen.getByTestId('checkbox-detailedNotifications')); expect(updateSetting).toHaveBeenCalledTimes(1); expect(updateSetting).toHaveBeenCalledWith('detailedNotifications', false); @@ -163,7 +163,7 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Show notification metric pills')); + fireEvent.click(screen.getByTestId('checkbox-showPills')); expect(updateSetting).toHaveBeenCalledTimes(1); expect(updateSetting).toHaveBeenCalledWith('showPills', false); @@ -186,7 +186,7 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Show number')); + fireEvent.click(screen.getByTestId('checkbox-showNumber')); expect(updateSetting).toHaveBeenCalledTimes(1); expect(updateSetting).toHaveBeenCalledWith('showNumber', false); @@ -211,7 +211,7 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Show account header')); + fireEvent.click(screen.getByTestId('checkbox-showAccountHeader')); expect(updateSetting).toHaveBeenCalledTimes(1); expect(updateSetting).toHaveBeenCalledWith('showAccountHeader', true); diff --git a/src/renderer/components/settings/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx index 39545b6da..17ec47bbe 100644 --- a/src/renderer/components/settings/AppearanceSettings.tsx +++ b/src/renderer/components/settings/AppearanceSettings.tsx @@ -14,10 +14,13 @@ import { XCircleIcon, } from '@primer/octicons-react'; import { + Box, Button, ButtonGroup, IconButton, Select, + Stack, + Text, useTheme, } from '@primer/react'; @@ -76,193 +79,218 @@ export const AppearanceSettings: FC = () => {
Appearance -
- + + + + + - -
+ -
- + + + zoomPercentage > 0 && + webFrame.setZoomLevel( + zoomPercentageToLevel(zoomPercentage - 10), + ) + } + data-testid="settings-zoom-out" + /> - - - zoomPercentage > 0 && - webFrame.setZoomLevel(zoomPercentageToLevel(zoomPercentage - 10)) - } - data-testid="settings-zoom-out" - /> + - + + zoomPercentage < 120 && + webFrame.setZoomLevel( + zoomPercentageToLevel(zoomPercentage + 10), + ) + } + data-testid="settings-zoom-in" + /> - - zoomPercentage < 120 && - webFrame.setZoomLevel(zoomPercentageToLevel(zoomPercentage + 10)) - } - data-testid="settings-zoom-in" - /> + webFrame.setZoomLevel(0)} + data-testid="settings-zoom-reset" + /> + + - webFrame.setZoomLevel(0)} - data-testid="settings-zoom-reset" - /> - -
+ + updateSetting('detailedNotifications', evt.target.checked) + } + tooltip={ + + + Enrich notifications with author or last commenter profile + information, state and GitHub-like colors. + + + ⚠️ Users with a large number of unread notifications may{' '} + experience rate limiting under certain circumstances. Disable + this setting if you experience this. + + + } + /> - - updateSetting('detailedNotifications', evt.target.checked) - } - tooltip={ -
-
- Enrich notifications with author or last commenter profile - information, state and GitHub-like colors. -
-
- ⚠️ Users with a large number of unread notifications may{' '} - experience rate limiting under certain circumstances. Disable this - setting if you experience this. -
-
- } - /> + updateSetting('showPills', evt.target.checked)} + tooltip={ + + Show notification metric pills for: + +
    +
  • + + linked issues +
    • +
  • + + pr reviews +
    • +
  • + + comments +
    • +
  • + + labels +
    • +
  • + + milestones +
    • +
+ + + } + /> - updateSetting('showPills', evt.target.checked)} - tooltip={ -
-
Show notification metric pills for:
-
-
    -
  • - - linked issues -
    • -
  • - - pr reviews -
    • -
  • - - comments -
    • -
  • - - labels -
    • -
  • - - milestones -
    • -
-
-
- } - /> + + settings.detailedNotifications && + updateSetting('showNumber', evt.target.checked) + } + disabled={!settings.detailedNotifications} + tooltip={ + + Show GitHub number for: + +
    +
  • + + + Discussion + +
    • +
  • + + + Issue + +
    • +
  • + + + Pull Request + +
    • +
+ + + ⚠️ This setting requires{' '} + Detailed Notifications to be enabled. + + + } + /> - - settings.detailedNotifications && - updateSetting('showNumber', evt.target.checked) - } - disabled={!settings.detailedNotifications} - tooltip={ -
-
Show GitHub number for:
-
-
    -
  • - - Discussion -
    • -
  • - - Issue -
    • -
  • - - Pull Request -
    • -
-
-
- ⚠️ This setting requires Detailed Notifications to - be enabled. -
-
- } - /> - - - updateSetting('showAccountHeader', evt.target.checked) - } - /> + + updateSetting('showAccountHeader', evt.target.checked) + } + /> +
); }; diff --git a/src/renderer/components/settings/NotificationSettings.test.tsx b/src/renderer/components/settings/NotificationSettings.test.tsx index cecdebaa3..3a72bfdb2 100644 --- a/src/renderer/components/settings/NotificationSettings.test.tsx +++ b/src/renderer/components/settings/NotificationSettings.test.tsx @@ -29,7 +29,7 @@ describe('renderer/routes/components/settings/NotificationSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Date')); + fireEvent.click(screen.getByTestId('radio-groupby-date')); expect(updateSetting).toHaveBeenCalledTimes(1); expect(updateSetting).toHaveBeenCalledWith('groupBy', 'DATE'); @@ -52,7 +52,7 @@ describe('renderer/routes/components/settings/NotificationSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Fetch all notifications'), { + fireEvent.click(screen.getByTestId('checkbox-fetchAllNotifications'), { target: { checked: true }, }); @@ -77,7 +77,7 @@ describe('renderer/routes/components/settings/NotificationSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Show only participating'), { + fireEvent.click(screen.getByTestId('checkbox-showOnlyParticipating'), { target: { checked: true }, }); @@ -141,7 +141,7 @@ describe('renderer/routes/components/settings/NotificationSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Mark as done on open'), { + fireEvent.click(screen.getByTestId('checkbox-markAsDoneOnOpen'), { target: { checked: true }, }); @@ -166,7 +166,7 @@ describe('renderer/routes/components/settings/NotificationSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Mark as done on unsubscribe'), { + fireEvent.click(screen.getByTestId('checkbox-markAsDoneOnUnsubscribe'), { target: { checked: true }, }); @@ -194,7 +194,7 @@ describe('renderer/routes/components/settings/NotificationSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Delay notification state'), { + fireEvent.click(screen.getByTestId('checkbox-delayNotificationState'), { target: { checked: true }, }); diff --git a/src/renderer/components/settings/NotificationSettings.tsx b/src/renderer/components/settings/NotificationSettings.tsx index e481daca0..3a67853ab 100644 --- a/src/renderer/components/settings/NotificationSettings.tsx +++ b/src/renderer/components/settings/NotificationSettings.tsx @@ -1,6 +1,7 @@ import { type FC, type MouseEvent, useContext } from 'react'; import { BellIcon } from '@primer/octicons-react'; +import { Stack, Text } from '@primer/react'; import { APPLICATION } from '../../../shared/constants'; import { AppContext } from '../../context/App'; @@ -16,105 +17,108 @@ export const NotificationSettings: FC = () => { return (
Notifications - { - updateSetting('groupBy', evt.target.value as GroupBy); - }} - /> - - updateSetting('fetchAllNotifications', evt.target.checked) - } - tooltip={ -
-
- When checked, Gitify will fetch all{' '} - notifications from your inbox. -
-
- When unchecked, Gitify will only fetch the first page of - notifications (max 50 records per GitHub account) -
-
- } - /> - updateSetting('participating', evt.target.checked)} - tooltip={ -
- See - - for more details. -
- } - /> - - updateSetting('markAsDoneOnOpen', evt.target.checked) - } - tooltip={ -
- Mark as done feature is supported in GitHub Cloud - and GitHub Enterprise Server 3.13 or later. -
- } - /> - - updateSetting('markAsDoneOnUnsubscribe', evt.target.checked) - } - tooltip={ -
- Mark as done feature is supported in GitHub Cloud - and GitHub Enterprise Server 3.13 or later. -
- } - /> - - updateSetting('delayNotificationState', evt.target.checked) - } - tooltip={ -
- Keep the notification within {APPLICATION.NAME} upon interaction - (ie: open notification, mark as read, mark as done) until the next - refresh window (scheduled or user initiated). -
- } - /> + + + { + updateSetting('groupBy', evt.target.value as GroupBy); + }} + /> + + updateSetting('fetchAllNotifications', evt.target.checked) + } + tooltip={ + + + When checked, Gitify will fetch{' '} + all notifications from your inbox. + + + When unchecked, Gitify will only fetch the + first page of notifications (max 50 records per GitHub account) + + + } + /> + updateSetting('participating', evt.target.checked)} + tooltip={ + + See{' '} + {' '} + for more details. + + } + /> + + updateSetting('markAsDoneOnOpen', evt.target.checked) + } + tooltip={ + + Mark as done feature is supported in + GitHub Cloud and GitHub Enterprise Server 3.13 or later. + + } + /> + + updateSetting('markAsDoneOnUnsubscribe', evt.target.checked) + } + tooltip={ + + Mark as done feature is supported in + GitHub Cloud and GitHub Enterprise Server 3.13 or later. + + } + /> + + updateSetting('delayNotificationState', evt.target.checked) + } + tooltip={ + + Keep the notification within {APPLICATION.NAME} upon interaction + (ie: open notification, mark as read, mark as done) until the next + refresh window (scheduled or user initiated). + + } + /> +
); }; diff --git a/src/renderer/components/settings/SystemSettings.test.tsx b/src/renderer/components/settings/SystemSettings.test.tsx index 72c4a877f..0ecc19567 100644 --- a/src/renderer/components/settings/SystemSettings.test.tsx +++ b/src/renderer/components/settings/SystemSettings.test.tsx @@ -28,7 +28,7 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Background')); + fireEvent.click(screen.getByTestId('radio-openlinks-background')); expect(updateSetting).toHaveBeenCalledTimes(1); expect(updateSetting).toHaveBeenCalledWith('openLinks', 'BACKGROUND'); @@ -51,7 +51,7 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Enable keyboard shortcut'), { + fireEvent.click(screen.getByTestId('checkbox-keyboardShortcut'), { target: { checked: true }, }); @@ -76,9 +76,12 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Show notifications count in tray'), { - target: { checked: true }, - }); + fireEvent.click( + screen.getByTestId('checkbox-showNotificationsCountInTray'), + { + target: { checked: true }, + }, + ); expect(updateSetting).toHaveBeenCalledTimes(1); expect(updateSetting).toHaveBeenCalledWith( @@ -104,7 +107,7 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Show system notifications'), { + fireEvent.click(screen.getByTestId('checkbox-showNotifications'), { target: { checked: true }, }); @@ -129,7 +132,7 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Play sound'), { + fireEvent.click(screen.getByTestId('checkbox-playSound'), { target: { checked: true }, }); @@ -154,7 +157,7 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Use alternate idle icon'), { + fireEvent.click(screen.getByTestId('checkbox-useAlternateIdleIcon'), { target: { checked: true }, }); @@ -179,7 +182,7 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => { ); }); - fireEvent.click(screen.getByLabelText('Open at startup'), { + fireEvent.click(screen.getByTestId('checkbox-openAtStartup'), { target: { checked: true }, }); diff --git a/src/renderer/components/settings/SystemSettings.tsx b/src/renderer/components/settings/SystemSettings.tsx index 156307436..91f3e5f42 100644 --- a/src/renderer/components/settings/SystemSettings.tsx +++ b/src/renderer/components/settings/SystemSettings.tsx @@ -1,6 +1,7 @@ import { type FC, useContext } from 'react'; import { DeviceDesktopIcon } from '@primer/octicons-react'; +import { Box, Stack, Text } from '@primer/react'; import { APPLICATION } from '../../../shared/constants'; import { isLinux, isMacOS } from '../../../shared/platform'; @@ -17,87 +18,92 @@ export const SystemSettings: FC = () => { return (
System - { - updateSetting('openLinks', evt.target.value as OpenPreference); - }} - /> - - updateSetting('keyboardShortcut', evt.target.checked) - } - tooltip={ -
- When enabled you can use the hotkeys{' '} - - {Constants.DEFAULT_KEYBOARD_SHORTCUT} - {' '} - to show or hide {APPLICATION.NAME}. -
- } - /> - {isMacOS() && ( + + + { + updateSetting('openLinks', evt.target.value as OpenPreference); + }} + /> + + updateSetting('keyboardShortcut', evt.target.checked) + } + tooltip={ + + When enabled you can use the hotkeys{' '} + + {Constants.DEFAULT_KEYBOARD_SHORTCUT} + {' '} + to show or hide {APPLICATION.NAME}. + + } + /> + {isMacOS() && ( + + updateSetting('showNotificationsCountInTray', evt.target.checked) + } + /> + )} - updateSetting('showNotificationsCountInTray', evt.target.checked) + updateSetting('showNotifications', evt.target.checked) } /> - )} - - updateSetting('showNotifications', evt.target.checked) - } - /> - updateSetting('playSound', evt.target.checked)} - /> - - updateSetting('useAlternateIdleIcon', evt.target.checked) - } - tooltip={ -
-
- Use a white {APPLICATION.NAME} logo (instead of the default black - logo) when all notifications are read. -
-
- This is particularly useful for devices which have a dark-themed - menubar or taskbar. -
-
- } - /> - {!isLinux() && ( updateSetting('openAtStartup', evt.target.checked)} + name="playSound" + label="Play sound" + checked={settings.playSound} + onChange={(evt) => updateSetting('playSound', evt.target.checked)} + /> + + updateSetting('useAlternateIdleIcon', evt.target.checked) + } + tooltip={ + + + Use a white {APPLICATION.NAME} logo (instead of the default + black logo) when all notifications are read. + + + This is particularly useful for devices which have a dark-themed + menubar or taskbar. + + + } /> - )} + {!isLinux() && ( + + updateSetting('openAtStartup', evt.target.checked) + } + /> + )} +
); }; diff --git a/src/renderer/routes/Accounts.tsx b/src/renderer/routes/Accounts.tsx index cf22e5e31..50d542851 100644 --- a/src/renderer/routes/Accounts.tsx +++ b/src/renderer/routes/Accounts.tsx @@ -15,9 +15,11 @@ import { import { ActionList, ActionMenu, + Box, Button, IconButton, Stack, + Text, } from '@primer/react'; import { logError } from '../../shared/logger'; @@ -90,7 +92,7 @@ export const AccountsRoute: FC = () => { const [isRefreshingAccount, setIsRefreshingAccount] = useState(false); return ( -
@@ -100,34 +102,33 @@ export const AccountsRoute: FC = () => { align="center" justify="space-between" > - -
- -
+ + -
+ - + @@ -157,11 +158,11 @@ export const AccountsRoute: FC = () => { align="center" > - {account.method} + {account.method} -
+ @@ -220,7 +221,7 @@ export const AccountsRoute: FC = () => { /> -
+ ); })} diff --git a/src/renderer/routes/Filters.tsx b/src/renderer/routes/Filters.tsx index 9996608f3..102a39e82 100644 --- a/src/renderer/routes/Filters.tsx +++ b/src/renderer/routes/Filters.tsx @@ -6,7 +6,7 @@ import { FilterRemoveIcon, NoteIcon, } from '@primer/octicons-react'; -import { Button, Tooltip } from '@primer/react'; +import { Box, Button, Stack, Text, Tooltip } from '@primer/react'; import { Checkbox } from '../components/fields/Checkbox'; import { Contents } from '../components/layout/Contents'; @@ -46,6 +46,7 @@ export const FiltersRoute: FC = () => {
Users + { } disabled={!settings.detailedNotifications} tooltip={ -
-
+ + Hide notifications from GitHub Bot accounts, such as @dependabot, @renovate, @netlify, etc -
-
+ + ⚠️ This filter requires the{' '} - Detailed Notifications setting to be enabled. -
-
+ Detailed Notifications setting to be + enabled. + + } />
Reason - - Note: If no reasons are selected, all notifications will be shown. - - {Object.keys(FORMATTED_REASONS).map((reason: Reason) => { - return ( - - updateReasonFilter(reason, evt.target.checked) - } - tooltip={
{formatReason(reason).description}
} - /> - ); - })} + + + Note: If no reasons are selected, all notifications will be shown. + + + + + {Object.keys(FORMATTED_REASONS).map((reason: Reason) => { + return ( + + updateReasonFilter(reason, evt.target.checked) + } + tooltip={{formatReason(reason).description}} + /> + ); + })} +
diff --git a/src/renderer/routes/Settings.tsx b/src/renderer/routes/Settings.tsx index 67ff6950b..c7df4285c 100644 --- a/src/renderer/routes/Settings.tsx +++ b/src/renderer/routes/Settings.tsx @@ -1,7 +1,7 @@ import { type FC, useCallback, useContext, useState } from 'react'; import { GearIcon } from '@primer/octicons-react'; -import { Button, Stack } from '@primer/react'; +import { Button, Stack, Text } from '@primer/react'; import { Dialog } from '@primer/react/experimental'; import { Contents } from '../components/layout/Contents'; @@ -64,7 +64,7 @@ export const SettingsRoute: FC = () => { data-testid="reset-dialog" > Please confirm that you want to reset all settings to the{' '} - Gitify defaults + Gitify defaults )} diff --git a/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap b/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap index 8633f1dca..5658d01f7 100644 --- a/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap +++ b/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap @@ -46,37 +46,41 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
- -

- Accounts -

+ +

+ Accounts +

+
@@ -85,7 +89,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 " >
-
-
- -
+ +
-
+
Mona Lisa Octocat @@ -232,7 +234,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA /> github.com @@ -269,7 +271,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA /> Personal Access Token @@ -449,7 +451,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
-
-
- -
+ +
-
+
Mona Lisa Octocat @@ -596,7 +596,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA /> github.gitify.io @@ -633,7 +633,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA /> OAuth App @@ -813,7 +813,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
-
-
- -
+ +
-
+
Mona Lisa Octocat @@ -960,7 +958,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA /> github.com @@ -997,7 +995,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA /> GitHub App @@ -1285,37 +1283,41 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
- -

- Accounts -

+ +

+ Accounts +

+
@@ -1324,7 +1326,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 " >
-
-
- -
+ +
-
+
Mona Lisa Octocat @@ -1471,7 +1471,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as /> github.com @@ -1508,7 +1508,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as /> Personal Access Token @@ -1688,7 +1688,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
-
-
- -
+ +
-
+
Mona Lisa Octocat @@ -1835,7 +1833,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as /> github.gitify.io @@ -1872,7 +1870,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as /> OAuth App @@ -2052,7 +2050,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
-
-
- -
+ +
-
+
Mona Lisa Octocat @@ -2199,7 +2195,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as /> github.com @@ -2236,7 +2232,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as /> GitHub App @@ -2524,37 +2520,41 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
- -

- Accounts -

+ +

+ Accounts +

+
@@ -2563,7 +2563,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 " >
-
-
- -
+ +
-
+
Mona Lisa Octocat @@ -2710,7 +2708,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre /> github.com @@ -2747,7 +2745,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre /> Personal Access Token @@ -2927,7 +2925,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
-
-
- -
+ +
-
+
Mona Lisa Octocat @@ -3074,7 +3070,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre /> github.gitify.io @@ -3111,7 +3107,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre /> OAuth App @@ -3291,7 +3287,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
-
-
- -
+ +
-
+
Mona Lisa Octocat @@ -3438,7 +3432,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre /> github.com @@ -3475,7 +3469,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre /> GitHub App diff --git a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap index c79e05f1d..d5b788875 100644 --- a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap +++ b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap @@ -46,37 +46,41 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
- -

- Filters -

+ +

+ Filters +

+
@@ -89,18 +93,73 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children >
+
+ +

+ Users +

+
+
+ +
+ + +
-

- Users -

- -
+
+ +
+
-
- - + +

- - + Reason +

+ +
+ + Note: If no reasons are selected, all notifications will be shown. +
-
-
- +
- -

- Reason -

-
- - - Note: If no reasons are selected, all notifications will be shown. - -
-
+
- - + +
-
-
+
- - + +
-
-
+
- - - - + +
-
-
+
- - + +
-
-
+
- - + +
-
-
+
- - + +
-
-
+
- - - - + +
-
-
+
- - + +
-
-
+
- - + +
-
-
+
- - + +
-
-
+
- - - - + +
-
-
+
- - + +
-
-
+
- - + +
-
-
+
- - + +
-
-
+
- - - - + +
@@ -955,47 +981,687 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle reason type - none already set 1`] = `
+
- - + +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+
@@ -1003,81 +1669,714 @@ exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle re exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle reason type - some filters already set 1`] = `
+ + +
+ +
+
+
+ +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ +
- - + +
+
+
+ + +
+
-
-`; - -exports[`renderer/routes/Filters.tsx Users section should be able to toggle the hideBots checkbox when detailedNotifications is enabled 1`] = ` -
+
- - + +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+`; + +exports[`renderer/routes/Filters.tsx Users section should be able to toggle the hideBots checkbox when detailedNotifications is enabled 1`] = ` +
+ +
+
- +

+ Users +

+
-
-
-`; - -exports[`renderer/routes/Filters.tsx Users section should not be able to toggle the hideBots checkbox when detailedNotifications is disabled 1`] = ` -
+
+
- - + +
+
+ +`; + +exports[`renderer/routes/Filters.tsx Users section should not be able to toggle the hideBots checkbox when detailedNotifications is disabled 1`] = ` +
+ +
+
- +

+ Users +

+
+
+ +
+ + +
+
-
+ `; diff --git a/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap b/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap index fc2649e45..59d63d833 100644 --- a/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap +++ b/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap @@ -50,37 +50,41 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
- -

- Login with OAuth App -

+ +

+ Login with OAuth App +

+
@@ -521,37 +525,41 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
- -

- Login with OAuth App -

+ +

+ Login with OAuth App +

+
diff --git a/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap b/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap index b241a5142..cd87a5094 100644 --- a/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap +++ b/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap @@ -50,37 +50,41 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
- -

- Login with Personal Access Token -

+ +

+ Login with Personal Access Token +

+
@@ -498,37 +502,41 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
- -

- Login with Personal Access Token -

+ +

+ Login with Personal Access Token +

+
diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap index 522d6cdaf..843d8055d 100644 --- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap +++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap @@ -46,55 +46,8 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
- -

- Settings -

-
- -
-
-
-
-
-

- Appearance + Settings

- -
- - - - -
-
- + +
+
+
+
+
+
- - -
+
+ +
+
+
-
-
- +
- - - -
-
-
-
-
- -
-
-
-
-
-
- -
- - +
-
-
+
- + +
-
- -
-
- +
+ +
+
+
+ + +
+ +
+
+
+ + +
+
+ +
+ +
+
+ +

+ Notifications +

+
+
-
+
-
-
+
- - + +
-
-
+
- - + +
-
-
+
- - + +
-
-
+
- - + +
-
-
+
- - + +
@@ -832,274 +889,298 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
- -

- System -

+ +

+ System +

+
-
+
-
-
+
- - + +
-
-
-
- -
+ Show notifications count in tray +
-
-
-
- -
+ Show system notifications +
-
-
-
- -
+ Play sound +
-
-
+
- - + +
-
-
-
- -
+ Open at startup +
diff --git a/src/renderer/utils/theme.ts b/src/renderer/utils/theme.ts index eb8fccf65..70f28a8d0 100644 --- a/src/renderer/utils/theme.ts +++ b/src/renderer/utils/theme.ts @@ -30,6 +30,7 @@ export function setDarkMode() { } /** + * TODO find a way to set scrollbar colors based on GitHub Primer Theme Provider / Design Tokens * @deprecated */ export function setScrollbarTheme(mode?: ColorModeWithAuto) {