diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx
index dbfa9df2..77d396e2 100644
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@@ -12,7 +12,8 @@ import TextareaAutosize from '@mui/material/TextareaAutosize';
import Header from '../Header';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
-import SettingsItem from '../SettingsItem';
+
+import { Row, Content, Action } from '../SettingsItem';
import Section from '../Section';
import PreferencesWrapper from '../PreferencesWrapper';
@@ -98,26 +99,29 @@ export default class QuoteSettings extends PureComponent {
const ButtonOptions = () => {
return (
-
+
);
};
@@ -140,22 +144,24 @@ export default class QuoteSettings extends PureComponent {
const AdditionalOptions = () => {
return (
-
+
);
};
@@ -163,15 +169,17 @@ export default class QuoteSettings extends PureComponent {
if (this.state.quoteType === 'custom' && this.state.sourceSection === true) {
customSettings = (
<>
-
@@ -255,13 +263,15 @@ export default class QuoteSettings extends PureComponent {
/>
)}
{this.state.sourceSection && (
-
-
-
+
+
+
+
+
+
)}
{!this.state.sourceSection && (
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index 5575885b..9e9be641 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@@ -6,7 +6,8 @@ import { MenuItem, TextField } from '@mui/material';
import Header from '../Header';
import Dropdown from '../Dropdown';
import Checkbox from '../Checkbox';
-import SettingsItem from '../SettingsItem';
+
+import { Row, Content, Action } from '../SettingsItem';
import EventBus from 'modules/helpers/eventbus';
@@ -69,63 +70,68 @@ export default class SearchSettings extends PureComponent {
const AdditionalOptions = () => {
return (
-
- {/* not supported on firefox */}
- {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
+
+
+
+ {/* not supported on firefox */}
+ {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
+
+ ) : null}
+
+
- ) : null}
-
-
-
-
+
+
);
};
const SearchEngineSelection = () => {
return (
-
- this.setSearchEngine(value)}
- manual={true}
- >
- {searchEngines.map((engine) => (
-
+
+
+
);
};
@@ -141,20 +147,23 @@ export default class SearchSettings extends PureComponent {
{this.state.customEnabled && (
-
- this.setState({ customValue: e.target.value })}
- varient="outlined"
- InputLabelProps={{ shrink: true }}
- />
-
- this.resetSearch()}>
- {variables.getMessage('modals.main.settings.buttons.reset')}
-
-
-
+
+
+
+ this.setState({ customValue: e.target.value })}
+ varient="outlined"
+ InputLabelProps={{ shrink: true }}
+ />
+
+ this.resetSearch()}>
+ {variables.getMessage('modals.main.settings.buttons.reset')}
+
+
+
+
)}
>
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index d0e0115c..ed3d00a0 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -5,8 +5,9 @@ import Header from '../Header';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Radio from '../Radio';
-import SettingsItem from '../SettingsItem';
+
import PreferencesWrapper from '../PreferencesWrapper';
+import { Row, Content, Action } from '../SettingsItem';
import { MdRefresh } from 'react-icons/md';
@@ -33,144 +34,158 @@ const TimeSettings = () => {
const WidgetType = () => {
return (
-
- setTimeType(value)} category="clock">
-
-
-
-
-
-
+
+
+
+ setTimeType(value)} category="clock">
+
+
+
+
+
+
+
);
};
const digitalSettings = (
-
-
+
-
-
-
+
+
+
+
+
+
);
const analogSettings = (
-
-
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
);
const verticalClock = (
<>
-
-
- updateColour('hourColour', event)}
- value={hourColour}
- >
-
-
- localStorage.setItem('hourColour', '#ffffff')}>
-
- {variables.getMessage('modals.main.settings.buttons.reset')}
-
-
-
-
- updateColour('minuteColour', event)}
- value={minuteColour}
- >
-
-
- localStorage.setItem('minuteColour', '#ffffff')}>
-
- {variables.getMessage('modals.main.settings.buttons.reset')}
-
-
+
+
+
+
+ updateColour('hourColour', event)}
+ value={hourColour}
+ >
+
+
+ localStorage.setItem('hourColour', '#ffffff')}>
+
+ {variables.getMessage('modals.main.settings.buttons.reset')}
+
+
+
+
+
+
+
+ updateColour('minuteColour', event)}
+ value={minuteColour}
+ >
+
+
+ localStorage.setItem('minuteColour', '#ffffff')}>
+
+ {variables.getMessage('modals.main.settings.buttons.reset')}
+
+
+
{digitalSettings}
>
);
diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx
index d875cbfa..9507630f 100644
--- a/src/components/modals/main/settings/sections/Weather.jsx
+++ b/src/components/modals/main/settings/sections/Weather.jsx
@@ -8,9 +8,11 @@ import Radio from '../Radio';
import Dropdown from '../Dropdown';
import Checkbox from '../Checkbox';
import { TextField } from '@mui/material';
-import SettingsItem from '../SettingsItem';
+
import PreferencesWrapper from '../PreferencesWrapper';
+import { Row, Content, Action } from '../SettingsItem';
+
export default class WeatherSettings extends PureComponent {
constructor() {
super();
@@ -44,19 +46,26 @@ export default class WeatherSettings extends PureComponent {
const WidgetType = () => {
return (
-
- this.forceUpdate()}
- >
-
-
-
-
-
-
+
+
+
+ this.forceUpdate()}
+ >
+
+
+
+
+
+
+
);
};
@@ -89,48 +98,51 @@ export default class WeatherSettings extends PureComponent {
);
};
return (
-
- this.changeLocation(e)}
- placeholder="London"
- varient="outlined"
- InputLabelProps={{ shrink: true }}
- />
-
-
- {variables.getMessage(`${WEATHER_SECTION}.auto`)}
-
-
+
+
+
+ this.changeLocation(e)}
+ placeholder="London"
+ varient="outlined"
+ InputLabelProps={{ shrink: true }}
+ />
+
+
+ {variables.getMessage(`${WEATHER_SECTION}.auto`)}
+
+
+
);
};
const TemperatureFormat = () => {
return (
-
-
-
+
+
+
+
+
+
);
};
@@ -167,21 +179,21 @@ export default class WeatherSettings extends PureComponent {
];
return (
-
- {weatherOptions.map((item) => (
-
- ))}
-
+
+
+
+ {weatherOptions.map((item) => (
+
+ ))}
+
+
);
};
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 1aea6ced..436104fd 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -9,7 +9,7 @@ import ChipSelect from '../../ChipSelect';
import Dropdown from '../../Dropdown';
import Slider from '../../Slider';
import Radio from '../../Radio';
-import SettingsItem from '../../SettingsItem';
+import { Row, Content, Action } from '../../SettingsItem';
import Text from '../../Text';
import ColourSettings from './Colour';
@@ -92,11 +92,7 @@ export default class BackgroundSettings extends PureComponent {
render() {
/* const interval = (
-
+
+
-
+
+
);*/
const APISettings = (
<>
-
- {this.state.backgroundCategories[0] === variables.getMessage('modals.main.loading') ? (
- <>
-
-
- {variables.getMessage('modals.main.loading')}
-
-
- {variables.getMessage('modals.main.loading')}
-
-
- >
- ) : (
-
- )}
-
-
-
-
-
-
- this.updateAPI(e)}
+
+
-
- {this.state.backgroundAPI === 'unsplash' && (
-
-
+ {this.state.backgroundCategories[0] === variables.getMessage('modals.main.loading') ? (
+ <>
+
+
+ {variables.getMessage('modals.main.loading')}
+
+
+ {variables.getMessage('modals.main.loading')}
+
+
+ >
+ ) : (
+
+ )}
+
+
+
+
+
+
+ this.updateAPI(e)}
/>
-
+
+
+ {this.state.backgroundAPI === 'unsplash' && (
+
+
+
+
+
+
)}
>
);
@@ -385,90 +395,100 @@ export default class BackgroundSettings extends PureComponent {
(this.state.backgroundType === 'api' ||
this.state.backgroundType === 'custom' ||
this.state.marketplaceEnabled) ? (
-
-
+
-
-
-
-
+
+
+
+
+
+
+
) : null}
{this.state.backgroundSettingsSection && (
<>
-
- this.setState({ backgroundType: value })}
- category="background"
- >
- {this.state.marketplaceEnabled && (
-
+
- {variables.getMessage('modals.main.settings.sections.background.type.api')}
-
-
-
- {variables.getMessage(
- 'modals.main.settings.sections.background.type.random_colour',
- )}
-
-
- {variables.getMessage(
- 'modals.main.settings.sections.background.type.random_gradient',
- )}
-
-
-
+
+ {variables.getMessage('modals.main.settings.sections.background.type.api')}
+
+
+ {variables.getMessage(
+ 'modals.main.settings.sections.background.type.custom_image',
+ )}
+
+
+ {variables.getMessage(
+ 'modals.main.settings.sections.background.type.custom_colour',
+ )}
+
+
+ {variables.getMessage(
+ 'modals.main.settings.sections.background.type.random_colour',
+ )}
+
+
+ {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 */}
{/*{this.state.backgroundType === 'api' ||
this.state.backgroundType === 'custom' ||
@@ -482,83 +502,19 @@ export default class BackgroundSettings extends PureComponent {
this.state.backgroundType === 'custom' ||
this.state.marketplaceEnabled) &&
this.state.effects ? (
-
-
-
+
- this.setState({ backgroundFilter: value })}
- category="background"
- element="#backgroundImage"
- >
-
- {variables.getMessage(
- 'modals.main.settings.sections.appearance.navbar.refresh_options.none',
- )}
-
-
- {variables.getMessage(
- 'modals.main.settings.sections.background.effects.filters.grayscale',
- )}
-
-
- {variables.getMessage(
- 'modals.main.settings.sections.background.effects.filters.sepia',
- )}
-
-
- {variables.getMessage(
- 'modals.main.settings.sections.background.effects.filters.invert',
- )}
-
-
- {variables.getMessage(
- 'modals.main.settings.sections.background.effects.filters.saturate',
- )}
-
-
- {variables.getMessage(
- 'modals.main.settings.sections.background.effects.filters.contrast',
- )}
-
-
- {this.state.backgroundFilter !== 'none' && (
+
- )}
-
+
+
this.setState({ backgroundFilter: value })}
+ category="background"
+ element="#backgroundImage"
+ >
+
+ {variables.getMessage(
+ 'modals.main.settings.sections.appearance.navbar.refresh_options.none',
+ )}
+
+
+ {variables.getMessage(
+ 'modals.main.settings.sections.background.effects.filters.grayscale',
+ )}
+
+
+ {variables.getMessage(
+ 'modals.main.settings.sections.background.effects.filters.sepia',
+ )}
+
+
+ {variables.getMessage(
+ 'modals.main.settings.sections.background.effects.filters.invert',
+ )}
+
+
+ {variables.getMessage(
+ 'modals.main.settings.sections.background.effects.filters.saturate',
+ )}
+
+
+ {variables.getMessage(
+ 'modals.main.settings.sections.background.effects.filters.contrast',
+ )}
+
+
+ {this.state.backgroundFilter !== 'none' && (
+
+ )}
+
+
) : null}
>
);
diff --git a/src/components/modals/main/settings/sections/background/Colour.jsx b/src/components/modals/main/settings/sections/background/Colour.jsx
index af8089c7..31fe9a12 100644
--- a/src/components/modals/main/settings/sections/background/Colour.jsx
+++ b/src/components/modals/main/settings/sections/background/Colour.jsx
@@ -2,7 +2,7 @@ import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { ColorPicker } from '@muetab/react-color-gradient-picker';
import { toast } from 'react-toastify';
-import SettingsItem from '../../SettingsItem';
+import { Row, Content, Action } from '../../SettingsItem';
import hexToRgb from 'modules/helpers/background/hexToRgb';
import rgbToHex from 'modules/helpers/background/rgbToHex';
@@ -220,19 +220,21 @@ export default class ColourSettings extends PureComponent {
return (
<>
-
- {colourSettings}
-
- this.resetColour()}>
- {variables.getMessage('modals.main.settings.buttons.reset')}
-
-
-
+
+
+
+ {colourSettings}
+
+ this.resetColour()}>
+ {variables.getMessage('modals.main.settings.buttons.reset')}
+
+
+
+
>
);
}