feat: autocomplete for search

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/modals/Modals.jsx

@@ -48,10 +48,10 @@ export default class Modals extends React.PureComponent {
           <Main modalClose={() => this.setState({ mainModal: false })}/>
         </Modal>
         <React.Suspense fallback={renderLoader()}>
-          <Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal' overlayClassName='Overlay' ariaHideApp={false}>
+          <Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
             <Welcome modalClose={() => this.closeWelcome()}/>
           </Modal>
-          <Modal closeTimeoutMS={300} onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
+          <Modal closeTimeoutMS={300} onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
             <Feedback modalClose={() => this.setState({ feedbackModal: false })}/>
           </Modal>
         </React.Suspense>

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

@@ -32,13 +32,21 @@
 }
 
 .modalLink {
+  display: block !important;
+  margin-top: 5px;
   color: var(--modal-link);
   cursor: pointer;
-  padding-left: 10px;
 
   &:hover {
     opacity: 0.8;
   }
+
+  span {
+    font-size: 1.2rem;
+    color: var(--modal-link);
+    vertical-align: text-bottom;
+    margin-left: 5px;
+  }
 }
 
 .closeModal {
@@ -102,12 +110,6 @@
   }
 }
 
-@media only screen and (min-height: 700px) {
-  .ReactModal__Content {
-    //min-height: 600px;
-  }
-}
-
 ul.sidebar {
   position: absolute;
   top: 0;

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

@@ -207,3 +207,16 @@ input::-webkit-inner-spin-button {
 input[type=number] {
   -moz-appearance: textfield;
 }
+
+.resetArea {
+  h2 {
+    font-size: 2rem !important;
+  }
+  h2, span, svg {
+    display: inline;
+  }
+  svg {
+    vertical-align: sub;
+    font-size: 1.4rem;
+  }
+}

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

@@ -53,7 +53,7 @@ export default class AdvancedSettings extends React.PureComponent {
         <p style={{ 'maxWidth': '75%'}}>{advanced.experimental_warning}</p>
         <Switch name='experimental' text={this.language.enabled} element='.other'/>
 
-        <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className='Modal resetmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
+        <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
           <ResetModal modalClose={() => this.setState({ resetModal: false })} />
         </Modal>
       </>

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

@@ -3,6 +3,7 @@ import React from 'react';
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
 import Switch from '../Switch';
+import Radio from '../Radio';
 
 import EventBus from '../../../../../modules/helpers/eventbus';
 
@@ -10,6 +11,7 @@ import { isChrome } from 'react-device-detect';
 import { toast } from 'react-toastify';
 
 const searchEngines = require('../../../../widgets/search/search_engines.json');
+const autocompleteProviders = require('../../../../widgets/search/autocomplete_providers.json')
 
 export default class SearchSettings extends React.PureComponent {
   constructor() {
@@ -76,6 +78,9 @@ export default class SearchSettings extends React.PureComponent {
         <h2>{search.title}</h2>
         <Switch name='searchBar' text={language.enabled} category='widgets' />
         {isChrome ? <Checkbox name='voiceSearch' text={search.voice_search} /> : null}
+        <Checkbox name='autocomplete' text={search.autocomplete} category='search'/>
+        <Radio title={search.autocomplete_provider} options={autocompleteProviders} name='autocompleteProvider' category='search'/>
+        <br/>
 
         <Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
           {searchEngines.map((engine) => (