feat: Reminder settings UI

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

@@ -18,3 +18,54 @@
     @include modal-button(standard);
   }
 }
+
+.reminderSettingsHolder {
+  display: flex;
+  flex-flow: column;
+  @include themed() {
+    input[type='text'] {
+      width: 260px;
+      background: t($modal-sidebar);
+      border: 3px solid t($modal-sidebarActive);
+      color: t($color);
+      padding: 15px 20px;
+      border-radius: 4px;
+      display: flex !important;
+      cursor: pointer;
+
+      &::-webkit-calendar-picker-indicator {
+        cursor: pointer;
+      }
+    }
+    .reminderSetting {
+      border-radius: t($borderRadius);
+      display: flex;
+      flex-flow: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: 15px;
+      .link {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+      }
+      div {
+        display: flex;
+        flex-flow: column;
+        gap: 10px;
+        align-items: center;
+      }
+      background: t($modal-sidebar);
+      .colorPicker {
+        align-items: center;
+        padding: 10px 15px 10px 15px;
+        border-radius: 100px;
+        display: flex;
+        flex-flow: row;
+        gap: 25px;
+        background: t($modal-sidebarActive);
+        box-shadow: 0 0 0 1px t($modal-sidebar);
+      }
+    }
+  }
+}

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

@@ -1,12 +1,20 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import Header from '../Header';
-
+import Text from '../Text';
+import { MdRemoveCircleOutline } from 'react-icons/md';
+import SettingsItem from '../SettingsItem';
 export default class ReminderSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
       colour: localStorage.getItem('reminderColour') || '#ffa500',
+      reminder: JSON.parse(localStorage.getItem('reminder')) || [
+        {
+          value: '',
+          done: false,
+        },
+      ],
     };
   }
 
@@ -16,6 +24,15 @@ export default class ReminderSettings extends PureComponent {
     localStorage.setItem('reminderColour', colour);
   }
 
+  addReminder() {
+    let reminderTitle = this.state.todo;
+    reminderTitle.push({
+      value: '',
+      done: false,
+    });
+    this.updateReminderState(reminderTitle);
+  }
+
   render() {
     const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
     return (
@@ -28,7 +45,7 @@ export default class ReminderSettings extends PureComponent {
           zoomSetting="zoomReminder"
           switch={true}
         />
-        <input
+        {/*<input
           type="color"
           name="colour"
           className="colour"
@@ -37,7 +54,37 @@ export default class ReminderSettings extends PureComponent {
         ></input>
         <label htmlFor={'colour'} className="customBackgroundHex">
           {this.state.colour}
-        </label>
+    </label>*/}
+        <SettingsItem final={true} title="Add reminder" subtitle="Add reminder">
+          <button onClick={() => this.addReminder()}>Add reminder</button>
+        </SettingsItem>
+        <div className="reminderSettingsHolder">
+            <div className="reminderSetting">
+              <div>
+                <div className="colorPicker">
+                  <input
+                    type="color"
+                    name="colour"
+                    className="colour"
+                    onChange={(event) => this.updateColour(event)}
+                    value={this.state.colour}
+                  ></input>
+                  <label htmlFor={'colour'} className="customBackgroundHex">
+                    {this.state.colour}
+                  </label>
+                </div>
+                <span className="link">
+                  <MdRemoveCircleOutline /> Remove
+                </span>
+              </div>
+              <div>
+                <span className="title">
+                  <input type="text" id="lname" placeholder="Name" />
+                </span>
+                <input type="date" required />
+              </div>
+            </div>
+        </div>
       </>
     );
   }

src/components/widgets/background/PhotoInformation.jsx

@@ -35,6 +35,8 @@ const downloadImage = async (info) => {
   variables.stats.postEvent('feature', 'Background download');
 };
 
+
+
 // todo: copy link to unsplash/pexels page not image url
 const copyImage = (info) => {
   variables.stats.postEvent('feature', 'Background copied');
@@ -134,6 +136,7 @@ export default function PhotoInformation({ info, url, api }) {
     );
   }
 
+
   const downloadEnabled =
     localStorage.getItem('downloadbtn') === 'true' && !info.offline && !info.photographerURL && api;
   const downloadBackground = () => {
@@ -279,6 +282,7 @@ export default function PhotoInformation({ info, url, api }) {
                   <Download onClick={() => downloadImage(info)} />
                 </Tooltip>
               </div>
+              <span className='subtitle' style={{marginBottom: '20px'}}>Description</span>
               <div className="extra-content">
                 <span className="subtitle">
                   {variables.language.getMessage(

src/components/widgets/background/scss/_photoinformation.scss

@@ -190,6 +190,16 @@
   transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
   width: 300px;
   padding: 10px;
+  .link {
+    text-decoration: none;
+    cursor: pointer;
+    @include themed() {
+      color: t($link);
+    }
+    &:hover {
+      opacity: 0.8;    
+    }
+  }
   &:hover {
     padding: 20px;
     height: auto;

src/components/widgets/reminder/Reminder.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import './reminder.scss';
-
+import Tooltip from '../../helpers/tooltip/Tooltip'
 import { MdClose, MdSnooze, MdWork } from 'react-icons/md';
 
 export default class Reminder extends React.PureComponent {
@@ -21,8 +21,8 @@ export default class Reminder extends React.PureComponent {
           <span className="subtitle">Time</span>
         </div>
         <div className="icons">
-          <MdClose />
-          <MdSnooze />
+          <Tooltip title='Remove'><MdClose /></Tooltip>
+          <Tooltip title='Snooze'><MdSnooze /></Tooltip>
         </div>
       </div>
     );

vite.config.js

@@ -2,8 +2,20 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 
+const isProd = process.env.NODE_ENV === 'production';
+
+
 export default defineConfig({
   plugins: [react()],
+  server: {
+    hmr: {
+      protocol: 'ws',
+      host: 'localhost',
+    }
+  },
+  build: {
+    minify: isProd,
+  },
   resolve: {
     extensions: ['.js', '.jsx'],
     alias: {