fix: various fixes, add microphone active border etc

2022-04-12 10:52:59 +01:00 · 2022-04-12 10:52:59 +01:00 · af41947e33
parent 98fed28706
commit af41947e33
20 changed files with 57 additions and 64 deletions
--- a/src/components/helpers/autocomplete/autocomplete.scss
+++ b/src/components/helpers/autocomplete/autocomplete.scss
@ -38,3 +38,7 @@
    }
  }
 }
+
+.micActive {
+  box-shadow: 0px 0px 50px 9px #E74C3C !important;
+}
--- a/src/components/modals/main/scss/index.scss
+++ b/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;
-    }
  }
 }
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/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' }}>
--- a/src/components/modals/welcome/WelcomeSections.jsx
+++ b/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}
          />
--- a/src/components/modals/welcome/welcome.scss
+++ b/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;
+  }   
+}
--- a/src/components/widgets/quote/Quote.jsx
+++ b/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"
--- a/src/components/widgets/quote/quote.scss
+++ b/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 {
--- a/src/components/widgets/search/Search.jsx
+++ b/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>
      );
--- a/src/components/widgets/search/search.scss
+++ b/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;
 }
--- a/src/index.js
+++ b/src/index.js
@ -1,4 +1,4 @@
-import { createRoot } from 'react-dom/client';
+import { render } from 'react-dom';

 import App from './App';
 import variables from 'modules/variables';
@ -31,7 +31,7 @@ variables.language = new I18n(variables.languagecode, {
  no: require('./translations/no.json'),
  ru: require('./translations/ru.json'),
  zh_CN: require('./translations/zh_CN.json'),
-  id_ID: require('./translations/id_ID.json'),
+  id_ID: require('./translations/id_ID.json')
 });

 // set html language tag
@ -47,7 +47,7 @@ if (localStorage.getItem('stats') === 'true') {
  variables.keybinds = JSON.parse(localStorage.getItem('keybinds') || '{}');
 }*/

-const container = document.getElementById('root');
-const root = createRoot(container);
-
-root.render(<App />);
+render(
+  <App/>,
+  document.getElementById('root')
+);
--- a/src/modules/constants.js
+++ b/src/modules/constants.js
@ -24,12 +24,14 @@ export const ORG_NAME = 'mue';
 export const REPO_NAME = 'mue';
 export const EMAIL = 'hello@muetab.com';
 export const TWITTER_HANDLE = 'getmue';
-export const INSTAGRAM_HANDLE = 'mue.tab';
-export const FACEBOOK_HANDLE = 'muetab';
 export const DISCORD_SERVER = 'zv8C9F8';
 export const COPYRIGHT_NAME = 'The Mue Authors';
 export const COPYRIGHT_YEAR = '2018';
 export const COPYRIGHT_LICENSE = 'BSD-3-Clause License';
+export const SPONSORS_USERNAME = 'davidcralph';
+export const LIBERAPAY_USERNAME = 'mue';
+export const KOFI_USERNAME = 'davidcralph';
+export const PATREON_USERNAME = 'davidcralph';

 export const OFFLINE_IMAGES = 20;

--- a/src/translations/de_DE.json
+++ b/src/translations/de_DE.json
@ -378,9 +378,7 @@
            "support_mue": "Mue unterstützen",
            "resources_used": {
              "title": "Verwendete Ressourcen",
-              "bg_images": "Offline Hintergrundbilder",
-              "welcome_img": "Willkommensbild",
-              "pin_icon": "Icon Anheften"
+              "bg_images": "Offline Hintergrundbilder"
            },
            "contributors": "Mitwirkende",
            "supporters": "Unterstützer",
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@ -377,9 +377,7 @@
            "support_mue": "Support Mue",
            "resources_used": {
              "title": "Resources used",
-              "bg_images": "Offline background images",
-              "welcome_img": "Welcome image",
-              "pin_icon": "Pin icon"
+              "bg_images": "Offline background images"
            },
            "contributors": "Contributors",
            "supporters": "Supporters",
--- a/src/translations/en_US.json
+++ b/src/translations/en_US.json
@ -377,9 +377,7 @@
            "support_mue": "Support Mue",
            "resources_used": {
              "title": "Resources used",
-              "bg_images": "Offline background images",
-              "welcome_img": "Welcome image",
-              "pin_icon": "Pin icon"
+              "bg_images": "Offline background images"
            },
            "contributors": "Contributors",
            "supporters": "Supporters",
--- a/src/translations/es.json
+++ b/src/translations/es.json
@ -377,9 +377,7 @@
            "support_mue": "Apoya Mue",
            "resources_used": {
              "title": "Recursos usados",
-              "bg_images": "Imágenes de fondo sin conexión",
-              "welcome_img": "Imagen de bienvenida",
-              "pin_icon": "Icono de chincheta"
+              "bg_images": "Imágenes de fondo sin conexión"
            },
            "contributors": "Contribuyentes",
            "supporters": "Partidarios",
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@ -377,9 +377,7 @@
            "support_mue": "Soutenir Mue",
            "resources_used": {
              "title": "Ressources utilisées",
-              "bg_images": "Images d'arrière-plan hors ligne",
-              "welcome_img": "Image de bienvenue",
-              "pin_icon": "Icône de broche"
+              "bg_images": "Images d'arrière-plan hors ligne"
            },
            "contributors": "Collaborateurs",
            "supporters": "Partisans",
--- a/src/translations/nl.json
+++ b/src/translations/nl.json
@ -377,9 +377,7 @@
            "support_mue": "Support Mue",
            "resources_used": {
              "title": "Resources used",
-              "bg_images": "Offline background images",
-              "welcome_img": "Welcome image",
-              "pin_icon": "Pin icon"
+              "bg_images": "Offline background images"
            },
            "contributors": "Contributors",
            "supporters": "Supporters",
--- a/src/translations/no.json
+++ b/src/translations/no.json
@ -377,9 +377,7 @@
            "support_mue": "Support Mue",
            "resources_used": {
              "title": "Resources used",
-              "bg_images": "Offline background images",
-              "welcome_img": "Welcome image",
-              "pin_icon": "Pin icon"
+              "bg_images": "Offline background images"
            },
            "contributors": "Contributors",
            "supporters": "Supporters",
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@ -377,9 +377,7 @@
            "support_mue": "Support Mue",
            "resources_used": {
              "title": "Resources used",
-              "bg_images": "Offline background images",
-              "welcome_img": "Welcome image",
-              "pin_icon": "Pin icon"
+              "bg_images": "Offline background images"
            },
            "contributors": "Contributors",
            "supporters": "Supporters",
--- a/src/translations/zh_CN.json
+++ b/src/translations/zh_CN.json
@ -377,9 +377,7 @@
            "support_mue": "支持 Mue",
            "resources_used": {
              "title": "使用资源",
-              "bg_images": "离线背景",
-              "welcome_img": "欢迎图像",
-              "pin_icon": "便签图标"
+              "bg_images": "离线背景"
            },
            "contributors": "贡献者",
            "supporters": "支持者",