[PM-22253] fixed white background in darkmode (#15020)

* fixed white background in darkmode

* removed tw-apperance-none typo

* changed both Permission from simple to bit-select

* Update apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html

Co-authored-by: Vicki League <vleague2@Gmail.com>

* ui change for permission

* added SelectModule in Test file

* added selectModule in access stories

---------

Co-authored-by: Rui Tomé <108268980+r-tome@users.noreply.github.com>
Co-authored-by: Vicki League <vleague2@Gmail.com>

apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html

@@ -1,22 +1,21 @@
 <!-- Please remove this disable statement when editing this file! -->
 <!-- eslint-disable tailwindcss/no-custom-classname -->
 <div class="tw-flex" *ngIf="!hideMultiSelect">
-  <bit-form-field *ngIf="permissionMode == 'edit'" class="tw-mr-3 tw-shrink-0">
+  <bit-form-field *ngIf="permissionMode == 'edit'" class="tw-mr-3 tw-shrink-0 tw-basis-2/5">
     <bit-label>{{ "permission" | i18n }}</bit-label>
-    <select
+    <bit-select
       bitInput
       [disabled]="disabled"
       [(ngModel)]="initialPermission"
       [ngModelOptions]="{ standalone: true }"
-      (blur)="handleBlur()"
+      (closed)="handleBlur()"
     >
-      <option *ngFor="let p of permissionList" [value]="p.perm">
-        {{ p.labelId | i18n }}
-      </option>
-    </select>
+      <bit-option *ngFor="let p of permissionList" [value]="p.perm" [label]="p.labelId | i18n">
+      </bit-option>
+    </bit-select>
   </bit-form-field>
 
-  <bit-form-field class="tw-grow" *ngIf="!disabled">
+  <bit-form-field class="tw-grow tw-p-3" *ngIf="!disabled">
     <bit-label>{{ selectorLabelText }}</bit-label>
     <bit-multi-select
       class="tw-w-full"
@@ -51,7 +50,7 @@
       [formGroupName]="i"
       [ngClass]="{ 'tw-text-muted': item.readonly }"
     >
-      <td bitCell [ngSwitch]="item.type">
+      <td bitCell [ngSwitch]="item.type" class="tw-w-5/12">
         <div class="tw-flex tw-items-center" *ngSwitchCase="itemType.Member">
           <bit-avatar size="small" class="tw-mr-3" text="{{ item.labelName }}"></bit-avatar>
           <div class="tw-flex tw-flex-col">
@@ -79,28 +78,22 @@
 
       <td bitCell *ngIf="permissionMode != 'hidden'">
         <ng-container *ngIf="canEditItemPermission(item); else readOnlyPerm">
-          <label class="tw-sr-only" [for]="'permission' + i"
-            >{{ item.labelName }} {{ "permission" | i18n }}</label
-          >
-          <div class="tw-relative tw-inline-block">
-            <select
+          <bit-form-field>
+            <bit-label>{{ item.labelName }} {{ "permission" | i18n }}</bit-label>
+            <bit-select
               bitInput
-              class="tw-apperance-none -tw-ml-3 tw-max-w-40 tw-appearance-none tw-overflow-ellipsis !tw-rounded tw-border-transparent !tw-bg-transparent tw-pr-6 tw-font-bold hover:tw-border-primary-700"
               formControlName="permission"
               [id]="'permission' + i"
-              (blur)="handleBlur()"
+              (closed)="handleBlur()"
             >
-              <option *ngFor="let p of permissionList" [value]="p.perm">
-                {{ p.labelId | i18n }}
-              </option>
-            </select>
-            <label
-              [for]="'permission' + i"
-              class="tw-absolute tw-inset-y-0 tw-right-4 tw-mb-0 tw-flex tw-items-center"
-            >
-              <i class="bwi bwi-sm bwi-angle-down tw-leading-[0]"></i>
-            </label>
-          </div>
+              <bit-option
+                *ngFor="let p of permissionList"
+                [value]="p.perm"
+                [label]="p.labelId | i18n"
+              >
+              </bit-option>
+            </bit-select>
+          </bit-form-field>
         </ng-container>
 
         <ng-template #readOnlyPerm>

apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.spec.ts

@@ -14,6 +14,7 @@ import {
   ButtonModule,
   FormFieldModule,
   IconButtonModule,
+  SelectModule,
   TableModule,
   TabsModule,
 } from "@bitwarden/components";
@@ -71,6 +72,7 @@ describe("AccessSelectorComponent", () => {
         PreloadedEnglishI18nModule,
         JslibModule,
         IconButtonModule,
+        SelectModule,
       ],
       declarations: [TestableAccessSelectorComponent, UserTypePipe],
       providers: [],

apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.stories.ts

@@ -10,6 +10,7 @@ import {
   DialogModule,
   FormFieldModule,
   IconButtonModule,
+  SelectModule,
   TableModule,
   TabsModule,
 } from "@bitwarden/components";
@@ -47,6 +48,7 @@ export default {
         TableModule,
         JslibModule,
         IconButtonModule,
+        SelectModule,
       ],
       providers: [],
     }),