Cleanup, refactor and new features

src/components/widgets/search/Search.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import SearchIcon from '@material-ui/icons/Search';
+import MicIcon from '@material-ui/icons/Mic';
+
+import './search.scss';
+
+const searchEngines = require('./search_engines.json');
+
+export default class Search extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      url: '',
+      query: ''
+    };
+  }
+
+  startSpeechRecognition() {
+    const voiceSearch = new window.webkitSpeechRecognition();
+    voiceSearch.start();
+    voiceSearch.onresult = (event) => document.getElementById('searchtext').value = event.results[0][0].transcript;
+    voiceSearch.onend = () => setTimeout(() => window.location.href = this.state.url + `?${this.state.query}=` + document.getElementById('searchtext').value, 1000);
+  }
+
+  render() {
+    if (localStorage.getItem('searchBar') === 'false') return null;
+
+    let url;
+    let query = 'q';
+
+    const setting = localStorage.getItem('searchEngine');
+    const info = searchEngines.find(i => i.settingsName === setting);
+    if (info !== undefined) {
+      url = info.url;
+      if (info.query) query = info.query;
+    }
+
+    if (setting === 'custom') url = localStorage.getItem('customSearchEngine');
+
+    const searchButton = () => {
+      const value = document.getElementById('searchtext').value || 'mue fast';
+      window.location.href = url + `?${query}=` + value;
+    };
+
+    let microphone = null;
+    if (localStorage.getItem('voiceSearch') === 'true') {
+      this.setState({
+        url: url,
+        query: query
+      });
+      microphone = <MicIcon className='micIcon' onClick={() => this.startSpeechRecognition()}/>;
+    }
+
+    return (
+      <div id='searchBar' className='searchbar'>
+        <form id='searchBar' className='searchbarform' action={url}>
+            {microphone}
+            <SearchIcon onClick={() => searchButton()} id='searchButton' />
+            <input type='text' placeholder={this.props.language} name={query} id='searchtext' className='searchtext'/>
+            <div className='blursearcbBG'/>
+          </form>
+      </div>
+    );
+  }
+}

src/components/widgets/search/search.scss

@@ -0,0 +1,48 @@
+@import '../../../scss/variables';
+
+.searchbar {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    display: flex;
+    flex-direction: row;
+    display: block;
+    color: map-get($theme-colours, 'main-text-color');
+
+    input[type=text] {
+        width: 140px;
+        margin-left: 12px;
+        border-radius: 24px;
+        font-size: calc(5px + 1.2vmin);
+        background: transparent;
+        border: none;
+        position: absolute;
+        background-color: rgba(0, 0, 0, 0.1);
+        -webkit-transition: width 0.5s ease-in-out;
+        transition: width 0.5s ease-in-out;
+
+        &:focus {
+            width: 400px;
+            background-color: rgba(0, 0, 0, .3);
+        }
+    }
+
+    .MuiSvgIcon-root {
+        margin-top: 4px;
+        font-size: 30px;
+        filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
+        cursor: pointer;
+    }
+}
+
+.input.searchtext {
+    border: none;
+}
+
+.micIcon {
+    margin-right: 10px;
+}
+
+#searchEngine {
+    width: 130px;
+}

src/components/widgets/search/search_engines.json

@@ -0,0 +1,48 @@
+[
+    {
+        "name": "DuckDuckGo",
+        "settingsName": "duckduckgo",
+        "url": "https://duckduckgo.com"
+    },
+    {
+        "name": "Google",
+        "settingsName": "google",
+        "url": "https://google.com/search"
+    },
+    {
+        "name": "Bing",
+        "settingsName": "bing",
+        "url": "https://bing.com/search"
+    },
+    {
+        "name": "Yahoo",
+        "settingsName": "yahoo",
+        "url": "https://search.yahoo.com/search"
+    },
+    {
+        "name": "Ecosia",
+        "settingsName": "ecosia",
+        "url": "https://ecosia.org/search"
+    },
+    {
+        "name": "Яндекс",
+        "settingsName": "yandex",
+        "url": "https://yandex.ru/search",
+        "query": "text"
+    },
+    {
+        "name": "Qwant",
+        "settingsName": "qwant",
+        "url": "https://www.qwant.com/"
+    },
+    {
+        "name": "Ask",
+        "settingsName": "ask",
+        "url": "https://ask.com/web"
+    },
+    {
+        "name": "Startpage",
+        "settingsName": "startpage",
+        "url": "https://www.startpage.com/sp/search"
+    }
+]