From 7e2432b9b490f10e1292ae7c753f5a44da56590e Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Mon, 16 Aug 2021 14:36:34 +0100
Subject: [PATCH] feat: navbar zoom

---
 .../modals/main/settings/sections/Appearance.jsx      |  1 +
 src/components/widgets/navbar/Navbar.jsx              | 11 +++++++++++
 src/components/widgets/navbar/scss/_notes.scss        |  3 ++-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx
index e8a8716a..7709c937 100644
--- a/src/components/modals/main/settings/sections/Appearance.jsx
+++ b/src/components/modals/main/settings/sections/Appearance.jsx
@@ -30,6 +30,7 @@ export default function AppearanceSettings() {
       <h3>{appearance.navbar.title}</h3>
       <Checkbox name='notesEnabled' text={appearance.navbar.notes} category='navbar' />
       <Checkbox name='refresh' text={appearance.navbar.refresh} category='navbar' />
+      <Slider title={appearance.accessibility.widget_zoom} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
 
       <h3>{appearance.font.title}</h3>
       <Text title={appearance.font.custom} name='font' upperCaseFirst={true} category='other' />
diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx
index b8c37286..01fe7740 100644
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -11,12 +11,23 @@ import EventBus from '../../../modules/helpers/eventbus';
 import './scss/index.scss';
 
 export default class Navbar extends PureComponent {
+  setZoom() {
+    const zoomNavbar = Number((localStorage.getItem('zoomNavbar') || 100) / 100);
+    const navbarIcons = document.querySelectorAll('.navbar-container');
+    for (let i = 0; i < navbarIcons.length; i++) {
+      navbarIcons[i].style.fontSize = `${zoomNavbar}em`;
+    };
+  }
+
   componentDidMount() {
     EventBus.on('refresh', (data) => {
       if (data === 'navbar') {
         this.forceUpdate();
+        this.setZoom();
       }
     });
+
+    this.setZoom();
   }
 
   render() {
diff --git a/src/components/widgets/navbar/scss/_notes.scss b/src/components/widgets/navbar/scss/_notes.scss
index 92345db2..0a37708a 100644
--- a/src/components/widgets/navbar/scss/_notes.scss
+++ b/src/components/widgets/navbar/scss/_notes.scss
@@ -26,6 +26,7 @@
 
   svg {
     float: left;
+    font-size: 1em !important;
   }
 
   ::placeholder {
@@ -45,7 +46,7 @@ textarea {
 
 .topbarnotes {
   svg {
-    font-size: 46px;
+    font-size: 46px !important;
     padding: 9px;
   }