refactor: Reduce bundle size, replace date picker and merge function, add widget order feature etc

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

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

@@ -34,7 +34,8 @@ export default function AppearanceSettings(props) {
 
       <h3>{appearance.font.title}</h3>
       <Text title={appearance.font.custom} name='font' upperCaseFirst={true} />
-      <br/><br/>
+      <br/>
+      <Checkbox name='fontGoogle' text={appearance.font.google} />
       <Dropdown label='Font Weight' name='fontweight'>
         {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
         <option className='choices' value='100'>Thin</option>
@@ -52,8 +53,6 @@ export default function AppearanceSettings(props) {
         <option className='choices' value='italic'>Italic</option>
         <option className='choices' value='oblique'>Oblique</option>
       </Dropdown>
-      <br/>
-      <Checkbox name='fontGoogle' text={appearance.font.google} />
 
       <h3>{appearance.accessibility.title}</h3>
       <Checkbox name='animations' text={appearance.animations} betaFeature={true} />

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

@@ -110,7 +110,7 @@ export default class BackgroundSettings extends React.PureComponent {
       const newState = {
         gradientSettings: {
           ...s.gradientSettings,
-          gradient: [...initGradients, lastGradient, { 'colour': localStorage.getItem('darkTheme') === 'true' ? '#000000' : '#ffffff', stop: 100 }].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
+          gradient: [...initGradients, lastGradient, { 'colour': localStorage.getItem('theme') === 'dark' ? '#000000' : '#ffffff', stop: 100 }].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
         }
       };
       return newState;

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

@@ -4,7 +4,8 @@ import Checkbox from '../Checkbox';
 import Switch from '../Switch';
 import Text from '../Text';
 
-import DatePicker from 'react-date-picker';
+import DayPickerInput from 'react-day-picker/DayPickerInput';
+import 'react-day-picker/lib/style.css';
 
 export default class GreetingSettings extends React.PureComponent {
   constructor(...args) {
@@ -39,7 +40,7 @@ export default class GreetingSettings extends React.PureComponent {
         <Checkbox name='birthdayage' text='Birthday Age'/>
         <ul>
           <p>{greeting.birthday_date}</p>
-          <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>
+          <DayPickerInput onDayChange={(data) => this.changeDate(data)} value={this.state.birthday} />
         </ul>
       </div>
     );

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { sortableContainer, sortableElement } from 'react-sortable-hoc';
+import arrayMove from 'array-move';
+import DragHandleIcon from '@material-ui/icons/DragIndicator';
+
+const SortableItem = sortableElement(({value}) => (
+  <li className='sortableitem'>
+    <DragHandleIcon/>
+    {value.charAt(0).toUpperCase() + value.slice(1)}
+  </li>
+));
+  
+const SortableContainer = sortableContainer(({children}) => {
+  return <ul className='sortablecontainer'>{children}</ul>;
+});
+
+export default class OrderSettings extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      items: JSON.parse(localStorage.getItem('order'))
+    };
+  }
+
+  onSortEnd = ({oldIndex, newIndex}) => {
+    this.setState(({items}) => ({
+      items: arrayMove(items, oldIndex, newIndex)
+    }));
+  };
+
+  componentDidUpdate() {
+    localStorage.setItem('order', JSON.stringify(this.state.items));
+  }
+
+  render() {
+    return (
+      <div>
+        <h2>Order</h2>
+        <SortableContainer onSortEnd={this.onSortEnd}>
+          {this.state.items.map((value, index) => (
+            <SortableItem key={`item-${value}`} index={index} value={value} />
+          ))}
+        </SortableContainer>
+      </div>
+    );
+  }
+}

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

@@ -64,7 +64,7 @@ export default class TimeSettings extends React.PureComponent {
         {timeSettings}
 
         <h3>{time.date.title}</h3>
-        <Checkbox name='date' text={this.language.enabled} />
+        <Switch name='date' text={this.language.enabled} />
         <Checkbox name='dayofweek' text={time.date.day_of_week} />
         <Checkbox name='datenth' text={time.date.datenth} />
         <Checkbox name='short' text={time.date.short_date} betaFeature={true} />