fix: add bg url, search tooltip, stats changes

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

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 : '');