feat(Site): Remove FlexLayout usage (part 1) (#2042)

package.json

@@ -34,10 +34,10 @@
     "@stomp/rx-stomp": "^1.1.4",
     "@stomp/stompjs": "^5.4.4",
     "@tinymce/tinymce-angular": "^7.0.0",
+    "@wise-community/angular-password-strength-meter": "^12.0.4",
     "@wise-community/drawing-tool": "^2.3.2",
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-en": "^3.0.2",
-    "@wise-community/angular-password-strength-meter": "^12.0.4",
     "buffer": "^6.0.3",
     "canvg": "^4.0.0",
     "colorjs.io": "^0.5.0",
@@ -121,9 +121,11 @@
     "karma-spec-reporter": "0.0.36",
     "karma-webpack": "^5.0.0",
     "ng-mocks": "14.13.1",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.2",
     "protractor": "~7.0.0",
     "sass": "^1.50.1",
+    "tailwindcss": "^3.4.16",
     "ts-loader": "^6.2.2",
     "ts-node": "~8.2.0",
     "tslint": "~6.1.0",
@@ -225,4 +227,4 @@
       ]
     ]
   }
-}
+}

src/app/about/about.component.html

@@ -1,32 +1,23 @@
 <div class="main app-background">
   <div class="content">
-    <header fxLayout="row" class="content__header">
+    <header class="content__header flex flex-row">
       <h1
-        class="accent"
-        fxLayoutAlign="center center"
-        fxLayoutGap="8px"
+        class="accent flex items-center gap-2"
         ngClass="mat-headline-4"
         [ngClass.xs]="{ 'mat-headline-4': false }"
       >
         <mat-icon>info</mat-icon>
         <span i18n>About Us</span>
       </h1>
     </header>
-    <section
-      class="section"
-      fxLayout="column"
-      fxLayout.gt-xs="row"
-      fxLayoutAlign="center center"
-      fxLayoutGap="36px"
-      fxLayoutGap.gt-md="64px"
-    >
-      <div fxFlex="100%" fxFlex.gt-xs="50%">
+    <section class="section flex flex-col items-center gap-9 md:gap-16 md:flex-row">
+      <div class="w-full md:w-1/2">
         <h2 class="accent-1" i18n>
           WISE is the product of more than 25 years of research on teaching and learning with
           educational technologies
         </h2>
       </div>
-      <div fxFlex="100%" fxFlex.gt-xs="50%">
+      <div class="w-full md:w-1/2">
         <div class="about__intros">
           <picture class="about__intro">
             <source
@@ -54,15 +45,9 @@ <h2 class="accent-1" i18n>
     </section>
     <section
       id="research-practice"
-      class="section"
-      fxLayout="column"
-      fxLayout.gt-xs="row"
-      fxLayoutAlign="center center"
-      fxLayoutGap="36px"
-      fxLayoutGap.gt-xs="36px"
-      fxLayoutGap.gt-md="64px"
+      class="section flex flex-col items-center gap-9 md:gap-16 md:flex-row"
     >
-      <div fxFlex="100%" fxFlex.gt-xs="50%" fxFlexOrder="2" fxFlexOrder.gt-xs="1">
+      <div class="w-full md:w-1/2 order-2 md:order-1">
         <div class="about__research-practice about--l">
           <picture class="about__research">
             <source
@@ -129,7 +114,7 @@ <h2 class="accent-1" i18n>
           </picture>
         </div>
       </div>
-      <div fxFlex="100%" fxFlex.gt-xs="50%" fxFlexOrder="1" fxFlexOrder.gt-xs="2">
+      <div class="w-full md:w-1/2 order-1 md:order-2">
         <h2 class="accent-1" i18n>Based on Research, Refined Through Practice</h2>
         <p i18n>
           Through our collaborations with teachers, administrators, technology designers, and
@@ -154,16 +139,8 @@ <h2 class="accent-1" i18n>Based on Research, Refined Through Practice</h2>
         </p>
       </div>
     </section>
-    <section
-      id="ki"
-      class="section"
-      fxLayout="column"
-      fxLayout.gt-xs="row"
-      fxLayoutAlign="center center"
-      fxLayoutGap="36px"
-      fxLayoutGap.gt-md="64px"
-    >
-      <div fxFlex="100%" fxFlex.gt-xs="50%">
+    <section id="ki" class="section flex flex-col items-center gap-9 md:gap-16 md:flex-row">
+      <div class="w-full md:w-1/2">
         <h2 class="accent-1" i18n>Knowledge Integration</h2>
         <p i18n>
           As students grapple with multiple conflicting and confusing ideas, research has shown that
@@ -177,12 +154,12 @@ <h2 class="accent-1" i18n>Knowledge Integration</h2>
           assessments, and evaluation.
         </p>
       </div>
-      <div fxFlex="100%" fxFlex.gt-xs="50%">
-        <div class="about--r" fxFlex>
+      <div class="w-full md:w-1/2">
+        <div class="about--r">
           <div class="content-block">
             <h3 class="content-block__title" i18n>The KI Processes:</h3>
             <ul class="list--icons mat-subtitle-2">
-              <li fxLayoutAlign="start start">
+              <li class="flex items-start">
                 <img
                   class="avatar mat-18"
                   src="assets/img/icons/ki-color-elicit.svg"
@@ -191,7 +168,7 @@ <h3 class="content-block__title" i18n>The KI Processes:</h3>
                 />
                 <span i18n>Elicit Ideas</span>
               </li>
-              <li fxLayoutAlign="start start">
+              <li class="flex items-start">
                 <img
                   class="avatar mat-18"
                   src="assets/img/icons/ki-color-add.svg"
@@ -200,7 +177,7 @@ <h3 class="content-block__title" i18n>The KI Processes:</h3>
                 />
                 <span i18n>Discover Ideas</span>
               </li>
-              <li fxLayoutAlign="start start">
+              <li class="flex items-start">
                 <img
                   class="avatar mat-18"
                   src="assets/img/icons/ki-color-distinguish.svg"
@@ -209,7 +186,7 @@ <h3 class="content-block__title" i18n>The KI Processes:</h3>
                 />
                 <span i18n>Distinguish Ideas</span>
               </li>
-              <li fxLayoutAlign="start start">
+              <li class="flex items-start">
                 <img
                   class="avatar mat-18"
                   src="assets/img/icons/ki-color-connect.svg"
@@ -231,21 +208,9 @@ <h3 class="content-block__title" i18n>The KI Processes:</h3>
     >
       ~ WISE Goals ~
     </h1>
-    <section
-      id="goals"
-      class="section"
-      fxLayout="column"
-      fxLayoutGap="36px"
-      fxLayoutGap.gt-md="64px"
-    >
-      <div
-        fxLayout="column"
-        fxLayout.gt-xs="row"
-        fxLayoutGap="24px"
-        fxLayoutGap.gt-xs="36px"
-        fxLayoutGap.gt-md="64px"
-      >
-        <div class="content-block about__goal" fxFlex="100%" fxFlex.gt-xs="50%">
+    <section id="goals" class="section flex flex-col gap-9 sm:gap-16">
+      <div class="flex flex-col gap-6 sm:gap-9 sm:flex-row">
+        <div class="content-block about__goal w-full sm:w-1/2">
           <h2 class="accent" i18n>Make Science Meaningful</h2>
           <p i18n>
             WISE units introduce students to complex science concepts through personally and
@@ -255,7 +220,7 @@ <h2 class="accent" i18n>Make Science Meaningful</h2>
             science.
           </p>
         </div>
-        <div class="content-block about__goal--alt" fxFlex="100%" fxFlex.gt-xs="50%">
+        <div class="content-block about__goal--alt w-full sm:w-1/2">
           <h2 class="accent" i18n>Support Diverse Learners</h2>
           <p i18n>
             Individual students differ in their experiences, interests, and abilities. WISE provides
@@ -265,19 +230,11 @@ <h2 class="accent" i18n>Support Diverse Learners</h2>
           </p>
         </div>
       </div>
-      <div
-        fxLayout="column"
-        fxLayout.gt-xs="row"
-        fxLayoutGap="24px"
-        fxLayoutGap.gt-xs="36px"
-        fxLayoutGap.gt-md="64px"
-      >
+      <div class="flex flex-col gap-6 md:gap-9 sm:flex-row">
         <div
-          class="content-block about__goal"
+          class="content-block about__goal w-full sm:w-1/2"
           [ngClass]="{ 'about__goal--alt': false }"
           [ngClass.gt-xs]="{ 'about__goal--alt': true }"
-          fxFlex="100%"
-          fxFlex.gt-xs="50%"
         >
           <h2 class="accent" i18n>Increase Participation in Science</h2>
           <p i18n>
@@ -288,11 +245,9 @@ <h2 class="accent" i18n>Increase Participation in Science</h2>
           </p>
         </div>
         <div
-          class="content-block about__goal"
+          class="content-block about__goal w-full sm:w-1/2"
           [ngClass]="{ 'about__goal--alt': false }"
           [ngClass.xs]="{ 'about__goal--alt': true }"
-          fxFlex="100%"
-          fxFlex.gt-xs="50%"
         >
           <h2 class="accent" i18n>Accessible to All</h2>
           <p i18n>

src/app/about/about.component.scss

@@ -73,6 +73,7 @@
 .about__pic {
   width: 50%;
   height: auto;
+  display: inline;
 
   @media (min-width: breakpoint('sm.min')) {
     width: 25%;

src/app/announcement/announcement.component.html

@@ -1,5 +1,5 @@
-<div class="announcement mat-caption dark-theme center primary-bg" fxLayoutAlign="center center">
-  <span class="announcement__content" fxLayoutGap="4px" fxLayoutAlign="center center">
+<div class="announcement mat-caption dark-theme center primary-bg flex items-center justify-center">
+  <span class="announcement__content flex items-center justify-center gap-2">
     <span>{{ announcement.bannerText }}</span>
     @if (announcement.bannerButton) {
       <button mat-button color="primary" (click)="showAnnouncementDetails()">

src/app/contact/contact-form/contact-form.component.html

@@ -19,11 +19,11 @@
         role="form"
         (submit)="submit()"
         [formGroup]="contactFormGroup"
-        fxLayout="column"
+        class="flex flex-col"
       >
         <h2 class="accent center" i18n>Contact WISE</h2>
         <p>
-          <mat-form-field appearance="fill" fxFlex>
+          <mat-form-field appearance="fill" class="w-full">
             <mat-label i18n>Name</mat-label>
             <input matInput id="name" name="name" formControlName="name" />
             <mat-error *ngIf="contactFormGroup.controls['name'].hasError('required')" i18n
@@ -32,7 +32,7 @@ <h2 class="accent center" i18n>Contact WISE</h2>
           </mat-form-field>
         </p>
         <p *ngIf="!isStudent">
-          <mat-form-field appearance="fill" fxFlex>
+          <mat-form-field appearance="fill" class="w-full">
             <mat-label i18n>Email</mat-label>
             <input matInput id="email" name="email" formControlName="email" />
             <mat-error *ngIf="contactFormGroup.controls['email'].hasError('required')" i18n
@@ -44,7 +44,7 @@ <h2 class="accent center" i18n>Contact WISE</h2>
           </mat-form-field>
         </p>
         <p *ngIf="isStudent && teachers.length > 0">
-          <mat-form-field appearance="fill" fxFlex>
+          <mat-form-field appearance="fill" class="w-full">
             <mat-label i18n>Teacher</mat-label>
             <mat-select formControlName="teacher">
               <mat-option *ngFor="let teacher of teachers" [value]="teacher.username">
@@ -57,7 +57,7 @@ <h2 class="accent center" i18n>Contact WISE</h2>
           </mat-form-field>
         </p>
         <p>
-          <mat-form-field appearance="fill" fxFlex>
+          <mat-form-field appearance="fill" class="w-full">
             <mat-label i18n>Issue Type</mat-label>
             <mat-select formControlName="issueType">
               <mat-option *ngFor="let issueType of issueTypes" [value]="issueType.key">
@@ -70,13 +70,13 @@ <h2 class="accent center" i18n>Contact WISE</h2>
           </mat-form-field>
         </p>
         <p *ngIf="projectName">
-          <mat-form-field appearance="fill" fxFlex>
+          <mat-form-field appearance="fill" class="w-full">
             <mat-label i18n>Project Name</mat-label>
             <input matInput name="projectName" [value]="projectName" disabled />
           </mat-form-field>
         </p>
         <p>
-          <mat-form-field appearance="fill" fxFlex>
+          <mat-form-field appearance="fill" class="w-full">
             <mat-label i18n>Summary</mat-label>
             <input matInput id="summary" name="summary" formControlName="summary" />
             <mat-error *ngIf="contactFormGroup.controls['summary'].hasError('required')" i18n
@@ -85,7 +85,7 @@ <h2 class="accent center" i18n>Contact WISE</h2>
           </mat-form-field>
         </p>
         <p>
-          <mat-form-field appearance="fill" fxFlex>
+          <mat-form-field appearance="fill" class="w-full">
             <mat-label i18n>Description</mat-label>
             <textarea
               matInput
@@ -110,26 +110,26 @@ <h2 class="accent center" i18n>Contact WISE</h2>
           <div>&nbsp;</div>
         </ng-container>
         <ng-template #error>
-          <mat-error
+          <p
             *ngIf="isRecaptchaEnabled && isRecaptchaError; else genericError"
-            class="center"
+            class="center warn"
             i18n
-            >Recaptcha failed. Please reload the page and try again!</mat-error
           >
+            Recaptcha failed. Please reload the page and try again!
+          </p>
         </ng-template>
         <ng-template #genericError>
-          <mat-error class="center" i18n>
+          <p class="center warn" i18n>
             Sorry, there was a problem submitting the form. Please try again.
-          </mat-error>
+          </p>
         </ng-template>
         <p>
           <button
-            fxFlex
             mat-flat-button
             color="primary"
             type="submit"
             [disabled]="!contactFormGroup.valid || isSendingRequest"
-            class="button--progress"
+            class="button--progress w-full"
           >
             <mat-progress-bar *ngIf="isSendingRequest" mode="indeterminate"></mat-progress-bar>
             <ng-container i18n>Submit</ng-container>

src/app/contact/contact-form/contact-form.component.spec.ts

@@ -15,7 +15,7 @@ import { RECAPTCHA_V3_SITE_KEY, ReCaptchaV3Service, RecaptchaV3Module } from 'ng
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { UserService } from '../../services/user.service';
-import { getErrorMessage } from '../../common/test-helper';
+import { By } from '@angular/platform-browser';
 
 export class MockStudentService {
   getTeacherList(): Observable<User> {
@@ -154,7 +154,7 @@ function submit_showErrorMessage(): void {
     const httpPostSpy = httpPostSpyAndReturn('error');
     await submitAndDetectChanges();
     expect(httpPostSpy).toHaveBeenCalled();
-    expect(getErrorMessage(fixture)).toContain(
+    expect(fixture.debugElement.query(By.css('.warn')).nativeElement.textContent).toContain(
       'Sorry, there was a problem submitting the form. Please try again.'
     );
   });
@@ -168,7 +168,7 @@ function submit_showRecaptchaErrorMessage(): void {
     const httpPostSpy = httpPostSpyAndReturn('error');
     await submitAndDetectChanges();
     expect(httpPostSpy).toHaveBeenCalled();
-    expect(getErrorMessage(fixture)).toContain(
+    expect(fixture.debugElement.query(By.css('.warn')).nativeElement.textContent).toContain(
       'Recaptcha failed. Please reload the page and try again!'
     );
   });