From 84c1bc8df1d17cf38b967ee9958663d2b29a6a0e Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Fri, 9 Feb 2024 22:22:11 +0000 Subject: [PATCH] refactor(settings): Move to new style settings row Comprised of: - Row element - Content (title and description) - Action --- package.json | 2 +- pnpm-lock.yaml | 42 +- src/components/modals/main/scss/index.scss | 8 + .../modals/main/settings/Header.jsx | 1 - .../main/settings/PreferencesWrapper.jsx | 35 +- .../modals/main/settings/SettingsItem.jsx | 27 +- .../modals/main/settings/SettingsRow.jsx | 15 + .../main/settings/sections/Advanced.jsx | 123 +++-- .../main/settings/sections/Appearance.jsx | 349 +++++++------ .../modals/main/settings/sections/Date.jsx | 86 +-- .../main/settings/sections/Experimental.jsx | 95 ++-- .../main/settings/sections/Greeting.jsx | 96 ++-- .../modals/main/settings/sections/Message.jsx | 15 +- .../modals/main/settings/sections/Navbar.jsx | 160 +++--- .../main/settings/sections/QuickLinks.jsx | 91 ++-- .../modals/main/settings/sections/Quote.jsx | 112 ++-- .../modals/main/settings/sections/Search.jsx | 135 ++--- .../modals/main/settings/sections/Time.jsx | 267 +++++----- .../modals/main/settings/sections/Weather.jsx | 144 ++--- .../sections/background/Background.jsx | 492 +++++++++--------- .../settings/sections/background/Colour.jsx | 30 +- 21 files changed, 1254 insertions(+), 1071 deletions(-) create mode 100644 src/components/modals/main/settings/SettingsRow.jsx diff --git a/package.json b/package.json index b62ed0f5..8516e712 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "stylelint": "^16.2.1", "stylelint-config-standard-scss": "^13.0.0", "stylelint-scss": "^6.1.0", - "vite": "5.1.0", + "vite": "5.1.1", "vite-plugin-progress": "^0.0.7" }, "scripts": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6edc3ebf..cb7a0b28 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,9 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + dependencies: '@eartharoid/i18n': specifier: 1.2.1 @@ -74,7 +78,7 @@ devDependencies: version: 0.0.2 '@vitejs/plugin-react-swc': specifier: ^3.6.0 - version: 3.6.0(vite@5.1.0) + version: 3.6.0(vite@5.1.1) adm-zip: specifier: ^0.5.10 version: 0.5.10 @@ -106,11 +110,11 @@ devDependencies: specifier: ^6.1.0 version: 6.1.0(stylelint@16.2.1) vite: - specifier: 5.1.0 - version: 5.1.0(@types/node@20.11.17)(sass@1.70.0) + specifier: 5.1.1 + version: 5.1.1(@types/node@20.11.17)(sass@1.70.0) vite-plugin-progress: specifier: ^0.0.7 - version: 0.0.7(vite@5.1.0) + version: 0.0.7(vite@5.1.1) packages: @@ -2951,13 +2955,13 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@vitejs/plugin-react-swc@3.6.0(vite@5.1.0): + /@vitejs/plugin-react-swc@3.6.0(vite@5.1.1): resolution: {integrity: sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==} peerDependencies: vite: ^4 || ^5 dependencies: '@swc/core': 1.4.0 - vite: 5.1.0(@types/node@20.11.17)(sass@1.70.0) + vite: 5.1.1(@types/node@20.11.17)(sass@1.70.0) transitivePeerDependencies: - '@swc/helpers' dev: true @@ -3298,7 +3302,7 @@ packages: hasBin: true dependencies: caniuse-lite: 1.0.30001585 - electron-to-chromium: 1.4.662 + electron-to-chromium: 1.4.664 node-releases: 2.0.14 update-browserslist-db: 1.0.13(browserslist@4.22.3) dev: true @@ -3657,8 +3661,8 @@ packages: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} dev: true - /electron-to-chromium@1.4.662: - resolution: {integrity: sha512-gfl1XVWTQmPHhqEG0kN77SpUxaqPpMb9r83PT4gvKhg7P3irSxru3lW85RxvK1uI1j2CAcTWPjG/HbE0IP/Rtg==} + /electron-to-chromium@1.4.664: + resolution: {integrity: sha512-k9VKKSkOSNPvSckZgDDl/IQx45E1quMjX8QfLzUsAs/zve8AyFDK+ByRynSP/OfEfryiKHpQeMf00z0leLCc3A==} dev: true /embla-carousel-autoplay@8.0.0-rc22(embla-carousel@8.0.0-rc22): @@ -5939,7 +5943,7 @@ packages: resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==} dependencies: spdx-expression-parse: 3.0.1 - spdx-license-ids: 3.0.16 + spdx-license-ids: 3.0.17 dev: true /spdx-exceptions@2.4.0: @@ -5950,11 +5954,11 @@ packages: resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==} dependencies: spdx-exceptions: 2.4.0 - spdx-license-ids: 3.0.16 + spdx-license-ids: 3.0.17 dev: true - /spdx-license-ids@3.0.16: - resolution: {integrity: sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==} + /spdx-license-ids@3.0.17: + resolution: {integrity: sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==} dev: true /split2@3.2.2: @@ -6422,7 +6426,7 @@ packages: spdx-expression-parse: 3.0.1 dev: true - /vite-plugin-progress@0.0.7(vite@5.1.0): + /vite-plugin-progress@0.0.7(vite@5.1.1): resolution: {integrity: sha512-zyvKdcc/X+6hnw3J1HVV1TKrlFKC4Rh8GnDnWG/2qhRXjqytTcM++xZ+SAPnoDsSyWl8O93ymK0wZRgHAoglEQ==} engines: {node: '>=14', pnpm: '>=7.0.0'} peerDependencies: @@ -6431,11 +6435,11 @@ packages: picocolors: 1.0.0 progress: 2.0.3 rd: 2.0.1 - vite: 5.1.0(@types/node@20.11.17)(sass@1.70.0) + vite: 5.1.1(@types/node@20.11.17)(sass@1.70.0) dev: true - /vite@5.1.0(@types/node@20.11.17)(sass@1.70.0): - resolution: {integrity: sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==} + /vite@5.1.1(@types/node@20.11.17)(sass@1.70.0): + resolution: {integrity: sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: @@ -6614,7 +6618,3 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} dev: true - -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index b2d6f41c..534f57eb 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -256,6 +256,14 @@ h5 { flex-flow: row; align-items: center; gap: 25px; + svg { + @include themed() { + background-color: t($modal-sidebar); + box-shadow: t($boxShadow); + } + padding: 15px; + border-radius: 100%; + } } .content { diff --git a/src/components/modals/main/settings/Header.jsx b/src/components/modals/main/settings/Header.jsx index 7c74bea9..a33cb2bb 100644 --- a/src/components/modals/main/settings/Header.jsx +++ b/src/components/modals/main/settings/Header.jsx @@ -9,7 +9,6 @@ import { } from 'react-icons/md'; import Slider from './Slider'; -import SettingsItem from './SettingsItem'; import EventBus from 'modules/helpers/eventbus'; import { values } from 'modules/helpers/settings/modals'; diff --git a/src/components/modals/main/settings/PreferencesWrapper.jsx b/src/components/modals/main/settings/PreferencesWrapper.jsx index 4d9a26ab..badc4708 100644 --- a/src/components/modals/main/settings/PreferencesWrapper.jsx +++ b/src/components/modals/main/settings/PreferencesWrapper.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import SettingsItem from './SettingsItem'; +import { Row, Content, Action } from './SettingsItem'; import variables from 'modules/variables'; import Slider from './Slider'; @@ -18,22 +18,25 @@ const PreferencesWrapper = ({ children, ...props }) => { return (
{props.zoomSetting && ( - - + - + + + + )} {children}
diff --git a/src/components/modals/main/settings/SettingsItem.jsx b/src/components/modals/main/settings/SettingsItem.jsx index ddbd3798..b93a1540 100644 --- a/src/components/modals/main/settings/SettingsItem.jsx +++ b/src/components/modals/main/settings/SettingsItem.jsx @@ -1,15 +1,22 @@ -import { memo } from 'react'; - -function SettingsItem({ final, title, subtitle, children }) { +function Row(props) { return ( -
-
- {title} - {subtitle} -
-
{children}
+
+ {props.children}
); } -export default memo(SettingsItem); +function Content(props) { + return ( +
+ {props.title} + {props.subtitle} +
+ ); +} + +function Action(props) { + return
{props.children}
; +} + +export { Row, Content, Action }; diff --git a/src/components/modals/main/settings/SettingsRow.jsx b/src/components/modals/main/settings/SettingsRow.jsx new file mode 100644 index 00000000..34a64714 --- /dev/null +++ b/src/components/modals/main/settings/SettingsRow.jsx @@ -0,0 +1,15 @@ +import { memo } from 'react'; + +function SettingsRow({ final, title, subtitle, children }) { + return ( +
+
+ {title} + {subtitle} +
+
{children}
+
+ ); +} + +export default memo(SettingsRow); diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx index 3b8d92ca..e2226071 100644 --- a/src/components/modals/main/settings/sections/Advanced.jsx +++ b/src/components/modals/main/settings/sections/Advanced.jsx @@ -17,7 +17,8 @@ import Text from '../Text'; import Switch from '../Switch'; import ResetModal from '../ResetModal'; import Dropdown from '../Dropdown'; -import SettingsItem from '../SettingsItem'; + +import { Row, Content, Action } from '../SettingsItem'; import Section from '../Section'; import time_zones from 'components/widgets/time/timezones.json'; @@ -92,67 +93,83 @@ export default function AdvancedSettings() { onClick={() => setData(true)} icon={} /> - - - + + + + + + - - - - {variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')} - - {time_zones.map((timezone) => ( - - {timezone} + + + + + + {variables.getMessage( + 'modals.main.settings.sections.advanced.timezone.automatic', + )} - ))} - - - - - + {time_zones.map((timezone) => ( + + {timezone} + + ))} + + + + + + + + + importSettings(e)} /> - - - - - + - + + + + + + + + + + setResetModal(false)} diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx index 23175de0..8bbe84c1 100644 --- a/src/components/modals/main/settings/sections/Appearance.jsx +++ b/src/components/modals/main/settings/sections/Appearance.jsx @@ -7,7 +7,9 @@ import Dropdown from '../Dropdown'; import Radio from '../Radio'; import Slider from '../Slider'; import Text from '../Text'; -import SettingsItem from '../SettingsItem'; + +import { Row, Content, Action } from '../SettingsItem'; + import Section from '../Section'; import { MdSource, MdOutlineKeyboardArrowRight, MdAccessibility } from 'react-icons/md'; @@ -20,191 +22,212 @@ function AppearanceSettings() { const ThemeSelection = () => { return ( - - + - + + + + ); }; const FontOptions = () => { return ( - - + - - - {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */} - - + name="fontstyle" + category="other" + > + + + + + + ); }; const WidgetStyle = () => { return ( - - + - + + + + ); }; const AccessibilityOptions = () => { return ( - - - {' '} - {/* default */} - {' '} - {/* old checkbox setting */} - - - - + - + + + {' '} + {/* default */} + {' '} + {/* old checkbox setting */} + + + + + + ); }; diff --git a/src/components/modals/main/settings/sections/Date.jsx b/src/components/modals/main/settings/sections/Date.jsx index ca72fb08..af4b84ed 100644 --- a/src/components/modals/main/settings/sections/Date.jsx +++ b/src/components/modals/main/settings/sections/Date.jsx @@ -4,7 +4,8 @@ import { useState } from 'react'; import Header from '../Header'; import Checkbox from '../Checkbox'; import Dropdown from '../Dropdown'; -import SettingsItem from '../SettingsItem'; + +import { Row, Content, Action } from '../SettingsItem'; import PreferencesWrapper from '../PreferencesWrapper'; export default function Date() { @@ -77,47 +78,52 @@ export default function Date() { switch={true} /> - - { - setDateType(value); - localStorage.setItem('dateType', value); - }} - category="date" - > - - - - - - {dateType === 'long' ? longSettings : shortSettings} - + - + { + setDateType(value); + localStorage.setItem('dateType', value); + }} + category="date" + > + + + + + + + - + + {dateType === 'long' ? longSettings : shortSettings} + + + + ); diff --git a/src/components/modals/main/settings/sections/Experimental.jsx b/src/components/modals/main/settings/sections/Experimental.jsx index 3f744eac..33ee130b 100644 --- a/src/components/modals/main/settings/sections/Experimental.jsx +++ b/src/components/modals/main/settings/sections/Experimental.jsx @@ -6,7 +6,8 @@ import { TextField } from '@mui/material'; import EventBus from 'modules/helpers/eventbus'; import { values } from 'modules/helpers/settings/modals'; -import SettingsItem from '../SettingsItem'; + +import { Row, Content, Action } from '../SettingsItem'; function ExperimentalSettings() { const [eventType, setEventType] = useState(); @@ -20,50 +21,56 @@ function ExperimentalSettings() { {variables.getMessage('modals.main.settings.sections.experimental.warning')} - - - + -

Send Event

- setEventType(e.target.value)} - spellCheck={false} - varient="outlined" - InputLabelProps={{ shrink: true }} - /> - setEventName(e.target.value)} - spellCheck={false} - varient="outlined" - InputLabelProps={{ shrink: true }} - /> - - - - - + + + +

Send Event

+ setEventType(e.target.value)} + spellCheck={false} + varient="outlined" + InputLabelProps={{ shrink: true }} + /> + setEventName(e.target.value)} + spellCheck={false} + varient="outlined" + InputLabelProps={{ shrink: true }} + /> + + + + + + + + + ); } diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx index e90ba2d9..7e8ed793 100644 --- a/src/components/modals/main/settings/sections/Greeting.jsx +++ b/src/components/modals/main/settings/sections/Greeting.jsx @@ -5,7 +5,8 @@ import Header from '../Header'; import Checkbox from '../Checkbox'; import Switch from '../Switch'; import Text from '../Text'; -import SettingsItem from '../SettingsItem'; + +import { Row, Content, Action } from '../SettingsItem'; import PreferencesWrapper from '../PreferencesWrapper'; const GreetingSettings = () => { @@ -23,56 +24,63 @@ const GreetingSettings = () => { const AdditionalOptions = () => { return ( - - + - - - + + + + + + ); }; const BirthdayOptions = () => { return ( - - + - -

- {variables.getMessage(`${GREETING_SECTION}.birthday_date`)} -

- - + + + +

+ {variables.getMessage(`${GREETING_SECTION}.birthday_date`)} +

+ + + ); }; diff --git a/src/components/modals/main/settings/sections/Message.jsx b/src/components/modals/main/settings/sections/Message.jsx index cb53351b..d636955e 100644 --- a/src/components/modals/main/settings/sections/Message.jsx +++ b/src/components/modals/main/settings/sections/Message.jsx @@ -4,7 +4,7 @@ import { MdCancel, MdAdd, MdOutlineTextsms } from 'react-icons/md'; import { toast } from 'react-toastify'; import { TextareaAutosize } from '@mui/material'; -import SettingsItem from '../SettingsItem'; +import { Row, Content, Action } from '../SettingsItem'; import Header from '../Header'; import EventBus from 'modules/helpers/eventbus'; @@ -72,11 +72,14 @@ export default class Message extends PureComponent { switch={true} /> - - - + + + + + +
{this.state.messages.map((_url, index) => (
diff --git a/src/components/modals/main/settings/sections/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx index 6b6d8df6..526f052d 100644 --- a/src/components/modals/main/settings/sections/Navbar.jsx +++ b/src/components/modals/main/settings/sections/Navbar.jsx @@ -10,7 +10,7 @@ import AddModal from './quicklinks/AddModal'; import Checkbox from '../Checkbox'; import Dropdown from '../Dropdown'; -import SettingsItem from '../SettingsItem'; +import { Row, Content, Action } from '../SettingsItem'; import Header from '../Header'; import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals'; import QuickLink from './quicklinks/QuickLink'; @@ -121,86 +121,92 @@ function Navbar() { zoomSetting="zoomNavbar" zoomCategory="navbar" /> - - - - - - - - - - {showRefreshOptions && ( - + - - - - - - - + /> + + + + + + + + + + + {showRefreshOptions && ( + + + + + + + + + + + )} - - - + + + + + +
{appsModalInfo.items.map((item, i) => ( diff --git a/src/components/modals/main/settings/sections/QuickLinks.jsx b/src/components/modals/main/settings/sections/QuickLinks.jsx index 28fdac78..ea1643ce 100644 --- a/src/components/modals/main/settings/sections/QuickLinks.jsx +++ b/src/components/modals/main/settings/sections/QuickLinks.jsx @@ -6,7 +6,7 @@ import Checkbox from '../Checkbox'; import Dropdown from '../Dropdown'; import Modal from 'react-modal'; -import SettingsItem from '../SettingsItem'; +import { Row, Content, Action } from '../SettingsItem'; import AddModal from './quicklinks/AddModal'; import EventBus from 'modules/helpers/eventbus'; @@ -138,49 +138,58 @@ export default class QuickLinks extends PureComponent { switch={true} /> - - + - + + + + + + - - - - - - - - + + + + + + + + - - - + + + + + + {this.state.items.length === 0 && (
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 = ( <> - - - + + + + + + {this.state.customQuote.length !== 0 ? (
@@ -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) => ( - - {engine.name} + + + + this.setSearchEngine(value)} + manual={true} + > + {searchEngines.map((engine) => ( + + {engine.name} + + ))} + + {variables.getMessage(`${SEARCH_SECTION}.custom`).split(' ')[0]} - ))} - - {variables.getMessage(`${SEARCH_SECTION}.custom`).split(' ')[0]} - - - + + + ); }; @@ -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')} - - - - - - + + + + + + + + {/* // 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" - > - - - - - - - - {this.state.backgroundFilter !== 'none' && ( + - )} - + + this.setState({ backgroundFilter: value })} + category="background" + element="#backgroundImage" + > + + + + + + + + {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')} + +
+ + ); }