From cf452428f8ec924f49f380c3cfd7e2c920306864 Mon Sep 17 00:00:00 2001
From: Jonathan Lim-Breitbart <breity10@gmail.com>
Date: Fri, 4 Aug 2023 09:38:38 -0700
Subject: [PATCH] fix(Node Icon): Edit badge shows text content instead of icon
 #1377

---
 .../vle/node-icon/node-icon.component.html    |  6 ++---
 .../vle/node-icon/node-icon.component.scss    | 22 +++++++------------
 .../vle/node-icon/node-icon.component.ts      |  3 +--
 src/messages.xlf                              | 14 ++++++------
 src/style/abstracts/_mixins.scss              |  6 +++++
 5 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/assets/wise5/vle/node-icon/node-icon.component.html b/src/assets/wise5/vle/node-icon/node-icon.component.html
index 49b3459ff64..d82dd3c70ae 100644
--- a/src/assets/wise5/vle/node-icon/node-icon.component.html
+++ b/src/assets/wise5/vle/node-icon/node-icon.component.html
@@ -1,14 +1,14 @@
 <ng-template #iconContent>
   <img
     *ngIf="isImage()"
-    class="{{ isGroup ? 'avatar--square ' : '' }}{{ customClass }} {{ sizeClass }} avatar node-icon"
+    class="{{ isGroup ? 'avatar--square ' : '' }}{{ customClass }} {{ sizeClass }} avatar"
     [src]="icon.imgSrc"
     [alt]="icon.imgAlt"
   />
   <div
     *ngIf="isFont()"
     style="background-color: {{ icon.color }}"
-    class="{{ isGroup ? 'avatar--square ' : '' }}{{ customClass }} avatar node-icon"
+    class="{{ isGroup ? 'avatar--square ' : '' }}{{ customClass }} avatar"
   >
     <mat-icon class="{{ sizeClass }} {{ icon.fontSet }}">{{ icon.fontName }}</mat-icon>
   </div>
@@ -20,7 +20,7 @@
   matTooltip="Choose an Icon"
   matTooltipPosition="above"
   matBadge="edit"
-  class="node-icon mdc-text-field--filled"
+  class="mdc-text-field--filled has-icon-badge"
   (click)="openNodeIconChooserDialog()"
 >
   <div class="mat-form-field-flex" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="4px">
diff --git a/src/assets/wise5/vle/node-icon/node-icon.component.scss b/src/assets/wise5/vle/node-icon/node-icon.component.scss
index 8702a78dda0..fb6f795a987 100644
--- a/src/assets/wise5/vle/node-icon/node-icon.component.scss
+++ b/src/assets/wise5/vle/node-icon/node-icon.component.scss
@@ -1,16 +1,10 @@
-.node-icon {
-  .mat-icon {
-    color: #ffffff;
-    margin: 8px !important;
-  }
-
-  &.mat-mdc-button {
-    text-transform: none;
-    padding: 8px;
-    height: 100%;
-  }
+.mat-icon {
+  color: #ffffff;
+  margin: 8px !important;
+}
 
-  .mat-badge-content {
-    font-family: 'Material Icons';
-  }
+.mat-mdc-button {
+  text-transform: none;
+  padding: 8px;
+  height: 100%;
 }
diff --git a/src/assets/wise5/vle/node-icon/node-icon.component.ts b/src/assets/wise5/vle/node-icon/node-icon.component.ts
index 3af3d6712cc..872b2e05ed5 100644
--- a/src/assets/wise5/vle/node-icon/node-icon.component.ts
+++ b/src/assets/wise5/vle/node-icon/node-icon.component.ts
@@ -8,8 +8,7 @@ import { Node } from '../../common/Node';
 @Component({
   selector: 'node-icon',
   templateUrl: 'node-icon.component.html',
-  styleUrls: ['node-icon.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  styleUrls: ['node-icon.component.scss']
 })
 export class NodeIconComponent {
   @Input()
diff --git a/src/messages.xlf b/src/messages.xlf
index a04a5ecad89..41d7796d781 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -11827,49 +11827,49 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>You are not allowed to insert the selected item after itself.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts</context>
-          <context context-type="linenumber">182</context>
+          <context context-type="linenumber">174</context>
         </context-group>
       </trans-unit>
       <trans-unit id="975312545937364411" datatype="html">
         <source>You are not allowed to insert the selected items after itself.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts</context>
-          <context context-type="linenumber">184</context>
+          <context context-type="linenumber">176</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4585597741176321538" datatype="html">
         <source>Please select an item to copy and then click the &quot;Copy&quot; button again.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts</context>
-          <context context-type="linenumber">297</context>
+          <context context-type="linenumber">289</context>
         </context-group>
       </trans-unit>
       <trans-unit id="875234150078957846" datatype="html">
         <source>You cannot copy lessons at this time.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts</context>
-          <context context-type="linenumber">304</context>
+          <context context-type="linenumber">296</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7038317246066907344" datatype="html">
         <source>Please select an item to move and then click the &quot;Move&quot; button again.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts</context>
-          <context context-type="linenumber">313</context>
+          <context context-type="linenumber">305</context>
         </context-group>
       </trans-unit>
       <trans-unit id="791981839110791639" datatype="html">
         <source>Are you sure you want to delete the selected item?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts</context>
-          <context context-type="linenumber">330</context>
+          <context context-type="linenumber">322</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1189930234736223663" datatype="html">
         <source>Are you sure you want to delete the <x id="PH" equiv-text="selectedNodeIds.length"/> selected items?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts</context>
-          <context context-type="linenumber">332</context>
+          <context context-type="linenumber">324</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e8fb2ceb6f8d4c3e90a6a688e9024461e67f44f0" datatype="html">
diff --git a/src/style/abstracts/_mixins.scss b/src/style/abstracts/_mixins.scss
index 690dcab6058..1f5efe62035 100644
--- a/src/style/abstracts/_mixins.scss
+++ b/src/style/abstracts/_mixins.scss
@@ -160,6 +160,12 @@
   }
 }
 
+.has-icon-badge {
+  .mat-badge-content {
+    font-family: 'Material Icons';
+  }
+}
+
 // Define a custom mixin that takes in the current material theme and colors
 @mixin theme-setup($theme, $colors) {
   a {