From 8b79f82e29e12051e91a6a97b1938c782757064c Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Wed, 16 Sep 2020 16:57:12 +0100
Subject: [PATCH] add settings for view and favourite

---
 README.md                            |  3 ++
 src/components/modals/Settings.jsx   | 58 ++++++++++++++++++----------
 src/components/widgets/Favourite.jsx |  1 +
 src/modules/defaultSettings.json     | 12 ++++++
 4 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 10f614e5..34870a4a 100644
--- a/README.md
+++ b/README.md
@@ -43,6 +43,9 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
 * Update modal, copy button and more!
 * Marketplace - download custom photo packs, quote packs, preset settings and themes made by the community!
 
+### Planned Features
+Please see our [roadmap](https://github.com/mue/mue/projects/2)
+
 ## Installation
 *A demo of the tab can be found [here](https://demo.muetab.xyz)*
 ### Chrome
diff --git a/src/components/modals/Settings.jsx b/src/components/modals/Settings.jsx
index 2adc82ba..4764c1a7 100644
--- a/src/components/modals/Settings.jsx
+++ b/src/components/modals/Settings.jsx
@@ -172,8 +172,8 @@ export default class Settings extends React.PureComponent {
             <label htmlFor='8'>{this.props.language.background.API} </label>
             <label className='dropdown'>
               <select className='select-css' name='8' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
-                <option class='choices' value='mue'>Mue</option>
-                <option class='choices' value='unsplash'>Unsplash</option>
+                <option className='choices' value='mue'>Mue</option>
+                <option className='choices' value='unsplash'>Unsplash</option>
                 { /* <option value='custom'>Custom</option> */ }
               </select>
             </label>
@@ -210,15 +210,15 @@ export default class Settings extends React.PureComponent {
             <ul>
             <label htmlFor='4'>{this.props.language.searchbar.searchengine} </label>
               <select className='select-css' name='4' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
-                <option class='choices' value='duckduckgo'>DuckDuckGo</option>
-                <option class='choices' value='google'>Google</option>
-                <option class='choices' value='bing'>Bing</option>
-                <option class='choices' value='yahoo'>Yahoo</option>
-                <option class='choices' value='ecosia'>Ecosia</option>
-                <option class='choices' value='yandex'>Yandex</option>
-                <option class='choices' value='qwant'>Qwant</option>
-                <option class='choices' value='ask'>Ask</option>
-                <option class='choices' value='startpage'>Startpage</option>
+                <option className='choices' value='duckduckgo'>DuckDuckGo</option>
+                <option className='choices' value='google'>Google</option>
+                <option className='choices' value='bing'>Bing</option>
+                <option className='choices' value='yahoo'>Yahoo</option>
+                <option className='choices' value='ecosia'>Ecosia</option>
+                <option className='choices' value='yandex'>Yandex</option>
+                <option className='choices' value='qwant'>Qwant</option>
+                <option className='choices' value='ask'>Ask</option>
+                <option className='choices' value='startpage'>Startpage</option>
                {/* <option value='custom'>Custom</option> */}
               </select>
             </ul>
@@ -232,19 +232,37 @@ export default class Settings extends React.PureComponent {
           <h4>{this.props.language.offline}</h4>
           <Slider name='offlineMode' />
         </div>
-        <h3>{this.props.language.experimental.title}</h3>
         <div className='section'>
-          <h4>{this.props.language.experimental.webp}</h4>
-          <Slider name='webp' />
+            <h4>{this.props.language.experimental.dark}</h4>
+            <Slider name='darkTheme' />
         </div>
         <div className='section'>
-          <h4>{this.props.language.experimental.dark}</h4>
-          <Slider name='darkTheme' />
-        </div>
-        <div className='section'>
-          <h4>{this.props.language.experimental.animations}</h4>
-          <Slider name='animations' />
+          <h4>{this.props.language.experimental.title}</h4>
+          <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[5], document.getElementsByClassName('expandIcons')[5])} />
+          <li className='extraSettings'>
+            <div className='section'>
+              <h4>{this.props.language.experimental.webp}</h4>
+              <Slider name='webp' />
+            </div>
+            <div className='section'>
+               <h4>{this.props.language.experimental.animations}</h4>
+               <Slider name='animations' />
+            </div>
+            <div className='section'>
+               <h4>View</h4>
+               <Slider name='view' />
+            </div>
+            <div className='section'>
+               <h4>Favourite</h4>
+               <Slider name='favouriteEnabled' />
+            </div>
+            <div className='section'>
+               <h4>Refresh</h4>
+               <Slider name='refresh' />
+            </div>
+          </li>
         </div>
+
         <div className='section'>
         <h4 htmlFor='9'>{this.props.language.language} </h4>
           <select className='select-css' name='9' id='language' onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
diff --git a/src/components/widgets/Favourite.jsx b/src/components/widgets/Favourite.jsx
index 38b48f14..f53613f8 100644
--- a/src/components/widgets/Favourite.jsx
+++ b/src/components/widgets/Favourite.jsx
@@ -28,6 +28,7 @@ export default class Favourite extends React.PureComponent {
   }
 
   render() {
+    if (localStorage.getItem('favouriteEnabled') === 'false') return null;
     return <div className='favourite'>
         {this.state.favourited}
     </div>
diff --git a/src/modules/defaultSettings.json b/src/modules/defaultSettings.json
index 8d8d75b6..88d8fcd9 100644
--- a/src/modules/defaultSettings.json
+++ b/src/modules/defaultSettings.json
@@ -66,5 +66,17 @@
     {
         "name": "searchEngine",
         "value": "duckduckgo"
+    },
+    {
+        "name": "refresh",
+        "value": true
+    },
+    {
+        "name": "view",
+        "value": true
+    },
+    {
+        "name": "favouriteEnabled",
+        "value": true
     }
 ]
\ No newline at end of file