mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-10 18:27:25 +03:00
Code Issues Projects Releases Packages 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
Show stats 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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
import { SimpleCard } from '../utils/SimpleCard';
import ToggleSwitch from '../utils/ToggleSwitch';
import { changeThemeInMarkup, Theme } from '../utils/theme';
import { Settings, UiSettings } from './reducers/settings';
import './UserInterface.scss';
interface UserInterfaceProps {
settings: Settings;
@ -11,6 +14,7 @@ interface UserInterfaceProps {
export const UserInterface: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings }) => (
<SimpleCard title="User interface">
<FontAwesomeIcon icon={ui?.theme === 'dark' ? faMoon : faSun} className="user-interface__theme-icon" />
<ToggleSwitch
checked={ui?.theme === 'dark'}
onChange={(useDarkTheme) => {

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

@ -1,5 +1,7 @@
import { shallow, ShallowWrapper } from 'enzyme';
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 { UserInterface } from '../../src/settings/UserInterface';
import ToggleSwitch from '../../src/utils/ToggleSwitch';
@ -26,13 +28,24 @@ describe('<UserInterface />', () => {
[{ theme: 'dark' as Theme }, true ],
[{ theme: 'light' as Theme }, 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 toggle = wrapper.find(ToggleSwitch);
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([
[ true, 'dark' ],
[ false, 'light' ],