diff --git a/src/renderer/__mocks__/state-mocks.ts b/src/renderer/__mocks__/state-mocks.ts index a12d6ce96..63ea4921e 100644 --- a/src/renderer/__mocks__/state-mocks.ts +++ b/src/renderer/__mocks__/state-mocks.ts @@ -101,6 +101,7 @@ const mockSystemSettings: SystemSettingsState = { showNotificationsCountInTray: true, showNotifications: true, playSound: true, + notificationVolume: 20, useAlternateIdleIcon: false, openAtStartup: false, }; diff --git a/src/renderer/components/icons/VolumeDownIcon.tsx b/src/renderer/components/icons/VolumeDownIcon.tsx new file mode 100644 index 000000000..93b2910a4 --- /dev/null +++ b/src/renderer/components/icons/VolumeDownIcon.tsx @@ -0,0 +1,18 @@ +import type { FC } from 'react'; + +export const VolumeDownIcon: FC = () => ( + + + + + + +); diff --git a/src/renderer/components/icons/VolumeUpIcon.tsx b/src/renderer/components/icons/VolumeUpIcon.tsx new file mode 100644 index 000000000..84aac91a4 --- /dev/null +++ b/src/renderer/components/icons/VolumeUpIcon.tsx @@ -0,0 +1,16 @@ +import type { FC } from 'react'; + +export const VolumeUpIcon: FC = () => ( + + + + +); diff --git a/src/renderer/components/settings/SystemSettings.tsx b/src/renderer/components/settings/SystemSettings.tsx index 58745f203..ab224cba4 100644 --- a/src/renderer/components/settings/SystemSettings.tsx +++ b/src/renderer/components/settings/SystemSettings.tsx @@ -1,15 +1,24 @@ import { type FC, useContext } from 'react'; -import { DeviceDesktopIcon } from '@primer/octicons-react'; -import { Box, Stack, Text } from '@primer/react'; +import { DeviceDesktopIcon, SyncIcon } from '@primer/octicons-react'; +import { + Box, + Button, + ButtonGroup, + IconButton, + Stack, + Text, +} from '@primer/react'; import { APPLICATION } from '../../../shared/constants'; import { isLinux, isMacOS } from '../../../shared/platform'; -import { AppContext } from '../../context/App'; +import { AppContext, defaultSettings } from '../../context/App'; import { OpenPreference } from '../../types'; import { Constants } from '../../utils/constants'; import { Checkbox } from '../fields/Checkbox'; import { RadioGroup } from '../fields/RadioGroup'; +import { VolumeDownIcon } from '../icons/VolumeDownIcon'; +import { VolumeUpIcon } from '../icons/VolumeUpIcon'; import { Title } from '../primitives/Title'; export const SystemSettings: FC = () => { @@ -70,12 +79,72 @@ export const SystemSettings: FC = () => { } /> - updateSetting('playSound', evt.target.checked)} - /> + + + updateSetting('playSound', evt.target.checked)} + /> + + + +
- - +
+ + +
+
+ + + + +
+