diff --git a/src/components/modals/ErrorBoundary.jsx b/src/components/modals/ErrorBoundary.jsx
index 072cc2ab..0756f3e6 100644
--- a/src/components/modals/ErrorBoundary.jsx
+++ b/src/components/modals/ErrorBoundary.jsx
@@ -4,6 +4,8 @@ import { PureComponent } from 'react';
import { MdErrorOutline, MdRefresh } from 'react-icons/md';
import { captureException } from '@sentry/react';
+import Button from './main/settings/Button';
+
class ErrorBoundary extends PureComponent {
constructor(props) {
super(props);
@@ -49,19 +51,23 @@ class ErrorBoundary extends PureComponent {
{this.state.showReport ? (
-
+ }
+ label={variables.getMessage('modals.main.error_boundary.report_error')}
+ onClick={() => this.reportError()}
+ />
) : (
{variables.getMessage('modals.main.error_boundary.sent')}
)}
-
+ }
+ label={variables.getMessage('modals.main.error_boundary.refresh')}
+ onClick={() => window.location.reload()}
+ />
diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx
index 442c5ac2..e7a18600 100644
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@@ -10,6 +10,7 @@ import Item from '../Item';
import Items from '../Items';
import Dropdown from '../../settings/Dropdown';
import Header from '../../settings/Header';
+import Button from '../../settings/Button';
import { install, uninstall, urlParser } from 'modules/helpers/marketplace';
@@ -73,14 +74,13 @@ export default class Added extends PureComponent {
getSideloadButton() {
return (
-
+ icon={}
+ label={variables.getMessage('modals.main.addons.sideload.title')}
+ />
);
}
@@ -242,17 +242,18 @@ export default class Added extends PureComponent {
{sideLoadBackendElements()}
-
-
diff --git a/src/components/modals/main/scss/marketplace/modules/_buttons.scss b/src/components/modals/main/scss/marketplace/modules/_buttons.scss
index 027c506b..ed1d9c7b 100644
--- a/src/components/modals/main/scss/marketplace/modules/_buttons.scss
+++ b/src/components/modals/main/scss/marketplace/modules/_buttons.scss
@@ -24,15 +24,21 @@
}
}
-.sideload {
+.updateCheck {
+ flex-flow: row !important;
+}
+
+.btn-settings {
+ @include modal-button(standard);
display: inline;
margin-top: 0;
float: none !important;
padding: 0 20px;
-
- // width: 200px;
}
-.updateCheck {
- flex-flow: row !important;
+.btn-navigation {
+}
+
+.flowReverse {
+ flex-flow: row-reverse !important;
}
diff --git a/src/components/modals/main/settings/Button.jsx b/src/components/modals/main/settings/Button.jsx
new file mode 100644
index 00000000..09913736
--- /dev/null
+++ b/src/components/modals/main/settings/Button.jsx
@@ -0,0 +1,35 @@
+import React, { forwardRef } from 'react';
+import Tooltip from '../../../helpers/tooltip/Tooltip';
+
+const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, children }, ref) => {
+ let className;
+
+ switch (type) {
+ case 'settings':
+ className = 'btn-settings';
+ break;
+ case 'icon':
+ className = 'btn-icon';
+ break;
+ case 'navigation':
+ className = 'btn-navigation';
+ break;
+ default:
+ className = 'btn-default';
+ }
+
+ if (iconPlacement === 'right') {
+ className += ' flowReverse';
+ }
+
+ const button = (
+
+ {icon}
+ {label}
+
+ );
+
+ return type === 'icon' ? {button} : button;
+});
+
+export default Button;
diff --git a/src/components/modals/main/settings/Header.jsx b/src/components/modals/main/settings/Header.jsx
index a9653bb7..9775a567 100644
--- a/src/components/modals/main/settings/Header.jsx
+++ b/src/components/modals/main/settings/Header.jsx
@@ -7,6 +7,7 @@ import {
MdOutlineKeyboardArrowRight,
} from 'react-icons/md';
import EventBus from 'modules/helpers/eventbus';
+import Button from './Button';
const Header = (props) => {
const [setting, setSetting] = useState(localStorage.getItem(props.setting) === 'true');
@@ -38,31 +39,24 @@ const Header = (props) => {
};
const VisibilityToggle = () => (
-
- {setting ? (
- <>
- Hide
-
- >
- ) : (
- <>
- Show
-
- >
- )}
-
+ : }
+ label={setting ? 'Hide' : 'Show'}
+ />
);
const ReportButton = () => {
return (
-
window.open(variables.constants.BUG_REPORT + props.title.split(' ').join('+'), '_blank')
}
- >
- {variables.getMessage('modals.main.settings.sections.header.report_issue')}
-
+ icon={}
+ label={variables.getMessage('modals.main.settings.sections.header.report_issue')}
+ />
);
};
@@ -70,20 +64,18 @@ const Header = (props) => {
<>
- {props.secondaryTitle ? (
+ {props.secondaryTitle && (
<>
{props.title}
- {props.secondaryTitle}
>
- ) : (
- <>{props.title}>
)}
+ {props.secondaryTitle || props.title}
- {props.switch && }
+ {props.visibilityToggle && }
{props.report !== false && }
{props.children}
diff --git a/src/components/modals/main/settings/SettingsRow.jsx b/src/components/modals/main/settings/SettingsRow.jsx
deleted file mode 100644
index 34a64714..00000000
--- a/src/components/modals/main/settings/SettingsRow.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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/Date.jsx b/src/components/modals/main/settings/sections/Date.jsx
index af4b84ed..1015dee3 100644
--- a/src/components/modals/main/settings/sections/Date.jsx
+++ b/src/components/modals/main/settings/sections/Date.jsx
@@ -75,9 +75,9 @@ export default function Date() {
category="date"
element=".date"
zoomSetting="zoomDate"
- switch={true}
+ visibilityToggle={true}
/>
-
+
{
category="greeting"
element=".greeting"
zoomSetting="zoomGreeting"
- switch={true}
+ visibilityToggle={true}
/>
-
+
{BirthdayOptions()}
diff --git a/src/components/modals/main/settings/sections/Message.jsx b/src/components/modals/main/settings/sections/Message.jsx
index d636955e..2a06a23d 100644
--- a/src/components/modals/main/settings/sections/Message.jsx
+++ b/src/components/modals/main/settings/sections/Message.jsx
@@ -69,9 +69,9 @@ export default class Message extends PureComponent {
category="message"
element=".message"
zoomSetting="zoomMessage"
- switch={true}
+ visibilityToggle={true}
/>
-
+
diff --git a/src/components/modals/main/settings/sections/QuickLinks.jsx b/src/components/modals/main/settings/sections/QuickLinks.jsx
index ea1643ce..cd194a43 100644
--- a/src/components/modals/main/settings/sections/QuickLinks.jsx
+++ b/src/components/modals/main/settings/sections/QuickLinks.jsx
@@ -135,9 +135,13 @@ export default class QuickLinks extends PureComponent {
category="quicklinks"
element=".quicklinks-container"
zoomSetting="zoomQuicklinks"
- switch={true}
+ visibilityToggle={true}
/>
-
+
)}
{this.state.sourceSection && (
@@ -277,7 +277,7 @@ export default class QuoteSettings extends PureComponent {
)}
{!this.state.sourceSection && (
-
+
}
title={variables.getMessage('modals.main.settings.sections.background.source.title')}
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index 9e9be641..e5de8832 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@@ -141,9 +141,9 @@ export default class SearchSettings extends PureComponent {
title={variables.getMessage(`${SEARCH_SECTION}.title`)}
setting="searchBar"
category="widgets"
- switch={true}
+ visibilityToggle={true}
/>
-
+
{this.state.customEnabled && (
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index ed3d00a0..9a2db823 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -212,9 +212,9 @@ const TimeSettings = () => {
category="clock"
element=".clock-container"
zoomSetting="zoomClock"
- switch={true}
+ visibilityToggle={true}
/>
-
+
{timeSettings}
diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx
index 9507630f..faf58071 100644
--- a/src/components/modals/main/settings/sections/Weather.jsx
+++ b/src/components/modals/main/settings/sections/Weather.jsx
@@ -205,13 +205,13 @@ export default class WeatherSettings extends PureComponent {
category="widgets"
zoomSetting="zoomWeather"
zoomCategory="weather"
- switch={true}
+ visibilityToggle={true}
/>
{/* https://stackoverflow.com/a/65328486 when using inputs it may defocus so we do the {} instead of <> */}
diff --git a/src/components/modals/main/settings/sections/quicklinks/AddModal.jsx b/src/components/modals/main/settings/sections/quicklinks/AddModal.jsx
index 4fa3b8c4..d59f406b 100644
--- a/src/components/modals/main/settings/sections/quicklinks/AddModal.jsx
+++ b/src/components/modals/main/settings/sections/quicklinks/AddModal.jsx
@@ -66,7 +66,7 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
height: '16px',
fontSize: '15px',
}}
- className="sideload"
+ className="btn-settings"
onClick={() => addLink(name, url, icon)}
>
{variables.getMessage('widgets.quicklinks.add')}
diff --git a/src/components/modals/welcome/Welcome.jsx b/src/components/modals/welcome/Welcome.jsx
index abdd70b8..b6107488 100644
--- a/src/components/modals/welcome/Welcome.jsx
+++ b/src/components/modals/welcome/Welcome.jsx
@@ -6,6 +6,7 @@ import EventBus from 'modules/helpers/eventbus';
import WelcomeSections from './WelcomeSections';
import ProgressBar from './ProgressBar';
+import Button from '../main/settings/Button';
import './welcome.scss';
@@ -121,28 +122,27 @@ class WelcomeModal extends PureComponent {
{this.state.currentTab !== 0 ? (
- this.changeTab(true)}
- >
- {variables.getMessage('modals.welcome.buttons.previous')}
-
-
+ icon={}
+ label={variables.getMessage('modals.welcome.buttons.previous')}
+ />
) : (
- this.props.modalSkip()}
- >
- {variables.getMessage('modals.welcome.buttons.preview')}
-
-
+ icon={}
+ label={variables.getMessage('modals.welcome.buttons.preview')}
+ />
)}
- this.changeTab()}>
-
- {this.state.buttonText}
-
+ this.changeTab()}
+ icon={}
+ label={this.state.buttonText}
+ iconPlacement={'right'}
+ />
diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss
index d9344965..c64434ea 100644
--- a/src/components/modals/welcome/welcome.scss
+++ b/src/components/modals/welcome/welcome.scss
@@ -311,6 +311,7 @@ a.privacy {
padding: 25px;
display: flex;
justify-content: flex-end;
+ gap: 20px;
button {
@include modal-button(standard);
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 673f616a..7bb7020b 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -192,7 +192,7 @@ $themes: (
font-size: 1rem;
display: flex;
align-items: center;
- flex-flow: row-reverse;
+ flex-flow: row;
justify-content: center;
gap: 20px;
transition: 0.5s;