Resolve layout consistency issues + Update localizations files + Fix lint warnings

functions/src/export-csv.ts

@@ -314,7 +314,7 @@ function getPropertiesByName(
   properties: Set<string | number>
 ): List<string | number | null> {
   // Fill the list with the value associated with a prop, if the LOI has it, otherwise leave empty.
-  return List.of(...properties)
+  return List([...properties])
     .map(prop => loi.properties[prop])
     .map(value => value?.stringValue || value?.numericValue || null);
 }

web/src/app/components/about/about.component.html

@@ -40,4 +40,4 @@ <h1 class="page-title" i18n="@@app.labels.about">About</h1>
       <span i18n="@@app.labels.back">Back</span>
     </button>
   </div>
-</div>
+</div>

web/src/app/components/create-survey/create-survey.component.html

@@ -32,7 +32,10 @@
     </div>
   </div>
 
-  <div class="container">
+  <div
+    *ngIf="createSurveyPhase !== CreateSurveyPhase.LOADING"
+    class="container"
+  >
     <div class="card">
       <img
         *ngIf="createSurveyPhase === CreateSurveyPhase.JOB_DETAILS"
@@ -112,7 +115,7 @@
 
       <div class="right-button-section">
         <ground-copy-survey-controls
-          *ngIf="createSurveyPhase == CreateSurveyPhase.SHARE_SURVEY"
+          *ngIf="createSurveyPhase === CreateSurveyPhase.SHARE_SURVEY"
           [surveyId]="surveyId"
         ></ground-copy-survey-controls>
 

web/src/app/components/create-survey/create-survey.component.ts

@@ -16,7 +16,7 @@
 
 import '@angular/localize/init';
 
-import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { List } from 'immutable';
 import { Subscription, filter, of } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -146,8 +146,7 @@ export class CreateSurveyComponent implements OnInit {
     private jobService: JobService,
     private taskService: TaskService,
     private navigationService: NavigationService,
-    private loiService: LocationOfInterestService,
-    private cdr: ChangeDetectorRef
+    private loiService: LocationOfInterestService
   ) {}
 
   ngOnInit(): void {

web/src/app/components/create-survey/data-sharing-terms/data-sharing-terms.component.html

@@ -15,11 +15,15 @@
 -->
 
 <form [formGroup]="formGroup">
-  <mat-radio-group class="data-sharing-terms"
+  <mat-radio-group
+    class="data-sharing-terms"
     [id]="typeControlKey"
     [formControlName]="typeControlKey"
   >
-    <mat-card *ngFor="let option of dataSharingTermsOptions" class="data-sharing-terms-card">
+    <mat-card
+      *ngFor="let option of dataSharingTermsOptions"
+      class="data-sharing-terms-card"
+    >
       <mat-card-content>
         <mat-radio-button class="option-radio-button" [value]="option.value">
           <span class="data-sharing-label">{{ option.label }}</span>
@@ -39,11 +43,13 @@ <h3 id="customize-agreement-header" class="field-header">
             >
           </p>
           <mat-form-field class="custom-terms">
-            <textarea matInput
+            <textarea
+              matInput
               formControlName="customText"
               placeholder="Enter the terms of your custom agreement..."
               i18n-placeholder="@@app.forms.placeholders.customAgreement"
-              aria-labelledby="customize-agreement-header">
+              aria-labelledby="customize-agreement-header"
+            >
             </textarea>
             <mat-error
               *ngIf="customTextControl.touched && customTextControl.invalid"

web/src/app/components/main-page-container/main-page/secondary-side-panel/loi-panel/loi-panel.component.ts

@@ -114,9 +114,9 @@ export class LocationOfInterestPanelComponent {
       height: '70%',
       autoFocus: false,
       data: {
-        iconColor: this.iconColor,
-        iconName: this.icon,
-        loiDisplayName: this.name,
+        iconColor: this.iconColor(),
+        iconName: this.icon(),
+        loiDisplayName: this.name(),
         properties: loi.properties.toObject(),
       },
       panelClass: 'loi-properties-dialog-container',

web/src/app/components/main-page-container/main-page/side-panel/job-list/job-list.component.html

@@ -17,7 +17,7 @@
 <mat-list
   role="list"
   class="jobs"
-  [ngClass]="{collapsed: !isSidePanelExpanded()}"
+  [ngClass]="{ collapsed: !isSidePanelExpanded() }"
 >
   @for (entry of jobs(); track entry.id) {
     <ground-job-list-item

web/src/app/components/main-page-container/main-page/side-panel/submission-form/submission-form.component.html

@@ -30,7 +30,7 @@ <h3>Add/edit submission</h3>
     <div *ngFor="let task of submissionTasks">
       <div class="task-result">
         <!-- Text task -->
-        <div *ngIf="task.type == taskTypes.TEXT">
+        <div *ngIf="task.type === taskTypes.TEXT">
           <mat-form-field appearance="fill">
             <mat-label class="task-label" [attr.for]="task.id">
               {{ task.label }}
@@ -43,7 +43,7 @@ <h3>Add/edit submission</h3>
             />
           </mat-form-field>
         </div>
-        <div *ngIf="task.type == taskTypes.NUMBER">
+        <div *ngIf="task.type === taskTypes.NUMBER">
           <mat-form-field appearance="fill">
             <input
               type="number"
@@ -56,7 +56,7 @@ <h3>Add/edit submission</h3>
 
         <!-- Multiple choice task -->
         <div
-          *ngIf="task.type == taskTypes.MULTIPLE_CHOICE"
+          *ngIf="task.type === taskTypes.MULTIPLE_CHOICE"
           class="multiple-choice-task"
         >
           <!-- Radio button task -->
@@ -71,7 +71,7 @@ <h3>Add/edit submission</h3>
           <mat-radio-group
             [id]="task.id"
             [formControlName]="task.id"
-            *ngIf="task.multipleChoice?.cardinality == cardinality.SELECT_ONE"
+            *ngIf="task.multipleChoice?.cardinality === cardinality.SELECT_ONE"
             [required]="task.required"
           >
             <mat-radio-button
@@ -85,7 +85,7 @@ <h3>Add/edit submission</h3>
           <!-- Checkbox task -->
           <div
             *ngIf="
-              task.multipleChoice?.cardinality == cardinality.SELECT_MULTIPLE
+              task.multipleChoice?.cardinality === cardinality.SELECT_MULTIPLE
             "
           >
             <mat-checkbox

web/src/app/components/shared/copy-survey-controls/copy-survey-controls.component.html

@@ -28,7 +28,7 @@
   </button>
 </div>
 
-<div style="display: none;">
+<div style="display: none">
   <qrcode
     *ngIf="surveyAppLink"
     #qrCodeElement

web/src/app/components/shared/header/current-user-widget/current-user-widget.component.html

@@ -13,6 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 -->
+
 <div *ngIf="auth.getUser$() | async as user">
   <div *ngIf="user.isAuthenticated">
     <button mat-icon-button (click)="openProfileDialog($event)">
@@ -23,9 +24,7 @@
         class="user-thumb"
       />
       <ng-template #showDefaultPhoto>
-        <user-avatar
-          [displayText]="user.displayName?.charAt(0)"
-        ></user-avatar>
+        <user-avatar [displayText]="user.displayName?.charAt(0)"></user-avatar>
       </ng-template>
     </button>
   </div>

web/src/app/components/shared/loi-editor/loi-editor.component.html

@@ -60,11 +60,9 @@
         </div>
       </div>
 
-      <div
-        *ngIf="canImport && lois"
-        class="loi-editor-card-actions"
-      >
-        <button *ngIf="lois.size == 0"
+      <div *ngIf="canImport && lois" class="loi-editor-card-actions">
+        <button
+          *ngIf="lois.size === 0"
           mat-flat-button
           class="import-lois-button"
           (click)="importLois()"
@@ -74,7 +72,8 @@
           <span i18n="@@app.labels.import">Import</span>
         </button>
 
-        <button *ngIf="lois.size > 0"
+        <button
+          *ngIf="lois.size > 0"
           mat-flat-button
           class="clear-all-lois"
           (click)="clearLois()"
@@ -87,11 +86,7 @@
     </div>
 
     <div *ngIf="lois && lois.size > 0">
-      <loi-selection
-        [lois]="lois"
-        [survey]="survey"
-        [jobId]="job?.id"
-      >
+      <loi-selection [lois]="lois" [survey]="survey" [jobId]="job?.id">
       </loi-selection>
     </div>
   </div>

web/src/app/components/shared/sign-in-page/sign-in-page.component.html

@@ -16,27 +16,32 @@
 
 <ground-header></ground-header>
 
-<div class="body-container">
+<div
+  class="body-container"
+  style="background-image: url(assets/img/happy-land.png)"
+>
   <mat-card appearance="outlined" class="card">
     <mat-card-content class="content">
       <div>
         <img class="logo" src="assets/img/logo.svg" alt="Ground logo" />
       </div>
       <p class="title">Ground</p>
-      <p class="cta" *ngIf="!(isAuthenticated$() | async)">
+      <p class="cta" *ngIf="(isAuthenticated$() | async) === false">
         <ng-container i18n="@@app.login.signInToContinue"
           >Sign in to continue</ng-container
         >
       </p>
 
       <div class="buttons">
-        <button 
-          class="google-signin-btn" 
+        <button
+          matButton="outlined"
+          class="google-btn"
           (click)="onGoogleSignIn()"
-          type="button"
         >
-          <img src="assets/img/web_light_rd_na.svg" alt="" class="google-logo" />
-          <span i18n="@@app.login.signInWithGoogle">Sign in with Google</span>
+          <span class="google-btn-content">
+            <img src="assets/img/web_light_rd_na.svg" alt="Google logo" />
+            <span i18n="@@app.login.signInWithGoogle">Sign in with Google</span>
+          </span>
         </button>
       </div>
     </mat-card-content>

web/src/app/components/shared/sign-in-page/sign-in-page.component.scss

@@ -15,7 +15,6 @@
  */
 
 .body-container {
-  background-image: url(/assets/img/happy-land.png);
   background-repeat: no-repeat;
   background-size: cover;
   width: 100vw;
@@ -34,7 +33,7 @@
   width: 420px;
   height: 460px;
   border-radius: 24px;
-  
+
   .content {
     padding: 40px;
   }
@@ -44,44 +43,17 @@
   margin-top: 48px;
   display: flex;
   justify-content: center;
-}
-
-.google-signin-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 0 0 12px 0;
-  border: 1px solid #dadce0;
-  border-radius: 4px;
-  background-color: #fff;
-  color: #3c4043;
-  font-family: 'Google Sans', Roboto, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-height: 40px;
-
-  &:hover {
-    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
-    background-color: #f8f9fa;
-  }
-
-  &:active {
-    background-color: #f1f3f4;
-    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
-  }
 
-  &:disabled {
-    background-color: #f1f3f4;
-    color: #9aa0a6;
-    cursor: not-allowed;
-    border-color: #f1f3f4;
+  .google-btn {
+    background-color: #F2F2F2 !important;
+    color: #1F1F1F !important;
+    font-family: 'Roboto', sans-serif;
+    padding: 0 !important;
+
+    .google-btn-content {
+      display: flex;
+      align-items: center;
+      margin-right: 12px;
+    }
   }
 }