Improve selecting things

package.json

@@ -12,8 +12,8 @@
   "version": "5.0.0",
   "dependencies": {
     "@eartharoid/dtf": "^1.0.8",
-    "@fontsource/lexend-deca": "^4.1.0",
-    "@fontsource/roboto": "^4.1.0",
+    "@fontsource/lexend-deca": "^4.2.2",
+    "@fontsource/roboto": "^4.2.1",
     "@material-ui/core": "4.11.2",
     "@material-ui/icons": "4.11.2",
     "deepmerge": "^4.2.2",

src/App.jsx

@@ -47,6 +47,26 @@ export default class App extends React.PureComponent {
     if (localStorage.getItem('darkTheme') === 'true') {
       document.getElementsByClassName('Toastify')[0].classList.add('dark');
     }
+
+    // These lines of code prevent double clicking the page or pressing CTRL + A from highlighting the page
+    document.addEventListener('mousedown', (event) => {
+      if (event.detail > 1) {
+        event.preventDefault();
+      }
+    }, false);
+
+    document.onkeydown = (e) => {
+      e = e || window.event; 
+      if (!e.ctrlKey) return;
+      let code = e.which || e.keyCode;
+
+      switch (code) {
+          case 65:
+            e.preventDefault();
+            e.stopPropagation();
+            break;
+      }
+    };
   }
 
   closeWelcome() {

src/components/modals/marketplace/Item.jsx

@@ -2,11 +2,10 @@ import React from 'react';
 
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
-export default class Item extends React.PureComponent {
-  render() {
+export default function Item(props) {
     let warningHTML;
     try { // For some reason it breaks sometimes so we use try/catch
-      if (this.props.content.content.data.quote_api) {
+      if (props.content.content.data.quote_api) {
         warningHTML = (
           <div className='productInformation'>
             <ul>
@@ -23,39 +22,38 @@ export default class Item extends React.PureComponent {
     return (
       <div id='item'>
         <br/>
-        <ArrowBackIcon className='backArrow' onClick={this.props.function} />
+        <ArrowBackIcon className='backArrow' onClick={props.function} />
         <br/>
-        <h1>{this.props.data.name}</h1>
-        {this.props.button}
+        <h1>{props.data.name}</h1>
+        {props.button}
         <br/><br/>
-        <img alt='product' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + this.props.data.icon} />
+        <img alt='product' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + props.data.icon} />
         <div className='informationContainer'>
           <div className='productInformation'>
-            <h4>{this.props.language.information}</h4>
+            <h4>{props.language.information}</h4>
             <ul>
               <br/>
-              <li className='header'>{this.props.language.last_updated}</li>
-              <li>{this.props.data.updated}</li>
+              <li className='header'>{props.language.last_updated}</li>
+              <li>{props.data.updated}</li>
               <br/>
-              <li className='header'>{this.props.language.version}</li>
-              <li>{this.props.data.version}</li>
+              <li className='header'>{props.language.version}</li>
+              <li>{props.data.version}</li>
               <br/>
-              <li className='header'>{this.props.language.author}</li>
-             <li>{this.props.data.author}</li>
+              <li className='header'>{props.language.author}</li>
+             <li>{props.data.author}</li>
            </ul>
           </div>
           <div className='productInformation'>
             <ul>
-              <li className='header'>{this.props.language.notice.title}</li>
-              <li id='updated'>{this.props.language.notice.description}</li>
+              <li className='header'>{props.language.notice.title}</li>
+              <li id='updated'>{props.language.notice.description}</li>
             </ul>
           </div>
           {warningHTML}
         </div>
         <br/>
-        <h1>{this.props.language.overview}</h1>
-        <p className='description' dangerouslySetInnerHTML={{__html: this.props.data.description}}></p>
+        <h1>{props.language.overview}</h1>
+        <p className='description' dangerouslySetInnerHTML={{__html: props.data.description}}></p>
       </div>
     );
-  }
 }

src/components/modals/marketplace/Items.jsx

@@ -1,23 +1,22 @@
 import React from 'react';
 
-export default class Items extends React.PureComponent {
-  render() {
-    if (this.props.items.length === 0) {
+export default function Items(props) {
+    if (props.items.length === 0) {
         return null; // if there are no items in category don't render it
     }
 
     let seeMoreHTML;
-    if (this.props.seeMoreFunction && this.props.items.length === 3) {
-        seeMoreHTML = <button className='addToMue seemore' onClick={this.props.seeMoreFunction}>{this.props.seeMoreTitle}</button>; // only render see more button if there are enough addons
+    if (props.seeMoreFunction && props.items.length === 3) {
+        seeMoreHTML = <button className='addToMue seemore' onClick={props.seeMoreFunction}>{props.seeMoreTitle}</button>; // only render see more button if there are enough addons
     }
 
     return (
         <div>
             {seeMoreHTML}
-            <h1>{this.props.title}</h1>
+            <h1>{props.title}</h1>
             <div className='items'>
-                {this.props.items.map((item) =>
-                    <div className='item' onClick={() => this.props.toggleFunction(item.name)} key={item.name}>
+                {props.items.map((item) =>
+                    <div className='item' onClick={() => props.toggleFunction(item.name)} key={item.name}>
                         <img alt='icon' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + item.icon_url} />
                         <div className='details'>
                             <h4>{item.display_name ? item.display_name : item.name}</h4>
@@ -27,5 +26,4 @@ export default class Items extends React.PureComponent {
                 </div>
           </div>
     );
-  }
 }