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