fix: various settings

package.json

@@ -17,31 +17,31 @@
     "@material-ui/core": "4.11.3",
     "@material-ui/icons": "4.11.2",
     "array-move": "^3.0.1",
-    "react": "17.0.1",
+    "react": "17.0.2",
     "react-clock": "^3.0.0",
     "react-color-gradient-picker": "^0.1.2",
     "react-day-picker": "^7.4.10",
-    "react-dom": "17.0.1",
+    "react-dom": "17.0.2",
     "react-modal": "3.12.1",
     "react-sortable-hoc": "^2.0.0",
     "react-toastify": "7.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.10",
+    "@babel/core": "^7.13.14",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-transform-runtime": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
-    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
     "babel-loader": "^8.2.2",
-    "copy-webpack-plugin": "^8.0.0",
-    "css-loader": "^5.1.3",
+    "copy-webpack-plugin": "^8.1.0",
+    "css-loader": "^5.2.0",
     "html-webpack-plugin": "^5.3.1",
-    "mini-css-extract-plugin": "^1.3.9",
+    "mini-css-extract-plugin": "^1.4.0",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
     "source-map-loader": "^2.0.1",
-    "webpack": "^5.27.2",
-    "webpack-cli": "^4.5.0",
+    "webpack": "^5.28.0",
+    "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2"
   },
   "scripts": {

src/components/modals/main/settings/sections/Appearance.jsx

@@ -57,7 +57,7 @@ export default function AppearanceSettings() {
 
       <h3>{appearance.accessibility.title}</h3>
       <Checkbox name='animations' text={appearance.animations} betaFeature={true} />
-      <Slider title={appearance.accessibility.zoom} name='zoom' default='100' min='50' max='200' display='%'/>
+      <Slider title={appearance.accessibility.widget_zoom} name='widgetzoom' default='100' min='50' max='200' display='%'/>
       <Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' min='500' max='5000' display={' ' + appearance.accessibility.milliseconds} />
     </>
   );

src/components/widgets/background/scss/index.scss

@@ -7,6 +7,7 @@
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
+  zoom: 100% !important;
 }
 
 #backgroundVideo {

src/index.js

@@ -19,7 +19,7 @@ window.languagecode = languagecode.replace('-', '_');
 window.language = merge(require('./translations/en_GB.json'), require(`./translations/${window.languagecode}.json`));
 // set html language tag
 if (window.languagecode !== 'en_GB' || window.languagecode !== 'en_US') {
-  document.documentElement.lang = window.languagecode;
+  document.documentElement.lang = window.languagecode.split('_')[0];
 }
 
 // window.constants

src/modules/default_settings.json

@@ -108,7 +108,7 @@
     "value": "dots"
   },
   {
-    "name": "zoom",
+    "name": "widgetzoom",
     "value": 100
   },
   {

src/modules/helpers/settings.js

@@ -59,6 +59,8 @@ export default class SettingsFunctions {
       localStorage.setItem('language', 'en_GB');
     }
 
+    localStorage.setItem('tabName', window.language.tabname);
+
     if (reset) {
       localStorage.setItem('showWelcome', false);
     }
@@ -105,13 +107,14 @@ export default class SettingsFunctions {
             ${fontweight}
             ${fontstyle}
           }
-      </style>`);
+        </style>
+      `);
     }
 
-    const zoom = localStorage.getItem('zoom');
+    const widgetzoom = localStorage.getItem('widgetzoom');
     // don't bother if it's default zoom
-    if (zoom !== 100) {
-      document.body.style.zoom = zoom + '%';
+    if (widgetzoom !== '100') {
+      document.getElementById('root').style.zoom = widgetzoom + '%';
     }
 
     const theme = localStorage.getItem('theme');
@@ -125,7 +128,7 @@ export default class SettingsFunctions {
     }
 
     const tabName = localStorage.getItem('tabName');
-    if (tabName) {
+    if (tabName !== window.language.tabname) {
       document.title = tabName;
     }
 

src/translations/en_GB.json

@@ -1,4 +1,5 @@
 {
+  "tabname": "New Tab",
   "widgets": {
     "greeting": {
       "morning": "Good Morning",
@@ -136,7 +137,7 @@
             },
             "accessibility": {
               "title": "Accessibility",
-              "zoom": "Zoom",
+              "widget_zoom": "Widget Zoom",
               "toast_duration": "Toast Duration",
               "milliseconds": "milliseconds"
             }