fix: various fixes, add microphone active border etc

src/components/helpers/autocomplete/autocomplete.scss

@@ -38,3 +38,7 @@
     }
   }
 }
+
+.micActive {
+  box-shadow: 0px 0px 50px 9px #E74C3C !important;
+}

src/components/modals/main/scss/index.scss

@@ -145,10 +145,6 @@ h5 {
     flex-flow: row;
     gap: 15px;
     align-items: center;
-    &:hover {
-      opacity: 0.8;
-      cursor: pointer;
-    }
   }
 }
 
@@ -186,9 +182,5 @@ h5 {
     flex-flow: row;
     gap: 15px;
     align-items: center;
-    &:hover {
-      opacity: 0.8;
-      cursor: pointer;
-    }
   }
 }

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

@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { MdEmail, MdContactPage } from 'react-icons/md';
-import { FaDiscord, FaTwitter, FaPatreon, FaGithub } from 'react-icons/fa';
+import { FaDiscord, FaTwitter } from 'react-icons/fa';
 import { SiGithubsponsors, SiLiberapay, SiKofi, SiPatreon } from 'react-icons/si';
 import { BiDonateHeart } from 'react-icons/bi';
 
@@ -228,7 +228,7 @@ export default class About extends PureComponent {
             </a>
             <Tooltip title={'Github Sponsors'}>
               <a
-                href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
+                href={'https://github.com/sponsors/' + variables.constants.SPONSORS_USERNAME}
                 target="_blank"
                 rel="noopener noreferrer"
               >
@@ -237,7 +237,7 @@ export default class About extends PureComponent {
             </Tooltip>
             <Tooltip title={'Liberapay'}>
               <a
-                href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
+                href={'https://liberapay.com/' + variables.constants.LIBERAPAY_USERNAME}
                 target="_blank"
                 rel="noopener noreferrer"
               >
@@ -246,7 +246,7 @@ export default class About extends PureComponent {
             </Tooltip>
             <Tooltip title={'Ko-Fi'}>
               <a
-                href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
+                href={'https://ko-fi.com/' + variables.constants.KOFI_USERNAME}
                 target="_blank"
                 rel="noopener noreferrer"
               >
@@ -255,7 +255,7 @@ export default class About extends PureComponent {
             </Tooltip>
             <Tooltip title={'Patreon'}>
               <a
-                href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
+                href={'https://patreon.com/' + variables.constants.PATREON_USERNAME}
                 target="_blank"
                 rel="noopener noreferrer"
               >
@@ -289,12 +289,6 @@ export default class About extends PureComponent {
             </a>{' '}
             ({this.getMessage('modals.main.settings.sections.about.resources_used.bg_images')})
           </span>
-          <span className="subtitle">
-            <a href="https://undraw.co" className="link" target="_blank" rel="noopener noreferrer">
-              Undraw
-            </a>{' '}
-            ({this.getMessage('modals.main.settings.sections.about.resources_used.welcome_img')})
-          </span>
         </div>
 
         <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>

src/components/modals/welcome/WelcomeSections.jsx

@@ -125,7 +125,7 @@ export default class WelcomeSections extends PureComponent {
         <h3 className="quicktip">#shareyourmue</h3>
         <div className="examples">
           <img
-            src={this.welcomeImages[this.state.welcomeImage]}
+            src={`./welcome-images/example${this.state.welcomeImage + 1}.webp`}
             alt="Example Mue setup"
             draggable={false}
           />

src/components/modals/welcome/welcome.scss

@@ -204,11 +204,6 @@ a.privacy {
   }
 }
 
-.showcaseimg {
-  width: 350px;
-  height: auto;
-}
-
 @media (max-width: 1820px) and (min-width: 1200px) {
   .welcomemodal {
     width: 85%;
@@ -272,3 +267,22 @@ a.privacy {
     height: 40px;
   }
 }
+
+.showcaseimg {
+  width: 350px;
+  height: auto;
+  /*animation-name: float-in;
+  animation-duration: 1.2s;
+  animation-timing-function: ease-in;*/
+}
+
+@keyframes float-in {
+  0% { 
+    transform: translate(0,  30px); 
+    opacity: 0;
+  }
+  100%   { 
+    transform: translate(0, 0px); 
+    opacity: 1;
+  }   
+}

src/components/widgets/quote/Quote.jsx

@@ -436,7 +436,7 @@ export default class Quote extends PureComponent {
                   </div>
                   <div className="quote-buttons">
                     {this.state.authorOccupation !== 'Unknown' ? (
-                      <Tooltip title="Open">
+                      <Tooltip title="Open On Wikipedia">
                         <a
                           href={this.state.authorlink}
                           className="quoteAuthorLink"

src/components/widgets/quote/quote.scss

@@ -86,6 +86,7 @@ h1.quoteauthor {
   justify-content: center;
   align-items: flex-start;
   padding: 20px;
+  text-align: left;
 }
 
 .author-holder {

src/components/widgets/search/Search.jsx

@@ -34,6 +34,10 @@ export default class Search extends PureComponent {
     const voiceSearch = new window.webkitSpeechRecognition();
     voiceSearch.start();
 
+    // todo: use ref, stop being lazy
+    const micIcon = document.getElementById('micBtn');
+    micIcon.classList.add('micActive');
+
     const searchText = document.getElementById('searchtext');
 
     voiceSearch.onresult = (event) => {
@@ -41,6 +45,7 @@ export default class Search extends PureComponent {
     };
 
     voiceSearch.onend = () => {
+      micIcon.classList.remove('micActive');
       if (searchText.value === '') {
         return;
       }
@@ -101,7 +106,7 @@ export default class Search extends PureComponent {
 
     if (localStorage.getItem('voiceSearch') === 'true') {
       microphone = (
-        <button onClick={this.startSpeechRecognition}>
+        <button onClick={this.startSpeechRecognition} id='micBtn'>
           <MdMic className="micIcon" />
         </button>
       );

src/components/widgets/search/search.scss

@@ -5,7 +5,6 @@
   border-radius: 12px;
   justify-content: flex-start;
   flex-direction: row;
-  gap: 10px;
   input[type='text'] {
     @extend %basic;
     outline: none;
@@ -24,6 +23,7 @@
   display: flex;
   gap: 10px;
   margin-top: 1px;
+  margin-right: 10px;
   .tooltip {
     max-height: 44px;
   }
@@ -65,5 +65,4 @@
 .searchMain {
   display: flex;
   flex-flow: row;
-  gap: 10px;
 }