From 99569f378176048f82ab28701aa4fe74423d3496 Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Wed, 31 Aug 2022 18:45:42 +0100
Subject: [PATCH 1/2] fix: clock colour among other things

Co-authored-by: David Ralph <me@davidcralph.co.uk>
---
 .../scss/settings/modules/tabs/_about.scss    |  2 +-
 .../modals/main/settings/sections/Time.jsx    |  4 +--
 .../widgets/background/Maximise.jsx           |  2 +-
 src/components/widgets/navbar/Navbar.jsx      | 27 +++++++------------
 src/components/widgets/navbar/Notes.jsx       |  5 ++--
 src/components/widgets/navbar/Todo.jsx        |  1 +
 src/components/widgets/navbar/scss/index.scss |  6 ++---
 src/components/widgets/quote/quote.scss       |  2 +-
 src/components/widgets/search/search.scss     |  4 +--
 src/components/widgets/weather/Weather.jsx    | 10 +++----
 .../widgets/weather/WeatherIcon.jsx           | 24 ++++++++---------
 src/components/widgets/weather/weather.scss   |  8 +++++-
 12 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/src/components/modals/main/scss/settings/modules/tabs/_about.scss b/src/components/modals/main/scss/settings/modules/tabs/_about.scss
index db345de9..6fa2fcb9 100644
--- a/src/components/modals/main/scss/settings/modules/tabs/_about.scss
+++ b/src/components/modals/main/scss/settings/modules/tabs/_about.scss
@@ -16,7 +16,7 @@
   display: flex;
   gap: 15px;
   a {
-    @include basicIconButton(11px, 1.5rem, modal);
+    @include basicIconButton(11px, 1.2rem, modal);
   }
 }
 
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index c80bbfff..1d701934 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -109,7 +109,7 @@ export default class TimeSettings extends PureComponent {
               type="color"
               name="hourColour"
               className="minuteColour"
-              onChange={(event) => this.updateColour('hour', event)}
+              onChange={(event) => this.updateColour('hourColour', event)}
               value={this.state.hourColour}
             ></input>
             <label htmlFor={'hourColour'} className="customBackgroundHex">
@@ -131,7 +131,7 @@ export default class TimeSettings extends PureComponent {
               type="color"
               name="minuteColour"
               className="minuteColour"
-              onChange={(event) => this.updateColour('minute', event)}
+              onChange={(event) => this.updateColour('minuteColour', event)}
               value={this.state.minuteColour}
             ></input>
             <label htmlFor={'minuteColour'} className="customBackgroundHex">
diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx
index 4a2009dc..8f6c8434 100644
--- a/src/components/widgets/background/Maximise.jsx
+++ b/src/components/widgets/background/Maximise.jsx
@@ -71,7 +71,7 @@ export default class Maximise extends PureComponent {
       <Tooltip
         title={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
       >
-        <button>
+        <button style={{ fontSize: this.props.fontSize }}>
           <MdCropFree onClick={this.maximise} className="topicons" />
         </button>
       </Tooltip>
diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx
index fda8a34d..3aecf98a 100644
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -23,8 +23,9 @@ export default class Navbar extends PureComponent {
   }
 
   setZoom() {
-    const zoomNavbar = Number((localStorage.getItem('zoomNavbar') || 100) / 100);
-    this.navbarContainer.current.style.fontSize = `${zoomNavbar}em`;
+    this.setState({
+      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + "rem"
+    })
   }
 
   componentDidMount() {
@@ -60,27 +61,19 @@ export default class Navbar extends PureComponent {
     const backgroundEnabled = localStorage.getItem('background') === 'true';
 
     const navbar = (
-      <div className="navbar-container" ref={this.navbarContainer}>
-        <div className={this.state.classList}>
-          {localStorage.getItem('view') === 'true' && backgroundEnabled ? <Maximise /> : null}
-          {localStorage.getItem('notesEnabled') === 'true' ? <Notes /> : null}
-          {localStorage.getItem('todo') === 'true' ? <Todo /> : null}
+      <div className="navbar-container" >
+        <div className={this.state.classList} >
+          {localStorage.getItem('view') === 'true' && backgroundEnabled ? <Maximise fontSize={this.state.zoomFontSize} /> : null}
+          {localStorage.getItem('notesEnabled') === 'true' ? <Notes fontSize={this.state.zoomFontSize} /> : null}
+          {localStorage.getItem('todo') === 'true' ? <Todo fontSize={this.state.zoomFontSize} /> : null}
 
           {this.refreshEnabled !== 'false' ? (
             <Tooltip title={variables.getMessage('widgets.navbar.tooltips.refresh')}>
-              <button onClick={() => this.refresh()}>
+              <button onClick={() => this.refresh()} style={{ fontSize: this.state.zoomFontSize }}>
                 <MdRefresh className="refreshicon topicons" />
               </button>
             </Tooltip>
           ) : null}
-
-          {/*<InfoTooltip
-            title="You can now sync your settings"
-            subtitle={'All settings, such as theme can now be synced across clients'}
-            linkURL={'https://www.youtube.com/watch?v=dQw4w9WgXcQ'}
-            linkText={'Learn more'}
-              >
-              </InfoTooltip>*/}
           <Tooltip
             title={variables.getMessage('modals.main.navbar.settings', {
               type: variables.getMessage(
@@ -88,7 +81,7 @@ export default class Navbar extends PureComponent {
               ),
             })}
           >
-            <button onClick={() => this.props.openModal('mainModal')}>
+            <button onClick={() => this.props.openModal('mainModal')} style={{ fontSize: this.state.zoomFontSize }}>
               <MdSettings className="settings-icon topicons" />
             </button>
           </Tooltip>
diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index 7e395165..7183e54f 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -70,8 +70,9 @@ class Notes extends PureComponent {
           onFocus={() => this.showNotes()}
           onBlur={() => this.hideNotes()}
           ref={this.props.notesRef}
+          style={{ fontSize: this.props.fontSize }}
         >
-          <MdAssignment className="topicons" />
+          <MdAssignment className="topicons"/>
         </button>
         {this.state.showNotes && (
           <span
@@ -119,7 +120,7 @@ class Notes extends PureComponent {
   }
 }
 
-export default function NotesWrapper() {
+export default function NotesWrapper(props) {
   const { x, y, reference, floating, strategy } = useFloating({
     placement: 'bottom',
     middleware: [shift()],
diff --git a/src/components/widgets/navbar/Todo.jsx b/src/components/widgets/navbar/Todo.jsx
index 22448dba..6e1514ae 100644
--- a/src/components/widgets/navbar/Todo.jsx
+++ b/src/components/widgets/navbar/Todo.jsx
@@ -120,6 +120,7 @@ class Todo extends PureComponent {
           onFocus={() => this.hideTodo()}
           onBlur={() => this.showTodo()}
           ref={this.props.todoRef}
+          style={{ fontSize: this.props.fontSize }}
         >
           <MdChecklist className="topicons" />
         </button>
diff --git a/src/components/widgets/navbar/scss/index.scss b/src/components/widgets/navbar/scss/index.scss
index 66a40d08..3f7af14a 100644
--- a/src/components/widgets/navbar/scss/index.scss
+++ b/src/components/widgets/navbar/scss/index.scss
@@ -34,16 +34,16 @@
 .old {
   .tooltip {
     button {
-      @include basicIconButton(12px, 20px, legacy);
+      @include basicIconButton(12px, 1.2rem, legacy);
     }
   }
   .first {
-    @include basicIconButton(12px, 20px, legacy);
+    @include basicIconButton(12px, 1.2rem, legacy);
   }
 }
 .new {
   button {
-    @include basicIconButton(12px, 20px, ui);
+    @include basicIconButton(12px, 1.2rem, ui);
   }
 }
 
diff --git a/src/components/widgets/quote/quote.scss b/src/components/widgets/quote/quote.scss
index 24eb7682..e1574b9f 100644
--- a/src/components/widgets/quote/quote.scss
+++ b/src/components/widgets/quote/quote.scss
@@ -56,7 +56,7 @@ h1.quoteauthor {
 }
 
 .author-license {
-  font-size: clamp(8px, 2.5vw, 0.25em);
+  font-size: clamp(8px, 2.5vw, 0.1em);
   @include themed() {
     color: t($subColor);
   }
diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss
index 6d8e009b..52a4b7ff 100644
--- a/src/components/widgets/search/search.scss
+++ b/src/components/widgets/search/search.scss
@@ -10,7 +10,7 @@
     @extend %basic;
     outline: none;
     border: none;
-    font-size: 20px;
+    font-size: 1.2rem;
     padding: 10px 0 10px 20px;
 
     &::placeholder {
@@ -40,7 +40,7 @@
   flex-flow: column;
 
   button {
-    @include basicIconButton(12px, 20px, ui);
+    @include basicIconButton(12px, 1.2rem, ui);
   }
 }
 
diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx
index 0536edbc..1a8f7853 100644
--- a/src/components/widgets/weather/Weather.jsx
+++ b/src/components/widgets/weather/Weather.jsx
@@ -144,7 +144,7 @@ export default class Weather extends PureComponent {
   }
 
   render() {
-    const weatherType = localStorage.getItem('weatherType');
+    const weatherType = localStorage.getItem('weatherType') || 1;
     const enabled = (setting) => {
       return (localStorage.getItem(setting) === 'true' && weatherType >= 3) || weatherType === '3';
     };
@@ -220,7 +220,7 @@ export default class Weather extends PureComponent {
               placement="left"
             >
               <span>
-                <WeatherIcon classsName="weatherIcon" name={this.state.icon} />
+                <WeatherIcon className="weatherIcon" name={this.state.icon} />
                 {this.state.weather.description}
               </span>
             </Tooltip>
@@ -233,7 +233,7 @@ export default class Weather extends PureComponent {
               placement="left"
             >
               <span>
-                <MdDisabledVisible style={{ padding: '3px' }} />
+                <MdDisabledVisible className="materialWeatherIcon" />
                 {variables.getMessage('widgets.weather.meters', {
                   amount: this.state.weather.visibility,
                 })}
@@ -248,8 +248,8 @@ export default class Weather extends PureComponent {
               placement="left"
             >
               <span>
-                <WiHumidity style={{ padding: '3px' }} />
-                {this.state.weather.humdity}
+                <WiHumidity className="materialWeatherIcon" />
+                {this.state.weather.humidity}
               </span>
             </Tooltip>
           ) : null}
diff --git a/src/components/widgets/weather/WeatherIcon.jsx b/src/components/widgets/weather/WeatherIcon.jsx
index f4708928..0252cbcd 100644
--- a/src/components/widgets/weather/WeatherIcon.jsx
+++ b/src/components/widgets/weather/WeatherIcon.jsx
@@ -17,35 +17,35 @@ export default function WeatherIcon({ name }) {
   // name is the openweathermap icon name, see https://openweathermap.org/weather-conditions
   switch (name) {
     case '01d':
-      return <WiDaySunny />;
+      return <WiDaySunny className="weatherIcon"/>;
     case '01n':
-      return <WiNightClear />;
+      return <WiNightClear className="weatherIcon"/>;
     case '02d':
-      return <WiDayCloudy />;
+      return <WiDayCloudy className="weatherIcon" />;
     case '02n':
-      return <WiNightCloudy />;
+      return <WiNightCloudy className="weatherIcon"/>;
     case '03d':
     case '03n':
-      return <WiCloud />;
+      return <WiCloud className="weatherIcon"/>;
     case '04d':
     case '04n':
-      return <WiCloudy />;
+      return <WiCloudy className="weatherIcon"/>;
     case '09d':
-      return <WiDayShowers />;
+      return <WiDayShowers className="weatherIcon"/>;
     case '09n':
-      return <WiNightShowers />;
+      return <WiNightShowers className="weatherIcon" />;
     case '10d':
     case '10n':
-      return <WiRain />;
+      return <WiRain className="weatherIcon" />;
     case '11d':
     case '11n':
-      return <WiThunderstorm />;
+      return <WiThunderstorm className="weatherIcon" />;
     case '13d':
     case '13n':
-      return <WiSnow />;
+      return <WiSnow className="weatherIcon" />;
     case '50d':
     case '50n':
-      return <WiFog />;
+      return <WiFog className="weatherIcon" />;
     default:
       return null;
   }
diff --git a/src/components/widgets/weather/weather.scss b/src/components/widgets/weather/weather.scss
index 2bf65b5c..9af64f1c 100644
--- a/src/components/widgets/weather/weather.scss
+++ b/src/components/widgets/weather/weather.scss
@@ -31,6 +31,7 @@
   }
 
   .extra-info {
+    width: 100%;
     font-size: 18px;
     gap: 40px;
 
@@ -56,6 +57,7 @@
 }
 
 .top-weather {
+  width: 100%;
   display: flex;
   justify-content: space-between;
   gap: 25px;
@@ -99,10 +101,14 @@
     }
 
     .weatherIcon {
-      font-size: 1.4em !important;
+      font-size: 21px !important;
       display: grid;
       align-items: center;
     }
+    .materialWeatherIcon {
+      font-size: 18px !important;
+      padding: 2px;
+    }
   }
 }
 

From dc8abfe436b50cbfae433be8e99924cfc3f9bfc7 Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Wed, 31 Aug 2022 21:54:03 +0100
Subject: [PATCH 2/2] fix: navbar zoom

---
 src/components/widgets/navbar/Notes.jsx | 22 +++++++++++++++++++++-
 src/components/widgets/navbar/Todo.jsx  | 22 +++++++++++++++++++++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index 7183e54f..545b7c38 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -6,6 +6,7 @@ import TextareaAutosize from '@mui/material/TextareaAutosize';
 import { toast } from 'react-toastify';
 import Tooltip from '../../helpers/tooltip/Tooltip';
 import { saveFile } from 'modules/helpers/settings/modals';
+import EventBus from 'modules/helpers/eventbus';
 
 class Notes extends PureComponent {
   constructor() {
@@ -17,6 +18,25 @@ class Notes extends PureComponent {
     };
   }
 
+  setZoom() {
+    this.setState({
+      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + "rem"
+    })
+  }
+
+  componentDidMount() {
+    EventBus.on('refresh', (data) => {
+      if (data === 'navbar' || data === 'background') {
+        this.forceUpdate();
+        try {
+          this.setZoom();
+        } catch (e) {}
+      }
+    });
+
+    this.setZoom();
+  }
+
   setNotes = (e) => {
     localStorage.setItem('notes', e.target.value);
     this.setState({
@@ -70,7 +90,7 @@ class Notes extends PureComponent {
           onFocus={() => this.showNotes()}
           onBlur={() => this.hideNotes()}
           ref={this.props.notesRef}
-          style={{ fontSize: this.props.fontSize }}
+          style={{ fontSize: this.state.zoomFontSize }}
         >
           <MdAssignment className="topicons"/>
         </button>
diff --git a/src/components/widgets/navbar/Todo.jsx b/src/components/widgets/navbar/Todo.jsx
index 6e1514ae..501b54cc 100644
--- a/src/components/widgets/navbar/Todo.jsx
+++ b/src/components/widgets/navbar/Todo.jsx
@@ -12,6 +12,7 @@ import Tooltip from '../../helpers/tooltip/Tooltip';
 import Checkbox from '@mui/material/Checkbox';
 import { shift, useFloating } from '@floating-ui/react-dom';
 import { sortableContainer, sortableElement } from 'react-sortable-hoc';
+import EventBus from 'modules/helpers/eventbus';
 
 const SortableItem = sortableElement(({ value }) => <div>{value}</div>);
 const SortableContainer = sortableContainer(({ children }) => <div>{children}</div>);
@@ -32,6 +33,25 @@ class Todo extends PureComponent {
     };
   }
 
+  setZoom() {
+    this.setState({
+      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + "rem"
+    })
+  }
+
+  componentDidMount() {
+    EventBus.on('refresh', (data) => {
+      if (data === 'navbar' || data === 'background') {
+        this.forceUpdate();
+        try {
+          this.setZoom();
+        } catch (e) {}
+      }
+    });
+
+    this.setZoom();
+  }
+
   arrayMove(array, oldIndex, newIndex) {
     const result = Array.from(array);
     const [removed] = result.splice(oldIndex, 1);
@@ -120,7 +140,7 @@ class Todo extends PureComponent {
           onFocus={() => this.hideTodo()}
           onBlur={() => this.showTodo()}
           ref={this.props.todoRef}
-          style={{ fontSize: this.props.fontSize }}
+          style={{ fontSize: this.state.zoomFontSize }}
         >
           <MdChecklist className="topicons" />
         </button>