update style

huynvntpi · Sep 25, 2024 · 57361d0 · 57361d0
1 parent 5c67ee6
commit 57361d0
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 33 deletions.
diff --git a/src/app/components/app/app.component.css b/src/app/components/app/app.component.css
@@ -11,4 +11,28 @@ div.img-container{
     border-bottom: 3px solid #3656DE !important;
     color: #3656DE !important;
     font-weight: 500;
+}
+
+.btn-logout:hover {
+    background-color: unset;
+    color: unset;
+}
+
+.label-username {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16.94px;
+    text-align: center;
+
+    color: #08082C;
+}
+
+.custom-dropdown-menu-header {
+    box-shadow: 0px 0px 6px 2px rgba(2, 42, 166, 0.15);
+    border-radius: 10px;
+}
+
+.avatar-small {
+    width: 24px;
+    height: 24px;
 }
diff --git a/src/app/components/app/app.component.html b/src/app/components/app/app.component.html
@@ -63,21 +63,44 @@
   </div>
 
   <div style="float: right">
-    <li class="nav-item dropdown">
-      <a
-        class="nav-link dropdown-toggle"
-        href="#"
-        id="navbarDropdownMenuLink"
-        data-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false"
+    <div
+      class="btn-group"
+      ngbDropdown
+      role="group"
+      aria-label="Button group with nested dropdown"
+    >
+      <button
+        type="button "
+        class="btn-logout btn btn-outline-primary border-0 d-flex flex-row justify-content-center align-items-center"
+        ngbDropdownToggle
+      >
+        <div class="p-3 bg-secondary rounded-circle"></div>
+        <div class="p-1"></div>
+        <div class="label-username">{{ getId() }}</div>
+      </button>
+      <div
+        class="custom-dropdown-menu-header dropdown-menu px-2 rounded-lg"
+        ngbDropdownMenu
       >
-        {{ getId() }}
-      </a>
-      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-        <a class="dropdown-item" href="#">Logout</a>
+        <button
+          ngbDropdownItem
+          class="border-0 d-flex flex-row justify-content-start align-items-center py-2 btn btn-outline-primary bg-transparent px-0"
+          [routerLink]="['/selfservice']"
+          *ngIf="isLoggedIn()"
+        >
+          <div class="avatar-small bg-secondary rounded-circle"></div>
+          <div class="p-1"></div>
+          {{ getId() }}
+        </button>
+        <button
+          class="btn btn-primary btn-lg py-2 d-flex align-items-center justify-content-center"
+          ngbDropdownItem
+          (click)="isLoggedIn() ? logout() : login()"
+        >
+          {{ isLoggedIn() ? "Log Out" : "Login" }}
+        </button>
       </div>
-    </li>
+    </div>
 
     <!-- <button
       class="btn btn-secondary me-3 justify-content-end"
@@ -88,12 +111,12 @@
       {{ getId() }}
     </button> -->
     <!--Login/Logout Button-->
-    <button
+    <!-- <button
       class="btn btn-lg btn-outline-primary justify-content-end"
       (click)="isLoggedIn() ? logout() : login()"
     >
       {{ isLoggedIn() ? "Logout" : "Login" }}
-    </button>
+    </button> -->
   </div>
 </nav>
 

diff --git a/src/index.html b/src/index.html
@@ -1,13 +1,19 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Omejdn Admin UI</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body >
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Omejdn Admin UI</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>
diff --git a/src/styles.css b/src/styles.css
@@ -3,25 +3,45 @@
 @import "../node_modules/font-awesome/css/font-awesome.css";
 
 html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+body { margin: 0; font-family: Inter, "Helvetica Neue", sans-serif !important; }
 
 html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+body { margin: 0; font-family: Inter , "Helvetica Neue", sans-serif !important; }
+
+.btn.btn-outline-primary {
+  color: #08082C !important;
+
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16.94px;
+  border-radius: 10px;
+}
+
+.btn.btn-outline-primary:hover {
+  color: #08082C !important;
+  background-color: transparent;
+}
 
 .btn.btn-primary {
   background-image: none;
-  background-color: #fff;
-  color: #555;
-  border: 1px solid #ddd;
+  background-color: #05286C;
+  color: #fff;
+  border: 1px solid #05286C;
+  border-radius: 10px;
+
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16.94px;
 }
 
 .btn.btn-primary:hover {
-  background-color: #555;
-  border: 1px solid #555;
+  background-color: #05286C;
+  border: 1px solid #05286C;
   color: #fff;
   background-image:none;
   box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
 }
+
 
 .btn.btn-primary.disabled {
   background-color: #ddd;