bcgov · sukhpalp · Feb 27, 2026 · Feb 27, 2026
diff --git a/client/wfnews-war/src/main/angular/src/app/app.module.ts b/client/wfnews-war/src/main/angular/src/app/app.module.ts
@@ -116,6 +116,7 @@ import { VideoGalleryPanel } from './components/admin-incident-form/video-galler
 import { BaseDialogComponent } from './components/base-dialog/base-dialog.component';
 import { AdvisorySectionComponent } from './components/common/advisory-section/advisory-section.component';
 import { AlertOrderBannerComponent } from './components/common/alert-order-banner/alert-order-banner.component';
+import { BcCheckboxComponent } from './components/common/bc-checkbox/bc-checkbox.component';
 import { CheckboxButtonComponent } from './components/common/checkbox-button/checkbox-button.component';
 import { CircleIconButtonComponent } from './components/common/circle-icon-button/circle-icon-button.component';
 import { ContactUsCoreComponent } from './components/common/contact-us-core/contact-us-core.component';
@@ -445,6 +446,7 @@ export const DATE_FORMATS = {
     MobileSlidingDrawerComponent,
     MapTypePickerComponent,
     CheckboxButtonComponent,
+    BcCheckboxComponent,
     MapLayersDrawerSectionComponent,
     MapLayersDataSourceDrawerSectionComponent,
     FullDetailsComponent,

diff --git a/...in-incident-form/image-gallery-panel/image-card-component/image-card-panel.component.html b/...in-incident-form/image-gallery-panel/image-card-component/image-card-panel.component.html
@@ -12,10 +12,10 @@
       <mat-radio-button [checked]="isPrimary" (change)="changePrimary()">Set as Primary Image</mat-radio-button>
     </div>
     <div class="action">
-      <mat-icon (click)="edit()">edit</mat-icon> Edit Image Title
+      <mat-icon (click)="edit()">edit</mat-icon> <span>Edit Image Title</span>
     </div>
     <div class="action">
-      <mat-checkbox [checked]="commsSuitable" (change)="includeInGallery()"><span class="checkbox-label">Include in Public Gallery</span></mat-checkbox>
+      <bc-checkbox [checked]="commsSuitable" (change)="includeInGallery()">Include in Public Gallery</bc-checkbox>
     </div>
   </div>
-</div>
+</div>
diff --git a/...in-incident-form/image-gallery-panel/image-card-component/image-card-panel.component.scss b/...in-incident-form/image-gallery-panel/image-card-component/image-card-panel.component.scss
@@ -32,9 +32,15 @@
 
     .action {
       padding: 5px 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
       mat-icon {
         cursor: pointer;
         font-size: 20px;
+        width: 20px;
+        height: 20px;
       }
     }
 

diff --git a/...mponents/admin-incident-form/response-details-panel/response-details-panel.component.html b/...mponents/admin-incident-form/response-details-panel/response-details-panel.component.html
@@ -6,14 +6,9 @@
         <div class="field size-full">
           <mat-form-field class="item-full-width" appearance="outline" floatLabel="always">
             <mat-label class="label required">General Disclaimer and Comments</mat-label>
-            <textarea matInput
-                cdkTextareaAutosize
-                #autosize="cdkTextareaAutosize"
-                cdkAutosizeMinRows="1"
-                cdkAutosizeMaxRows="5"
-                [(ngModel)]="incident.responseComments"
-                formControlName="responseComments"
-                ></textarea>
+            <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
+              cdkAutosizeMaxRows="5" [(ngModel)]="incident.responseComments"
+              formControlName="responseComments"></textarea>
           </mat-form-field>
         </div>
       </div>
@@ -26,13 +21,14 @@ <h2>Resources Assigned</h2>
     <mat-card-title>
       Firefighting Personnel
       <button mat-button (click)="updateCrews()" class="resource-button"><img class="icon"
-        src="/assets/images/svg-icons/fluent_open-24-regular.svg"
-        alt="sync" />Import data from Resource Manager</button>
+          src="/assets/images/svg-icons/fluent_open-24-regular.svg" alt="sync" />Import data from Resource
+        Manager</button>
     </mat-card-title>
     <fieldset class="field-set">
       <legend style="display: none">Response card</legend>
       <div class="field size-full">
-        <mat-checkbox [(ngModel)]="incident.wildifreCrewsInd" formControlName="wildifreCrewsInd" class="example-margin" (change)="onWildfireCrewsChecked($event)">Display Firefighting Personnel information</mat-checkbox>
+        <bc-checkbox [(ngModel)]="incident.wildifreCrewsInd" formControlName="wildifreCrewsInd" class="example-margin"
+          (change)="onWildfireCrewsChecked($event)">Display Firefighting Personnel information</bc-checkbox>
       </div>
       <div class="news-form">
         <div class="field size-unset">
@@ -52,13 +48,8 @@ <h2>Resources Assigned</h2>
         <div class="field size-full">
           <mat-form-field class="item-full-width" appearance="outline" floatLabel="always">
             <mat-label class="label required">General Disclaimer and Comments</mat-label>
-            <textarea matInput
-                cdkTextareaAutosize
-                #autosize="cdkTextareaAutosize"
-                cdkAutosizeMinRows="1"
-                cdkAutosizeMaxRows="5"
-                [(ngModel)]="incident.crewsComments"
-                formControlName="crewsComments"></textarea>
+            <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
+              cdkAutosizeMaxRows="5" [(ngModel)]="incident.crewsComments" formControlName="crewsComments"></textarea>
           </mat-form-field>
         </div>
       </div>
@@ -68,13 +59,14 @@ <h2>Resources Assigned</h2>
     <mat-card-title>
       Aviation
       <button mat-button (click)="updateAviation()" class="resource-button"><img class="icon"
-        src="/assets/images/svg-icons/fluent_open-24-regular.svg"
-        alt="sync" />Import data from Resource Manager</button>
+          src="/assets/images/svg-icons/fluent_open-24-regular.svg" alt="sync" />Import data from Resource
+        Manager</button>
     </mat-card-title>
     <fieldset class="field-set">
       <legend style="display: none">Arial Response Card</legend>
       <div class="field size-full">
-        <mat-checkbox [(ngModel)]="incident.aviationInd" formControlName="aviationInd" class="example-margin" (change)="onAviationChecked($event)">Display Wildfire Aviation information</mat-checkbox>
+        <bc-checkbox [(ngModel)]="incident.aviationInd" formControlName="aviationInd" class="example-margin"
+          (change)="onAviationChecked($event)">Display Wildfire Aviation information</bc-checkbox>
       </div>
       <div class="news-form">
         <div class="field size-unset">
@@ -94,13 +86,9 @@ <h2>Resources Assigned</h2>
         <div class="field size-full">
           <mat-form-field class="item-full-width" appearance="outline" floatLabel="always">
             <mat-label class="label required">General Disclaimer and Comments</mat-label>
-            <textarea matInput
-                cdkTextareaAutosize
-                #autosize="cdkTextareaAutosize"
-                cdkAutosizeMinRows="1"
-                cdkAutosizeMaxRows="5"
-                [(ngModel)]="incident.aviationComments"
-                formControlName="aviationComments"></textarea>
+            <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
+              cdkAutosizeMaxRows="5" [(ngModel)]="incident.aviationComments"
+              formControlName="aviationComments"></textarea>
           </mat-form-field>
         </div>
       </div>
@@ -110,31 +98,30 @@ <h2>Resources Assigned</h2>
     <mat-card-title>
       Incident Management Team
       <button mat-button (click)="updateIMTeam()" class="resource-button"><img class="icon"
-        src="/assets/images/svg-icons/fluent_open-24-regular.svg"
-        alt="sync" />Import data from Resource Manager</button>
+          src="/assets/images/svg-icons/fluent_open-24-regular.svg" alt="sync" />Import data from Resource
+        Manager</button>
     </mat-card-title>
     <fieldset class="field-set">
       <legend style="display: none">Incident Management Response Card</legend>
       <div class="field size-full">
-        <mat-checkbox [(ngModel)]="incident.incidentManagementInd" formControlName="incidentManagementInd" class="example-margin" (change)="onIncidentManagementTeamsChecked($event)">Display Incident Management Team information</mat-checkbox>
+        <bc-checkbox [(ngModel)]="incident.incidentManagementInd" formControlName="incidentManagementInd"
+          class="example-margin" (change)="onIncidentManagementTeamsChecked($event)">Display Incident Management Team
+          information</bc-checkbox>
       </div>
       <div class="news-form">
         <div class="field size-unset">
           <mat-form-field floatLabel="always">
             <mat-label class="label">Incident Management Teams</mat-label>
-            <input matInput type="number" [value]="incident.incidentManagementResourceCount" #imTeams (change)="incidentTeamValueChange()">
+            <input matInput type="number" [value]="incident.incidentManagementResourceCount" #imTeams
+              (change)="incidentTeamValueChange()">
           </mat-form-field>
         </div>
         <div class="field size-full">
           <mat-form-field class="item-full-width" appearance="outline" floatLabel="always">
             <mat-label class="label required">General Disclaimer and Comments</mat-label>
-            <textarea matInput
-                cdkTextareaAutosize
-                #autosize="cdkTextareaAutosize"
-                cdkAutosizeMinRows="1"
-                cdkAutosizeMaxRows="5"
-                [(ngModel)]="incident.incidentManagementComments"
-                formControlName="incidentManagementComments"></textarea>
+            <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
+              cdkAutosizeMaxRows="5" [(ngModel)]="incident.incidentManagementComments"
+              formControlName="incidentManagementComments"></textarea>
           </mat-form-field>
         </div>
       </div>
@@ -144,31 +131,29 @@ <h2>Resources Assigned</h2>
     <mat-card-title>
       Heavy Equipment
       <button mat-button (click)="updateEquipment()" class="resource-button"><img class="icon"
-        src="/assets/images/svg-icons/fluent_open-24-regular.svg"
-        alt="sync" />Import data from Resource Manager</button>
+          src="/assets/images/svg-icons/fluent_open-24-regular.svg" alt="sync" />Import data from Resource
+        Manager</button>
     </mat-card-title>
     <fieldset class="field-set">
       <legend style="display: none">Equipment Response Card</legend>
       <div class="field size-full">
-        <mat-checkbox [(ngModel)]="incident.heavyEquipmentInd"  formControlName="heavyEquipmentInd" class="example-margin" (change)="onHeavyEquipmentChecked($event)">Display Heavy Equipment information</mat-checkbox>
+        <bc-checkbox [(ngModel)]="incident.heavyEquipmentInd" formControlName="heavyEquipmentInd" class="example-margin"
+          (change)="onHeavyEquipmentChecked($event)">Display Heavy Equipment information</bc-checkbox>
       </div>
       <div class="news-form">
         <div class="field size-unset">
           <mat-form-field floatLabel="always">
             <mat-label class="label">Heavy Equipment Pieces</mat-label>
-            <input matInput type="number" [value]="incident.heavyEquipmentResourceCount" #pieces (change)="heavyEquipmentValueChange()">
+            <input matInput type="number" [value]="incident.heavyEquipmentResourceCount" #pieces
+              (change)="heavyEquipmentValueChange()">
           </mat-form-field>
         </div>
         <div class="field size-full">
           <mat-form-field class="item-full-width" appearance="outline" floatLabel="always">
             <mat-label class="label required">General Disclaimer and Comments</mat-label>
-            <textarea matInput
-                cdkTextareaAutosize
-                #autosize="cdkTextareaAutosize"
-                cdkAutosizeMinRows="1"
-                cdkAutosizeMaxRows="5"
-                [(ngModel)]="incident.heavyEquipmentComments"
-                formControlName="heavyEquipmentComments"></textarea>
+            <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
+              cdkAutosizeMaxRows="5" [(ngModel)]="incident.heavyEquipmentComments"
+              formControlName="heavyEquipmentComments"></textarea>
           </mat-form-field>
         </div>
       </div>
@@ -178,34 +163,33 @@ <h2>Resources Assigned</h2>
     <mat-card-title>
       Structure Protection
       <button mat-button (click)="updateStructureProtection()" class="resource-button"><img class="icon"
-        src="/assets/images/svg-icons/fluent_open-24-regular.svg"
-        alt="sync" />Import data from Resource Manager</button>
+          src="/assets/images/svg-icons/fluent_open-24-regular.svg" alt="sync" />Import data from Resource
+        Manager</button>
     </mat-card-title>
     <fieldset class="field-set">
       <legend style="display: none">Structure Protection Response Card</legend>
       <div class="field size-full">
-        <mat-checkbox [(ngModel)]="incident.structureProtectionInd" formControlName="structureProtectionInd" class="example-margin"  (change)="onStructureProtectionChecked($event)">Display Structure Protection information</mat-checkbox>
+        <bc-checkbox [(ngModel)]="incident.structureProtectionInd" formControlName="structureProtectionInd"
+          class="example-margin" (change)="onStructureProtectionChecked($event)">Display Structure Protection
+          information</bc-checkbox>
       </div>
       <div class="news-form">
         <div class="field size-unset">
           <mat-form-field floatLabel="always">
             <mat-label class="label">Structure protection</mat-label>
-            <input matInput [value]="incident.structureProtectionResourceCount" type="number" #structure (change)="structuretValueChange()">
+            <input matInput [value]="incident.structureProtectionResourceCount" type="number" #structure
+              (change)="structuretValueChange()">
           </mat-form-field>
         </div>
         <div class="field size-full">
           <mat-form-field class="item-full-width" appearance="outline" floatLabel="always">
             <mat-label class="label required">General Disclaimer and Comments</mat-label>
-            <textarea matInput
-                cdkTextareaAutosize
-                #autosize="cdkTextareaAutosize"
-                cdkAutosizeMinRows="1"
-                cdkAutosizeMaxRows="5"
-                [(ngModel)]="incident.structureProtectionComments"
-                formControlName="structureProtectionComments"></textarea>
+            <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
+              cdkAutosizeMaxRows="5" [(ngModel)]="incident.structureProtectionComments"
+              formControlName="structureProtectionComments"></textarea>
           </mat-form-field>
         </div>
       </div>
     </fieldset>
   </mat-card>
-</ng-container>
+</ng-container>
diff --git a/...ews-war/src/main/angular/src/app/components/common/bc-checkbox/bc-checkbox.component.html b/...ews-war/src/main/angular/src/app/components/common/bc-checkbox/bc-checkbox.component.html
@@ -0,0 +1,19 @@
+<label class="bc-checkbox-wrapper" [class.disabled]="disabled">
+  <div class="bc-checkbox-container">
+    <input type="checkbox" [checked]="checked" [disabled]="disabled" (change)="onInputChange($event)"
+      [attr.aria-label]="ariaLabel || label">
+    <div class="bc-checkbox-box">
+      <svg viewBox="0 0 10 10" class="bc-checkbox-checkmark" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M9.09447 1.16176C8.67766 0.834916 8.07489 0.907409 7.74747 1.32376L3.63547 6.55676L2.21847 4.85676C1.87495 4.46651 1.2832 4.42064 0.883639 4.75329C0.484082 5.08594 0.421942 5.6762 0.743468 6.08476L2.92047 8.69776C2.94047 8.72176 2.96947 8.72976 2.99047 8.75176C3.0133 8.78196 3.03802 8.81068 3.06447 8.83776C3.10707 8.86542 3.15189 8.8895 3.19847 8.90976C3.23068 8.92977 3.26407 8.9478 3.29847 8.96376C3.41159 9.01295 3.53316 9.03977 3.65647 9.04276H3.65747C3.78585 9.04006 3.91238 9.01149 4.02947 8.95876C4.06502 8.9413 4.09942 8.92159 4.13247 8.89976C4.18141 8.87729 4.22826 8.85052 4.27247 8.81976C4.29837 8.79134 4.32242 8.76128 4.34447 8.72976C4.36447 8.70976 4.36447 8.70976 4.39347 8.69976 4.41247 8.67576L9.25747 2.50976C9.58477 2.09253 9.51178 1.48896 9.09447 1.16176V1.16176Z"
+          fill="white" />
+      </svg>
+    </div>
+  </div>
+  <div class="bc-checkbox-label-content">
+    <span class="bc-checkbox-label" *ngIf="label">
+      {{ label }}
+    </span>
+    <ng-content></ng-content>
+  </div>
+</label>
diff --git a/...ews-war/src/main/angular/src/app/components/common/bc-checkbox/bc-checkbox.component.scss b/...ews-war/src/main/angular/src/app/components/common/bc-checkbox/bc-checkbox.component.scss
@@ -0,0 +1,99 @@
+@import '../../../../styles/variables';
+
+:host {
+  display: inline-block;
+}
+
+.bc-checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px; /* Added padding to increase touch area */
+  margin: -8px; /* Negative margin to keep layout exact */
+  cursor: pointer;
+  user-select: none;
+  font-family: 'BCSans', 'Open Sans', Verdana, Arial, sans-serif;
+  font-size: 16px;
+  color: #313132;
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    input {
+      cursor: not-allowed;
+    }
+  }
+
+  .bc-checkbox-container {
+    position: relative;
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+
+    input {
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      height: 0;
+      width: 0;
+      margin: 0;
+
+      &:checked ~ .bc-checkbox-box {
+        background-color: #013366;
+        border-color: #013366;
+
+        .bc-checkbox-checkmark {
+          display: block;
+        }
+      }
+    }
+
+    .bc-checkbox-box {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 18px;
+      width: 18px;
+      background-color: #ffffff;
+      border: 1px solid #898785;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      transition: background-color 0.1s ease, border-color 0.1s ease;
+
+      // Force border visibility on mobile/high contrast
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
+
+    .bc-checkbox-checkmark {
+      display: none;
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  .bc-checkbox-label-content {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .bc-checkbox-label {
+    line-height: normal;
+  }
+
+  &:hover:not(.disabled) {
+    .bc-checkbox-box {
+      border-color: #313132;
+    }
+
+    input:checked ~ .bc-checkbox-box {
+      background-color: #002c56;
+      border-color: #002c56;
+    }
+  }
+}