Merge branch '7.0' of https://github.com/mue/mue into 7.0

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);
   }
 }
 

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">

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>

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.setState({
-    this.navbarContainer.current.style.fontSize = `${zoomNavbar}em`;
+      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="navbar-container" >
-        <div className={this.state.classList}>
+        <div className={this.state.classList} >
-          {localStorage.getItem('view') === 'true' && backgroundEnabled ? <Maximise /> : null}
+          {localStorage.getItem('view') === 'true' && backgroundEnabled ? <Maximise fontSize={this.state.zoomFontSize} /> : null}
-          {localStorage.getItem('notesEnabled') === 'true' ? <Notes /> : null}
+          {localStorage.getItem('notesEnabled') === 'true' ? <Notes fontSize={this.state.zoomFontSize} /> : null}
-          {localStorage.getItem('todo') === 'true' ? <Todo /> : 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>

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,8 +90,9 @@ class Notes extends PureComponent {
           onFocus={() => this.showNotes()}
           onBlur={() => this.hideNotes()}
           ref={this.props.notesRef}
+          style={{ fontSize: this.state.zoomFontSize }}
         >
-          <MdAssignment className="topicons" />
+          <MdAssignment className="topicons"/>
         </button>
         {this.state.showNotes && (
           <span
@@ -119,7 +140,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()],

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,6 +140,7 @@ class Todo extends PureComponent {
           onFocus={() => this.hideTodo()}
           onBlur={() => this.showTodo()}
           ref={this.props.todoRef}
+          style={{ fontSize: this.state.zoomFontSize }}
         >
           <MdChecklist className="topicons" />
         </button>

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);
   }
 }
 

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);
   }

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);
   }
 }
 

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' }} />
+                <WiHumidity className="materialWeatherIcon" />
-                {this.state.weather.humdity}
+                {this.state.weather.humidity}
               </span>
             </Tooltip>
           ) : null}

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;
   }

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;
+    }
   }
 }