feat: extra birthday feature, cleanup

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

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

@@ -157,8 +157,12 @@ input[type=color]::-moz-color-swatch {
   color: map-get($button-colours, 'reset') !important;
 }
 
+.MuiFormControlLabel-labelPlacementStart {
+  margin-left: 0px;
+}
+
 .MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
-  background-color: var(--sidebar) !important;
+  background: darkgray !important;
 }
 
 .reminder-info {

src/components/modals/main/settings/Dropdown.jsx

@@ -1,18 +1,26 @@
 import React from 'react';
 
 export default class Dropdown extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      value: localStorage.getItem(this.props.name) || ''
+    };
+  }
+
   getLabel() {
     return this.props.label ? <label htmlFor={this.props.name}>{this.props.label}</label> : null;
   }
 
-  componentDidMount() {
-    document.getElementById(this.props.name).value = localStorage.getItem(this.props.name);
-  }
-
-  onChange = () => {
-    localStorage.setItem(this.props.name, document.getElementById(this.props.name).value);
+  onChange(value) {
+    this.setState({
+      value: value
+    });
+  
+    localStorage.setItem(this.props.name, value);
+  
     if (this.props.onChange) {
-      this.props.onChange();
+      this.props.onChange(value);
     }
   }
 
@@ -21,7 +29,7 @@ export default class Dropdown extends React.PureComponent {
       <React.Fragment>
         {this.getLabel()}
         <div className='dropdown' style={{ display: 'inline' }}>
-          <select name={this.props.name} id={this.props.name} onChange={this.onChange}>
+          <select name={this.props.name} value={this.state.value} onChange={(e) => this.onChange(e.target.value)}>
             {this.props.children}
           </select>
         </div>

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

@@ -34,33 +34,25 @@ export default function AppearanceSettings(props) {
 
       <h3>{appearance.font.title}</h3>
       <Text title={appearance.font.custom} name='font' upperCaseFirst={true} />
+      <br/><br/>
+      <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>
+        <option className='choices' value='200'>Extra-Light</option>
+        <option className='choices' value='300'>Light</option>
+        <option className='choices' value='400'>Normal</option>
+        <option className='choices' value='500'>Medium</option>
+        <option className='choices' value='600'>Semi-Bold</option>
+        <option className='choices' value='700'>Bold</option>
+        <option className='choices' value='800'>Extra-Bold</option>
+      </Dropdown>
+      <br/><br/>
+      <Dropdown label='Font Style' name='fontstyle'>
+        <option className='choices' value='normal'>Normal</option>
+        <option className='choices' value='italic'>Italic</option>
+        <option className='choices' value='oblique'>Oblique</option>
+      </Dropdown>
       <br/>
-      <Dropdown
-          label='Font Weight'
-          name='fontweight'
-          id='fontWeight'
-          onChange={() => localStorage.setItem('fontWeight', document.getElementById('fontWeight').value)}>
-            {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
-            <option className='choices' value='100'>Thin</option>
-            <option className='choices' value='200'>Extra-Light</option>
-            <option className='choices' value='300'>Light</option>
-            <option className='choices' value='400'>Normal</option>
-            <option className='choices' value='500'>Medium</option>
-            <option className='choices' value='600'>Semi-Bold</option>
-            <option className='choices' value='700'>Bold</option>
-            <option className='choices' value='800'>Extra-Bold</option>
-      </Dropdown>
-      <br /><br />
-      <Dropdown
-          label='Font Style'
-          name='fontstyle'
-          id='fontStyle'
-          onChange={() => localStorage.setItem('fontStyle', document.getElementById('fontStyle').value)}>
-            <option className='choices' value='normal'>Normal</option>
-            <option className='choices' value='italic'>Italic</option>
-            <option className='choices' value='oblique'>Oblique</option>
-      </Dropdown>
-      <br /><br />
       <Checkbox name='fontGoogle' text={appearance.font.google} />
 
       <h3>{appearance.accessibility.title}</h3>

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

@@ -5,6 +5,7 @@ import Dropdown from '../Dropdown';
 import FileUpload from '../FileUpload';
 import Slider from '../Slider';
 import Text from '../Text';
+import Switch from '../Switch';
 
 import { ColorPicker } from 'react-color-gradient-picker';
 import hexToRgb from '../../../../../modules/helpers/background/hexToRgb';
@@ -203,7 +204,7 @@ export default class BackgroundSettings extends React.PureComponent {
     return (
       <div>
         <h2>{background.title}</h2>
-        <Checkbox name='background' text='Enabled' />
+        <Switch name='background' text={this.language.enabled} />
         <h3>{background.buttons.title}</h3>
         <Checkbox name='view' text={background.buttons.view} />
         <Checkbox name='favouriteEnabled' text={background.buttons.favourite} />

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

@@ -16,11 +16,6 @@ export default class GreetingSettings extends React.PureComponent {
   }
 
   changeDate(data) {
-    //soon
-    if (data === 'reset') {
-      return;
-    }
-
     localStorage.setItem('birthday', data);
 
     this.setState({
@@ -41,6 +36,7 @@ export default class GreetingSettings extends React.PureComponent {
 
         <h3>{greeting.birthday}</h3>
         <Checkbox name='birthdayenabled' text={this.language.enabled} />
+        <Checkbox name='birthdayage' text='Birthday Age'/>
         <ul>
           <p>{greeting.birthday_date}</p>
           <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>

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

@@ -13,7 +13,7 @@ export default function LanguageSettings () {
       <h2>{language.title}</h2>
       <Radio name='language' options={languages} />
       <br/>
-      <Dropdown label={language.quote} name='quotelanguage' id='quotelanguage' onChange={() => localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}>
+      <Dropdown label={language.quote} name='quotelanguage'>
         <option className='choices' value='English'>English</option>
         <option className='choices' value='French'>Français</option>
       </Dropdown>

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import Checkbox from '../Checkbox';
 import Text from '../Text';
+import Switch from '../Switch';
 
 export default function QuoteSettings(props) {
   const { quote } = window.language.modals.main.settings.sections;
@@ -9,7 +10,7 @@ export default function QuoteSettings(props) {
   return (
     <div>
       <h2>{quote.title}</h2>
-      <Checkbox name='quote' text={window.language.modals.main.settings.enabled}/>
+      <Switch name='quote' text={window.language.modals.main.settings.enabled} />
       <Checkbox name='authorLink' text={quote.author_link}/>
       <Text title={quote.custom} name='customQuote'/>
       <Text title={quote.custom_author} name='customQuoteAuthor'/>

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

@@ -28,8 +28,6 @@ export default class SearchSettings extends React.PureComponent {
     } else {
       localStorage.removeItem('customSearchEngine');
     }
-
-    document.getElementById('searchEngine').value = searchEngine;
   }
 
   componentDidUpdate() {
@@ -64,14 +62,11 @@ export default class SearchSettings extends React.PureComponent {
         <Checkbox name='searchBar' text={language.enabled} />
         <Checkbox name='voiceSearch' text={search.voice_search} />
         <ul>
-          <Dropdown label={search.search_engine}
-            name='searchEngine'
-            id='searchEngine'
-            onChange={() => this.setSearchEngine(document.getElementById('searchEngine').value)} >
-          {searchEngines.map((engine) =>
-            <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
-          )}
-          <option className='choices' value='custom'>{search.custom.split(' ')[0]}</option>
+          <Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
+            {searchEngines.map((engine) =>
+              <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
+            )}
+            <option className='choices' value='custom'>{search.custom.split(' ')[0]}</option>
           </Dropdown>
         </ul>
         <ul id='searchEngineInput' style={{ display: 'none' }}>

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
+import Switch from '../Switch';
 
 export default class TimeSettings extends React.PureComponent {
   constructor(...args) {
@@ -12,9 +13,7 @@ export default class TimeSettings extends React.PureComponent {
     this.language = window.language.modals.main.settings;
   }
 
-  changeType() {
-    const value = document.getElementById('timeType').value;
-    localStorage.setItem('timeType', value);
+  changeType(value) {
     this.setState({
       timeType: value
     });
@@ -55,8 +54,8 @@ export default class TimeSettings extends React.PureComponent {
     return (
       <div>
         <h2>{time.title}</h2>
-        <Checkbox name='time' text={this.language.enabled} />
-        <Dropdown label='Type' name='timeType' onChange={() => this.changeType()}>
+        <Switch name='time' text={this.language.enabled} />
+        <Dropdown label='Type' name='timeType' onChange={(value) => this.changeType(value)}>
           <option className='choices' value='digital'>{time.digital.title}</option>
           <option className='choices' value='analogue'>{time.analogue.title}</option>
           <option className='choices' value='percentageComplete'>{time.percentage_complete}</option>

src/components/widgets/greeting/Greeting.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import dtf from '@eartharoid/dtf';
+
 import './greeting.scss';
 
 export default class Greeting extends React.PureComponent {
@@ -34,6 +36,12 @@ export default class Greeting extends React.PureComponent {
     return message;
   }
 
+  calculateAge(date) {
+    const diff = Date.now() - date.getTime();
+    const birthday = new Date(diff);
+    return Math.abs(birthday.getUTCFullYear() - 1970);
+  }
+
   getGreeting() {
     const now = new Date();
     const hour = now.getHours();
@@ -73,7 +81,12 @@ export default class Greeting extends React.PureComponent {
     // Birthday
     const birth = new Date(localStorage.getItem('birthday'));
     if (localStorage.getItem('birthdayenabled') === 'true' && birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) {
-      message = this.language.birthday;
+      if (localStorage.getItem('birthdayage')) {
+        const text = this.language.birthday.split(' ');
+        message = `${text[0]} ${dtf.nth(this.calculateAge(birth))} ${text[1]}`;
+      } else {
+        message = this.language.birthday;
+      }
     }
 
     // Set the state to the greeting string