From 447d15cef6038913cb56d91a705ab910e4af3339 Mon Sep 17 00:00:00 2001
From: Mazdak Gibran <141390141+mazdakgibran@users.noreply.github.com>
Date: Wed, 28 Jan 2026 12:50:33 +0500
Subject: [PATCH] logging.html style improvement

Wrapped date input fields in a new container and added FontAwesome calendar icons for better UI clarity. Updated SCSS to style the date input wrappers and position the icons appropriately.
---
 src/app/logging/logging.component.html | 30 +++++++++++++++-----------
 src/app/logging/logging.component.scss | 29 +++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/app/logging/logging.component.html b/src/app/logging/logging.component.html
index 02598c8..5efba20 100644
--- a/src/app/logging/logging.component.html
+++ b/src/app/logging/logging.component.html
@@ -27,24 +27,30 @@
                     {{ "fromDate" | translate }}
                     <span class="mandatory">*</span>
                   </label>
-                  <input
-                    type="date"
-                    formControlName="fromDate"
-                    class="form-control"
-                    [max]="maxDate"
-                  />
+                  <div class="date-input-wrapper">
+                    <input
+                      type="date"
+                      formControlName="fromDate"
+                      class="form-control"
+                      [max]="maxDate"
+                    />
+                    <i class="fas fa-calendar calendar-icon"></i>
+                  </div>
                 </div>
 
                 <div class="col-md-6">
                   <label>
                     {{ "toDate" | translate }} <span class="mandatory">*</span>
                   </label>
-                  <input
-                    type="date"
-                    formControlName="toDate"
-                    class="form-control"
-                    [max]="maxDate"
-                  />
+                  <div class="date-input-wrapper">
+                    <input
+                      type="date"
+                      formControlName="toDate"
+                      class="form-control"
+                      [max]="maxDate"
+                    />
+                    <i class="fas fa-calendar calendar-icon"></i>
+                  </div>
                 </div>
               </div>
 
diff --git a/src/app/logging/logging.component.scss b/src/app/logging/logging.component.scss
index e69de29..a4a46b7 100644
--- a/src/app/logging/logging.component.scss
+++ b/src/app/logging/logging.component.scss
@@ -0,0 +1,29 @@
+.date-input-wrapper {
+  position: relative;
+  
+  input[type="date"] {
+    cursor: pointer;
+    padding-right: 35px;
+    
+    &::-webkit-calendar-picker-indicator {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      opacity: 0;
+    }
+  }
+  
+  .calendar-icon {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: #6c757d;
+  }
+}
\ No newline at end of file