fix: add bg url, search tooltip, stats changes

Co-authored-by: David Ralph <me@davidcralph.co.uk>

src/components/helpers/sharemodal/ShareModal.jsx

@@ -37,7 +37,7 @@ function ShareModal({ modalClose, data }) {
           </div>
         </Tooltip>
       </div>
-      <div className="buttons">
+      <div className="shareButtons">
         <Tooltip title="Twitter">
           <button
             onClick={() =>

src/components/helpers/sharemodal/sharemodal.scss

@@ -40,7 +40,7 @@
     }
   }
 
-  .buttons {
+  .shareButtons {
     justify-content: space-between;
     display: flex;
     gap: 15px;

src/components/modals/main/Main.jsx

@@ -4,8 +4,6 @@ import { Suspense, lazy, useState } from 'react';
 import { memo } from 'react';
 import { MdClose } from 'react-icons/md';
 
-import Tabs from './tabs/backend/Tabs';
-
 import './scss/index.scss';
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 
@@ -14,9 +12,12 @@ const Settings = lazy(() => import('./tabs/Settings'));
 const Addons = lazy(() => import('./tabs/Addons'));
 const Marketplace = lazy(() => import('./tabs/Marketplace'));
 
-const renderLoader = (current) => (
-  <Tabs current={current}>
-    <div label={variables.getMessage('modals.main.loading')}>
+const renderLoader = () => (
+  <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
+    <ul className="sidebar">
+      <span className="mainTitle">Mue</span>
+    </ul>
+    <div className="tab-content" style={{ width: '100%' }}>
       <div className="emptyItems">
         <div className="emptyMessage">
           <div className="loaderHolder">
@@ -26,8 +27,7 @@ const renderLoader = (current) => (
         </div>
       </div>
     </div>
-    <div label="" style={{ display: 'none' }}></div>
-  </Tabs>
+  </div>
 );
 
 function MainModal({ modalClose }) {
@@ -64,7 +64,7 @@ function MainModal({ modalClose }) {
           <MdClose />
         </span>
       </Tooltip>
-      <Suspense fallback={renderLoader(currentTab)}>{currentTab}</Suspense>
+      <Suspense fallback={renderLoader()}>{currentTab}</Suspense>
     </div>
   );
 }

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

@@ -138,7 +138,6 @@ h4 {
   grid-template-rows: repeat(2, 1fr);
   column-gap: 45px;
   row-gap: 100px;
-  padding-top: 45px;
 
   .leftPanel {
     grid-area: 1 / 1 / 3 / 3;
@@ -214,7 +213,8 @@ h4 {
   align-items: center;
 
   @include themed {
-    background: t($modal-sidebarActive);
+    background: t($modal-secondaryColour);
+    border: 1px solid t($modal-sidebarActive);
     border-radius: t($borderRadius);
     gap: 10px;
   }
@@ -225,7 +225,7 @@ h4 {
     border-radius: 100%;
 
     @include themed {
-      background: t($modal-sidebar);
+      background: t($modal-sidebarActive);
     }
   }
 }
@@ -235,8 +235,8 @@ h4 {
 
   @include themed {
     border-radius: t($borderRadius);
-    background: t($modal-sidebar);
-    box-shadow: 0 0 0 4px t($modal-sidebarActive);
+    background: t($modal-secondaryColour);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
 
     svg {
       font-size: 50px;
@@ -248,10 +248,15 @@ h4 {
 .achievementContent {
   display: flex;
   flex-flow: column;
+  gap: 2px;
 
-  span {
+  span:first-child {
+    font-weight: bold;
     font-size: 15px;
   }
+  .subtitle {
+    font-size: 13px !important;
+  }
 }
 
 .customcss textarea {

src/components/modals/main/scss/settings/modules/_material-ui.scss

@@ -97,6 +97,15 @@ legend,
     background-color: t($modal-background);
     color: t($color);
   }
+
+  li{
+    &:hover {
+      @include themed {
+        background-color: t($modal-sidebarActive);
+        transition: 0.5s;
+      }
+    }
+  }
 }
 
 .Mui-selected {
@@ -151,9 +160,12 @@ legend,
   }
 }
 
-.css-6od3lo-MuiChip-label {
+.css-w66kx-MuiChip-root {
   @include themed {
     color: t($color) !important;
+    border: 1px solid t($modal-sidebarActive);
+    background: t($modal-sidebar) !important;
+    border-radius: t($borderRadius);
   }
 
   text-transform: capitalize;

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

@@ -2,9 +2,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { MdShowChart } from 'react-icons/md';
-
-import Switch from '../Switch';
-import SettingsItem from '../SettingsItem';
 import { FaTrophy } from 'react-icons/fa';
 
 import EventBus from 'modules/helpers/eventbus';
@@ -92,31 +89,10 @@ export default class Stats extends PureComponent {
   }
 
   render() {
-    if (localStorage.getItem('stats') === 'false') {
-      return (
-        <>
-          <span className="mainTitle">
-            {variables.getMessage('modals.main.settings.sections.stats.title')}
-          </span>
-          <SettingsItem
-            title={variables.getMessage('modals.main.settings.reminder.title')}
-            subtitle={variables.getMessage('modals.main.settings.sections.stats.warning')}
-            final={true}
-          >
-            <Switch
-              name="stats"
-              text={variables.getMessage('modals.main.settings.sections.stats.usage')}
-              category="stats"
-            />
-          </SettingsItem>
-        </>
-      );
-    }
-
-    const achievementElement = (key, name) => (
+    const achievementElement = (key, name, achieved) => (
       <div className="achievement">
         <FaTrophy />
-        <div className="achievementContent">
+        <div className={"achievementContent" + (achieved ? ' achieved' : '')}>
           <span>{name}</span>
           <span className="subtitle">
             {achievementLanguage[localStorage.getItem('language')][key]}
@@ -130,16 +106,6 @@ export default class Stats extends PureComponent {
         <span className="mainTitle">
           {variables.getMessage('modals.main.settings.sections.stats.title')}
         </span>
-        <SettingsItem
-          title={variables.getMessage('modals.main.settings.reminder.title')}
-          subtitle={variables.getMessage('modals.main.settings.sections.stats.warning')}
-        >
-          <Switch
-            name="stats"
-            text={variables.getMessage('modals.main.settings.sections.stats.usage')}
-            category="stats"
-          />
-        </SettingsItem>
         <div className="statsGrid">
           <div className="statSection leftPanel">
             <span className="title">
@@ -152,11 +118,9 @@ export default class Stats extends PureComponent {
               })}
             </span>
             <div className="achievements">
-              {this.state.achievements.map((achievement, index) => {
-                if (achievement.achieved) {
-                  return achievementElement(index, achievement.name);
-                }
-              })}
+              {this.state.achievements.map((achievement, index) => (
+                achievementElement(index, achievement.name, achievement.achieved)
+              ))}
             </div>
           </div>
           <div className="statSection rightPanel">

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

@@ -29,6 +29,7 @@ export default class CustomSettings extends PureComponent {
     this.state = {
       customBackground: this.getCustom(),
       customURLModal: false,
+      urlError: '',
     };
     this.customDnd = createRef(null);
   }
@@ -130,6 +131,16 @@ export default class CustomSettings extends PureComponent {
   }
 
   addCustomURL(e) {
+    // regex: https://ihateregex.io/expr/url/
+    // eslint-disable-next-line no-useless-escape
+    const urlRegex =
+      /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_.~#?&=]*)/;
+    if (urlRegex.test(e) === false) {
+      return this.setState({
+        urlError: variables.getMessage('widgets.quicklinks.url_error'),
+      });
+    }
+
     this.setState({
       customURLModal: false,
       currentBackgroundIndex: this.state.customBackground.length,
@@ -273,6 +284,7 @@ export default class CustomSettings extends PureComponent {
         >
           <CustomURLModal
             modalClose={(e) => this.addCustomURL(e)}
+            urlError={this.state.urlError}
             modalCloseOnly={() => this.setState({ customURLModal: false })}
           />
         </Modal>

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

@@ -1,9 +1,9 @@
 import variables from 'modules/variables';
 import { useState, memo } from 'react';
-import { MdAdd, MdClose } from 'react-icons/md';
+import { MdAdd, MdClose, MdOutlineAddLink } from 'react-icons/md';
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 
-function CustomURLModal({ modalClose, modalCloseOnly }) {
+function CustomURLModal({ modalClose, urlError, modalCloseOnly }) {
   const [url, setURL] = useState();
 
   return (
@@ -20,23 +20,24 @@ function CustomURLModal({ modalClose, modalCloseOnly }) {
           </div>
         </Tooltip>
       </div>
-      <div className="copy">
         <input
           type="text"
           value={url}
-          onChange={(e) => setURL(e.target.value)}
+          onChange={(e) => setURL(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
           varient="outlined"
         />
-        <Tooltip
-          title={variables.getMessage('modals.main.settings.sections.background.source.add_url')}
-          placement="top"
-        >
-          <button onClick={() => modalClose(url)}>
-            <MdAdd />
-          </button>
-        </Tooltip>
+        <span className="dropdown-error">{urlError}</span>
+        <div className="resetFooter">
+        <button className="textButton" onClick={modalCloseOnly}>
+          <MdClose />
+          {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
+        </button>
+        <button onClick={() => modalClose(url)}>
+          <MdOutlineAddLink />
+          {variables.getMessage('modals.main.settings.sections.background.source.add_url')}
+        </button>
+      </div>
       </div>
-    </div>
   );
 }
 

src/components/modals/main/settings/sections/quicklinks/AddModal.jsx

@@ -1,10 +1,10 @@
+import variables from 'modules/variables';
+
 import { useState, memo } from 'react';
 import { TextareaAutosize } from '@mui/material';
 import { MdAddLink, MdClose } from 'react-icons/md';
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 
-import variables from 'modules/variables';
-
 function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, editLink }) {
   const [name, setName] = useState(edit ? editData.name : '');
   const [url, setUrl] = useState(edit ? editData.url : '');

src/components/widgets/navbar/Notes.jsx

@@ -120,12 +120,12 @@ class Notes extends PureComponent {
                   </button>
                 </Tooltip>
                 <Tooltip title={variables.getMessage('widgets.quote.copy')}>
-                  <button onClick={() => this.copy()}>
+                  <button onClick={() => this.copy()} disabled={this.state.notes === ""}>
                     <MdContentCopy />
                   </button>
                 </Tooltip>
                 <Tooltip title={variables.getMessage('widgets.background.download')}>
-                  <button onClick={() => this.download()}>
+                  <button onClick={() => this.download()} disabled={this.state.notes === ""}>
                     <MdDownload />
                   </button>
                 </Tooltip>

src/components/widgets/navbar/scss/_notes.scss

@@ -108,6 +108,14 @@ textarea {
 .notes-buttons {
   display: flex !important;
   gap: 10px;
+  button {
+  &:disabled {
+    @include themed() {
+      background: t($modal-sidebar) !important;
+    }
+    cursor: not-allowed;
+  }
+}
 
   .tooltip {
     flex: 1 !important;

src/components/widgets/search/Search.jsx

@@ -196,7 +196,7 @@ export default class Search extends PureComponent {
         <div className="searchMain">
           <div className={this.state.classList}>
             {localStorage.getItem('searchDropdown') === 'true' ? (
-              <Tooltip title={variables.getMessage('widgets.search')}>
+              <Tooltip title={variables.getMessage('modals.main.settings.sections.search.search_engine')}>
                 <button
                   onClick={() => this.setState({ searchDropdown: !this.state.searchDropdown })}
                 >
@@ -206,7 +206,7 @@ export default class Search extends PureComponent {
             ) : (
               ''
             )}
-            <Tooltip title={variables.getMessage('widgets.search')}>
+            <Tooltip title={variables.getMessage('modals.main.settings.sections.search.voice_search')}>
               {this.state.microphone}
             </Tooltip>
           </div>

src/components/widgets/weather/Expanded.jsx

@@ -67,7 +67,7 @@ function Expanded({ state, weatherType, variables }) {
       {enabled('weatherdescription') ? (
         <Tooltip
           title={variables.getMessage(
-            'modals.main.settings.sections.weather.extra_info.show_description',
+            'modals.main.settings.sections.weather.extra_info.weather_description',
           )}
           placement="left"
         >