forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-08-01 16:41:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added icon to show which theme is selected

Browse Source
This commit is contained in:
Alejandro Celaya
2021-02-19 18:55:03 +01:00
parent 9703eba6ec
commit 9523277311
3 changed files with 22 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/settings/UserInterface.scss Normal file
View File

@@ -0,0 +1,4 @@
.user-interface__theme-icon {
float: right;
margin-top: .25rem;
}

4
src/settings/UserInterface.tsx
View File

@@ -1,8 +1,11 @@
import { FC } from 'react'; import { FC } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
import { SimpleCard } from '../utils/SimpleCard'; import { SimpleCard } from '../utils/SimpleCard';
import ToggleSwitch from '../utils/ToggleSwitch'; import ToggleSwitch from '../utils/ToggleSwitch';
import { changeThemeInMarkup, Theme } from '../utils/theme'; import { changeThemeInMarkup, Theme } from '../utils/theme';
import { Settings, UiSettings } from './reducers/settings'; import { Settings, UiSettings } from './reducers/settings';
import './UserInterface.scss';
interface UserInterfaceProps { interface UserInterfaceProps {
settings: Settings; settings: Settings;
@@ -11,6 +14,7 @@ interface UserInterfaceProps {
export const UserInterface: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings }) => ( export const UserInterface: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings }) => (
<SimpleCard title="User interface"> <SimpleCard title="User interface">
<FontAwesomeIcon icon={ui?.theme === 'dark' ? faMoon : faSun} className="user-interface__theme-icon" />
<ToggleSwitch <ToggleSwitch
checked={ui?.theme === 'dark'} checked={ui?.theme === 'dark'}
onChange={(useDarkTheme) => { onChange={(useDarkTheme) => {

15
test/settings/UserInterface.test.tsx
View File

@@ -1,5 +1,7 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Settings, UiSettings } from '../../src/settings/reducers/settings'; import { Settings, UiSettings } from '../../src/settings/reducers/settings';
import { UserInterface } from '../../src/settings/UserInterface'; import { UserInterface } from '../../src/settings/UserInterface';
import ToggleSwitch from '../../src/utils/ToggleSwitch'; import ToggleSwitch from '../../src/utils/ToggleSwitch';
@@ -26,13 +28,24 @@ describe('<UserInterface />', () => {
[{ theme: 'dark' as Theme }, true ], [{ theme: 'dark' as Theme }, true ],
[{ theme: 'light' as Theme }, false ], [{ theme: 'light' as Theme }, false ],
[ undefined, false ], [ undefined, false ],
])('switch is toggled if theme is dark', (ui, expectedChecked) => { ])('toggles switch if theme is dark', (ui, expectedChecked) => {
const wrapper = createWrapper(ui); const wrapper = createWrapper(ui);
const toggle = wrapper.find(ToggleSwitch); const toggle = wrapper.find(ToggleSwitch);
expect(toggle.prop('checked')).toEqual(expectedChecked); expect(toggle.prop('checked')).toEqual(expectedChecked);
}); });
it.each([
[{ theme: 'dark' as Theme }, faMoon ],
[{ theme: 'light' as Theme }, faSun ],
[ undefined, faSun ],
])('shows different icons based on theme', (ui, expectedIcon) => {
const wrapper = createWrapper(ui);
const icon = wrapper.find(FontAwesomeIcon);
expect(icon.prop('icon')).toEqual(expectedIcon);
});
it.each([ it.each([
[ true, 'dark' ], [ true, 'dark' ],
[ false, 'light' ], [ false, 'light' ],