Merge pull request #2882 from WISE-Community/issue-2876-move-alert-status-corner-styles-to-component

Moved AlertStatusCorner styles to component

Author: geoffreykwan

src/main/webapp/site/src/app/classroom-monitor/alert-status-corner/alert-status-corner.component.html

@@ -1,6 +1,4 @@
-<div *ngIf="hasAlert" class="status-corner-wrapper status-corner-top-right">
-  <div class="status-corner"
-      [ngClass]="{'status-corner--warn': hasNewAlert}"
-      matTooltip="{{message}}"
-      matTooltipPosition="above"></div>
+<div *ngIf="hasAlert" class="corner">
+  <div class="corner-content" [ngClass]="{'corner-warn': hasNewAlert}" matTooltip="{{message}}"
+       matTooltipPosition="above"></div>
 </div>

src/main/webapp/site/src/app/classroom-monitor/alert-status-corner/alert-status-corner.component.ts

@@ -2,7 +2,8 @@ import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'alert-status-corner',
-  templateUrl: 'alert-status-corner.component.html'
+  templateUrl: 'alert-status-corner.component.html',
+  styleUrls: ['alert-status-corner.scss']
 })
 export class AlertStatusCornerComponent {
   @Input()

src/main/webapp/site/src/app/classroom-monitor/alert-status-corner/alert-status-corner.scss

@@ -0,0 +1,34 @@
+@import '~style/abstracts/variables', '~style/themes/default';
+
+$warn: map-get($default-colors, warn);
+$secondary-text: map-get($default-colors, secondary-text);
+  
+.corner {
+  border-top-right-radius: $card-border-radius;
+  overflow: hidden;
+}
+
+.corner-content {
+  width: 0;
+  height: 0;
+  border-top-color: $secondary-text;
+  border-bottom-color: $secondary-text;
+  color: $secondary-text;
+
+  border-top: 36px solid;
+  border-left: 36px solid transparent;
+
+  &:after {
+    content: '!';
+    color: #ffffff;
+    top: 2px;
+    right: 10px;
+    position: absolute;
+    font-weight: 700;
+  }
+}
+
+.corner-warn {
+  border-top-color: $warn;
+  border-bottom-color: $warn;
+}

src/main/webapp/wise5/themes/default/style/author.css

@@ -13,78 +13,6 @@
     padding: 0;
 }
 
-.status-corner-wrapper {
-    position: absolute;
-    z-index: 1;
-    overflow: hidden;
-}
-
-.status-corner {
-    width: 0;
-    height: 0;
-    border-top-color: color('text-disabled');
-    border-bottom-color: color('text-disabled');
-    color: color('text-disabled');
-
-    &:after {
-        content: '!';
-        color: #ffffff;
-        top: 2px;
-        right: 10px;
-        position: absolute;
-        font-weight: 700;
-    }
-}
-
-.status-corner--warn {
-    border-top-color: color('warn') !important;
-    border-bottom-color: color('warn') !important;
-}
-
-.status-corner-top-right {
-    top: 0;
-    right: 0;
-    border-top-right-radius: $card-border-radius;
-
-    .status-corner {
-        border-top: 36px solid;
-        border-left: 36px solid transparent;
-    }
-}
-
-.status-corner-top-left {
-    top: 0;
-    left: 0;
-    border-top-left-radius: $card-border-radius;
-
-    .status-corner {
-        border-top: 36px solid;
-        border-right: 36px solid transparent;
-    }
-}
-
-.status-corner-bottom-right {
-    bottom: 0;
-    right: 0;
-    border-bottom-right-radius: $card-border-radius;
-
-    .status-corner {
-        border-bottom: 36px solid;
-        border-left: 36px solid transparent;
-    }
-}
-
-.status-corner-bottom-left {
-    bottom: 0;
-    left: 0;
-    border-bottom-left-radius: $card-border-radius;
-
-    .status-corner {
-        border-bottom: 36px solid;
-        border-right: 36px solid transparent;
-    }
-}
-
 .avatar--icon--alert {
     background-color: #ffffff;
 }

src/main/webapp/wise5/themes/default/style/author.css.map

@@ -1,12 +1,18 @@
 .student-select {
-    padding-top: 0;
-    padding-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .workgroup-progress {
-    margin-bottom: 8px;
+  margin-bottom: 8px;
 
-    @media (min-width: $layout-breakpoint-sm) {
-        margin-bottom: 0;
-    }
+  @media (min-width: $layout-breakpoint-sm) {
+    margin-bottom: 0;
+  }
+}
+
+alert-status-corner {
+  position: absolute;
+  top: 0;
+  right: 0;
 }