diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx
index a085064c..dcce204f 100644
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@@ -261,12 +261,25 @@ export default class Added extends PureComponent {
label={variables.getMessage('modals.main.addons.sort.title')}
name="sortAddons"
onChange={(value) => this.sortAddons(value)}
- >
-
-
-
-
-
+ items={[
+ {
+ value: 'newest',
+ text: variables.getMessage('modals.main.addons.sort.newest'),
+ },
+ {
+ value: 'oldest',
+ text: variables.getMessage('modals.main.addons.sort.oldest'),
+ },
+ {
+ value: 'a-z',
+ text: variables.getMessage('modals.main.addons.sort.a_z'),
+ },
+ {
+ value: 'z-a',
+ text: variables.getMessage('modals.main.addons.sort.z_a'),
+ },
+ ]}
+ />
this.sortMarketplace(value)}
- >
-
-
-
+ items={[
+ {
+ value: 'a-z',
+ text: variables.getMessage('modals.main.addons.sort.a_z'),
+ },
+ {
+ value: 'z-a',
+ text: variables.getMessage('modals.main.addons.sort.z_a'),
+ },
+ ]}
+ />
>
)}
diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx
index 09a8d4b1..f2aa81f0 100644
--- a/src/components/modals/main/settings/Dropdown.jsx
+++ b/src/components/modals/main/settings/Dropdown.jsx
@@ -8,7 +8,7 @@ class Dropdown extends PureComponent {
constructor(props) {
super(props);
this.state = {
- value: localStorage.getItem(this.props.name) || this.props.children[0].props.value,
+ value: localStorage.getItem(this.props.name) || this.props.items[0].value,
title: '',
};
this.dropdown = createRef();
@@ -62,17 +62,11 @@ class Dropdown extends PureComponent {
ref={this.dropdown}
key={id}
>
- {this.props.manual
- ? this.props.children
- : this.props.children.map((e, index) => {
- return (
- e && (
-
- )
- );
- })}
+ {this.props.items.map(({ value, text }) => (
+
+ ))}
);
diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx
index ea4f0666..21f82be7 100644
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/src/components/modals/main/settings/sections/Advanced.jsx
@@ -1,12 +1,10 @@
import variables from 'modules/variables';
import { useState } from 'react';
import Modal from 'react-modal';
-import { MenuItem } from '@mui/material';
import {
MdUpload as ImportIcon,
MdDownload as ExportIcon,
MdRestartAlt as ResetIcon,
- MdOutlineKeyboardArrowRight,
MdDataUsage,
} from 'react-icons/md';
@@ -111,18 +109,19 @@ export default function AdvancedSettings() {
)}
/>
-
-
- {time_zones.map((timezone) => (
-
- ))}
-
+ ({ value: timezone, text: timezone })),
+ ]}
+ />
diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx
index c51947ac..2ec167a4 100644
--- a/src/components/modals/main/settings/sections/Appearance.jsx
+++ b/src/components/modals/main/settings/sections/Appearance.jsx
@@ -13,10 +13,9 @@ import { Row, Content, Action } from '../SettingsItem';
import Section from '../Section';
-import { MdSource, MdOutlineKeyboardArrowRight, MdAccessibility } from 'react-icons/md';
+import { MdAccessibility } from 'react-icons/md';
import { values } from 'modules/helpers/settings/modals';
-import Settings from '../../tabs/Settings';
function AppearanceSettings() {
const [accessibility, setAccessibility] = useState(false);
@@ -55,6 +54,7 @@ function AppearanceSettings() {
};
const FontOptions = () => {
+ const fontWeight = 'modals.main.settings.sections.appearance.font.weight';
return (
+ {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
- {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
-
-
-
-
-
-
-
-
-
+ items={[
+ {
+ value: '100',
+ text: variables.getMessage(fontWeight + '.thin'),
+ },
+ {
+ value: '200',
+ text: variables.getMessage(fontWeight + '.extra_light'),
+ },
+ {
+ value: '300',
+ text: variables.getMessage(fontWeight + '.light'),
+ },
+ {
+ value: '400',
+ text: variables.getMessage(fontWeight + '.normal'),
+ },
+ {
+ value: '500',
+ text: variables.getMessage(fontWeight + '.medium'),
+ },
+ {
+ value: '600',
+ text: variables.getMessage(fontWeight + '.semi_bold'),
+ },
+ {
+ value: '700',
+ text: variables.getMessage(fontWeight + '.bold'),
+ },
+ {
+ value: '800',
+ text: variables.getMessage(fontWeight + '.extra_bold'),
+ },
+ ]}
+ />
-
-
-
-
+ items={[
+ {
+ value: 'normal',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.appearance.font.style.normal',
+ ),
+ },
+ {
+ value: 'italic',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.appearance.font.style.italic',
+ ),
+ },
+ {
+ value: 'oblique',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.appearance.font.style.oblique',
+ ),
+ },
+ ]}
+ />
);
@@ -184,25 +197,27 @@ function AppearanceSettings() {
)}
name="textBorder"
category="other"
- >
- {' '}
- {/* default */}
- {' '}
- {/* old checkbox setting */}
-
-
+ items={[
+ {
+ value: 'new',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.appearance.accessibility.text_shadow.new',
+ ),
+ },
+ {
+ value: 'true',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.appearance.accessibility.text_shadow.old',
+ ),
+ },
+ {
+ value: 'none',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.appearance.accessibility.text_shadow.none',
+ ),
+ },
+ ]}
+ />
-
-
-
-
+ items={dateFormats.map((format) => {
+ return {
+ value: format,
+ text: format,
+ };
+ })}
+ />
-
-
-
-
+ items={dateFormats.map((format) => {
+ return {
+ value: format,
+ text: format,
+ };
+ })}
+ />
-
-
-
-
-
+ items={[
+ {
+ value: 'dash',
+ text: variables.getMessage('modals.main.settings.sections.date.short_separator.dash'),
+ },
+ {
+ value: 'dots',
+ text: variables.getMessage('modals.main.settings.sections.date.short_separator.dots'),
+ },
+ {
+ value: 'gaps',
+ text: variables.getMessage('modals.main.settings.sections.date.short_separator.gaps'),
+ },
+ {
+ value: 'slashes',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.date.short_separator.slashes',
+ ),
+ },
+ ]}
+ />
>
);
@@ -91,14 +104,17 @@ export default function Date() {
localStorage.setItem('dateType', value);
}}
category="date"
- >
-
-
-
+ items={[
+ {
+ value: 'long',
+ text: variables.getMessage('modals.main.settings.sections.date.type.long'),
+ },
+ {
+ value: 'short',
+ text: variables.getMessage('modals.main.settings.sections.date.type.short'),
+ },
+ ]}
+ />
diff --git a/src/components/modals/main/settings/sections/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx
index 680c76e2..75b3390e 100644
--- a/src/components/modals/main/settings/sections/Navbar.jsx
+++ b/src/components/modals/main/settings/sections/Navbar.jsx
@@ -15,7 +15,6 @@ import { Row, Content, Action } from '../SettingsItem';
import Header from '../Header';
import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals';
import QuickLink from './quicklinks/QuickLink';
-import Apps from '../../../../widgets/navbar/Apps';
function Navbar() {
const [showRefreshOptions, setShowRefreshOptions] = useState(
@@ -173,23 +172,33 @@ function Navbar() {
)}
/>
-
-
-
-
-
-
+
);
diff --git a/src/components/modals/main/settings/sections/QuickLinks.jsx b/src/components/modals/main/settings/sections/QuickLinks.jsx
index b7383991..156f500a 100644
--- a/src/components/modals/main/settings/sections/QuickLinks.jsx
+++ b/src/components/modals/main/settings/sections/QuickLinks.jsx
@@ -165,17 +165,21 @@ export default class QuickLinks extends PureComponent {
label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
name="quickLinksStyle"
category="quicklinks"
- >
-
-
-
-
+ items={[
+ {
+ value: 'icon',
+ text: variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`),
+ },
+ {
+ value: 'text',
+ text: variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`),
+ },
+ {
+ value: 'metro',
+ text: variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`),
+ },
+ ]}
+ />
);
diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx
index 8273fb81..02e42ffa 100644
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@@ -1,12 +1,6 @@
import variables from 'modules/variables';
import React, { PureComponent } from 'react';
-import {
- MdCancel,
- MdAdd,
- MdSource,
- MdOutlineKeyboardArrowRight,
- MdOutlineFormatQuote,
-} from 'react-icons/md';
+import { MdCancel, MdAdd, MdSource, MdOutlineFormatQuote } from 'react-icons/md';
import TextareaAutosize from '@mui/material/TextareaAutosize';
import Header from '../Header';
@@ -30,14 +24,6 @@ export default class QuoteSettings extends PureComponent {
};
}
- marketplaceType = () => {
- if (localStorage.getItem('quote_packs')) {
- return (
-
- );
- }
- };
-
resetCustom = () => {
localStorage.setItem('customQuote', '[{"quote": "", "author": ""}]');
this.setState({
@@ -132,13 +118,19 @@ export default class QuoteSettings extends PureComponent {
label={variables.getMessage('modals.main.settings.sections.background.type.title')}
onChange={(value) => this.setState({ quoteType: value })}
category="quote"
- >
- {this.marketplaceType()}
-
-
-
+ items={[
+ localStorage.getItem('quote_packs') && {
+ value: 'quote_pack',
+ text: variables.getMessage('modals.main.navbar.marketplace'),
+ },
+ { value: 'quote_pack', text: variables.getMessage('modals.main.navbar.marketplace') },
+ {
+ value: 'api',
+ text: variables.getMessage('modals.main.settings.sections.background.type.api'),
+ },
+ { value: 'custom', text: variables.getMessage(`${QUOTE_SECTION}.custom`) },
+ ]}
+ />
);
};
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index dcd2c043..65701ca6 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@@ -119,17 +119,17 @@ export default class SearchSettings extends PureComponent {
this.setSearchEngine(value)}
- manual={true}
- >
- {searchEngines.map((engine) => (
-
- ))}
-
-
+ items={[
+ searchEngines.map((engine) => ({
+ value: engine.settingsName,
+ text: engine.name,
+ })),
+ {
+ value: 'custom',
+ text: variables.getMessage(`${SEARCH_SECTION}.custom`),
+ },
+ ]}
+ />
);
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index 9a2db823..656ece02 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -40,18 +40,23 @@ const TimeSettings = () => {
subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
/>
- setTimeType(value)} category="clock">
-
-
-
-
-
+ setTimeType(value)}
+ category="clock"
+ items={[
+ { value: 'digital', text: variables.getMessage(`${TIME_SECTION}.digital.title`) },
+ { value: 'analogue', text: variables.getMessage(`${TIME_SECTION}.analogue.title`) },
+ {
+ value: 'percentageComplete',
+ text: variables.getMessage(`${TIME_SECTION}.percentage_complete`),
+ },
+ {
+ value: 'verticalClock',
+ text: variables.getMessage(`${TIME_SECTION}.vertical_clock.title`),
+ },
+ ]}
+ />
);
diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx
index faf58071..36b89f1c 100644
--- a/src/components/modals/main/settings/sections/Weather.jsx
+++ b/src/components/modals/main/settings/sections/Weather.jsx
@@ -54,16 +54,19 @@ export default class WeatherSettings extends PureComponent {
name="weatherType"
category="weather"
onChange={() => this.forceUpdate()}
- >
-
-
-
-
-
+ items={[
+ { value: '1', text: variables.getMessage(`${WEATHER_SECTION}.options.basic`) },
+ {
+ value: '2',
+ text: variables.getMessage(`${WEATHER_SECTION}.options.standard`),
+ },
+ {
+ value: '3',
+ text: variables.getMessage(`${WEATHER_SECTION}.options.expanded`),
+ },
+ { value: '4', text: variables.getMessage(`${WEATHER_SECTION}.options.custom`) },
+ ]}
+ />
);
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 11082c3d..f3cd4345 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -146,14 +146,17 @@ export default class BackgroundSettings extends PureComponent {
-
-
-
+ items={[
+ {
+ value: 'loading',
+ text: variables.getMessage('modals.main.loading'),
+ },
+ {
+ value: 'loading',
+ text: variables.getMessage('modals.main.loading'),
+ },
+ ]}
+ />
>
) : (
-
-
-
-
-
+ items={[
+ {
+ value: 'original',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.source.quality.original',
+ ),
+ },
+ {
+ value: 'high',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.source.quality.high',
+ ),
+ },
+ {
+ value: 'normal',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.source.quality.normal',
+ ),
+ },
+ {
+ value: 'datasaver',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.source.quality.datasaver',
+ ),
+ },
+ ]}
+ />
this.setState({ backgroundType: value })}
category="background"
- >
- {this.state.marketplaceEnabled && (
-
- )}
-
-
-
-
-
-
+ items={[
+ this.state.marketplaceEnabled && {
+ value: 'photo_pack',
+ text: variables.getMessage('modals.main.navbar.marketplace'),
+ },
+ {
+ value: 'api',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.type.api',
+ ),
+ },
+ {
+ value: 'custom',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.type.custom_image',
+ ),
+ },
+ {
+ value: 'colour',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.type.custom_colour',
+ ),
+ },
+ {
+ value: 'random_colour',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.type.random_colour',
+ ),
+ },
+ {
+ value: 'random_gradient',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.type.random_gradient',
+ ),
+ },
+ ]}
+ />
{this.state.backgroundType === 'api' ||
@@ -454,36 +469,43 @@ export default class BackgroundSettings extends PureComponent {
name="backgroundType"
onChange={(value) => this.setState({ backgroundType: value })}
category="background"
- >
- {this.state.marketplaceEnabled && (
-
- )}
-
-
-
-
-
-
+ items={[
+ this.state.marketplaceEnabled && {
+ value: 'photo_pack',
+ text: variables.getMessage('modals.main.navbar.marketplace'),
+ },
+ {
+ value: 'api',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.type.api',
+ ),
+ },
+ {
+ value: 'custom',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.type.custom_image',
+ ),
+ },
+ {
+ value: 'colour',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.type.custom_colour',
+ ),
+ },
+ {
+ value: 'random_colour',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.type.random_colour',
+ ),
+ },
+ {
+ value: 'random_gradient',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.type.random_gradient',
+ ),
+ },
+ ]}
+ />
{/* // todo: ideally refactor all of this file, but we need interval to appear on marketplace too */}
@@ -541,38 +563,45 @@ export default class BackgroundSettings extends PureComponent {
onChange={(value) => this.setState({ backgroundFilter: value })}
category="background"
element="#backgroundImage"
- >
-
-
-
-
-
-
-
+ items={[
+ {
+ value: 'none',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.appearance.navbar.refresh_options.none',
+ ),
+ },
+ {
+ value: 'grayscale',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.effects.filters.grayscale',
+ ),
+ },
+ {
+ value: 'sepia',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.effects.filters.sepia',
+ ),
+ },
+ {
+ value: 'invert',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.effects.filters.invert',
+ ),
+ },
+ {
+ value: 'saturate',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.effects.filters.saturate',
+ ),
+ },
+ {
+ value: 'contrast',
+ text: variables.getMessage(
+ 'modals.main.settings.sections.background.effects.filters.contrast',
+ ),
+ },
+ ]}
+ />
{this.state.backgroundFilter !== 'none' && (