self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

Desktop: Resolves #3137: Switch to Font Awesome as icon library

Browse Source
This commit is contained in:
Laurent Cozic 2020-05-17 15:34:42 +01:00
parent e85d4fca5d
commit c568f5b33c
27 changed files with 94 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ElectronClient/css/fork-awesome.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
ElectronClient/fonts/forkawesome-webfont.woff2
View File

Binary file not shown.

2
ElectronClient/gui/ConfigMenuBar.jsx
View File

@ -10,7 +10,7 @@ function ConfigMenuBarButton(props) {
return (
<button style={style.button} onClick={props.onClick}>
<i style={iconStyle} className={`fa ${props.iconName}`}></i>
<i style={iconStyle} className={props.iconName}></i>
<span style={labelStyle}>{props.label}</span>
</button>
);

2
ElectronClient/gui/ConfigScreen.jsx
View File

@ -217,7 +217,7 @@ class ConfigScreenComponent extends React.Component {
const advancedSettingsSectionStyle = { display: 'none' };
if (advancedSettingComps.length) {
const iconName = this.state.showAdvancedSettings ? 'fa fa-toggle-up' : 'fa fa-toggle-down';
const iconName = this.state.showAdvancedSettings ? 'fa fa-angle-down' : 'fa fa-angle-right';
const advancedSettingsButtonStyle = Object.assign({}, theme.buttonStyle, { marginBottom: 10 });
advancedSettingsButton = <button onClick={() => shared.advancedSettingsButton_click(this)} style={advancedSettingsButtonStyle}><i style={{ fontSize: 14 }} className={iconName}></i> {_('Show Advanced Settings')}</button>;
advancedSettingsSectionStyle.display = this.state.showAdvancedSettings ? 'block' : 'none';

6
ElectronClient/gui/Header.jsx
View File

@ -154,14 +154,14 @@ class HeaderComponent extends React.Component {
if (options.iconName) {
const iconStyle = {
fontSize: Math.round(style.fontSize * 1.1),
color: style.color,
color: theme.iconColor,
};
if (options.title) iconStyle.marginRight = 5;
if ('undefined' != typeof options.iconRotation) {
iconStyle.transition = 'transform 0.15s ease-in-out';
iconStyle.transform = `rotate(${options.iconRotation}deg)`;
}
icon = <i style={iconStyle} className={`fa ${options.iconName}`}></i>;
icon = <i style={iconStyle} className={`fas ${options.iconName}`}></i>;
}
const isEnabled = !('enabled' in options) || options.enabled;
@ -250,7 +250,7 @@ class HeaderComponent extends React.Component {
};
const iconName = state.searchQuery ? 'fa-times' : 'fa-search';
const icon = <i style={iconStyle} className={`fa ${iconName}`}></i>;
const icon = <i style={iconStyle} className={`fas ${iconName}`}></i>;
if (options.onQuery) this.searchOnQuery_ = options.onQuery;
const usageLink = !this.state.showSearchUsageLink ? null : (

2
ElectronClient/gui/IconButton.jsx
View File

@ -9,7 +9,7 @@ class IconButton extends React.Component {
color: theme.color,
fontSize: theme.fontSize * 1.4,
};
const icon = <i style={iconStyle} className={`fa ${this.props.iconName}`}></i>;
const icon = <i style={iconStyle} className={`fas ${this.props.iconName}`}></i>;
const rootStyle = Object.assign(
{

6
ElectronClient/gui/MainScreen.jsx
View File

@ -785,7 +785,7 @@ class MainScreenComponent extends React.Component {
headerItems.push({
title: _('New note'),
iconName: 'fa-file-o',
iconName: 'fa-file',
enabled: !!folders.length && !onConflictFolder,
onClick: () => {
this.doCommand({ name: 'newNote' });
@ -794,7 +794,7 @@ class MainScreenComponent extends React.Component {
headerItems.push({
title: _('New to-do'),
iconName: 'fa-check-square-o',
iconName: 'fa-check-square',
enabled: !!folders.length && !onConflictFolder,
onClick: () => {
this.doCommand({ name: 'newTodo' });
@ -811,7 +811,7 @@ class MainScreenComponent extends React.Component {
headerItems.push({
title: _('Code View'),
iconName: 'fa-file-code-o ',
iconName: 'fa-file-code ',
enabled: !!notes.length,
type: 'checkbox',
checked: this.props.settingEditorCodeView,

4
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx
View File

@ -126,7 +126,7 @@ export default function Toolbar(props:ToolbarProps) {
toolbarItems.push({
tooltip: _('Heading'),
iconName: 'fa-header',
iconName: 'fa-heading',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
@ -148,7 +148,7 @@ export default function Toolbar(props:ToolbarProps) {
toolbarItems.push({
tooltip: _('Insert Date Time'),
iconName: 'fa-calendar-plus-o',
iconName: 'fa-calendar-plus',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',

6
ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
View File

@ -394,8 +394,8 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
.tox input,
.tox .tox-label,
.tox .tox-toolbar-label {
color: ${theme.color} !important;
fill: ${theme.color} !important;
color: ${theme.iconColor} !important;
fill: ${theme.iconColor} !important;
}
.tox .tox-statusbar a,
@ -682,7 +682,7 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
const loadDocumentAssets = (editor:any, pluginAssets:any[]) => {
const cssFiles = [
'css/fork-awesome.min.css',
'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
`gui/note-viewer/pluginAssets/highlight.js/${theme.codeThemeCss}`,
].concat(
pluginAssets

2
ElectronClient/gui/NoteList.jsx
View File

@ -220,7 +220,7 @@ class NoteListComponent extends React.Component {
paddingRight: 4,
color: theme.color,
};
const watchedIcon = this.props.watchedNoteFiles.indexOf(item.id) < 0 ? null : <i style={watchedIconStyle} className={'fa fa-external-link'}></i>;
const watchedIcon = this.props.watchedNoteFiles.indexOf(item.id) < 0 ? null : <i style={watchedIconStyle} className={'fa fa-share-square'}></i>;
if (!this.itemAnchorRefs_[item.id]) this.itemAnchorRefs_[item.id] = React.createRef();
const ref = this.itemAnchorRefs_[item.id];

2
ElectronClient/gui/NotePropertiesDialog.jsx
View File

@ -322,7 +322,7 @@ class NotePropertiesDialog extends React.Component {
if (editCompHandler) {
editComp = (
<a href="#" onClick={editCompHandler} style={styles.editPropertyButton}>
<i className={`fa ${editCompIcon}`} aria-hidden="true"></i>
<i className={`fas ${editCompIcon}`} aria-hidden="true"></i>
</a>
);
}

2
ElectronClient/gui/NoteSearchBar.jsx
View File

@ -52,7 +52,7 @@ class NoteSearchBarComponent extends React.Component {
opacity: isEnabled ? 1.0 : theme.disabledOpacity,
};
const icon = <i style={iconStyle} className={`fa ${iconName}`}></i>;
const icon = <i style={iconStyle} className={`fas ${iconName}`}></i>;
return (
<a href="#" style={searchButton} onClick={clickHandler}>

6
ElectronClient/gui/NoteToolbar/NoteToolbar.tsx
View File

@ -103,7 +103,7 @@ function useToolbarItems(props:NoteToolbarProps) {
// toolbarItems.push({
// tooltip: _('Click to stop external editing'),
// title: _('Watching...'),
// iconName: 'fa-external-link',
// iconName: 'fa-share-square',
// onClick: () => {
// onButtonClick({ name: 'stopExternalEditing' });
// },
@ -111,7 +111,7 @@ function useToolbarItems(props:NoteToolbarProps) {
} else {
// toolbarItems.push({
// tooltip: _('Edit in external editor'),
// iconName: 'fa-external-link',
// iconName: 'fa-share-square',
// onClick: () => {
// onButtonClick({ name: 'startExternalEditing' });
// },
@ -120,7 +120,7 @@ function useToolbarItems(props:NoteToolbarProps) {
if (note.is_todo) {
const item:any = {
iconName: 'fa-clock-o',
iconName: 'fa-clock',
enabled: !note.todo_completed,
onClick: () => {
onButtonClick({ name: 'setAlarm' });

10
ElectronClient/gui/SideBar.jsx
View File

@ -468,7 +468,7 @@ class SideBarComponent extends React.Component {
};
const iconName = this.props.collapsedFolderIds.indexOf(folder.id) >= 0 ? 'fa-chevron-right' : 'fa-chevron-down';
const expandIcon = <i style={expandIconStyle} className={`fa ${iconName}`}></i>;
const expandIcon = <i style={expandIconStyle} className={`fas ${iconName}`}></i>;
const expandLink = hasChildren ? (
<a style={expandLinkStyle} href="#" folderid={folder.id} onClick={this.onFolderToggleClick_}>
{expandIcon}
@ -558,7 +558,7 @@ class SideBarComponent extends React.Component {
makeHeader(key, label, iconName, extraProps = {}) {
const style = this.style().header;
const icon = <i style={{ fontSize: style.fontSize, marginRight: 5 }} className={`fa ${iconName}`} />;
const icon = <i style={{ fontSize: style.fontSize, marginRight: 5 }} className={`fas ${iconName}`} />;
if (extraProps.toggleblock || extraProps.onClick) {
style.cursor = 'pointer';
@ -572,7 +572,7 @@ class SideBarComponent extends React.Component {
const toggleKey = `${key}IsExpanded`;
if (extraProps.toggleblock) {
const isExpanded = this.state[toggleKey];
toggleIcon = <i className={`fa ${isExpanded ? 'fa-chevron-down' : 'fa-chevron-left'}`} style={{ fontSize: style.fontSize * 0.75, marginRight: 12, marginLeft: 5, marginTop: style.fontSize * 0.125 }}></i>;
toggleIcon = <i className={`fas ${isExpanded ? 'fa-chevron-down' : 'fa-chevron-left'}`} style={{ fontSize: style.fontSize * 0.75, marginRight: 12, marginLeft: 5, marginTop: style.fontSize * 0.125 }}></i>;
}
if (extraProps.selected) {
style.backgroundColor = this.style().listItemSelected.backgroundColor;
@ -712,7 +712,7 @@ class SideBarComponent extends React.Component {
synchronizeButton(type) {
const style = Object.assign({}, this.style().button, { marginBottom: 5 });
const iconName = 'fa-refresh';
const iconName = 'fa-sync-alt';
const label = type === 'sync' ? _('Synchronise') : _('Cancel');
const iconStyle = { fontSize: style.fontSize, marginRight: 5 };
@ -720,7 +720,7 @@ class SideBarComponent extends React.Component {
iconStyle.animation = 'icon-infinite-rotation 1s linear infinite';
}
const icon = <i style={iconStyle} className={`fa ${iconName}`} />;
const icon = <i style={iconStyle} className={`fas ${iconName}`} />;
return (
<a
className="synchronize-button"

4
ElectronClient/gui/ToolbarButton.jsx
View File

@ -14,10 +14,10 @@ class ToolbarButton extends React.Component {
if (this.props.iconName) {
const iconStyle = {
fontSize: Math.round(theme.fontSize * 1.5),
color: theme.color,
color: theme.iconColor,
};
if (title) iconStyle.marginRight = 5;
icon = <i style={iconStyle} className={`fa ${this.props.iconName}`}></i>;
icon = <i style={iconStyle} className={`fas ${this.props.iconName}`}></i>;
}
const isEnabled = !('enabled' in this.props) || this.props.enabled === true;

2
ElectronClient/gui/style/ConfigMenuBar.js
View File

@ -20,7 +20,7 @@ const style = createSelector(
},
buttonIcon: {
fontSize: 24,
color: theme.colorFaded,
color: theme.iconColor,
},
buttonLabel: {
display: 'flex',

2
ElectronClient/gui/style/theme/aritimDark.js
View File

@ -1,4 +1,6 @@
const aritimStyle = {
appearance: 'dark',
backgroundColor: '#10151a', // Main background color
backgroundColorTransparent: 'rgba(16, 21, 26, 0.9)', //
oddBackgroundColor: '#141a21',

2
ElectronClient/gui/style/theme/dark.js
View File

@ -1,4 +1,6 @@
const darkStyle = {
appearance: 'dark',
backgroundColor: '#1D2024',
backgroundColorTransparent: 'rgba(255,255,255,0.9)',
oddBackgroundColor: '#dddddd',

2
ElectronClient/gui/style/theme/dracula.js
View File

@ -1,4 +1,6 @@
const draculaStyle = {
appearance: 'dark',
backgroundColor: '#282a36',
backgroundColorTransparent: 'rgba(40, 42, 54, 0.9)',
oddBackgroundColor: '#282a36',

2
ElectronClient/gui/style/theme/nord.js
View File

@ -45,6 +45,8 @@ const nord = ['#2e3440', '#3b4252', '#434c5e', '#4c566a', '#d8dee9', '#e5e9f0',
// 2e3440 === rbga(46, 52, 64, 1)
const nordStyle = {
appearance: 'dark',
backgroundColor: nord[0],
backgroundColorTransparent: 'rgba(46, 52, 64, 0.9)',
oddBackgroundColor: nord[1],

2
ElectronClient/gui/style/theme/solarizedDark.js
View File

@ -1,4 +1,6 @@
const solarizedDarkStyle = {
appearance: 'dark',
backgroundColor: '#002b36',
backgroundColorTransparent: 'rgba(0, 43, 54, 0.9)',
oddBackgroundColor: '#073642',

2
ElectronClient/index.html
View File

@ -9,7 +9,7 @@
-->
<title>Joplin</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/fork-awesome.min.css">
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="node_modules/react-datetime/css/react-datetime.css">
<link rel="stylesheet" href="node_modules/smalltalk/css/smalltalk.css">

53
ElectronClient/package-lock.json generated
View File

@ -203,6 +203,11 @@
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.2.tgz",
"integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw=="
},
"@fortawesome/fontawesome-free": {
"version": "5.13.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.0.tgz",
"integrity": "sha512-xKOeQEl5O47GPZYIMToj6uuA2syyFlq9EMSl2ui0uytjY9xbe8XS0pexNWmxrdcCyNGyDmLyYw5FtKsalBUeOg=="
},
"@sindresorhus/is": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
@ -1449,13 +1454,15 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
"integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
"dev": true
"dev": true,
"optional": true
},
"is-glob": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
"integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
"dev": true,
"optional": true,
"requires": {
"is-extglob": "^1.0.0"
}
@ -1943,7 +1950,8 @@
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/boolean/-/boolean-3.0.1.tgz",
"integrity": "sha512-HRZPIjPcbwAVQvOTxR4YE3o8Xs98NqbbL1iEZDCz7CL8ql0Lt5iOyJFxfnAB0oFs8Oh02F/lLlg30Mexv46LjA==",
"dev": true
"dev": true,
"optional": true
},
"boxen": {
"version": "4.2.0",
@ -4971,13 +4979,15 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
"integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
"dev": true
"dev": true,
"optional": true
},
"is-glob": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
"integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
"dev": true,
"optional": true,
"requires": {
"is-extglob": "^1.0.0"
}
@ -5145,7 +5155,8 @@
"version": "2.1.1",
"resolved": false,
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -5194,7 +5205,8 @@
"version": "1.1.0",
"resolved": false,
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
@ -5207,7 +5219,8 @@
"version": "1.1.0",
"resolved": false,
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -5338,7 +5351,8 @@
"version": "2.0.4",
"resolved": false,
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -5352,6 +5366,7 @@
"resolved": false,
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -5368,6 +5383,7 @@
"resolved": false,
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -5376,13 +5392,15 @@
"version": "0.0.8",
"resolved": false,
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.9.0",
"resolved": false,
"integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -5403,6 +5421,7 @@
"resolved": false,
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -5501,7 +5520,8 @@
"version": "1.0.1",
"resolved": false,
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -5515,6 +5535,7 @@
"resolved": false,
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -5610,7 +5631,8 @@
"version": "5.1.2",
"resolved": false,
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -5652,6 +5674,7 @@
"resolved": false,
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -5673,6 +5696,7 @@
"resolved": false,
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -5721,13 +5745,15 @@
"version": "1.0.2",
"resolved": false,
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.1.1",
"resolved": false,
"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
"dev": true
"dev": true,
"optional": true
}
}
},
@ -8645,7 +8671,8 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
"integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
"dev": true
"dev": true,
"optional": true
},
"is-glob": {
"version": "2.0.1",

1
ElectronClient/package.json
View File

@ -94,6 +94,7 @@
"7zip-bin-win": "^2.1.1"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.13.0",
"app-module-path": "^2.2.0",
"async-mutex": "^0.1.3",
"base-64": "^0.1.0",

5
ElectronClient/theme.js
View File

@ -30,6 +30,8 @@ const globalStyle = {
headerButtonHPadding: 6,
toolbarHeight: 35,
appearance: 'light',
};
globalStyle.marginRight = globalStyle.margin;
@ -84,6 +86,7 @@ globalStyle.buttonStyle = {
function addExtraStyles(style) {
style.selectedDividerColor = Color(style.dividerColor).darken(0.2).hex();
style.iconColor = Color(style.color).alpha(0.8);
style.tagStyle = {
fontSize: style.fontSize,
@ -204,7 +207,7 @@ function addExtraStyles(style) {
};
style.buttonIconStyle = {
color: style.color,
color: style.iconColor,
marginRight: 6,
};

2
ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.ts
View File

@ -52,7 +52,7 @@ pluginAssets[2] = function(theme:any) {
ul.joplin-checklist li::before {
content:"\\f14a";
font-family:ForkAwesome;
font-family:"Font Awesome 5 Free";
background-size: 16px 16px;
pointer-events: all;
cursor: pointer;

18
ReactNativeClient/lib/models/Setting.js
View File

@ -1085,15 +1085,15 @@ class Setting extends BaseModel {
}
static sectionNameToIcon(name) {
if (name === 'general') return 'fa-sliders';
if (name === 'sync') return 'fa-refresh';
if (name === 'appearance') return 'fa-pencil';
if (name === 'note') return 'fa-file-text-o';
if (name === 'plugins') return 'fa-puzzle-piece';
if (name === 'application') return 'fa-cog';
if (name === 'revisionService') return 'fa-archive-org';
if (name === 'encryption') return 'fa-key-modern';
if (name === 'server') return 'fa-hand-scissors-o';
if (name === 'general') return 'fas fa-sliders-h';
if (name === 'sync') return 'fas fa-sync-alt';
if (name === 'appearance') return 'fas fa-pencil-alt';
if (name === 'note') return 'far fa-file-alt';
if (name === 'plugins') return 'fas fa-puzzle-piece';
if (name === 'application') return 'fas fa-cog';
if (name === 'revisionService') return 'fas fa-history';
if (name === 'encryption') return 'fas fa-key';
if (name === 'server') return 'far fa-hand-scissors';
return name;
}