fix(Step Tools): Node icons and tooltips do not appear (#1382)

src/assets/wise5/authoringTool/authoring-tool.module.ts

@@ -14,7 +14,6 @@ import './structure/structureAuthoringModule';
 import { ProjectLibraryService } from '../services/projectLibraryService';
 import { AuthoringToolComponent } from '../authoringTool/authoringToolComponent';
 import { WiseAuthoringTinymceEditorComponent } from '../directives/wise-tinymce-editor/wise-authoring-tinymce-editor.component';
-import { StepToolsComponent } from '../common/stepTools/step-tools.component';
 import { ProjectListComponent } from './project-list/project-list.component';
 import { AddProjectComponent } from './add-project/add-project.component';
 
@@ -35,10 +34,6 @@ export default angular
     'addProjectComponent',
     downgradeComponent({ component: AddProjectComponent }) as angular.IDirectiveFactory
   )
-  .directive(
-    'stepTools',
-    downgradeComponent({ component: StepToolsComponent }) as angular.IDirectiveFactory
-  )
   .directive(
     'projectListComponent',
     downgradeComponent({ component: ProjectListComponent }) as angular.IDirectiveFactory

src/assets/wise5/authoringTool/components/shared/authoring-tool-bar/authoring-tool-bar.component.html

@@ -1,16 +1,16 @@
-<mat-toolbar class="md-whiteframe-z1 toolbar">
+<mat-toolbar class="mat-elevation-z1 toolbar">
   <div class="toolbar__tools" fxLayout="row wrap" fxLayoutAlign="start center">
     <button mat-icon-button aria-label="Authoring Tool Menu" i18n-aria-label (click)="toggleMenu()">
       <mat-icon>menu</mat-icon>
     </button>
     <span *ngIf="!showStepTools" class="toolbar__title">{{ viewName }}</span>
     <step-tools *ngIf="showStepTools"></step-tools>
     <div fxFlex></div>
-    <span *ngIf="isJSONValid" class="green" fxLayoutAlign="start center">
+    <span *ngIf="isJSONValid" class="success" fxLayoutAlign="start center">
       <mat-icon>done</mat-icon>
       <span>JSON Valid</span></span
     >
-    <span *ngIf="isJSONValid === false" class="red" fxLayoutAlign="start center">
+    <span *ngIf="isJSONValid === false" class="warn" fxLayoutAlign="start center">
       <mat-icon>clear</mat-icon>
       <span>JSON Invalid</span>
     </span>

src/assets/wise5/authoringTool/components/shared/authoring-tool-bar/authoring-tool-bar.component.scss

@@ -6,20 +6,13 @@
 
 .toolbar__tools {
   width: 100%;
+  padding: 0 4px;
 }
 
 .progress-spinner {
   margin: 8px
 }
 
-.green {
-  color: green;
-}
-
-.red {
-  color: red;
-}
-
 .global-message {
   margin-right: 20px
 }

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.html

@@ -1,10 +1,9 @@
-<mat-toolbar class="md-whiteframe-1dp toolbar md-toolbar--wise" md-theme="light">
+<mat-toolbar class="mat-elevation-z1 toolbar">
   <div class="md-toolbar-tools toolbar__tools">
     <button
       mat-icon-button
       aria-label="Main Menu"
       i18n-aria-label
-      class="md-icon-button"
       (click)="toggleMenu()"
       matTooltip="Main Menu"
       matTooltipPosition="below"

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.scss

@@ -6,5 +6,5 @@
 }
 
 .toolbar__tools {
-  padding-left: 4px;
+  padding: 0 4px;
 }

src/assets/wise5/themes/default/style/modules/_toolbar.scss

@@ -59,14 +59,6 @@
     font-weight: 500;
 }
 
-.toolbar__tools {
-    padding-right: 8px;
-}
-[dir=rtl] .toolbar__tools {
-    padding-right: 16px;
-    padding-left: 8px;
-}
-
 .toolbar__nav, .md-button.toolbar__nav {
     margin: 0;
 }

src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.module.ts

@@ -8,6 +8,8 @@ import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { StudentTeacherCommonModule } from '../../../../../../app/student-teacher-common.module';
 
 @NgModule({
   declarations: [StepToolsComponent],
@@ -20,7 +22,9 @@ import { FlexLayoutModule } from '@angular/flex-layout';
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
-    MatSelectModule
+    MatSelectModule,
+    MatTooltipModule,
+    StudentTeacherCommonModule
   ]
 })
 export class StepToolsModule {}