From 9f22a2fa8791b2b0e22f2f85754a0a5716a8a800 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <127791530+alec-livefront@users.noreply.github.com>
Date: Tue, 11 Feb 2025 10:25:14 -0600
Subject: [PATCH] refactor: [PM-17182] Remove Bootstrap style from
 EnvironmentSelectorComponent

Replace Bootstrap styles with Tailwind equivalents in the EnvironmentSelectorComponent to modernize the UI.
---
 .../environment-selector.component.html              |  6 +++---
 .../components/environment-selector.component.html   | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/app/components/environment-selector/environment-selector.component.html b/apps/web/src/app/components/environment-selector/environment-selector.component.html
index 91675bd4945..0c93865c900 100644
--- a/apps/web/src/app/components/environment-selector/environment-selector.component.html
+++ b/apps/web/src/app/components/environment-selector/environment-selector.component.html
@@ -15,11 +15,11 @@
       {{ region.domain }}
     </a>
   </bit-menu>
-  <div>
+  <div bitTypography="body2">
     {{ "accessing" | i18n }}:
     <a [routerLink]="[]" [bitMenuTriggerFor]="environmentOptions">
-      <b>{{ currentRegion?.domain }}</b
-      ><i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
+      <b class="tw-text-primary-600 tw-font-semibold">{{ currentRegion?.domain }}</b>
+      <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
     </a>
   </div>
 </div>
diff --git a/libs/angular/src/auth/components/environment-selector.component.html b/libs/angular/src/auth/components/environment-selector.component.html
index 786afe40371..19f49f73dd2 100644
--- a/libs/angular/src/auth/components/environment-selector.component.html
+++ b/libs/angular/src/auth/components/environment-selector.component.html
@@ -3,7 +3,7 @@
     selectedRegion: selectedRegion$ | async,
   } as data"
 >
-  <div class="environment-selector-btn">
+  <div class="tw-text-sm tw-text-muted tw-leading-7 tw-font-normal tw-pl-4">
     {{ "accessing" | i18n }}:
     <button
       type="button"
@@ -13,7 +13,7 @@
       aria-haspopup="dialog"
       aria-controls="cdk-overlay-container"
     >
-      <span class="text-primary">
+      <span class="tw-text-primary-600 tw-text-sm tw-font-semibold">
         <ng-container *ngIf="data.selectedRegion; else fallback">
           {{ data.selectedRegion.domain }}
         </ng-container>
@@ -35,9 +35,9 @@
     (backdropClick)="isOpen = false"
     (detach)="close()"
   >
-    <div class="box-content">
+    <div class="tw-box-content">
       <div
-        class="environment-selector-dialog"
+        class="tw-bg-background tw-w-full tw-shadow-md tw-p-2 tw-rounded-md"
         data-testid="environment-selector-dialog"
         [@transformPanel]="'open'"
         cdkTrapFocus
@@ -48,7 +48,7 @@
         <ng-container *ngFor="let region of availableRegions; let i = index">
           <button
             type="button"
-            class="environment-selector-dialog-item"
+            class="tw-text-main tw-w-full tw-text-left tw-py-0 tw-border tw-border-transparent tw-transition-all tw-duration-200 tw-ease-in-out tw-pr-2 tw-rounded-md"
             (click)="toggle(region.key)"
             [attr.aria-pressed]="data.selectedRegion === region ? 'true' : 'false'"
             [attr.data-testid]="'environment-selector-dialog-item-' + i"
@@ -65,7 +65,7 @@
         </ng-container>
         <button
           type="button"
-          class="environment-selector-dialog-item"
+          class="tw-text-main tw-w-full tw-text-left tw-py-0 tw-pr-2 tw-border tw-border-transparent tw-transition-all tw-duration-200 tw-ease-in-out tw-rounded-md"
           (click)="toggle(ServerEnvironmentType.SelfHosted)"
           [attr.aria-pressed]="data.selectedRegion ? 'false' : 'true'"
           data-testid="environment-selector-dialog-item-self-hosted"