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/Main.jsx

@@ -20,7 +20,7 @@ const renderLoader = (current) => (
         <div className="emptyMessage">
           <div className="loaderHolder">
             <div id="loader"></div>
-            <span className="subtitle">Just be a sec.</span>
+            <span className="subtitle">Loading</span>
           </div>
         </div>
       </div>

src/components/modals/main/marketplace/sections/Create.jsx

@@ -303,7 +303,7 @@ export default class Create extends PureComponent {
             onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}
           />
         </SettingsItem>
-        <SettingsItem title={getMessage('modals.main.addons.create.metadata.description')}>
+        <SettingsItem title={getMessage('modals.main.addons.create.metadata.description')} final={true}>
           <TextField
             label={getMessage('modals.main.addons.create.metadata.description')}
             varient="outlined"
@@ -571,7 +571,7 @@ export default class Create extends PureComponent {
         <div className="flexTopMarketplace">
           {this.state.currentTab !== 1 && (
             <div className="returnButton">
-              <Tooltip title="back" key="cheese">
+              <Tooltip title="Go back" key="cheese">
                 <MdArrowBack
                   className="backArrow"
                   onClick={() => this.changeTab(this.state.currentTab - 1)}

src/components/modals/main/marketplace/sections/Marketplace.jsx

@@ -244,7 +244,7 @@ export default class Marketplace 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/scss/marketplace/_main.scss

@@ -187,6 +187,7 @@
   flex-flow: column;
   align-items: center;
   gap: 15px;
+  min-width: 100px;
   @include themed() {
     padding: 45px;
     border-radius: t($borderRadius);

src/components/modals/main/scss/settings/modules/_resetmodal.scss

@@ -26,4 +26,8 @@
   display: flex;
   flex-flow: row;
   justify-content: space-around;
+  button {
+    display: flex !important;
+    flex-flow: row;
+  }
 }

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"
+        />
       </>
     );
   }

src/components/widgets/time/Clock.jsx

@@ -2,8 +2,11 @@ import { PureComponent, Suspense, lazy } from 'react';
 
 import { convertTimezone } from 'modules/helpers/date';
 import EventBus from 'modules/helpers/eventbus';
+import { MdSkipNext, MdOutlineRestartAlt, MdPlayArrow } from 'react-icons/md';
+import Tooltip from '../../helpers/tooltip/Tooltip';
 
 import './clock.scss';
+import Pomodoro from './Pomodoro';
 
 const Analog = lazy(() => import('react-clock'));
 const renderLoader = () => <></>;
@@ -16,6 +19,7 @@ export default class Clock extends PureComponent {
     this.state = {
       time: '',
       ampm: '',
+      nowGlobal: new Date(),
     };
   }
 
@@ -132,10 +136,15 @@ export default class Clock extends PureComponent {
 
   render() {
     let clockHTML = (
-      <span className="clock clock-container">
-        {this.state.time}
-        <span className="ampm">{this.state.ampm}</span>
-      </span>
+      <>
+        <span className="clock clock-container">
+          {this.state.time}
+          <span className="ampm">{this.state.ampm}</span>
+        </span>
+        {localStorage.getItem('Pomodoro') === 'true' ? (
+          <Pomodoro hours={this.state.nowGlobal.getHours} minutes={this.state.nowGlobal.getMinutes} />
+        ) : null}
+      </>
     );
 
     const enabled = (setting) => {

src/components/widgets/time/Pomodoro.jsx

@@ -0,0 +1,45 @@
+import variables from 'modules/variables';
+import { PureComponent, createRef } from 'react';
+
+import { nth, convertTimezone } from 'modules/helpers/date';
+import EventBus from 'modules/helpers/eventbus';
+import Tooltip from '../../helpers/tooltip/Tooltip';
+import { MdSkipNext, MdOutlineRestartAlt, MdPlayArrow, MdWork } from 'react-icons/md';
+
+import './clock.scss';
+
+export default function Pomodoro({ hours, minutes }) {
+  return (
+    <div className="pomodoro">
+      <div className="pomodoroTime">
+        <Tooltip title="Work Time">
+          {' '}
+          <span className="type">
+            <MdWork />
+          </span>
+        </Tooltip>
+        {/*<span>{localStorage.getItem('PomodoroBreakLength')}{localStorage.getItem('pomdoroWorkLength')}</span>*/}
+      </div>
+      <div className="pomodoroControls">
+        <Tooltip title="Restart">
+          <button onClick={() => this.favourite()}>
+            <MdOutlineRestartAlt className="copyButton" />
+          </button>
+        </Tooltip>
+        <Tooltip title="Resume">
+          <button onClick={() => this.favourite()}>
+            <MdPlayArrow className="copyButton" />
+          </button>
+        </Tooltip>
+        <Tooltip title="Skip Stage">
+          <button onClick={() => this.favourite()}>
+            <MdSkipNext className="copyButton" />
+          </button>
+        </Tooltip>
+      </div>
+      <div className="pomdoroTime">
+        <span className="timeRemaning">{localStorage.getItem('pomdoroWorkLength')}:00</span>
+      </div>
+    </div>
+  );
+}

src/components/widgets/time/clock.scss

@@ -38,3 +38,38 @@
   @extend %basic;
   padding: 1rem;
 }
+
+.pomodoro {
+  margin-top: -20px;
+  @extend %basic; 
+  padding: 5px 15px 5px 15px;
+  font-size: 12px;
+  display: flex;
+  flex-flow: row;
+  gap: 10px;
+  align-items: center;
+  .pomodoroTime {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 5px;
+    .timeRemaining {
+      
+    }
+    .type {
+      color: #ccc;
+      font-weight: bold;
+      text-transform: uppercase;
+      display: grid;
+    }
+  }
+  .pomodoroControls {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-evenly;
+    gap: 5px;
+  }
+  button {
+    @include basicIconButton(5px, 11px, ui);
+  }
+}

src/components/widgets/weather/Weather.jsx

@@ -203,6 +203,8 @@ export default class Weather extends PureComponent {
             {enabled('showlocation') ? <span className="loc">{this.state.location}</span> : null}
           </div>
           <div className="expanded-info">
+          {enabled('upcomingForecast') ? (
+            <>
             <span className="subtitle">Upcoming Forecast</span>
             <div className="upcomingForecast">
               <div>
@@ -221,6 +223,9 @@ export default class Weather extends PureComponent {
                 <span className="minmax">{minmax()}</span>
               </div>
             </div>
+            </>
+            ) : null}
+
             <span className="subtitle">Extra Information</span>
             {enabled('cloudiness') ? (
               <span>

src/modules/helpers/settings/modals.js

@@ -65,6 +65,18 @@ export function values(type) {
       { value: 200, label: '2x' },
       { value: 400, label: '4x' },
     ],
+    pomodoroWork: [
+      { value: 5, label: '5m' },
+      { value: 25, label: '25m' },
+      { value: 45, label: '45m' },
+      { value: 60, label: '60m' },
+    ],
+    pomodoroBreak: [
+      { value: 1, label: '1s' },
+      { value: 5, label: '5m' },
+      { value: 25, label: '25m' },
+      { value: 45, label: '45m' },
+    ],
     toast: [
       { value: 500, label: '0.5s' },
       { value: 1000, label: '1s' },

src/translations/en_GB.json

@@ -47,7 +47,7 @@
   "modals": {
     "main": {
       "title": "Options",
-      "loading": "Loading...",
+      "loading": "Loading..",
       "file_upload_error": "File is over 2MB",
       "navbar": {
         "settings": "Settings",

src/translations/en_US.json

@@ -47,7 +47,7 @@
   "modals": {
     "main": {
       "title": "Options",
-      "loading": "Loading...",
+      "loading": "Loading..",
       "file_upload_error": "File is over 2MB",
       "navbar": {
         "settings": "Settings",