98 change the UI of report type buttons

deployments/id/assets/locales/en.json

@@ -60,8 +60,10 @@
         "structureTypeButton": "Structural Failure"
       },
       "report":{
-        "realTypeButton": "Submit Real Disaster Report",
-        "trainingTypeButton": "Complete Training Exercise"
+        "realTypeButton": "Submit Disaster Report",
+        "realSubTypeButton": "Use only if you are in a disaster 🚨",
+        "trainingTypeButton": "Complete Training Exercise",
+        "trainingSubTypeButton": "Use to practice disaster reporting📝"
       }
     },
     "visibility": {

deployments/id/assets/locales/id.json

@@ -62,7 +62,9 @@
       },
       "report": {
         "realTypeButton": "Laporkan Bencana",
-        "trainingTypeButton": " Latihan Simulasi"
+        "realSubTypeButton": "Gunakan saat ada bencana🚨",
+        "trainingTypeButton": "Latihan Simulasi",
+        "trainingSubTypeButton": "Gunakan saat latihan📝"
       }
     },
     "visibility": {

src/app/components/report-type-button/report-type-button.component.html

@@ -1,8 +1,9 @@
   <div
     class="report-type"
   >
-      <button class="report-type__btn">
+      <button class="report-type__btn" [ngClass]="btnClasses">
         {{ title }}
+      <div class="report-type__subtitle"> {{ subtitle }} </div>  
       </button>
 
   </div>

src/app/components/report-type-button/report-type-button.component.scss

@@ -2,21 +2,39 @@
   cursor: pointer;
 
   &__btn {
-    display: block;
-    color: #c34c4d;
+    display: grid;
     margin: 20px auto 10px;
     border-radius: 7.5px;
     padding: 8px 6px;
     min-width: 72px;
     border: 1.5px solid white;
-    background-color: #fff;
     cursor: pointer;
     min-width: 30%;
     line-height: 1;
-    font-size: 1.2rem;
+    font-size: 1.5rem;
     filter: drop-shadow(2px 4px 6px black);
+    font-weight: 700;
+    height: 100px;
+    align-items: center;
+  }
+  &__subtitle {
+    font-size: 0.9rem;
+    font-weight: 100;
+  }
+  .real_btn{
+    background-color: rgb(204, 0, 0);
+    color: white;
+    border: none;
+    &__subtitle {
+      color: white;
+    }
+  }
+  .training_btn{
+    background-color: white;
+    &__subtitle {
+      color: black;
+    }
   }
-
 }
 
 @media (max-width: 721px) and (max-height: 761px) {

src/app/components/report-type-button/report-type-button.component.ts

@@ -7,4 +7,6 @@ import { Component, Input } from '@angular/core';
 })
 export class ReportTypeButtonComponent {
   @Input() title: string;
+  @Input() subtitle: string;
+  @Input() btnClasses: string;
 }

src/app/routes/decks/earthquake/earthquake.component.html

@@ -8,11 +8,13 @@
     <ng-template ngFor let-item [ngForOf]="items">
       <app-report-type-button
         [title]="item.title | translate"
+        [subtitle]="item.subtitle | translate"
         (click)="onTypeSelected(item.subType)"
+        [btnClasses]="item.subType === 'real' ? 'real_btn' : item.subType === 'training' ? 'training_btn' : ''"
       ></app-report-type-button>
     </ng-template>
   </div>
-
+  
   <router-outlet>
   </router-outlet>
 

src/app/routes/decks/earthquake/earthquake.component.ts

@@ -14,6 +14,7 @@ import { environment as env } from '../../../../environments/environment';
 export class EarthquakeComponent implements OnInit {
   items: {
     title: string;
+    subtitle: string;
     subType: 'real' | 'training';
   }[];
   showReportTypeButton: boolean = true
@@ -53,10 +54,12 @@ export class EarthquakeComponent implements OnInit {
     this.items = [
       {
         title: 'card.type.report.realTypeButton',
+        subtitle: 'card.type.report.realSubTypeButton',
         subType: 'real',
       },
       {
         title: 'card.type.report.trainingTypeButton',
+        subtitle: 'card.type.report.trainingSubTypeButton',
         subType: 'training',
       },
     ]

src/app/routes/decks/fire/fire.component.html

@@ -7,7 +7,9 @@
     <ng-template ngFor let-item [ngForOf]="items">
       <app-report-type-button
         [title]="item.title | translate"
+        [subtitle]="item.subtitle | translate"
         (click)="onTypeSelected(item.subType)"
+        [btnClasses]="item.subType === 'real' ? 'real_btn' : item.subType === 'training' ? 'training_btn' : ''"
       ></app-report-type-button>
     </ng-template>
   </div>

src/app/routes/decks/fire/fire.component.ts

@@ -14,6 +14,7 @@ import { environment as env } from '../../../../environments/environment';
 export class FireComponent implements OnInit {
   items: {
     title: string;
+    subtitle: string;
     subType: 'real' | 'training';
   }[];
   showReportTypeButton: boolean = true
@@ -54,10 +55,12 @@ export class FireComponent implements OnInit {
     this.items = [
       {
         title: 'card.type.report.realTypeButton',
+        subtitle: 'card.type.report.realSubTypeButton',
         subType: 'real',
       },
       {
         title: 'card.type.report.trainingTypeButton',
+        subtitle: 'card.type.report.trainingSubTypeButton',
         subType: 'training',
       },
     ];

src/app/routes/decks/flood/flood.component.html

@@ -9,7 +9,9 @@
   <ng-template ngFor let-item [ngForOf]="items">
     <app-report-type-button
       [title]="item.title | translate"
+      [subtitle]="item.subtitle | translate"
       (click)="onTypeSelected(item.subType)"
+      [btnClasses]="item.subType === 'real' ? 'real_btn' : item.subType === 'training' ? 'training_btn' : ''"
     ></app-report-type-button>
   </ng-template>
 </div>

src/app/routes/decks/flood/flood.component.ts

@@ -14,6 +14,7 @@ import { environment as env } from '../../../../environments/environment';
 export class FloodComponent implements OnInit {
   items: {
     title: string;
+    subtitle: string;
     subType: 'real' | 'training';
   }[];
   showReportTypeButton: boolean = true
@@ -54,10 +55,12 @@ export class FloodComponent implements OnInit {
     this.items = [
       {
         title: 'card.type.report.realTypeButton',
+        subtitle: 'card.type.report.realSubTypeButton',
         subType: 'real',
       },
       {
         title: 'card.type.report.trainingTypeButton',
+        subtitle: 'card.type.report.trainingSubTypeButton',
         subType: 'training',
       },
     ];

src/app/routes/decks/haze/haze.component.html

@@ -8,7 +8,9 @@
     <ng-template ngFor let-item [ngForOf]="items">
       <app-report-type-button
         [title]="item.title | translate"
+        [subtitle]="item.subtitle | translate"
         (click)="onTypeSelected(item.subType)"
+        [btnClasses]="item.subType === 'real' ? 'real_btn' : item.subType === 'training' ? 'training_btn' : ''"
       ></app-report-type-button>
     </ng-template>
   </div>

src/app/routes/decks/haze/haze.component.ts

@@ -14,6 +14,7 @@ import { environment as env } from '../../../../environments/environment';
 export class HazeComponent implements OnInit {
   items: {
     title: string;
+    subtitle: string;
     subType: 'real' | 'training';
   }[];
   showReportTypeButton: boolean = true
@@ -54,10 +55,12 @@ export class HazeComponent implements OnInit {
     this.items = [
       {
         title: 'card.type.report.realTypeButton',
+        subtitle: 'card.type.report.realSubTypeButton',
         subType: 'real',
       },
       {
         title: 'card.type.report.trainingTypeButton',
+        subtitle: 'card.type.report.trainingSubTypeButton',
         subType: 'training',
       },
     ]

src/app/routes/decks/volcano/volcano.component.html

@@ -8,7 +8,9 @@
     <ng-template ngFor let-item [ngForOf]="items">
       <app-report-type-button
         [title]="item.title | translate"
+        [subtitle]="item.subtitle | translate"
         (click)="onTypeSelected(item.subType)"
+        [btnClasses]="item.subType === 'real' ? 'real_btn' : item.subType === 'training' ? 'training_btn' : ''"
       ></app-report-type-button>
     </ng-template>
   </div>

src/app/routes/decks/volcano/volcano.component.ts

@@ -14,6 +14,7 @@ import { environment as env } from '../../../../environments/environment';
 export class VolcanoComponent implements OnInit {
   items: {
     title: string;
+    subtitle: string;
     subType: 'real' | 'training';
   }[];
   showReportTypeButton: boolean = true
@@ -54,10 +55,12 @@ export class VolcanoComponent implements OnInit {
     this.items = [
       {
         title: 'card.type.report.realTypeButton',
+        subtitle: 'card.type.report.realSubTypeButton',
         subType: 'real',
       },
       {
         title: 'card.type.report.trainingTypeButton',
+        subtitle: 'card.type.report.trainingSubTypeButton',
         subType: 'training',
       },
     ]

src/app/routes/decks/wind/wind.component.html

@@ -8,7 +8,9 @@
     <ng-template ngFor let-item [ngForOf]="items">
       <app-report-type-button
         [title]="item.title | translate"
+        [subtitle]="item.subtitle | translate"
         (click)="onTypeSelected(item.subType)"
+        [btnClasses]="item.subType === 'real' ? 'real_btn' : item.subType === 'training' ? 'training_btn' : ''"
       ></app-report-type-button>
     </ng-template>
   </div>

src/app/routes/decks/wind/wind.component.ts

@@ -14,6 +14,7 @@ import { environment as env } from '../../../../environments/environment';
 export class WindComponent implements OnInit {
   items: {
     title: string;
+    subtitle: string;
     subType: 'real' | 'training';
   }[];
   showReportTypeButton: boolean = true
@@ -55,10 +56,12 @@ export class WindComponent implements OnInit {
     this.items = [
       {
         title: 'card.type.report.realTypeButton',
+        subtitle: 'card.type.report.realSubTypeButton',
         subType: 'real',
       },
       {
         title: 'card.type.report.trainingTypeButton',
+        subtitle: 'card.type.report.trainingSubTypeButton',
         subType: 'training',
       },
     ]