fix(Unit authoring): Node title text appears white (#1379)

WISE-Community · Aug 4, 2023 · d47e93a · d47e93a
1 parent cf45242
commit d47e93a
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 61 deletions.
diff --git a/src/app/modules/shared/hero-section/hero-section.component.html b/src/app/modules/shared/hero-section/hero-section.component.html
@@ -21,7 +21,7 @@
       fxLayoutGap.gt-xs="24px"
     >
       <div
-        class="main-content"
+        class="hero-main-content"
         [ngClass]="{ 'with-sidecontent': sideRef }"
         fxLayout="column"
         fxLayoutAlign="center center"
@@ -52,7 +52,6 @@
       </div>
       <div
         *ngIf="sideRef"
-        class="side-content"
         fxLayoutAlign="end center"
         fxFlex="none"
         fxFlex.gt-sm="40"

diff --git a/src/app/modules/shared/hero-section/hero-section.component.scss b/src/app/modules/shared/hero-section/hero-section.component.scss
@@ -20,90 +20,90 @@
   @media (min-width: breakpoint('lg.min')) {
     padding: 33% 0 0;
   }
-}
 
-.hero-wrap {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  background-color: rgba(0,0,0,0.4);
-}
+  .hero-wrap {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: rgba(0,0,0,0.4);
+  }
 
-.hero-content {
-  max-width: breakpoint('lg.min');
-  margin: 0 auto;
-  padding: 16px 16px;
+  .hero-content {
+    max-width: breakpoint('lg.min');
+    margin: 0 auto;
+    padding: 16px 16px;
 
-  @media (min-width: breakpoint('sm.min')) {
-    padding: 16px 48px;
-  }
+    @media (min-width: breakpoint('sm.min')) {
+      padding: 16px 48px;
+    }
 
-  @media (min-width: breakpoint('lg.min')) {
-    padding: 32px 64px;
-  }
+    @media (min-width: breakpoint('lg.min')) {
+      padding: 32px 64px;
+    }
 
-  @media (min-width: breakpoint('xl.min')) {
-    max-width: breakpoint('xl.min');
+    @media (min-width: breakpoint('xl.min')) {
+      max-width: breakpoint('xl.min');
+    }
   }
-}
 
-.main-content {
-  color: #ffffff;
-  text-align: center;
+  .hero-main-content {
+    color: #ffffff;
+    text-align: center;
 
-  &.with-sidecontent {
-    @media (min-width: breakpoint('md.min')) {
-      text-align: start;
+    &.with-sidecontent {
+      @media (min-width: breakpoint('md.min')) {
+        text-align: start;
+      }
     }
   }
-}
 
-h1.headline {
-  @media (min-width: breakpoint('sm.min')) {
-    margin-bottom: 24px;
+  h1.headline {
+    @media (min-width: breakpoint('sm.min')) {
+      margin-bottom: 24px;
 
-    .mat-icon {
-      @include mat-icon-size(mat.font-size($wise-typography, 'headline-3'));
+      .mat-icon {
+        @include mat-icon-size(mat.font-size($wise-typography, 'headline-3'));
+      }
     }
-  }
 
-  @media (min-width: breakpoint('md.min')) {
-    .mat-icon {
-      @include mat-icon-size(mat.font-size($wise-typography, 'headline-2'));
+    @media (min-width: breakpoint('md.min')) {
+      .mat-icon {
+        @include mat-icon-size(mat.font-size($wise-typography, 'headline-2'));
+      }
     }
   }
-}
 
-h1.with-tagline {
-  margin-bottom: 4px;
+  h1.with-tagline {
+    margin-bottom: 4px;
 
-  @media (min-width: breakpoint('sm.min')) {
-    margin-bottom: 8px;
-  }
+    @media (min-width: breakpoint('sm.min')) {
+      margin-bottom: 8px;
+    }
 
-  @media (min-width: breakpoint('md.min')) {
-    margin-bottom: 16px;
+    @media (min-width: breakpoint('md.min')) {
+      margin-bottom: 16px;
+    }
   }
-}
-
-h2.tagline {
-  font-weight: 400;
-  margin-bottom: 0 !important;
 
-  .mat-icon {
-    @include mat-icon-size(mat.font-size($wise-typography, 'headline-5'));
-  }
+  h2.tagline {
+    font-weight: 400;
+    margin-bottom: 0 !important;
 
-  @media (min-width: breakpoint('sm.min')) {
     .mat-icon {
-      @include mat-icon-size(mat.font-size($wise-typography, 'headline-4'));
+      @include mat-icon-size(mat.font-size($wise-typography, 'headline-5'));
+    }
+
+    @media (min-width: breakpoint('sm.min')) {
+      .mat-icon {
+        @include mat-icon-size(mat.font-size($wise-typography, 'headline-4'));
+      }
     }
   }
-}
 
-@media (max-width: breakpoint('xs.max')) {
-  h1.headline, h2.tagline {
-    line-height: 1.2;
+  @media (max-width: breakpoint('xs.max')) {
+    h1.headline, h2.tagline {
+      line-height: 1.2;
+    }
   }
 }
diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.spec.ts b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.spec.ts
@@ -19,6 +19,7 @@ import { ComponentAuthoringModule } from '../../../../../app/teacher/component-a
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { PreviewComponentModule } from '../../components/preview-component/preview-component.module';
 import { DebugElement } from '@angular/core';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 let component: NodeAuthoringComponent;
 let component1: any;
@@ -38,6 +39,7 @@ describe('NodeAuthoringComponent', () => {
       imports: [
         BrowserAnimationsModule,
         ComponentAuthoringModule,
+        DragDropModule,
         FormsModule,
         HttpClientTestingModule,
         MatCheckboxModule,