update UI

thanhduy1706 · Dec 19, 2023 · b16df28 · b16df28
1 parent e22d07c
commit b16df28
Show file tree

Hide file tree

Showing 9 changed files with 268 additions and 105 deletions.
diff --git a/server/public/css/dashboard.css b/server/public/css/dashboard.css
@@ -12,7 +12,7 @@ body {
   overflow: hidden;
 }
 
-.editBtn {
+.editInchargeFormBtn {
   display: flex;
   position: fixed;
   top: 500px;
@@ -28,26 +28,33 @@ body {
   cursor: pointer;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.04);
 }
-.editBtn i {
+.editInchargeFormBtn i {
   padding-right: 15px;
 }
-.editBtn :link {
+.editInchargeFormBtn :link {
   text-decoration: none;
   color: inherit;
 }
-.editBtn :visited {
+.editInchargeFormBtn :visited {
   text-decoration: none;
   color: inherit;
 }
-.editBtn :hover {
+.editInchargeFormBtn :hover {
   text-decoration: none;
   color: inherit;
 }
-.editBtn :active {
+.editInchargeFormBtn :active {
   text-decoration: none;
   color: inherit;
 }
 
+.editInchargeFormBtn:hover {
+  background: #4a82e2;
+  color: #ffffff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  transition: background 0.1s ease 0.1s;
+}
+
 .site-wrap {
   display: grid;
   grid-template-columns: 280px 1fr;
@@ -467,7 +474,6 @@ fieldset i {
 
 .appointmentList {
   padding: 3rem;
-  display: flex;
   background: #e5e5e9;
 }
 .appointmentList .col {
@@ -483,52 +489,60 @@ fieldset i {
   height: 100px;
   line-height: 100px;
 }
-.appointmentList .col .delBtn {
-  width: 100px;
+.appointmentList .col .item {
+  text-align: left;
+  padding-left: 30px;
+}
+.appointmentList .col:nth-child(1) {
+  border-top: 4px solid #50aaee;
+}
+.appointmentList .col:nth-child(2) {
+  border-top: 4px solid #d56ec7;
+}
+.appointmentList .col:nth-child(3) {
+  border-top: 4px solid #e37e55;
+}
+.appointmentList .col:nth-child(4) {
+  border-top: 4px solid #ebbd41;
+}
+
+.delBtn {
+  display: flex;
+  position: fixed;
+  top: 250px;
+  right: 350px;
+  width: 120px;
   height: 50px;
-  align-items: center;
-  margin: 0 0px 0 95px;
+  margin: 0 0px 30px 290px;
   background: #f57992;
   border: none;
   color: white;
   text-align: center;
+  align-items: center;
   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 {
+.delBtn i {
+  padding-left: 15px;
+}
+.delBtn :link {
   text-decoration: none;
   color: inherit;
 }
-.appointmentList .col .delBtn :visited {
+.delBtn :visited {
   text-decoration: none;
   color: inherit;
 }
-.appointmentList .col .delBtn :hover {
+.delBtn :hover {
   text-decoration: none;
   color: inherit;
 }
-.appointmentList .col .delBtn :active {
+.delBtn :active {
   text-decoration: none;
   color: inherit;
 }
-.appointmentList .col .item {
-  text-align: left;
-  padding-left: 15px;
-}
-.appointmentList .col:nth-child(1) {
-  border-top: 4px solid #50aaee;
-}
-.appointmentList .col:nth-child(2) {
-  border-top: 4px solid #d56ec7;
-}
-.appointmentList .col:nth-child(3) {
-  border-top: 4px solid #e37e55;
-}
-.appointmentList .col:nth-child(4) {
-  border-top: 4px solid #ebbd41;
-}
 
 .form-update-patient-info {
   display: flex;
@@ -663,3 +677,74 @@ fieldset i {
 .scheduled-appointment .col:nth-child(4) {
   border-top: 4px solid #ebbd41;
 }
+
+.scheduleBtn {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 80px;
+  width: 50%;
+  height: 20%;
+  background: #244275;
+  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
+  outline: 0;
+  padding: 30px 30px;
+  border-radius: 8px;
+  color: #ffffff;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  cursor: pointer;
+  padding: 20px 20px 20px 20px;
+  transition: background 0.1s ease 0.1s;
+}
+
+.scheduleBtn:hover {
+  background: #4a82e2;
+  color: #ffffff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  transition: background 0.1s ease 0.1s;
+}
+
+.editDetailBtn {
+  display: flex;
+  position: fixed;
+  top: 650px;
+  left: 1500px;
+  background: #102a61;
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  font-size: 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.04);
+}
+.editDetailBtn i {
+  padding-right: 15px;
+}
+.editDetailBtn :link {
+  text-decoration: none;
+  color: inherit;
+}
+.editDetailBtn :visited {
+  text-decoration: none;
+  color: inherit;
+}
+.editDetailBtn :hover {
+  text-decoration: none;
+  color: inherit;
+}
+.editDetailBtn :active {
+  text-decoration: none;
+  color: inherit;
+}
+
+.editDetailBtn:hover {
+  background: #4a82e2;
+  color: #ffffff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  transition: background 0.1s ease 0.1s;
+}