fix: welcome modal bugs, about tab issues

src/components/helpers/sharemodal/ShareModal.jsx

@@ -69,8 +69,8 @@ export default function ShareModal({ modalClose, data }) {
           </button>
         </Tooltip>
         {/* i think that wechat has no actual share function outside of qrcodes, as the only example of a share to wechat button i've seen used this api
-          * this requires some investigating before we deploy to production
-        */ }
+         * this requires some investigating before we deploy to production
+         */}
         <Tooltip title="WeChat">
           <button
             onClick={() =>

src/components/modals/main/Main.jsx

@@ -20,7 +20,9 @@ const renderLoader = (current) => (
         <div className="emptyMessage">
           <div className="loaderHolder">
             <div id="loader"></div>
-            <span className="subtitle">{variables.language.getMessage(variables.languagecode, 'modals.main.loading')}</span>
+            <span className="subtitle">
+              {variables.language.getMessage(variables.languagecode, 'modals.main.loading')}
+            </span>
           </div>
         </div>
       </div>

src/components/modals/main/scss/marketplace/_main.scss

@@ -23,6 +23,7 @@
     align-items: center;
     gap: 15px;
     transition: 0.5s;
+
     @include themed() {
       background: t($modal-sidebar);
       box-shadow: 0 0 0 1px t($modal-sidebarActive);
@@ -30,27 +31,34 @@
         background: t($modal-sidebarActive);
       }
     }
+
     .tags {
       margin-top: 7px;
     }
+
     img {
       height: 80% !important;
       width: auto !important;
       border-radius: 12px;
+
       @include themed() {
         background: t($modal-sidebar);
       }
+
       padding: 5px;
     }
 
     .card-details {
       display: flex;
       flex-flow: column;
+
       .card-title {
         font-size: 18px;
       }
+
       .card-subtitle {
         font-size: 12px;
+
         @include themed() {
           color: t($subColor);
         }
@@ -63,43 +71,52 @@
   display: flex;
   flex-flow: row;
   justify-content: space-between;
+
   .itemShowcase {
     display: flex;
     flex-flow: column;
     gap: 15px;
     width: 50%;
+
     .description {
       max-lines: 3;
       font-size: 16px;
     }
+
     img {
       width: 100%;
       height: auto;
     }
   }
+
   .itemInfo {
     display: flex;
     flex-flow: column;
     gap: 15px;
     width: 170px;
+
     img {
       width: 100%;
       height: auto;
       border-radius: 12px;
+
       @include themed() {
         box-shadow: 0 0 0 3px t($modal-sidebarActive);
       }
     }
     .divider {
       text-transform: uppercase;
+
       @include themed() {
         color: t($subColor);
       }
     }
+
     .iconButtons {
       display: flex;
       flex-flow: row;
       justify-content: space-between;
+
       svg {
         @include basicIconButton(11px, 1.3rem, modal);
       }
@@ -114,6 +131,7 @@
   gap: 15px;
   align-items: center;
 }
+
 .tag {
   padding: 2px 10px 2px 10px;
   border-radius: 12px;
@@ -123,6 +141,7 @@
   @include themed() {
     background: t($modal-sidebar);
     box-shadow: 0 0 0 3px t($modal-sidebarActive);
+
     span {
       &:before {
         content: '#';
@@ -130,6 +149,7 @@
         margin-right: 5px;
       }
     }
+
     &:hover {
       background: t($modal-sidebarActive);
     }
@@ -142,9 +162,11 @@
   font-size: 12px;
   display: grid;
   place-items: center;
+
   @include themed() {
     background: t($modal-sidebar);
     box-shadow: 0 0 0 3px t($modal-sidebarActive);
+
     span {
       &:before {
         content: '+';
@@ -152,6 +174,7 @@
         margin-right: 5px;
       }
     }
+
     &:hover {
       background: t($modal-sidebarActive);
     }
@@ -253,17 +276,20 @@ p.author {
   display: flex;
   flex-direction: column;
   align-items: center;
+
   @include themed() {
     background: t($modal-sidebar);
     box-shadow: 0 0 0 4px t($modal-sidebarActive);
     border-radius: t($borderRadius);
     padding: 15px;
   }
+
   .topRow {
     display: flex;
     flex-flow: column;
     align-items: center;
   }
+
   .subtitle {
     text-align: justify;
   }
@@ -281,11 +307,13 @@ p.author {
   padding: 15px;
   gap: 15px;
   justify-content: space-between;
+
   @include themed() {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);
     box-shadow: 0 0 0 4px t($modal-sidebarActive);
   }
+
   .tags {
     max-width: 50%;
   }
@@ -364,4 +392,3 @@ p.author {
     border-radius: t($borderRadius);
   }
 }
-

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

@@ -23,8 +23,8 @@ export default class About extends PureComponent {
       loading: this.getMessage('modals.main.loading'),
       image:
         localStorage.getItem('theme') === 'dark'
-          ? './././icons/mue_dark.svg'
-          : './././icons/mue_light.svg',
+          ? 'public/icons/mue_dark.png'
+          : 'public/icons/mue_light.png',
     };
     this.controller = new AbortController();
   }
@@ -177,7 +177,12 @@ export default class About extends PureComponent {
             {this.getMessage('modals.main.settings.sections.about.contact_us')}
           </span>
           <div className="aboutContact">
-            <a class="donateButton" href="https://muetab.com/contact">
+            <a
+              class="donateButton"
+              href="https://muetab.com/contact"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <MdContactPage />
               Form
             </a>

src/components/modals/main/settings/sections/background/Background.jsx

@@ -207,7 +207,10 @@ export default class BackgroundSettings extends PureComponent {
           category="background"
           element="#backgroundImage"
         />
-        <SettingsItem title="Display" subtitle="Change how background and photo information are loaded">
+        <SettingsItem
+          title="Display"
+          subtitle="Change how background and photo information are loaded"
+        >
           <Checkbox
             name="ddgProxy"
             text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')}

src/components/modals/welcome/WelcomeSections.jsx

@@ -88,7 +88,7 @@ export default class WelcomeSections extends PureComponent {
     let welcomeImage = this.state.welcomeImage;
 
     this.setState({
-      welcomeImage: ++welcomeImage % this.welcomeImages.length,
+      welcomeImage: welcomeImage < 4 ? ++welcomeImage : 0,
     });
 
     this.timeout = setTimeout(this.changeWelcomeImg, 3000);
@@ -262,7 +262,7 @@ export default class WelcomeSections extends PureComponent {
         <p>{this.getMessage('modals.welcome.sections.final.description')}</p>
         <h3 className="quicktip">{this.getMessage('modals.welcome.sections.final.changes')}</h3>
         <p>{this.getMessage('modals.welcome.sections.final.changes_description')}</p>
-        <div className="themesToggleArea">
+        <div className="themesToggleArea themesToggleAreaWelcome">
           <div className="toggle" onClick={() => this.props.switchTab(1)}>
             <span>
               {this.getMessage('modals.main.settings.sections.language.title')}:{' '}

src/components/modals/welcome/welcome.scss

@@ -153,6 +153,10 @@
   }
 }
 
+.themesToggleArea .toggle {
+  margin-bottom: 10px;
+}
+
 .upload {
   width: 100%;
   height: 100%;

src/components/widgets/Widgets.jsx

@@ -13,7 +13,7 @@ import EventBus from 'modules/helpers/eventbus';
 
 // weather is lazy loaded due to the size of the weather icons module
 // since we're using react-icons this might not be accurate,
-// however, when we used the original module https://bundlephobia.com/package/weather-icons-react@1.2.0 
+// however, when we used the original module https://bundlephobia.com/package/weather-icons-react@1.2.0
 // as seen here it is ridiculously large
 const Weather = lazy(() => import('./weather/Weather'));
 const renderLoader = () => <></>;

src/components/widgets/background/PhotoInformation.jsx

@@ -312,7 +312,7 @@ export default function PhotoInformation({ info, url, api }) {
                   </span>
                 </div>
                 <div className="concept-row">
-                  <Source/>
+                  <Source />
                   <span id="infoSource">{api.charAt(0).toUpperCase() + api.slice(1)}</span>
                 </div>
               </div>

src/components/widgets/navbar/Notes.jsx

@@ -4,7 +4,7 @@ import { MdContentCopy, MdAssignment, MdPushPin, MdDownload } from 'react-icons/
 import { useFloating, shift } from '@floating-ui/react-dom';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 import { toast } from 'react-toastify';
-import Tooltip from '../../helpers/tooltip/Tooltip'; 
+import Tooltip from '../../helpers/tooltip/Tooltip';
 //import Hotkeys from 'react-hot-keys';
 import { saveFile } from 'modules/helpers/settings/modals';
 

src/components/widgets/quote/Quote.jsx

@@ -215,7 +215,7 @@ export default class Quote extends PureComponent {
             return this.setState({
               quote: '"' + data[quotePackAPI.quote] + '"',
               author,
-              authorimg: info.icon_url
+              authorimg: info.icon_url,
             });
           } catch (e) {
             return this.doOffline();
@@ -237,7 +237,7 @@ export default class Quote extends PureComponent {
               quote: '"' + data.quote + '"',
               author: data.author,
               authorlink: this.getAuthorLink(data.author),
-              authorimg: info.icon_url
+              authorimg: info.icon_url,
             });
           } else {
             return this.doOffline();

src/components/widgets/weather/weather.scss

@@ -112,7 +112,7 @@
       border: 1px solid t($btn-backgroundHover);
       padding: 5px;
       flex: 1;
-      
+
       svg {
         font-size: 36px;
       }
@@ -125,7 +125,7 @@
         color: t($color);
         font-size: 15px;
       }
-      
+
       .minmax {
         margin-top: 5px;
         flex-flow: column;

src/modules/helpers/interval.js

@@ -1,7 +1,7 @@
 // based on https://stackoverflow.com/a/47009962
 // it has been brought to my attention (many) times that this is horribly broken if the time
 // on the "Change every" setting is longer than 1 minute. I wasn't going to wait days to see
-// if the function worked, so i just assumed it did. i apologise. this function will be 
+// if the function worked, so i just assumed it did. i apologise. this function will be
 // replaced entirely in the future probably
 export default function interval(callback, interval, name) {
   const key = name + 'interval';

src/scss/_variables.scss

@@ -108,7 +108,7 @@ $themes: (
 
   .subtitle {
     font-size: 14px;
-  
+
     @include themed() {
       color: t($subColor);
     }