Added checkbox to enable/disable background (#7630)

* Added checkbox to enable/disable background

* bug fix in enable disable button

* small fix in translation

* rename background setting to be disable backgroud; add default value for background setting.

static/app-strings.json

@@ -2312,5 +2312,7 @@
   "Free --[legend, unused disk space]--": "Free",
   "Top content in %language%": "Top content in %language%",
   "Apply": "Apply",
+  "24-hour clock": "24-hour clock",
+  "Disable background": "Disable background",
   "--end--": "--end--"
 }

ui/component/settingAppearance/index.js

@@ -5,6 +5,7 @@ import { makeSelectClientSetting } from 'redux/selectors/settings';
 import SettingAppearance from './view';
 
 const select = (state) => ({
+  disableBackground: makeSelectClientSetting(SETTINGS.DISABLE_BACKGROUND)(state),
   clock24h: makeSelectClientSetting(SETTINGS.CLOCK_24H)(state),
   searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state),
   hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),

ui/component/settingAppearance/view.jsx

@@ -12,6 +12,7 @@ import ThemeSelector from 'component/themeSelector';
 import homepages from 'homepages';
 
 type Props = {
+  disableBackground: boolean,
   clock24h: boolean,
   searchInLanguage: boolean,
   hideBalance: boolean,
@@ -20,7 +21,7 @@ type Props = {
 };
 
 export default function SettingAppearance(props: Props) {
-  const { clock24h, searchInLanguage, hideBalance, setClientSetting, setSearchInLanguage } = props;
+  const { clock24h, disableBackground, searchInLanguage, hideBalance, setClientSetting, setSearchInLanguage } = props;
 
   return (
     <>
@@ -63,6 +64,14 @@ export default function SettingAppearance(props: Props) {
                 checked={clock24h}
               />
             </SettingsRow>
+            <SettingsRow title={__('Disable background')}>
+              <FormField
+                type="checkbox"
+                name="background"
+                onChange={() => setClientSetting(SETTINGS.DISABLE_BACKGROUND, !disableBackground)}
+                checked={disableBackground}
+              />
+            </SettingsRow>
             <SettingsRow title={__('Hide wallet balance in header')}>
               <FormField
                 type="checkbox"

ui/component/wallpaper/index.js

@@ -1,16 +1,12 @@
 import { connect } from 'react-redux';
-// import { makeSelectCoverForUri, makeSelectAvatarForUri } from 'redux/selectors/claims';
 import Wallpaper from './view';
+import * as SETTINGS from 'constants/settings';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
 
-/*
-const select = (state, props) => {
-  if (props.uri && (props.uri.indexOf('@') !== -1 || props.uri.indexOf('#') !== -1)) {
-    return {
-      cover: makeSelectCoverForUri(props.uri)(state),
-      avatar: makeSelectAvatarForUri(props.uri)(state),
-    };
-  } else return {};
-};
-*/
+const select = (state) => ({
+  disableBackground: makeSelectClientSetting(SETTINGS.DISABLE_BACKGROUND)(state),
+});
 
-export default connect()(Wallpaper);
+const perform = {};
+
+export default connect(select, perform)(Wallpaper);

ui/component/wallpaper/view.jsx

@@ -8,10 +8,11 @@ type Props = {
   // cover: ?string,
   // avatar: ?string,
   reset: ?boolean,
+  disableBackground: ?boolean,
 };
 
 const Wallpaper = (props: Props) => {
-  // const { cover, avatar } = props;
+  const { disableBackground } = props;
 
   /*
   if (avatar) {
@@ -227,12 +228,13 @@ const Wallpaper = (props: Props) => {
         }}
       />
    */
+
   return (
     <>
       <div
         className={'background-image'}
         style={{
-          backgroundImage: `url(${freeezepeach})`,
+          backgroundImage: disableBackground ? `none` : `url(${freeezepeach})`,
         }}
       />
       <div className={'theme'} />

ui/constants/settings.js

@@ -14,6 +14,7 @@ export const THEME = 'theme';
 export const THEMES = 'themes';
 export const AUTOMATIC_DARK_MODE_ENABLED = 'automatic_dark_mode_enabled';
 export const CLOCK_24H = 'clock_24h';
+export const DISABLE_BACKGROUND = 'disableBackground';
 export const AUTOPLAY_MEDIA = 'autoplay';
 export const AUTOPLAY_NEXT = 'autoplay_next';
 export const OS_NOTIFICATIONS_ENABLED = 'os_notifications_enabled';

ui/redux/reducers/settings.js

@@ -40,6 +40,7 @@ const defaultState = {
     [SETTINGS.OS_NOTIFICATIONS_ENABLED]: true,
     [SETTINGS.AUTOMATIC_DARK_MODE_ENABLED]: false,
     [SETTINGS.CLOCK_24H]: false,
+    [SETTINGS.DISABLE_BACKGROUND]: false,
     [SETTINGS.TILE_LAYOUT]: true,
     [SETTINGS.VIDEO_THEATER_MODE]: false,
     [SETTINGS.VIDEO_PLAYBACK_RATE]: 1,