forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-24 07:26:22 +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 { 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) => {