fix(greeting/events): event text box styling

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

@@ -213,6 +213,30 @@ table {
       }
     }
 
+    input[type='text'] {
+      height: 56px;
+      padding: 0 16px;
+      font-size: 16px;
+      outline: none;
+      transition: 0.2s ease;
+
+      @include themed {
+        background: t($modal-sidebar);
+        border: 1px solid t($modal-sidebarActive);
+        border-radius: t($borderRadius);
+        color: t($color);
+
+        &:hover,
+        &:focus {
+          border-color: t($color);
+        }
+
+        &::placeholder {
+          color: t($subColor);
+        }
+      }
+    }
+
     .subtitle {
       @include themed {
         color: t($subColor);
@@ -264,7 +288,8 @@ table {
   padding-left: 10px;
   padding-right: 5px;
 
-  input[type='tel'] {
+  input[type='tel'],
+  input[type='number'] {
     background: none;
     outline: none;
     border: none;

src/features/greeting/options/GreetingOptions.jsx

@@ -211,11 +211,16 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
                     </label>
                     <input
                       id="day"
-                      type="tel"
+                      type="number"
+                      min="1"
+                      max="31"
                       value={event.date}
                       onChange={(e) => {
-                        const updatedEvent = { ...event, date: parseInt(e.target.value, 10) };
+                        const value = parseInt(e.target.value, 10);
-                        updateEvent(index, updatedEvent);
+                        if (value >= 1 && value <= 31) {
+                          const updatedEvent = { ...event, date: value };
+                          updateEvent(index, updatedEvent);
+                        }
                       }}
                     />
                     <hr />
@@ -224,11 +229,16 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
                     </label>
                     <input
                       id="month"
-                      type="tel"
+                      type="number"
+                      min="1"
+                      max="12"
                       value={event.month}
                       onChange={(e) => {
-                        const updatedEvent = { ...event, month: parseInt(e.target.value, 10) };
+                        const value = parseInt(e.target.value, 10);
-                        updateEvent(index, updatedEvent);
+                        if (value >= 1 && value <= 12) {
+                          const updatedEvent = { ...event, month: value };
+                          updateEvent(index, updatedEvent);
+                        }
                       }}
                     />
                   </div>

src/features/quicklinks/quicklinks.scss

@@ -288,7 +288,8 @@ button.quicklinks {
   flex-flow: column;
   align-items: center;
   min-width: 100px;
-  background-image: linear-gradient(to left, rgb(0 0 0), transparent, rgb(0 0 0)),
+  background-image:
+    linear-gradient(to left, rgb(0 0 0), transparent, rgb(0 0 0)),
     url('https://media.cntraveller.com/photos/615ee85…/16:9/w_2580,c_limit/Best%20Cities%20in%20the%20World%20-%20Grid.jpg');
   transition: 0.8s;
   text-align: left;
@@ -605,7 +606,7 @@ button.quicklinks {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 0;
+  padding-bottom: 50px;
 }
 
 .quicklink-wrapper .quicklinkstext {