feat: finish quick links, start weather widget, bug fixes etc

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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Switch from '../Switch';
+import Checkbox from '../Checkbox';
+
+export default function QuickLinks() {
+  const language = window.language.modals.main.settings.sections.quicklinks;
+
+  return (
+    <>
+      <h2>{language.title}</h2>
+      <Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} />
+      <Checkbox name='quicklinksnewtab' text='Open in new tab' />
+      <Checkbox name='quicklinkstooltip' text='Tooltip' />
+      <Checkbox name='quicklinksnewtab' text='Chrome Apps' />
+    </>
+  );
+}

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

@@ -88,6 +88,7 @@ export default class TimeSettings extends React.PureComponent {
     switch (this.state.dateType) {
       case 'short': dateSettings = shortSettings; break;
       case 'long': dateSettings = longSettings; break;
+      default: break;
     }
 
     return (

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

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import Switch from '../Switch';
+import Radio from '../Radio';
+
+export default class TimeSettings extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      location: localStorage.getItem('location') || 'London'
+    };
+    this.language = window.language.modals.main.settings;
+  }
+
+  getLocation() {
+    if (window.navigator.geolocation) {
+      window.navigator.geolocation.getCurrentPosition(console.log, console.log);
+    }
+  }
+
+  componentDidUpdate() {
+    localStorage.setItem('location', this.state.location);
+  }
+
+  render() {
+    const language = window.language.modals.main.settings.sections.weather;
+
+    const tempFormat = [
+      {
+        'name': 'Celsius',
+        'value': 'celsius'
+      },
+      {
+        'name': 'Fahrenheit',
+        'value': 'fahrenheit'
+      },
+      {
+        'name': 'Kelvin',
+        'value': 'kelvin'
+      }
+    ];
+      
+    return (
+      <>
+        <h2>{language.title}</h2>
+        <Switch name='weatherEnabled' text={this.language.enabled} />
+        <Radio name='tempformat' title='Temperature Format' options={tempFormat} />
+        <ul>
+          <p>Location <span className='modalLink' onClick={() => this.getLocation()}>Auto</span></p>
+          <input type='text' value={this.state.location} onChange={(e) => this.setState({ location: e.target.value })}></input>
+        </ul>
+      </>
+    );
+  }
+}

src/components/modals/main/tabs/Settings.jsx

@@ -12,6 +12,8 @@ import Advanced from '../settings/sections/Advanced';
 import Changelog from '../settings/sections/Changelog';
 import Order from '../settings/sections/Order';
 import Experimental from '../settings/sections/Experimental';
+import QuickLinks from '../settings/sections/QuickLinks';
+import Weather from '../settings/sections/Weather';
 
 import Tabs from './backend/Tabs';
 
@@ -25,6 +27,8 @@ export default function Settings() {
         <div label={language.greeting.title}><Greeting/></div>
         <div label={language.background.title}><Background/></div>
         <div label={language.search.title}><Search/></div>
+        <div label={language.quicklinks.title}><QuickLinks/></div>
+        <div label={language.weather.title}><Weather/></div>
         <div label={language.appearance.title}><Appearance/></div>
         <div label={language.order.title}><Order/></div>
         <div label={language.language.title}><Language/></div>

src/components/modals/main/tabs/backend/Tab.jsx

@@ -7,16 +7,19 @@ import Marketplace from '@material-ui/icons/ShoppingBasket';
 
 // Settings
 import Time from '@material-ui/icons/AccessAlarm';
-import Greeting from '@material-ui/icons/EmojiPeople';
-import Quote from '@material-ui/icons/FormatQuote';
-import Background from '@material-ui/icons/Photo';
+import Greeting from '@material-ui/icons/EmojiPeopleOutlined';
+import Quote from '@material-ui/icons/FormatQuoteOutlined';
+import Background from '@material-ui/icons/PhotoOutlined';
 import Search from '@material-ui/icons/Search';
-import Appearance from '@material-ui/icons/FormatPaint';
+import Appearance from '@material-ui/icons/FormatPaintOutlined';
 import Language from '@material-ui/icons/Translate';
-import Changelog from '@material-ui/icons/NewReleasesRounded';
-import About from '@material-ui/icons/Info';
-import Experimental from '@material-ui/icons/BugReport';
+import Changelog from '@material-ui/icons/NewReleasesOutlined';
+import About from '@material-ui/icons/InfoOutlined';
+import Experimental from '@material-ui/icons/BugReportOutlined';
 import Order from '@material-ui/icons/List';
+import Weather from '@material-ui/icons/CloudOutlined';
+import Advanced from '@material-ui/icons/SettingsOutlined';
+import QuickLinks from '@material-ui/icons/Link';
 
 // Store
 import Added from '@material-ui/icons/AddCircle';
@@ -50,10 +53,12 @@ export default function Tab(props) {
     case language.quote.title: icon = <Quote/>; break;
     case language.background.title: icon = <Background/>; break;
     case language.search.title: icon = <Search/>; break;
+    case language.weather.title: icon = <Weather/>; break;
+    case language.quicklinks.title: icon = <QuickLinks/>; break;
     case language.appearance.title: icon = <Appearance/>; break;
     case language.order.title: icon = <Order/>; break;
     case language.language.title: icon = <Language/>; divider = true; break;
-    case language.advanced.title: icon = <Settings/>; break;
+    case language.advanced.title: icon = <Advanced/>; break;
     case language.experimental.title: icon = <Experimental/>; divider = true; break;
     case language.changelog: icon = <Changelog/>; break;
     case language.about.title: icon = <About/>; break;