style: New date selection on custom events

src/components/Elements/MainModal/scss/modules/_modalTabContent.scss

@@ -149,27 +149,6 @@ table {
   padding: 25px;
   justify-content: space-between;
 
-  input[type="number"] {
-    @include themed() {
-      background: t($modal-sidebar);
-      box-shadow: t($boxShadow);
-      color: t($color);
-    }
-    text-align: center;
-    border-radius: 12px;
-    height: 40px;
-    font-size: 1rem;
-    display: flex;
-    align-items: center;
-    flex-flow: row;
-    justify-content: center;
-    gap: 20px;
-    transition: 0.5s;
-    cursor: pointer;
-    border: 0;
-    max-width: 40px;
-  }
-
   @include themed {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);
@@ -224,9 +203,45 @@ table {
   gap: 25px;
 }
 
-.eventDateControl {
+.eventDateSelection {
   display: flex !important;
-  flex-flow: column !important;
+  flex-flow: row !important;
   gap: 5px !important;
   text-align: center !important;
-}
+  @include themed() {
+    background: t($modal-sidebar);
+    box-shadow: t($boxShadow);
+    color: t($color) !important;
+  }
+  hr {
+    height: 100%;
+    margin-right: 5px;
+    @include themed {
+      border-color: t($modal-secondaryColour);
+    }
+  }
+  text-align: center;
+  border-radius: 12px;
+  height: 40px;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  flex-flow: row;
+  justify-content: center;
+  gap: 20px;
+  transition: 0.5s;
+  cursor: pointer;
+  border: 0;
+  padding-left: 10px;
+  padding-right: 5px;
+  input[type='tel'] {
+    background: none;
+    outline: none;
+    border: none;
+    max-width: 20px;
+    text-align: center;
+    @include themed {
+      color: t($color) !important;
+    }
+  }
+}

src/features/greeting/options/GreetingOptions.jsx

@@ -42,8 +42,8 @@ const GreetingOptions = () => {
     const newEvent = {
       id: 'widgets.greeting.halloween',
       name: '',
-      month: 10,
-      date: 31,
+      month: 1,
+      date: 1,
     };
 
     // Add the new event to the array
@@ -183,29 +183,28 @@ const GreetingOptions = () => {
               </div>
               <div>
                 <div className="messageAction">
-                  <div className="eventDateControl">
-                    <label>Month</label>
-                    <input
-                      id="month"
-                      type="number"
-                      value={event.month}
-                      onChange={(e) => {
-                        const updatedEvent = { ...event, month: parseInt(e.target.value, 10) };
-                        updateEvent(index, updatedEvent);
-                      }}
-                    />
-                  </div>
-                  <div className="eventDateControl">
-                    <label>Day</label>
+                  <div className="eventDateSelection">
+                    <label className="subtitle">Day:</label>
                     <input
                       id="day"
-                      type="number"
+                      type="tel"
                       value={event.date}
                       onChange={(e) => {
                         const updatedEvent = { ...event, date: parseInt(e.target.value, 10) };
                         updateEvent(index, updatedEvent);
                       }}
                     />
+                    <hr />
+                    <label className="subtitle">Month:</label>
+                    <input
+                      id="month"
+                      type="tel"
+                      value={event.month}
+                      onChange={(e) => {
+                        const updatedEvent = { ...event, month: parseInt(e.target.value, 10) };
+                        updateEvent(index, updatedEvent);
+                      }}
+                    />
                   </div>
                   <Button
                     type="settings"