From fdc61ac6b2739892b522a1b6a531b50fbba1021a Mon Sep 17 00:00:00 2001
From: Nguyen Duy <thanhduy1706@gmail.com>
Date: Tue, 19 Dec 2023 12:01:00 +0700
Subject: [PATCH] update UI

---
 server/public/css/dashboard.css               | 21 ++++++++++++----
 server/resource/scss/dashboard.scss           | 24 +++++++++++++++----
 .../views/doctor/appointmentList.handlebars   | 23 +++++++++---------
 .../views/doctor/inchargeForm.handlebars      |  6 +++++
 4 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/server/public/css/dashboard.css b/server/public/css/dashboard.css
index 512ec36..f66be02 100644
--- a/server/public/css/dashboard.css
+++ b/server/public/css/dashboard.css
@@ -75,6 +75,7 @@ body {
   font-size: medium;
   text-decoration: none;
   line-height: 100%;
+  text-align: left;
 }
 .site-nav ul li .nav_icon:hover, .site-nav ul li .nav_icon:focus, .site-nav ul li a:hover, .site-nav ul li a:focus {
   color: #4371c5;
@@ -351,14 +352,25 @@ main > header {
   margin: 200px 50px 350px 550px;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
   border-radius: 8px;
-  width: 30%;
+  width: 40%;
 }
 
 fieldset {
+  display: block;
   border: medium none !important;
   margin: 0 0 10px;
   min-width: 100%;
-  padding: 0;
+  padding: 10;
+  border-radius: 8px;
+}
+fieldset i {
+  float: left;
+  padding-left: 10px;
+  color: #999;
+  background: transparent;
+  border: none;
+  outline: none;
+  border: 2px solid rgba(255, 255, 255, 0.2);
   border-radius: 8px;
 }
 
@@ -458,7 +470,7 @@ fieldset {
   width: 1000px;
   padding: 1rem;
   background: #ebecee;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 0 35px rgba(0, 0, 0, 0.04);
   border-radius: 5px;
   text-align: center;
   font-size: 20px;
@@ -469,7 +481,7 @@ fieldset {
   width: 100px;
   height: 50px;
   align-items: center;
-  margin: 0 50px 0 60px;
+  margin: 0 0px 0 95px;
   background: #f57992;
   border: none;
   color: white;
@@ -477,6 +489,7 @@ fieldset {
   font-size: 20px;
   border-radius: 8px;
   cursor: pointer;
+  box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2), 0 0px 5px 0 rgba(0, 0, 0, 0.19);
 }
 .appointmentList .col .delBtn :link {
   text-decoration: none;
diff --git a/server/resource/scss/dashboard.scss b/server/resource/scss/dashboard.scss
index 9fe3686..73cc74f 100644
--- a/server/resource/scss/dashboard.scss
+++ b/server/resource/scss/dashboard.scss
@@ -12,6 +12,7 @@ body {
   overflow: hidden;
 }
 .editBtn{
+
   i{
     padding-right: 15px;
   }
@@ -81,6 +82,7 @@ body {
         font-size: medium;
         text-decoration: none;
         line-height: 100%;
+        text-align: left;
 
         &:hover,
         &:focus {
@@ -412,15 +414,27 @@ main {
   margin: 200px 50px 350px 550px;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
   border-radius: 8px;
-  width: 30%;
+  width: 40%;
 
 }
 fieldset {
+  display: block;
   border: medium none !important;
   margin: 0 0 10px;
   min-width: 100%;
-  padding: 0;
+  padding: 10;
+  border-radius: 8px;
+
+  i {
+  float: left;
+  padding-left: 10px;
+  color: #999;
+  background: transparent;
+  border: none;
+  outline: none;
+  border: 2px solid rgba(255, 255, 255, .2);
   border-radius: 8px;
+  }
 }
 
 #status input[type="text"],
@@ -470,7 +484,6 @@ fieldset {
 
 }
 
-
 #status input:focus,
 #status textarea:focus {
   outline: 0;
@@ -527,7 +540,7 @@ fieldset {
     width:1000px;
     padding: 1rem;
     background: #ebecee;
-    box-shadow: 0 0 5px rgba(black, 0.04);
+    box-shadow: 0 0 35px rgba(black, 0.04);
     border-radius: 5px;
     text-align: center;
     font-size: 20px;
@@ -538,7 +551,7 @@ fieldset {
       width: 100px;
       height: 50px;
       align-items: center;
-      margin:0 50px 0 60px;
+      margin:0 0px 0 95px;
       background: #f57992;
       border: none;
       color: white;
@@ -546,6 +559,7 @@ fieldset {
       font-size: 20px;
       border-radius: 8px;
       cursor: pointer;
+      box-shadow: 0 0px 5px 0 rgba(0,0,0,0.2), 0 0px 5px 0 rgba(0,0,0,0.19);
 
     :link {
       text-decoration: none;
diff --git a/server/resource/views/doctor/appointmentList.handlebars b/server/resource/views/doctor/appointmentList.handlebars
index 3aea168..53de077 100644
--- a/server/resource/views/doctor/appointmentList.handlebars
+++ b/server/resource/views/doctor/appointmentList.handlebars
@@ -2,9 +2,7 @@
   <div class="site-wrap">
     <nav class="site-nav">
       <div class="name">Patient list</div>
-
       <ul id="sidebar">
-
       </ul>
 
       <div class="note">
@@ -30,13 +28,12 @@
             </div>
             </div>
           {{/each}}
-
-
         </div>
       </div>
     </main>
   </div>
 
+
   <script>
     const navTabs = document.querySelectorAll("#nav-tabs > a");
     navTabs.forEach((tab) => {
@@ -48,11 +45,13 @@
       });
     });
 
+
     let cookies = document.cookie
     let ulTag = document.getElementById("sidebar")
 
     if (cookies.includes("pId")) {
-      ulTag.innerHTML = `          <li class="active">
+      ulTag.innerHTML = `
+      <li class="active">
             <div class="nav_icon">
               <i class="fa-solid fa-bed-pulse"></i>
               <a href="#">Patients</a>
@@ -68,7 +67,6 @@
                 </div>
             <ul class="sub_nav">
               <li>
-
               </li>
             </ul>
           </li>`
@@ -76,21 +74,22 @@
       console.log(title);
       title.innerText = "Patient";
     } else {
-      ulTag.innerHTML = ` <li>
+      ulTag.innerHTML = `
+        <li>
             <div class="nav_icon">
               <i class="fa-solid fa-user-doctor"></i>
               <a href="#">Doctors</a>
             </div>
          <div class="nav_icon">
-                  <i class="fa-brands fa-wpforms"></i>
-                  <a href="/doctor/inchargeform">In charge form</a>
+                <i class="fa-brands fa-wpforms"></i>
+                <a href="/doctor/inchargeform">In charge form</a>
                 </div>
           <div class="nav_icon">
-                  <i class="fa-solid fa-list"></i>
-                  <a href="/doctor/getAllAppointments">Appointment list</a>
+                <i class="fa-solid fa-list"></i>
+                <a href="/doctor/getAllAppointments">Appointment list</a>
                 </div>
             </ul>
-          </li>`
+        </li>`
 
       let title = document.getElementById("title");
       console.log(title);
diff --git a/server/resource/views/doctor/inchargeForm.handlebars b/server/resource/views/doctor/inchargeForm.handlebars
index 61774d3..5303aa3 100644
--- a/server/resource/views/doctor/inchargeForm.handlebars
+++ b/server/resource/views/doctor/inchargeForm.handlebars
@@ -36,18 +36,24 @@
         </header>
         <form id="status" method="post" action="/doctor/inchargeForm">
             <fieldset>
+                <i class="fa-solid fa-user">  Patient ID</i>
                 <input placeholder="Input patient ID" name="pId" type="text" tabindex="1" required autofocus>
+
             </fieldset>
             <fieldset>
+                <i class="fa-solid fa-user-doctor">  Doctor ID</i>
                 <input placeholder="Input doctor ID" name="dId" type="text" tabindex="1" required autofocus>
             </fieldset>
             <fieldset>
+                <i class="fa-solid fa-address-card">  Patient name</i>
                 <input placeholder="Input patient name" name="pName" type="text" tabindex="1" required autofocus>
             </fieldset>
             <fieldset>
+                <i class="fa-solid fa-circle-info">  Patient status</i>
                 <input placeholder="Input patient status" name="details" type="text" tabindex="1" required autofocus>
             </fieldset>
             <fieldset>
+               <i class="fa-regular fa-calendar-days">  Start day</i>
                 <input placeholder="Input patient start date" name="startDay" type="date" tabindex="1" required autofocus>
             </fieldset>
             <fieldset>