feat: pomodoro UI + general changes

- Remove settingsitem line at end
- Convert more divs to settingsitem
- Pomodoro Settings
- Add more descriptions
- Changes loaders

Co-authored-by: David Ralph <me@davidcralph.co.uk>

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

@@ -46,7 +46,28 @@ export default class Header extends PureComponent {
           </SettingsItem>
         ) : null}
         {this.props.zoomSetting ? (
-          <div className="settingsRow">
+          <SettingsItem
+            title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')}
+            subtitle="Slider to control how large the widget is"
+          >
+            <Slider
+              name={this.props.zoomSetting}
+              min="10"
+              max="400"
+              default="100"
+              display="%"
+              marks={values('zoom')}
+              category={this.props.zoomCategory || this.props.category}
+            />
+          </SettingsItem>
+        ) : null}
+      </>
+    );
+  }
+}
+
+{
+  /*<div className="settingsRow">
             <div className="content">
               <span className="title">
                 {getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')}
@@ -64,9 +85,5 @@ export default class Header extends PureComponent {
                 category={this.props.zoomCategory || this.props.category}
               />
             </div>
-          </div>
-        ) : null}
-      </>
-    );
-  }
+        </div>*/
 }

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

@@ -63,7 +63,8 @@ export default class SliderComponent extends PureComponent {
       <>
         <span className={'sliderTitle'}>
           {this.props.title}
-          <span>{Number(this.state.value / 100)}x</span>
+          {/*<span>{Number(this.state.value / 100)}x</span>*/}
+          <span>{Number(this.state.value)}</span>
           <span className="link" onClick={this.resetItem}>
             <MdRefresh />
             {variables.language.getMessage(

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

@@ -69,10 +69,9 @@ export default class AdvancedSettings extends PureComponent {
             </div>
           </div>
         ) : null}
-        <SettingsItem title="This should really be in time">
+        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.timezone.title')} subtitle='Choose a timezone from a list of hundreds instead of the automatic default.'>
           <Dropdown
             name="timezone"
-            label={getMessage('modals.main.settings.sections.advanced.timezone.title')}
             category="timezone"
             manual={true}
           >
@@ -88,7 +87,6 @@ export default class AdvancedSettings extends PureComponent {
         </SettingsItem>
         <SettingsItem title={getMessage('modals.main.settings.sections.advanced.tab_name')}>
           <Text
-            title={getMessage('modals.main.settings.sections.advanced.tab_name')}
             name="tabName"
             default={getMessage('tabname')}
             category="other"
@@ -108,24 +106,17 @@ export default class AdvancedSettings extends PureComponent {
             category="other"
           />
         </SettingsItem>
-        <div className="settingsRow">
-          <div className="content">
-            <span className="title">
-              {getMessage('modals.main.settings.sections.experimental.title')}
-            </span>
-            <span className="subtitle">
-              {getMessage('modals.main.settings.sections.advanced.experimental_warning')}
-            </span>
-          </div>
-          <div className="action">
-            <Switch
-              name="experimental"
-              text={getMessage('modals.main.settings.enabled')}
-              element=".other"
-            />
-          </div>
-        </div>
-
+        <SettingsItem
+          title={getMessage('modals.main.settings.sections.experimental.title')}
+          subtitle={getMessage('modals.main.settings.sections.advanced.experimental_warning')}
+          final={true}
+        >
+          <Switch
+            name="experimental"
+            text={getMessage('modals.main.settings.enabled')}
+            element=".other"
+          />
+        </SettingsItem>
         <Modal
           closeTimeoutMS={100}
           onRequestClose={() => this.setState({ resetModal: false })}

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

@@ -133,45 +133,40 @@ export default function AppearanceSettings() {
       <Checkbox text={getMessage('modals.main.settings.sections.appearance.accessibility.animations')} name='animations' category='other'/>
       <Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.toast_duration')} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' marks={values('toast')}
   display={' ' + getMessage('modals.main.settings.sections.appearance.accessibility.milliseconds')} />*/}
-      <div className="settingsRow">
-        <div className="content">
-          <span className="title">
-            {getMessage('modals.main.settings.sections.appearance.accessibility.title')}
-          </span>
-          <span className="subtitle">subtitle</span>
-        </div>
-        <div className="action">
-          <Dropdown
-            label={getMessage('modals.main.settings.sections.appearance.accessibility.text_shadow')}
-            name="textBorder"
-            category="other"
-          >
-            <option value="new">New</option> {/* default */}
-            <option value="true">Old</option> {/* old checkbox setting */}
-            <option value="none">None</option>
-          </Dropdown>
-          <Checkbox
-            text={getMessage('modals.main.settings.sections.appearance.accessibility.animations')}
-            name="animations"
-            category="other"
-          />
-          <Slider
-            title={getMessage(
-              'modals.main.settings.sections.appearance.accessibility.toast_duration',
-            )}
-            name="toastDisplayTime"
-            default="2500"
-            step="100"
-            min="500"
-            max="5000"
-            marks={values('toast')}
-            display={
-              ' ' +
-              getMessage('modals.main.settings.sections.appearance.accessibility.milliseconds')
-            }
-          />
-        </div>
-      </div>
+      <SettingsItem
+        title={getMessage('modals.main.settings.sections.appearance.accessibility.title')}
+        subtitle="subtitle"
+        final={true}
+      >
+        <Dropdown
+          label={getMessage('modals.main.settings.sections.appearance.accessibility.text_shadow')}
+          name="textBorder"
+          category="other"
+        >
+          <option value="new">New</option> {/* default */}
+          <option value="true">Old</option> {/* old checkbox setting */}
+          <option value="none">None</option>
+        </Dropdown>
+        <Checkbox
+          text={getMessage('modals.main.settings.sections.appearance.accessibility.animations')}
+          name="animations"
+          category="other"
+        />
+        <Slider
+          title={getMessage(
+            'modals.main.settings.sections.appearance.accessibility.toast_duration',
+          )}
+          name="toastDisplayTime"
+          default="2500"
+          step="100"
+          min="500"
+          max="5000"
+          marks={values('toast')}
+          display={
+            ' ' + getMessage('modals.main.settings.sections.appearance.accessibility.milliseconds')
+          }
+        />
+      </SettingsItem>
     </>
   );
 }

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

@@ -109,7 +109,7 @@ export default class Changelog extends PureComponent {
       return errorMessage(
         <div className="loaderHolder">
           <div id="loader"></div>
-          <span className="subtitle">Just be a sec.</span>
+          <span className="subtitle">Loading</span>
         </div>,
       );
     }

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

@@ -88,9 +88,8 @@ export default class DateSettings extends PureComponent {
           zoomSetting="zoomDate"
           switch={true}
         />
-        <SettingsItem title="Date Type">
+        <SettingsItem title={getMessage('modals.main.settings.sections.time.type')}>
           <Dropdown
-            label={getMessage('modals.main.settings.sections.time.type')}
             name="dateType"
             onChange={(value) => this.setState({ dateType: value })}
             category="date"
@@ -103,7 +102,7 @@ export default class DateSettings extends PureComponent {
             </option>
           </Dropdown>
         </SettingsItem>
-        <SettingsItem title="Extra Options">
+        <SettingsItem title="Extra Options" final={true}>
           <Checkbox
             name="weeknumber"
             text={getMessage('modals.main.settings.sections.date.week_number')}

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

@@ -59,6 +59,7 @@ export default class GreetingSettings extends PureComponent {
         <SettingsItem
           title={getMessage('modals.main.settings.sections.greeting.birthday')}
           subtitle={getMessage('modals.main.settings.enabled')}
+          final={true}
         >
           <Switch
             name="birthdayenabled"

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

@@ -73,6 +73,7 @@ export default class Message extends PureComponent {
         <SettingsItem
           title={this.getMessage('modals.main.settings.sections.message.text')}
           subtitle=""
+          final={true}
         >
           <button onClick={() => this.modifyMessage('add')}>
             {this.getMessage('modals.main.settings.sections.message.add')} <MdAdd />

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

@@ -50,10 +50,10 @@ export default function Navbar() {
       {showRefreshOptions ? (
         <SettingsItem
           title={getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
+          subtitle='Choose what is refreshed when you click the refresh button'
           final={true}
         >
           <Dropdown
-            label={getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
             name="refreshOption"
             category="navbar"
           >

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

@@ -218,11 +218,10 @@ export default class QuoteSettings extends PureComponent {
           <Checkbox name="quoteModern" text="Use modern style" />
         </SettingsItem>
         <SettingsItem
-          title={this.getMessage('modals.main.settings.sections.background.type.title')}
-          subtitle="subtitle"
+          title="Source"
+          subtitle="Choose the source of the quotes, pick between the following options"
         >
           <Dropdown
-            label={this.getMessage('modals.main.settings.sections.background.type.title')}
             name="quoteType"
             onChange={(value) => this.setState({ quoteType: value })}
             category="quote"

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

@@ -5,9 +5,13 @@ import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Radio from '../Radio';
+import Slider from '../Slider';
+import Switch from '../Switch';
 
 import SettingsItem from '../SettingsItem';
 
+import { values } from 'modules/helpers/settings/modals';
+
 export default class TimeSettings extends PureComponent {
   constructor() {
     super();
@@ -122,6 +126,38 @@ export default class TimeSettings extends PureComponent {
           </Dropdown>
         </SettingsItem>
         {timeSettings}
+        <SettingsItem
+          title="Pomodoro"
+          subtitle="The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. It uses a timer to break work into intervals, typically 25 minutes in length, separated by short breaks"
+          final={true}
+        >
+          <Switch
+            name='Pomodoro'
+            text={getMessage('modals.main.settings.enabled')}
+            category='Pomodoro'
+            element='Pomodoro'
+          />
+          <Slider
+            title="Work Length"
+            name="pomdoroWorkLength"
+            default="25"
+            step="1"
+            min="5"
+            max="60"
+            marks={values('pomodoroWork')}
+            display={' ' + 'ms'}
+          />
+          <Slider
+            title="Break Length"
+            name="PomodoroBreakLength"
+            default="5"
+            step="1"
+            min="1"
+            max="45"
+            marks={values('pomodoroBreak')}
+            display={' ' + 'ms'}
+          />
+        </SettingsItem>
       </>
     );
   }

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

@@ -203,12 +203,21 @@ export default class TimeSettings extends PureComponent {
           text={getMessage('modals.main.settings.sections.weather.extra_info.max_temp')}
           category="weather"
         />
-        <Checkbox name="feelsliketemp" text={'Feels like temperature'} category="weather" />
+        <Checkbox 
+          name="feelsliketemp" 
+          text={'Feels like temperature'} 
+          category="weather" 
+        />
         <Checkbox
           name="atmosphericpressure"
           text={getMessage('modals.main.settings.sections.weather.extra_info.atmospheric_pressure')}
           category="weather"
         />
+        <Checkbox
+          name="upcomingForecast"
+          text="Upcoming Forecast"
+          category="weather"
+        />
       </>
     );
   }