fix: handle logic change language with icon

src/app/components/app/app.component.css

@@ -5,6 +5,7 @@ div.img-container{
 .navbar-custom {
     padding-left: 10%;
     padding-right: 10%;
+    border-bottom: 1px solid rgba(225, 228, 229, 1);
 }
 
 .active { 
@@ -30,9 +31,25 @@ div.img-container{
 .custom-dropdown-menu-header {
     box-shadow: 0px 0px 6px 2px rgba(2, 42, 166, 0.15);
     border-radius: 10px;
+    min-width: 180px;
 }
 
 .avatar-small {
     width: 24px;
     height: 24px;
+}
+
+.button-language {
+    height: 24px;
+    width: 50px;
+    border-radius: 24px;
+    justify-content: space-between;
+    background-color: rgba(249, 250, 252, 1);
+    padding: 0px 0px;
+    padding-right: 5px;
+    margin-right: 25px;
+}
+
+.button-language:hover {
+    background-color: unset;
 }

src/app/components/app/app.component.html

@@ -63,6 +63,60 @@
   </div>
 
   <div style="float: right">
+    <div
+      class="btn-group"
+      ngbDropdown
+      role="group"
+      aria-label="Button group with nested dropdown"
+    >
+      <button
+        type="button "
+        class="button-language btn btn-outline-primary border-0 d-flex flex-row align-items-center"
+        ngbDropdownToggle
+      >
+        <img
+          src="{{getCurrentLanguageImgPath()}}"
+          width="24px"
+          height="24px"
+          alt="language-icon"
+        />
+      </button>
+
+      <div
+        class="custom-dropdown-menu-header dropdown-menu px-2 rounded-lg"
+        ngbDropdownMenu
+      >
+        <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"
+          (click)="changelLanguage('en')"
+        >
+          <img
+            src="assets/img/english-icon.png"
+            width="24px"
+            height="24px"
+            alt="english-icon"
+          />
+          <div class="p-1"></div>
+          English
+        </button>
+        <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"
+          (click)="changelLanguage('tw')"
+        >
+          <img
+            src="assets/img/taiwan-icon.svg"
+            width="24px"
+            height="24px"
+            alt="english-icon"
+          />
+          <div class="p-1"></div>
+          Taiwan
+        </button>
+      </div>
+    </div>
+
     <div
       class="btn-group"
       ngbDropdown
@@ -79,12 +133,12 @@
         <div class="label-username">{{ getId() }}</div>
       </button>
       <div
-        class="custom-dropdown-menu-header dropdown-menu px-2 rounded-lg"
+        class="custom-dropdown-menu-header dropdown-menu px-3 rounded-lg"
         ngbDropdownMenu
       >
         <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"
+          class="border-0 d-flex flex-row justify-content-start align-items-center py-3 btn btn-outline-primary bg-transparent px-0"
           [routerLink]="['/selfservice']"
           *ngIf="isLoggedIn()"
         >
@@ -93,7 +147,7 @@
           {{ getId() }}
         </button>
         <button
-          class="btn btn-primary btn-lg py-2 d-flex align-items-center justify-content-center"
+          class="btn btn-primary btn-lg py-3 d-flex align-items-center justify-content-center"
           ngbDropdownItem
           (click)="isLoggedIn() ? logout() : login()"
         >

src/app/components/app/app.component.ts

@@ -20,6 +20,7 @@ export class AppComponent {
   infos: any[];
   pageAccessLevel = ""; // May be set to 'login' or 'admin' to show error messages
   currentRoute: string;
+  currentLanguage: "en" | "tw" = "en";
 
   constructor(
     public oauthService: OAuthService,
@@ -157,4 +158,30 @@ export class AppComponent {
         return "";
     }
   }
+
+  currentLanguageLabel() {
+    switch (this.currentLanguage) {
+      case "en":
+        return "English";
+      case "tw":
+        return "Taiwan";
+      default:
+        return "English";
+    }
+  }
+
+  getCurrentLanguageImgPath() {
+    switch (this.currentLanguage) {
+      case "en":
+        return "assets/img/english-icon.png";
+      case "tw":
+        return "assets/img/taiwan-icon.svg";
+      default:
+        return "assets/img/english-icon.png";
+    }
+  }
+
+  changelLanguage(value: "en" | "tw") {
+    this.currentLanguage = value;
+  }
 }

src/styles.css

@@ -12,7 +12,7 @@ body { margin: 0; font-family: Inter , "Helvetica Neue", sans-serif !important;
   color: #08082C !important;
 
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 400 !important;
   line-height: 16.94px;
   border-radius: 10px;
 }
@@ -29,8 +29,8 @@ body { margin: 0; font-family: Inter , "Helvetica Neue", sans-serif !important;
   border: 1px solid #05286C;
   border-radius: 10px;
 
-  font-size: 14px;
-  font-weight: 400;
+  font-size: 14px ;
+  font-weight: 400 !important;
   line-height: 16.94px;
 }