update ui add new client/user

huynvntpi · Sep 25, 2024 · 7c77d70 · 7c77d70
1 parent 086cd3f
commit 7c77d70
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 16 deletions.
diff --git a/src/app/components/client/client.component.html b/src/app/components/client/client.component.html
@@ -5,8 +5,7 @@
 >
   <div class="input-group" *ngIf="!showNewClient">
     <div
-      class="px-2 d-flex justify-content-center align-items-center"
-      style="height: 56px"
+      class="px-2 d-flex justify-content-center align-items-center custom-search-icon-wrapper"
     >
       <img
         class="mx-1"
@@ -31,16 +30,16 @@
     </button>
   </div>
   <div class="input-group" *ngIf="showNewClient">
-    <span class="input-group-text">Please enter a new Client ID</span>
-    <input class="form-control" type="text" #newClientId />
+    <span class="input-group-text rounded-left-side">Please enter a new Client ID</span>
+    <input class="form-control" placeholder="Enter client ID" type="text" #newClientId />
     <button
-      class="btn btn-primary"
+      class="btn btn-outline-primary border-0"
       type="button"
       (click)="addClient(newClientId.value)"
     >
       <span class="fa fa-plus-square text-primary"></span> Add Client
     </button>
-    <button class="btn btn-primary" (click)="showNewClient = false">
+    <button class="btn btn-outline-primary border-0 mr-10px" (click)="showNewClient = false">
       <span class="fa fa-close"></span> Back
     </button>
   </div>

diff --git a/src/app/components/user/user.component.html b/src/app/components/user/user.component.html
@@ -3,24 +3,24 @@
 
   <!-- <span class="fa fa-user-circle fa-2x"></span> -->
   <div class="input-group" *ngIf = "!showNewUser">
-    <div class="px-2 d-flex justify-content-center align-items-center" style="height: 56px">
+    <div class="px-2 d-flex justify-content-center align-items-center custom-search-icon-wrapper">
       <img class="mx-1" src="assets/img/search-icon.svg" width="14px" height="14px" />
     </div>
 
-    <input class="form-control" type="search" [(ngModel)]="searchTerm" name="searchTerm"
+    <input class="form-control " type="search" [(ngModel)]="searchTerm" name="searchTerm"
       placeholder="Search users">
-    <button class="btn btn-outline-primary border-0"  (click)="showNewUser = true">
+    <button class="btn btn-outline-primary border-0 mr-10px"  (click)="showNewUser = true">
       <i class="fa fa-plus-square text-primary"></i>
       Add User
     </button>
   </div>
   <div class="input-group" *ngIf = "showNewUser">
-    <span class="input-group-text">Please enter a new Username</span>
-    <input class="form-control" type="text" #newUsername>
-    <button class="btn btn-primary " type="button" (click)="addUser(newUsername.value)">
+    <span class="input-group-text rounded-left-side">Please enter a new Username</span>
+    <input class="form-control" placeholder="Enter username" type="text" #newUsername>
+    <button class="btn btn-outline-primary border-0 " type="button" (click)="addUser(newUsername.value)">
       <span class="fa fa-plus-square text-primary"></span> Add User
     </button>
-    <button class="btn btn-primary" (click)="showNewUser = false">
+    <button class="btn btn-outline-primary border-0 mr-10px" (click)="showNewUser = false">
       <span class="fa fa-close"></span> Back
     </button>
   </div>

diff --git a/src/styles.css b/src/styles.css
@@ -22,6 +22,10 @@ body { margin: 0; font-family: Inter , "Helvetica Neue", sans-serif !important;
   background-color: unset !important;
 }
 
+.btn.btn-outline-primary:focus {
+  box-shadow: none !important;
+}
+
 .btn.btn-primary {
   background-image: none;
   background-color: #05286C;
@@ -184,8 +188,6 @@ div.card-avatar-character {
   border-radius: 10px;
   width: 45%;
   background-color: #fff;
-  padding-left: 10px;
-  padding-right: 10px;
 }
 
 .custom-form-inline .form-control {
@@ -201,4 +203,17 @@ div.card-avatar-character {
 
 input:focus {
   box-shadow: none !important;
-} 
+} 
+
+.custom-search-icon-wrapper {
+  height: 56px;
+  margin-left: 10px;
+}
+
+.mr-10px {
+  margin-right: 10px;
+}
+.rounded-left-side {
+  border-radius: 10px 0 0px 10px !important;
+  border: none !important;
+}