fix: icon fixes, react 18 support

2026-06-12 11:38:53 +02:00 · 2022-04-07 21:49:43 +01:00
parent 81b10d9795
commit f58d74146d
25 changed files with 80 additions and 101 deletions
--- a/src/components/modals/Modals.jsx
+++ b/src/components/modals/Modals.jsx
@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { PureComponent, Suspense, lazy } from 'react';
+import { PureComponent } from 'react';
 import Modal from 'react-modal';
 //import Hotkeys from 'react-hot-keys';

@@ -11,8 +11,7 @@ import EventBus from 'modules/helpers/eventbus';

 // Welcome modal is lazy loaded as the user won't use it every time they open a tab
 // We used to lazy load the main and feedback modals, but doing so broke the modal open animation on first click
-const Welcome = lazy(() => import('./welcome/Welcome'));
-const renderLoader = () => <></>;
+import Welcome from './welcome/Welcome';

 export default class Modals extends PureComponent {
  constructor() {
@@ -27,7 +26,7 @@ export default class Modals extends PureComponent {
  }

  componentDidMount() {
-    if (localStorage.getItem('showWelcome') === 'true' && window.location.search !== '?nointro=true') {
+    if (localStorage.getItem('showWelcome') === 'true' && window.location.search !== '?nointro=true' && this.state.welcomeModal === false) {
      this.setState({
        welcomeModal: true
      });
@@ -83,11 +82,9 @@ export default class Modals extends PureComponent {
        <Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.toggleModal('mainModal', false)} isOpen={this.state.mainModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
          <Main modalClose={() => this.toggleModal('mainModal', false)}/>
        </Modal>
-        <Suspense fallback={renderLoader()}>
-          <Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal mainModal' overlayClassName='Overlay welcomeoverlay' shouldCloseOnOverlayClick={false} ariaHideApp={false}>
-            <Welcome modalClose={() => this.closeWelcome()} modalSkip={() => this.previewWelcome()}/>
-          </Modal>
-        </Suspense>
+        <Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal mainModal' overlayClassName='Overlay welcomeoverlay' shouldCloseOnOverlayClick={false} ariaHideApp={false}>
+          <Welcome modalClose={() => this.closeWelcome()} modalSkip={() => this.previewWelcome()}/>
+        </Modal>
        {this.state.preview ? <Preview setup={() => window.location.reload()}/> : null}
        {/*variables.keybinds.toggleModal && variables.keybinds.toggleModal !== '' ? <Hotkeys keyName={variables.keybinds.toggleModal} onKeyDown={() => this.toggleModal('mainModal', (this.state.mainModal === true ? false : true))}/> : null*/} 
      </>
--- a/src/components/modals/main/scss/marketplace/modules/_item.scss
+++ b/src/components/modals/main/scss/marketplace/modules/_item.scss
@@ -24,7 +24,7 @@
 }

 #item>h1,
-#item>.MuiSvgIcon-root {
+#item>svg {
  display: inline;
 }

--- a/src/components/modals/main/scss/settings/_buttons.scss
+++ b/src/components/modals/main/scss/settings/_buttons.scss
@@ -103,6 +103,10 @@
    align-items: center;
    color: var(--modal-text);

+    svg {
+      font-size: 2em;
+    }
+
    &:hover {
      background: var(--tab-active);
      cursor: pointer;
--- a/src/components/modals/main/scss/settings/modules/tabs/_about.scss
+++ b/src/components/modals/main/scss/settings/modules/tabs/_about.scss
@@ -5,6 +5,10 @@
  &:hover {
    opacity: 0.8;
  }
+
+  svg {
+    font-size: 1.5em;
+  }
 }

 .aboutLink {
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -2,6 +2,7 @@ import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { MdEmail } from 'react-icons/md';
 import { FaDiscord, FaTwitter } from 'react-icons/fa';
+import { SiGithubsponsors, SiLiberapay, SiKofi, SiPatreon } from 'react-icons/si';

 import Tooltip from 'components/helpers/tooltip/Tooltip';

@@ -99,19 +100,17 @@ export default class About extends PureComponent {
        <a href={'https://twitter.com/' + variables.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><FaTwitter/></a>
        <a href={'https://discord.gg/' + variables.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><FaDiscord/></a>

-        <h3>{this.getMessage('modals.main.settings.sections.about.support_mue')}</h3>
-        <p>
-          <a href={'https://github.com/sponsors/' + variables.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>GitHub Sponsors</a> 
-          &nbsp; • &nbsp;<a href={'https://ko-fi.com/' + variables.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Ko-Fi</a> 
-          &nbsp; • &nbsp;<a href={'https://patreon.com/' + variables.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Patreon</a>
-        </p>
+        <h3 className='contacth3'>{this.getMessage('modals.main.settings.sections.about.support_mue')}</h3>
+        <a href={'https://github.com/sponsors/' + variables.constants.SPONSORS_USERNAME} className='aboutIcon' target='_blank' rel='noopener noreferrer'><SiGithubsponsors/></a>
+        <a href={'https://liberapay.com/' + variables.constants.LIBERAPAY_USERNAME} className='aboutIcon' target='_blank' rel='noopener noreferrer'><SiLiberapay/></a>
+        <a href={'https://ko-fi.com/' + variables.constants.KOFI_USERNAME} className='aboutIcon' target='_blank' rel='noopener noreferrer'><SiKofi/></a>
+        <a href={'https://patreon.com/' + variables.constants.PATREON_USERNAME} className='aboutIcon' target='_blank' rel='noopener noreferrer'><SiPatreon/></a>

        <h3>{this.getMessage('modals.main.settings.sections.about.resources_used.title')}</h3>
        <p>
          <a href='https://www.pexels.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Pexels</a>
          , <a href='https://unsplash.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Unsplash</a> ({this.getMessage('modals.main.settings.sections.about.resources_used.bg_images')})
        </p>
-        <p><a href='https://undraw.co' className='aboutLink' target='_blank' rel='noopener noreferrer'>Undraw</a> ({this.getMessage('modals.main.settings.sections.about.resources_used.welcome_img')})</p>

        <h3>{this.getMessage('modals.main.settings.sections.about.contributors')}</h3>
        <p>{this.state.loading}</p>
--- a/src/components/modals/welcome/WelcomeSections.jsx
+++ b/src/components/modals/welcome/WelcomeSections.jsx
@@ -28,7 +28,7 @@ export default class WelcomeSections extends PureComponent {
      importedSettings: []
    };
    this.changeWelcomeImg = this.changeWelcomeImg.bind(this);
-    this.welcomeImages = ['./welcome-images/example1.webp', './welcome-images/example2.webp', './welcome-images/example3.webp', './welcome-images/example4.webp'];
+    this.welcomeImages = 4;
  }

  changeTheme(type) {
@@ -50,7 +50,7 @@ export default class WelcomeSections extends PureComponent {
  importSettings(e) {
    importSettings(e);

-    let settings = [];
+    const settings = [];
    const data = JSON.parse(e.target.result);
    Object.keys(data).forEach((setting) => {
      // language and theme already shown, the others are only used internally
@@ -82,14 +82,14 @@ export default class WelcomeSections extends PureComponent {
    let welcomeImage = this.state.welcomeImage;

    this.setState({
-      welcomeImage: ++welcomeImage % this.welcomeImages.length
+      welcomeImage: ++welcomeImage % this.welcomeImages
    });

-    this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
+    this.timeout = setTimeout(this.changeWelcomeImg, 3000);
  }

  componentDidMount() {
-    this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
+    this.timeout = setTimeout(this.changeWelcomeImg, 3000);
  }

  componentWillUnmount() {
@@ -106,23 +106,19 @@ export default class WelcomeSections extends PureComponent {
        clearTimeout(this.timeout);
        this.timeout = null;
      }
-    } else {
-      if (!this.timeout) {
-        this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
-      }
+    } else if (!this.timeout) {
+      this.timeout = setTimeout(this.changeWelcomeImg, 3000);
    }
  }

-  render() {
-    let tabContent;
-  
+  render() {  
    const intro = (
      <>
        <h1>{this.getMessage('modals.welcome.sections.intro.title')}</h1>
        <p>{this.getMessage('modals.welcome.sections.intro.description')}</p>
        <h3 className='quicktip'>#shareyourmue</h3>
        <div className='examples'>
-          <img src={this.welcomeImages[this.state.welcomeImage]} alt='Example Mue setup' draggable={false}/>
+          <img src={`./welcome-images/example${[this.state.welcomeImage + 1]}.webp`} alt='Example Mue setup' draggable={false}/>
        </div>
      </>
    );
@@ -206,15 +202,13 @@ export default class WelcomeSections extends PureComponent {
    );
  
    switch (this.props.currentTab) {
-      case 1: tabContent = chooseLanguage; break;
-      case 2: tabContent = settings; break;
-      case 3: tabContent = theme; break;
-      case 4: tabContent = privacy; break;
-      case 5: tabContent = final; break;
+      case 1: return chooseLanguage;
+      case 2: return settings;
+      case 3: return theme;
+      case 4: return privacy;
+      case 5: return final;
      // 0
-      default: tabContent = intro;
+      default: return intro;
    }
-  
-    return tabContent;
  }
 }
--- a/src/components/widgets/background/scss/_photoinformation.scss
+++ b/src/components/widgets/background/scss/_photoinformation.scss
@@ -78,7 +78,7 @@
  }

  h1,
-  .MuiSvgIcon-root {
+  svg {
    user-select: none;
    cursor: initial;
  }
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdContentCopy, MdAssignment, MdPushPin } from 'react-icons/md';
+import { MdFileCopy, MdAssignment, MdPushPin } from 'react-icons/md';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 import { toast } from 'react-toastify';
 //import Hotkeys from 'react-hot-keys';
@@ -53,7 +53,7 @@ export default class Notes extends PureComponent {
        </div>
        <TextareaAutosize placeholder={variables.language.getMessage(variables.languagecode, 'widgets.navbar.notes.placeholder')} value={this.state.notes} onChange={this.setNotes}/>
        <button onClick={() => this.pin()} className='pinNote'><MdPushPin/></button>
-        <button onClick={() => this.copy()} className='copyNote'><MdContentCopy/></button>
+        <button onClick={() => this.copy()} className='copyNote'><MdFileCopy/></button>
        {/*variables.keybinds.pinNotes && variables.keybinds.pinNotes !== '' ? <Hotkeys keyName={variables.keybinds.pinNotes} onKeyDown={() => this.pin()}/> : null*/}
        {/*variables.keybinds.copyNotes && variables.keybinds.copyNotes !== '' ? <Hotkeys keyName={variables.keybinds.copyNotes} onKeyDown={() => this.copy()}/> : null*/}
      </span>
--- a/src/components/widgets/search/search.scss
+++ b/src/components/widgets/search/search.scss
@@ -35,7 +35,7 @@
    }
  }

-  .MuiSvgIcon-root {
+  svg {
    position: absolute;
    margin-top: 6px;
    font-size: 30px;
--- a/src/components/widgets/weather/WeatherIcon.jsx
+++ b/src/components/widgets/weather/WeatherIcon.jsx
@@ -10,7 +10,7 @@ import {
  WiRain,
  WiThunderstorm,
  WiSnow,
-  WiFog,
+  WiFog
 } from 'react-icons/wi';

 export default function WeatherIcon({ name }) {
--- a/src/components/widgets/weather/WindDirectionIcon.jsx
+++ b/src/components/widgets/weather/WindDirectionIcon.jsx
@@ -6,7 +6,7 @@ import {
  WiDirectionRight,
  WiDirectionUpLeft,
  WiDirectionUpRight,
-  WiDirectionUp,
+  WiDirectionUp
 } from 'react-icons/wi';

 // degrees is imported because of a potential bug, idk what causes it but now it is fixed