WEB-492: Material Design 3 implementation: Login

src/app/shared/tenant-selector/tenant-selector.component.html

@@ -1,7 +1,4 @@
-<mat-form-field class="flex-fill align-center" id="tenant-selector">
-  <span matPrefix class="m-r-10">
-    <fa-icon icon="building" size="lg"></fa-icon>
-  </span>
+<mat-form-field class="flex-fill align-center" id="tenant-selector" appearance="fill">
   <mat-label>{{ 'labels.inputs.Tenant' | translate }}</mat-label>
   <mat-select [formControl]="tenantSelector" (selectionChange)="setTenantIdentifier()" class="tenantselector">
     @for (tenant of tenants; track tenant) {
@@ -10,4 +7,5 @@
       </mat-option>
     }
   </mat-select>
+  <mifosx-m3-icon matIconPrefix name="domain"></mifosx-m3-icon>
 </mat-form-field>

src/app/shared/tenant-selector/tenant-selector.component.scss

@@ -1,5 +1,2 @@
-#tenant-selector,
-.tenantselector {
-  width: 14rem;
-  margin-bottom: 0.6rem;
-}
+// Styles are now controlled by parent component (login-form)
+// to ensure consistency with other form fields

src/app/shared/tenant-selector/tenant-selector.component.ts

@@ -3,7 +3,7 @@ import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 import { AlertService } from 'app/core/alert/alert.service';
 import { MatFormField, MatPrefix, MatLabel } from '@angular/material/form-field';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { M3IconComponent } from 'app/shared/m3-ui/m3-icon/m3-icon.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
@@ -13,7 +13,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     MatPrefix,
-    FaIconComponent
+    M3IconComponent
   ]
 })
 export class TenantSelectorComponent implements OnInit {