Teacher Tool Theme Fixes (#10481)

This fixes some issues with the teacher tool UI after themes were introduced. While doing this, I decided to fully swap out the themepack with our new theme variables, just to keep things consistent across the apps. It should also make things "just work" if we introduce other themes for teacher tool (though I haven't done that in this change).

Since I didn't want to introduce new theme colors, I have had to make some minor adjustments to how things look (like the beta tag & toasts), but I tried to stay relatively true to the original designs.

Author: thsparks

react-common/styles/profile/UserAvatarDropdown.less

@@ -21,5 +21,6 @@
     width: 2.5rem;
     height: 2.5rem;
 
-    background-color: var(--pxt-headerbar-accent);
+    background-color: var(--pxt-header-stencil);
+    color: var(--pxt-header-foreground);
 }

teachertool/src/components/CriteriaResultEntry.tsx

@@ -105,6 +105,7 @@ const CriteriaResultToolbarTray: React.FC<{ criteriaId: string }> = ({ criteriaI
         }
     }
 
+    const evalDisabled = !isProjectLoaded(teacherTool);
     return (
         <div className={classList(css["result-toolbar-tray"], "no-print")}>
             <Button
@@ -114,11 +115,11 @@ const CriteriaResultToolbarTray: React.FC<{ criteriaId: string }> = ({ criteriaI
                 onClick={handleDeleteClickedAsync}
             />
             <Button
-                className={classList("secondary", css["control-button"], css["result-toolbar-button"])}
+                className={classList("secondary", css["control-button"], css["result-toolbar-button"], evalDisabled ? css["disabled"] : "")}
                 rightIcon="fas fa-play"
                 title={Strings.Evaluate}
                 onClick={handleEvaluateClickedAsync}
-                disabled={!isProjectLoaded(teacherTool)}
+                disabled={evalDisabled}
             />
         </div>
     );

teachertool/src/components/Toasts.tsx

@@ -45,7 +45,7 @@ const ToastNotification: React.FC<IToastNotificationProps> = ({ toast }) => {
 
     return (
         <div className={classList(css["toast"], css[toast.type], toast.className)}>
-            <div className={css["toast-content"]}>
+            <div className={classList(css["toast-content"], css[toast.type])}>
                 {!toast.hideIcon && (
                     <div className={classList(css["icon-container"], css[toast.type])}>
                         {toast.icon ?? icons[toast.type]}
@@ -68,7 +68,7 @@ const ToastNotification: React.FC<IToastNotificationProps> = ({ toast }) => {
                 )}
             </div>
             {toast.timeoutMs && (
-                <div>
+                <div className={classList(css["slider-container"], css[toast.type])}>
                     <div
                         ref={sliderRef}
                         className={classList(css["slider"], css[toast.type])}

teachertool/src/components/styling/BlockPickerModal.module.scss

@@ -1,7 +1,7 @@
 .block-picker-modal {
     div[class="common-modal"] {
         // category color is overridden in BlockPicker javascript
-        --category-color: var(--pxt-content-secondary-foreground);
+        --category-color: var(--pxt-neutral-background3);
 
         height: 80vh;
 
@@ -11,7 +11,7 @@
             padding: 0;
 
             .bottom-border {
-                border-bottom: 2px solid var(--pxt-content-accent);
+                border-bottom: 2px solid var(--pxt-target-background1-hover);
             }
 
             .loading-container {

teachertool/src/components/styling/CatalogOverlay.module.scss

@@ -5,9 +5,8 @@
     width: 100%;
     height: 100%;
     z-index: 49; // Above everything except toasts
-    background-color: var(--pxt-page-dark-shadow);
-
-    color: var(--pxt-page-foreground);
+    background-color: var(--pxt-neutral-alpha50);
+    color: var(--pxt-neutral-foreground1);
 
     display: flex;
     justify-content: center;
@@ -16,7 +15,7 @@
     .catalog-content-container {
         width: 95%;
         height: 95%;
-        background-color: var(--pxt-page-background);
+        background-color: var(--pxt-neutral-background1);
         border-radius: .285rem; // Match modal
         display: flex;
         flex-direction: column;
@@ -28,7 +27,7 @@
             justify-content: space-between;
             align-items: center;
             width: 100%;
-            border-bottom: 1px solid var(--pxt-content-accent);
+            border-bottom: 1px solid var(--pxt-neutral-stencil1);
             height: 4rem;
 
             .title {
@@ -40,6 +39,8 @@
             .close-button {
                 height: 100%;
                 padding: 0 1rem;
+                background-color: var(--pxt-neutral-background1);
+                color: var(--pxt-neutral-foreground1);
 
                 i {
                     font-size: 1.3rem;
@@ -64,24 +65,34 @@
             }
 
             button[class*="common-accordion-header-outer"] {
-                background-color: var(--pxt-content-foreground);
-                color: var(--pxt-content-background);
-                border-bottom: 1px solid var(--pxt-content-accent);
+                background-color: var(--pxt-tertiary-background);
+                color: var(--pxt-tertiary-foreground);
+                border-bottom: 1px solid var(--pxt-neutral-background1);
                 font-size: 1.2rem;
                 padding: 0.5rem 0.95rem;
             }
 
             .catalog-item {
                 width: 100%;
                 padding: 1.25rem 1.5rem 1.25rem 1rem;
-                border-bottom: 1px solid var(--pxt-content-accent);
+                border-bottom: 1px solid var(--pxt-target-stencil1);
                 flex-shrink: 0;
                 margin: 0;
+                background-color: var(--pxt-neutral-background1);
+                color: var(--pxt-neutral-foreground1);
+
+                &:hover {
+                    background-color: var(--pxt-neutral-background1-hover);
+                }
 
                 &:last-child {
                     border-bottom: none;
                 }
 
+                &[class*="disabled"] {
+                    border-color: var(--pxt-neutral-alpha20) !important
+                }
+
                 .catalog-item-label {
                     display: flex;
                     flex-direction: row;
@@ -106,7 +117,7 @@
                         }
 
                         .recently-added-indicator {
-                            color: var(--pxt-success-accent);
+                            color: var(--pxt-colors-green-background);
                         }
                     }
                 }

teachertool/src/components/styling/ChecklistPreview.module.scss

@@ -8,14 +8,14 @@
         width: 100%;
         font-weight: bold;
         margin-bottom: 0.1rem;
-        border-bottom: 1px solid var(--pxt-content-foreground);
+        border-bottom: 1px solid var(--pxt-tertiary-background);
         padding: 0.2rem 0.5rem;
     }
 
     .checklist-criteria {
         width: 100%;
         padding: 0.2rem 0.5rem;
-        border-bottom: 1px solid var(--pxt-content-accent);
+        border-bottom: 1px solid var(--pxt-target-stencil1);
 
         &:last-child {
             border-bottom: none;

teachertool/src/components/styling/ChecklistWorkspace.module.scss

@@ -4,8 +4,8 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    background-color: var(--pxt-page-background);
-    color: var(--pxt-page-foreground);
+    background-color: var(--pxt-neutral-background1);
+    color: var(--pxt-neutral-foreground1);
 
     div[class*="tt-tabgroup"] {
         height: 100%;

teachertool/src/components/styling/CriteriaFeedback.module.scss

@@ -15,7 +15,7 @@
             padding: 0.1rem;
             border-radius: 100%;
             background-color: transparent;
-            color: var(--pxt-page-foreground);
+            color: var(--pxt-neutral-foreground1);
             border: none;
             font-size: 1rem;
 

teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss

@@ -6,19 +6,19 @@
 
     div[class*="common-input-group"] {
         border-radius: 0.5rem;
-        border: solid 1px var(--pxt-page-foreground);
+        border: solid 1px var(--pxt-neutral-foreground1);
         padding: 0 0.4rem;
 
         &:focus::after {
             outline: none;
             border-radius: 0.5rem;
-            border: solid 2px var(--pxt-headerbar-accent-smoke);
+            border: solid 2px var(--pxt-neutral-alpha20);
         }
 
         &:focus-within::after {
             outline: none;
             border-radius: 0.5rem;
-            border: solid 2px var(--pxt-headerbar-accent-smoke);
+            border: solid 2px var(--pxt-neutral-alpha20);
         }
     }
 
@@ -42,7 +42,7 @@
             .block-input-btn {
                 margin: 0.2rem 0;
                 border-radius: 0.5rem;
-                border: solid 1px var(--pxt-page-foreground);
+                border: solid 1px var(--pxt-neutral-foreground1);
                 padding: 0.4rem;
 
                 .block-readable-name {
@@ -59,8 +59,8 @@
                 }
 
                 &.error {
-                    border: solid 1px var(--pxt-error-accent);
-                    background-color: var(--pxt-error-background);
+                    border: solid 1px var(--pxt-colors-red-background);
+                    background-color: var(--pxt-colors-red-alpha10);
                     transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out;
                     padding-right: 0.6rem; // balance out with left icon
                 }
@@ -131,20 +131,20 @@
 
                     &.error {
                         &:not(:focus):not(:focus-within) div[class*="common-input-group"] {
-                            border: solid 1px var(--pxt-error-accent);
-                            background-color: var(--pxt-error-background);
+                            border: solid 1px var(--pxt-colors-red-background);
+                            background-color: var(--pxt-colors-red-alpha10);
                             transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out;
 
                             &:focus::after {
-                                border: solid 2px var(--pxt-error);
+                                border: solid 2px var(--pxt-colors-red-background);
                             }
 
                             &:focus-within::after {
-                                border: solid 2px var(--pxt-error);
+                                border: solid 2px var(--pxt-colors-red-background);
                             }
 
                             input::placeholder {
-                                color: var(--pxt-page-foreground);
+                                color: var(--pxt-neutral-foreground1);
                             }
 
                             i {
@@ -166,7 +166,7 @@
     }
 
     .criteria-description {
-        color: var(--pxt-page-foreground-light);
+        color: var(--pxt-neutral-alpha80);
         margin-top: 0.2rem;
         width: 100%; // For non-webkit browsers
         width: -webkit-fill-available; // Webkit browsers

teachertool/src/components/styling/CriteriaTable.module.scss

@@ -1,6 +1,6 @@
 .criteria-table {
     width: 100%;
-    border: 1px solid var(--pxt-content-accent);
+    border: 1px solid var(--pxt-target-background1);
     border-radius: 0.5rem;
     overflow: hidden;
     margin-bottom: 1rem;
@@ -13,7 +13,7 @@
         display: flex;
         align-items: center;
         width: 100%;
-        border-bottom: 1px solid var(--pxt-content-accent);
+        border-bottom: 1px solid var(--pxt-target-background1);
     }
 
     .criteria-display-cell {
@@ -23,7 +23,7 @@
         justify-content: center;
         text-align: left;
         padding: 0.5rem 0.5rem 0.5rem 0.7rem;
-        border-right: 1px solid var(--pxt-content-accent);
+        border-right: 1px solid var(--pxt-target-background1);
     }
 
     .criteria-action-menu-cell {
@@ -52,7 +52,7 @@
         .delete-criteria-button {
             width: 100%;
             height: 100%;
-            background-color: var(--pxt-content-background);
+            background-color: var(--pxt-target-background1);
             opacity: 0; // Need opacity-based hiding (rather than display) for transitions
             transition: background-color 0.1s ease, opacity 0.1s ease;
             color: var(--black);
@@ -61,7 +61,7 @@
             border-radius: 0;
 
             &:hover {
-                background-color: var(--pxt-content-accent);
+                background-color: var(--pxt-target-background1-hover);
             }
 
             &:focus {
@@ -71,7 +71,7 @@
 
         &:hover,
         &:focus {
-            background-color: var(--pxt-content-background);
+            background-color: var(--pxt-target-background1);
 
             .delete-criteria-button {
                 opacity: 1;