From 249d5fa8cd0c4ac60ac29b9ee414b322f709fe4c Mon Sep 17 00:00:00 2001
From: Thomas Sparks <69657545+thsparks@users.noreply.github.com>
Date: Thu, 8 Feb 2024 15:21:13 -0800
Subject: [PATCH] Teacher Tool: Update Notifications (#9857)

This swaps out our Teacher Tool notification system for one based on the multiplayer toast system. Since multiplayer uses tailwind, it would've been a pain to move everything into shared components. Instead, I've more-or-less copied everything over, but the functionality is the same.
---
 teachertool/package-lock.json                 | 288 ++++++++++++++++++
 teachertool/package.json                      |   1 +
 teachertool/src/App.tsx                       |  13 +-
 .../src/components/AddCriteriaButton.tsx      |   4 +-
 teachertool/src/components/Notifications.tsx  |  18 --
 teachertool/src/components/Toasts.tsx         | 105 +++++++
 .../src/components/styling/Toasts.module.scss | 133 ++++++++
 .../src/services/notificationService.ts       |  21 --
 teachertool/src/state/actions.ts              |  34 +--
 teachertool/src/state/reducer.ts              |  12 +-
 teachertool/src/state/state.ts                |   6 +-
 .../transforms/loadProjectMetadataAsync.ts    |   8 +-
 .../src/transforms/postNotification.ts        |   8 -
 .../src/transforms/runEvaluateAsync.ts        |   8 +-
 teachertool/src/transforms/showToast.ts       |   8 +
 .../tryLoadLastActiveRubricAsync.ts           |   6 +-
 teachertool/src/types/index.ts                |  24 +-
 teachertool/src/utils/index.ts                |  10 +-
 theme/themepacks.less                         |   9 +
 19 files changed, 611 insertions(+), 105 deletions(-)
 delete mode 100644 teachertool/src/components/Notifications.tsx
 create mode 100644 teachertool/src/components/Toasts.tsx
 create mode 100644 teachertool/src/components/styling/Toasts.module.scss
 delete mode 100644 teachertool/src/services/notificationService.ts
 delete mode 100644 teachertool/src/transforms/postNotification.ts
 create mode 100644 teachertool/src/transforms/showToast.ts

diff --git a/teachertool/package-lock.json b/teachertool/package-lock.json
index 910332718f08..46fb5eac4203 100644
--- a/teachertool/package-lock.json
+++ b/teachertool/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@types/node": "^16.11.33",
+        "framer-motion": "^6.5.1",
         "idb": "^7.1.1",
         "nanoid": "^4.0.2",
         "react-scripts": "5.0.1",
@@ -2292,6 +2293,21 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -3116,6 +3132,64 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@motionone/animation": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.17.0.tgz",
+      "integrity": "sha512-ANfIN9+iq1kGgsZxs+Nz96uiNcPLGTXwfNo2Xz/fcJXniPYpaz/Uyrfa+7I5BPLxCP82sh7quVDudf1GABqHbg==",
+      "dependencies": {
+        "@motionone/easing": "^10.17.0",
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "dependencies": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.17.0.tgz",
+      "integrity": "sha512-Bxe2wSuLu/qxqW4rBFS5m9tMLOw+QBh8v5A7Z5k4Ul4sTj5jAOfZG5R0bn5ywmk+Fs92Ij1feZ5pmC4TeXA8Tg==",
+      "dependencies": {
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/generators": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.17.0.tgz",
+      "integrity": "sha512-T6Uo5bDHrZWhIfxG/2Aut7qyWQyJIWehk6OB4qNvr/jwA/SRmixwbd7SOrxZi1z5rH3LIeFFBKK1xHnSbGPZSQ==",
+      "dependencies": {
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/types": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.0.tgz",
+      "integrity": "sha512-EgeeqOZVdRUTEHq95Z3t8Rsirc7chN5xFAPMYFobx8TPubkEfRSm5xihmMUkbaR2ErKJTUw3347QDPTHIW12IA=="
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.17.0.tgz",
+      "integrity": "sha512-bGwrki4896apMWIj9yp5rAS2m0xyhxblg6gTB/leWDPt+pb410W8lYWsxyurX+DH+gO1zsQsfx2su/c1/LtTpg==",
+      "dependencies": {
+        "@motionone/types": "^10.17.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -8403,6 +8477,34 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -8819,6 +8921,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -13224,6 +13331,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -14915,6 +15033,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -15582,6 +15713,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/schema-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
@@ -16314,6 +16454,15 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -19635,6 +19784,21 @@
       "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
       "requires": {}
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -20240,6 +20404,64 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "@motionone/animation": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.17.0.tgz",
+      "integrity": "sha512-ANfIN9+iq1kGgsZxs+Nz96uiNcPLGTXwfNo2Xz/fcJXniPYpaz/Uyrfa+7I5BPLxCP82sh7quVDudf1GABqHbg==",
+      "requires": {
+        "@motionone/easing": "^10.17.0",
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "requires": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/easing": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.17.0.tgz",
+      "integrity": "sha512-Bxe2wSuLu/qxqW4rBFS5m9tMLOw+QBh8v5A7Z5k4Ul4sTj5jAOfZG5R0bn5ywmk+Fs92Ij1feZ5pmC4TeXA8Tg==",
+      "requires": {
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/generators": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.17.0.tgz",
+      "integrity": "sha512-T6Uo5bDHrZWhIfxG/2Aut7qyWQyJIWehk6OB4qNvr/jwA/SRmixwbd7SOrxZi1z5rH3LIeFFBKK1xHnSbGPZSQ==",
+      "requires": {
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/types": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.0.tgz",
+      "integrity": "sha512-EgeeqOZVdRUTEHq95Z3t8Rsirc7chN5xFAPMYFobx8TPubkEfRSm5xihmMUkbaR2ErKJTUw3347QDPTHIW12IA=="
+    },
+    "@motionone/utils": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.17.0.tgz",
+      "integrity": "sha512-bGwrki4896apMWIj9yp5rAS2m0xyhxblg6gTB/leWDPt+pb410W8lYWsxyurX+DH+gO1zsQsfx2su/c1/LtTpg==",
+      "requires": {
+        "@motionone/types": "^10.17.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -24166,6 +24388,28 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz",
       "integrity": "sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg=="
     },
+    "framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -24459,6 +24703,11 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -27657,6 +27906,17 @@
         }
       }
     },
+    "popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "requires": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -28704,6 +28964,16 @@
         }
       }
     },
+    "react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -29165,6 +29435,15 @@
         "xmlchars": "^2.2.0"
       }
     },
+    "scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "schema-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
@@ -29749,6 +30028,15 @@
       "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==",
       "requires": {}
     },
+    "style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "requires": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
diff --git a/teachertool/package.json b/teachertool/package.json
index a3a9fea6ac8e..09e425ab8a1f 100644
--- a/teachertool/package.json
+++ b/teachertool/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@types/node": "^16.11.33",
+    "framer-motion": "^6.5.1",
     "idb": "^7.1.1",
     "nanoid": "^4.0.2",
     "react-scripts": "5.0.1",
diff --git a/teachertool/src/App.tsx b/teachertool/src/App.tsx
index bcf40daf2830..e1ffb90a005b 100644
--- a/teachertool/src/App.tsx
+++ b/teachertool/src/App.tsx
@@ -1,16 +1,15 @@
 import { useEffect, useContext, useState } from "react";
 import { AppStateContext, AppStateReady } from "./state/appStateContext";
 import { usePromise } from "./hooks";
-import { makeNotification } from "./utils";
+import { makeToast } from "./utils";
 import * as Actions from "./state/actions";
-import * as NotificationService from "./services/notificationService";
 import { downloadTargetConfigAsync } from "./services/backendRequests";
 import { logDebug } from "./services/loggingService";
 import { HeaderBar } from "./components/HeaderBar";
 import { MainPanel } from "./components/MainPanel";
-import { Notifications } from "./components/Notifications";
+import { Toasts } from "./components/Toasts";
 import { CatalogModal } from "./components/CatalogModal";
-import { postNotification } from "./transforms/postNotification";
+import { showToast } from "./transforms/showToast";
 import { loadCatalogAsync } from "./transforms/loadCatalogAsync";
 import { loadValidatorPlansAsync } from "./transforms/loadValidatorPlansAsync";
 import { tryLoadLastActiveRubricAsync } from "./transforms/tryLoadLastActiveRubricAsync";
@@ -24,8 +23,6 @@ export const App = () => {
 
     useEffect(() => {
         if (ready && !inited) {
-            NotificationService.initialize();
-
             Promise.resolve().then(async () => {
                 const cfg = await downloadTargetConfigAsync();
                 dispatch(Actions.setTargetConfig(cfg || {}));
@@ -37,7 +34,7 @@ export const App = () => {
                 await tryLoadLastActiveRubricAsync();
 
                 // Test notification
-                postNotification(makeNotification("🎓", 2000));
+                showToast(makeToast("success", "🎓", 2000));
 
                 setInited(true);
                 logDebug("App initialized");
@@ -55,7 +52,7 @@ export const App = () => {
             <MainPanel />
             <CatalogModal />
             <ImportRubricModal />
-            <Notifications />
+            <Toasts />
         </>
     );
 };
diff --git a/teachertool/src/components/AddCriteriaButton.tsx b/teachertool/src/components/AddCriteriaButton.tsx
index 3d10545c6deb..be84ae96da24 100644
--- a/teachertool/src/components/AddCriteriaButton.tsx
+++ b/teachertool/src/components/AddCriteriaButton.tsx
@@ -15,7 +15,8 @@ export const AddCriteriaButton: React.FC<IProps> = ({}) => {
         () => getSelectableCatalogCriteria(teacherTool).length > 0,
         [teacherTool.catalog, teacherTool.rubric]
     );
-    return <Button
+    return (
+        <Button
             className="inline"
             label={lf("Add Criteria")}
             onClick={() => showModal("catalog-display")}
@@ -23,4 +24,5 @@ export const AddCriteriaButton: React.FC<IProps> = ({}) => {
             leftIcon="fas fa-plus-circle"
             disabled={!hasAvailableCriteria}
         />
+    );
 };
diff --git a/teachertool/src/components/Notifications.tsx b/teachertool/src/components/Notifications.tsx
deleted file mode 100644
index da27cdb87736..000000000000
--- a/teachertool/src/components/Notifications.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useContext } from "react";
-import { AppStateContext } from "../state/appStateContext";
-
-interface IProps {}
-
-export const Notifications: React.FC<IProps> = ({}) => {
-    const { state: teacherTool, dispatch } = useContext(AppStateContext);
-
-    return (
-        <div className="notification-container">
-            {teacherTool.notifications.map((n, i) => (
-                <div key={i} className="notification-contents">
-                    <p>{n.message}</p>
-                </div>
-            ))}
-        </div>
-    );
-};
diff --git a/teachertool/src/components/Toasts.tsx b/teachertool/src/components/Toasts.tsx
new file mode 100644
index 000000000000..09e962e4f65a
--- /dev/null
+++ b/teachertool/src/components/Toasts.tsx
@@ -0,0 +1,105 @@
+import { useCallback, useContext, useEffect, useState, useRef } from "react";
+import { AppStateContext } from "../state/appStateContext";
+import { ToastType, ToastWithId } from "../types";
+import { AnimatePresence, motion } from "framer-motion";
+import { dismissToast } from "../state/actions";
+import { classList } from "react-common/components/util";
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/Toasts.module.scss";
+
+const icons: { [type in ToastType]: string } = {
+    success: "😊",
+    info: "🔔",
+    warning: "😮",
+    error: "😢",
+};
+
+const SLIDER_DELAY_MS = 300;
+
+interface IToastNotificationProps {
+    toast: ToastWithId;
+}
+const ToastNotification: React.FC<IToastNotificationProps> = ({ toast }) => {
+    const { dispatch } = useContext(AppStateContext);
+    const [sliderActive, setSliderActive] = useState(false);
+    const sliderRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        let t1: NodeJS.Timeout, t2: NodeJS.Timeout;
+        if (toast.timeoutMs) {
+            t1 = setTimeout(() => dispatch(dismissToast(toast.id)), SLIDER_DELAY_MS + toast.timeoutMs);
+            t2 = setTimeout(() => setSliderActive(true), SLIDER_DELAY_MS);
+        }
+        return () => {
+            clearTimeout(t1);
+            clearTimeout(t2);
+        };
+    }, [dispatch, toast.id, toast.timeoutMs]);
+
+    const handleDismissClicked = () => {
+        dispatch(dismissToast(toast.id));
+    };
+
+    const sliderWidth = useCallback(() => {
+        return sliderActive ? "0%" : "100%";
+    }, [sliderActive]);
+
+    return (
+        <div className={classList(css["toast"], css[toast.type])}>
+            <div className={css["toast-content"]}>
+                {!toast.hideIcon && (
+                    <div className={classList(css["icon-container"], css[toast.type])}>
+                        {toast.icon ?? icons[toast.type]}
+                    </div>
+                )}
+                <div className={css["text-container"]}>
+                    {toast.text && <div className={css["text"]}>{toast.text}</div>}
+                    {toast.detail && <div className={css["detail"]}>{toast.detail}</div>}
+                    {toast.jsx && <div>{toast.jsx}</div>}
+                </div>
+                {!toast.hideDismissBtn && !toast.showSpinner && (
+                    <div className={css["dismiss-btn"]} onClick={handleDismissClicked}>
+                        <i className={classList("far fa-times-circle", css["icon"])} />
+                    </div>
+                )}
+                {toast.showSpinner && (
+                    <div className={css["spinner"]}>
+                        <i className="fas fa-circle-notch fa-spin" />
+                    </div>
+                )}
+            </div>
+            {toast.timeoutMs && (
+                <div>
+                    <div
+                        ref={sliderRef}
+                        className={classList(css["slider"], css[toast.type])}
+                        style={{ width: sliderWidth(), transitionDuration: `${toast.timeoutMs}ms` }}
+                    ></div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+interface IProps {}
+export const Toasts: React.FC<IProps> = ({}) => {
+    const { state: teacherTool } = useContext(AppStateContext);
+
+    return (
+        <div className={classList(css["toast-container"])}>
+            <AnimatePresence>
+                {teacherTool.toasts.map(item => (
+                    <motion.div
+                        key={item.id}
+                        layout
+                        initial={{ opacity: 0, y: 50, scale: 0.3 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, transition: { duration: 0.2 } }}
+                    >
+                        <ToastNotification toast={item} />
+                    </motion.div>
+                ))}
+            </AnimatePresence>
+        </div>
+    );
+};
diff --git a/teachertool/src/components/styling/Toasts.module.scss b/teachertool/src/components/styling/Toasts.module.scss
new file mode 100644
index 000000000000..9d8fe8992f03
--- /dev/null
+++ b/teachertool/src/components/styling/Toasts.module.scss
@@ -0,0 +1,133 @@
+.toast-container {
+    display: flex;
+    gap: 0.5rem;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    margin-bottom: 2rem;
+    margin-right: 1rem;
+    z-index: 50;
+    pointer-events: none;
+}
+
+.toast {
+    display: flex;
+    flex-direction: column;
+    margin-right: 0;
+    border: none;
+    border-radius: 0.25rem;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    overflow: hidden;
+    pointer-events: none;
+
+    &.success {
+        background-color: var(--pxt-toast-background-success);
+    }
+
+    &.info {
+        background-color: var(--pxt-toast-background-info);
+    }
+
+    &.warning {
+        background-color: var(--pxt-toast-background-warning);
+    }
+
+    &.error {
+        background-color: var(--pxt-toast-background-error);
+    }
+
+    .toast-content {
+        display: flex;
+        gap: 0.5rem;
+        padding: 0.75rem;
+        font-size: 1.125rem;
+
+        .icon-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 0;
+            border-radius: 50%;
+            width: 1.75rem;
+            height: 1.75rem;
+
+            &.success {
+                background-color: var(--pxt-toast-accent-success);;
+            }
+
+            &.info {
+                background-color: var(--pxt-toast-accent-info);;
+            }
+
+            &.warning {
+                background-color: var(--pxt-toast-accent-warning);;
+            }
+
+            &.error {
+                background-color: var(--pxt-toast-accent-error);
+            }
+        }
+
+        .text-container {
+            display: flex;
+            flex-direction: column;
+            text-align: left;
+
+            .text {
+                white-space: nowrap;
+                font-size: 1rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .detail {
+                font-size: 0.875rem;
+            }
+        }
+
+        .dismiss-btn {
+            display: flex;
+            flex-grow: 1;
+            justify-content: flex-end;
+            pointer-events: auto;
+
+            .icon {
+                cursor: pointer;
+
+                &:hover {
+                    transform: scale(1.25);
+                    transition: all 0.15s ease-in-out;
+                }
+            }
+        }
+
+        .spinner {
+            display: flex;
+            flex-grow: 1;
+            justify-content: flex-end;
+        }
+    }
+
+    .slider {
+        height: 0.25rem;
+        transition: all 0.2s linear;
+
+        &.success {
+            background-color: var(--pxt-toast-accent-success);;
+        }
+
+        &.info {
+            background-color: var(--pxt-toast-accent-info);;
+        }
+
+        &.warning {
+            background-color: var(--pxt-toast-accent-warning);;
+        }
+
+        &.error {
+            background-color: var(--pxt-toast-accent-error);
+        }
+    }
+}
diff --git a/teachertool/src/services/notificationService.ts b/teachertool/src/services/notificationService.ts
deleted file mode 100644
index d69424804685..000000000000
--- a/teachertool/src/services/notificationService.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { stateAndDispatch } from "../state";
-import * as Actions from "../state/actions";
-
-let initialize = () => {
-    const updateOnce = () => {
-        const { state, dispatch } = stateAndDispatch();
-
-        const notifications = state.notifications.slice();
-        notifications.forEach(notification => {
-            if (notification.expiration - Date.now() < 0) {
-                dispatch(Actions.removeNotification(notification.id));
-            }
-        });
-
-        setTimeout(updateOnce, 250);
-    };
-
-    setTimeout(updateOnce, 1000);
-};
-
-export { initialize };
diff --git a/teachertool/src/state/actions.ts b/teachertool/src/state/actions.ts
index ea77348ec64a..135d1f75d83f 100644
--- a/teachertool/src/state/actions.ts
+++ b/teachertool/src/state/actions.ts
@@ -1,4 +1,4 @@
-import { ModalType, NotificationWithId, TabName } from "../types";
+import { ModalType, ToastWithId, TabName } from "../types";
 import { CatalogCriteria, CriteriaEvaluationResult } from "../types/criteria";
 import { Rubric } from "../types/rubric";
 
@@ -10,14 +10,14 @@ type ActionBase = {
 /**
  * Actions
  */
-type PostNotification = ActionBase & {
-    type: "POST_NOTIFICATION";
-    notification: NotificationWithId;
+type ShowToast = ActionBase & {
+    type: "SHOW_TOAST";
+    toast: ToastWithId;
 };
 
-type RemoveNotification = ActionBase & {
-    type: "REMOVE_NOTIFICATION";
-    notificationId: string;
+type DismissToast = ActionBase & {
+    type: "DISMISS_TOAST";
+    toastId: string;
 };
 
 type SetProjectMetadata = ActionBase & {
@@ -84,8 +84,8 @@ type SetAutorun = ActionBase & {
  */
 
 export type Action =
-    | PostNotification
-    | RemoveNotification
+    | ShowToast
+    | DismissToast
     | SetProjectMetadata
     | SetEvalResult
     | ClearEvalResult
@@ -102,14 +102,14 @@ export type Action =
 /**
  * Action creators
  */
-const postNotification = (notification: NotificationWithId): PostNotification => ({
-    type: "POST_NOTIFICATION",
-    notification,
+const showToast = (toast: ToastWithId): ShowToast => ({
+    type: "SHOW_TOAST",
+    toast,
 });
 
-const removeNotification = (notificationId: string): RemoveNotification => ({
-    type: "REMOVE_NOTIFICATION",
-    notificationId,
+const dismissToast = (toastId: string): DismissToast => ({
+    type: "DISMISS_TOAST",
+    toastId,
 });
 
 const setProjectMetadata = (metadata: pxt.Cloud.JsonScript | undefined): SetProjectMetadata => ({
@@ -172,8 +172,8 @@ const setAutorun = (autorun: boolean): SetAutorun => ({
 });
 
 export {
-    postNotification,
-    removeNotification,
+    showToast,
+    dismissToast,
     setProjectMetadata,
     setEvalResult,
     clearEvalResult,
diff --git a/teachertool/src/state/reducer.ts b/teachertool/src/state/reducer.ts
index 2b5f79e0f3a2..74b84f6d7caf 100644
--- a/teachertool/src/state/reducer.ts
+++ b/teachertool/src/state/reducer.ts
@@ -6,23 +6,23 @@ import { updateStoredRubricAsync } from "../transforms/updateStoredRubric";
 // The reducer must not create side effects. E.g. do not dispatch a state change from within the reducer.
 export default function reducer(state: AppState, action: Action): AppState {
     switch (action.type) {
-        case "POST_NOTIFICATION": {
+        case "SHOW_TOAST": {
             // Before posting the notification, ensure is doesn't already exist in the list.
             // Protect against duplicate action dispatches.
-            if (!state.notifications.find(n => n.id === action.notification.id)) {
+            if (!state.toasts.find(n => n.id === action.toast.id)) {
                 return {
                     ...state,
-                    notifications: [...state.notifications, action.notification],
+                    toasts: [...state.toasts, action.toast],
                 };
             } else {
                 return state;
             }
         }
-        case "REMOVE_NOTIFICATION": {
-            const notifications = state.notifications.filter(n => n.id !== action.notificationId);
+        case "DISMISS_TOAST": {
+            const toasts = state.toasts.filter(n => n.id !== action.toastId);
             return {
                 ...state,
-                notifications,
+                toasts,
             };
         }
         case "SET_PROJECT_METADATA": {
diff --git a/teachertool/src/state/state.ts b/teachertool/src/state/state.ts
index fc6c39d9f278..aa411cd35ee1 100644
--- a/teachertool/src/state/state.ts
+++ b/teachertool/src/state/state.ts
@@ -1,10 +1,10 @@
-import { ModalType, Notifications, TabName } from "../types";
+import { ModalType, ToastWithId, TabName } from "../types";
 import { CatalogCriteria, CriteriaEvaluationResult, CriteriaInstance } from "../types/criteria";
 import { Rubric } from "../types/rubric";
 
 export type AppState = {
     targetConfig?: pxt.TargetConfig;
-    notifications: Notifications;
+    toasts: ToastWithId[];
     evalResults: pxt.Map<CriteriaEvaluationResult>; // Criteria Instance Id -> Result
     projectMetadata: pxt.Cloud.JsonScript | undefined;
     catalog: CatalogCriteria[] | undefined;
@@ -19,7 +19,7 @@ export type AppState = {
 };
 
 export const initialAppState: AppState = {
-    notifications: [],
+    toasts: [],
     evalResults: {},
     projectMetadata: undefined,
     catalog: undefined,
diff --git a/teachertool/src/transforms/loadProjectMetadataAsync.ts b/teachertool/src/transforms/loadProjectMetadataAsync.ts
index deec19b62a92..b15ca764eccd 100644
--- a/teachertool/src/transforms/loadProjectMetadataAsync.ts
+++ b/teachertool/src/transforms/loadProjectMetadataAsync.ts
@@ -2,22 +2,22 @@ import { stateAndDispatch } from "../state";
 import * as Actions from "../state/actions";
 import { getProjectMetaAsync } from "../services/backendRequests";
 import { logDebug } from "../services/loggingService";
-import { postNotification } from "./postNotification";
-import { makeNotification } from "../utils";
+import { showToast } from "./showToast";
+import { makeToast } from "../utils";
 
 export async function loadProjectMetadataAsync(shareLink: string) {
     const { dispatch } = stateAndDispatch();
 
     const scriptId = pxt.Cloud.parseScriptId(shareLink);
     if (!scriptId) {
-        postNotification(makeNotification(lf("Invalid share link"), 2000));
+        showToast(makeToast("error", lf("Invalid share link")));
         dispatch(Actions.setProjectMetadata(undefined));
         return;
     }
 
     const projMeta = await getProjectMetaAsync(scriptId);
     if (!projMeta) {
-        postNotification(makeNotification(lf("Failed to load project"), 2000));
+        showToast(makeToast("error", lf("Failed to load project")));
         dispatch(Actions.setProjectMetadata(undefined));
         return;
     }
diff --git a/teachertool/src/transforms/postNotification.ts b/teachertool/src/transforms/postNotification.ts
deleted file mode 100644
index f25d3c840a42..000000000000
--- a/teachertool/src/transforms/postNotification.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { stateAndDispatch } from "../state";
-import { NotificationWithId } from "../types";
-import * as Actions from "../state/actions";
-
-export function postNotification(notification: NotificationWithId) {
-    const { dispatch } = stateAndDispatch();
-    dispatch(Actions.postNotification(notification));
-}
diff --git a/teachertool/src/transforms/runEvaluateAsync.ts b/teachertool/src/transforms/runEvaluateAsync.ts
index 15c39902018c..be5f27236b15 100644
--- a/teachertool/src/transforms/runEvaluateAsync.ts
+++ b/teachertool/src/transforms/runEvaluateAsync.ts
@@ -5,8 +5,8 @@ import * as Actions from "../state/actions";
 import { getCatalogCriteriaWithId } from "../state/helpers";
 import { CriteriaEvaluationResult, CriteriaInstance } from "../types/criteria";
 import { ErrorCode } from "../types/errorCode";
-import { makeNotification } from "../utils";
-import { postNotification } from "./postNotification";
+import { makeToast } from "../utils";
+import { showToast } from "./showToast";
 
 function generateValidatorPlan(criteriaInstance: CriteriaInstance): pxt.blocks.ValidatorPlan | undefined {
     const { state: teacherTool } = stateAndDispatch();
@@ -72,8 +72,8 @@ export async function runEvaluateAsync() {
     const results = await Promise.all(evalRequests);
     const errorCount = results.filter(r => !r).length;
     if (errorCount === teacherTool.rubric.criteria.length) {
-        postNotification(makeNotification(lf("Unable to run evaluation"), 2000));
+        showToast(makeToast("error", lf("Unable to run evaluation")));
     } else if (errorCount > 0) {
-        postNotification(makeNotification(lf("Unable to evaluate some criteria"), 2000));
+        showToast(makeToast("error", lf("Unable to evaluate some criteria")));
     }
 }
diff --git a/teachertool/src/transforms/showToast.ts b/teachertool/src/transforms/showToast.ts
new file mode 100644
index 000000000000..2cdb48415ceb
--- /dev/null
+++ b/teachertool/src/transforms/showToast.ts
@@ -0,0 +1,8 @@
+import { stateAndDispatch } from "../state";
+import { ToastWithId } from "../types";
+import * as Actions from "../state/actions";
+
+export function showToast(toast: ToastWithId) {
+    const { dispatch } = stateAndDispatch();
+    dispatch(Actions.showToast(toast));
+}
diff --git a/teachertool/src/transforms/tryLoadLastActiveRubricAsync.ts b/teachertool/src/transforms/tryLoadLastActiveRubricAsync.ts
index 28884947ba1e..daf484e8b693 100644
--- a/teachertool/src/transforms/tryLoadLastActiveRubricAsync.ts
+++ b/teachertool/src/transforms/tryLoadLastActiveRubricAsync.ts
@@ -1,7 +1,7 @@
 import { getLastActiveRubricAsync } from "../services/indexedDbService";
 import { logDebug, logError } from "../services/loggingService";
-import { postNotification } from "./postNotification";
-import { makeNotification } from "../utils";
+import { showToast } from "./showToast";
+import { makeToast } from "../utils";
 import { setRubric } from "./setRubric";
 import { verifyRubricIntegrity } from "../state/helpers";
 
@@ -14,7 +14,7 @@ export async function tryLoadLastActiveRubricAsync() {
         const rubricVerificationResult = verifyRubricIntegrity(lastActiveRubric);
 
         if (!rubricVerificationResult.valid) {
-            postNotification(makeNotification(lf("Some criteria could not be loaded."), 2000));
+            showToast(makeToast("error", lf("Some criteria could not be loaded.")));
         }
 
         setRubric({ ...lastActiveRubric, criteria: rubricVerificationResult.validCriteria });
diff --git a/teachertool/src/types/index.ts b/teachertool/src/types/index.ts
index 6002cd1d7e5f..8780e2fc5945 100644
--- a/teachertool/src/types/index.ts
+++ b/teachertool/src/types/index.ts
@@ -1,15 +1,25 @@
-export type Notification = {
-    message: string;
-    duration: number; // ms
+export type ToastType = "success" | "info" | "warning" | "error";
+
+export type Toast = {
+    type: ToastType;
+    text?: string; // primary message
+    detail?: string; // secondary message
+    jsx?: React.ReactNode; // React content
+    timeoutMs?: number; // if provided, will auto-dismiss after a time
+    weight?: number; // heavier toasts sort downward
+    textColorClass?: string; // if provided, override default text color
+    backgroundColorClass?: string; // if provided, override default background color
+    sliderColorClass?: string; // if provided, override default timeout slider color
+    hideDismissBtn?: boolean; // if true, will hide the dismiss button
+    showSpinner?: boolean; // if true, will show a spinner icon
+    hideIcon?: boolean; // if true, will hide the type-specific icon
+    icon?: string; // if provided, will override the type-specific icon
 };
 
-export type NotificationWithId = Notification & {
+export type ToastWithId = Toast & {
     id: string;
-    expiration: number; // Date.now() + duration
 };
 
-export type Notifications = NotificationWithId[];
-
 export type ModalType = "catalog-display" | "import-rubric";
 
 export type TabName = "rubric" | "results";
diff --git a/teachertool/src/utils/index.ts b/teachertool/src/utils/index.ts
index 77616451417c..8c743ea35bee 100644
--- a/teachertool/src/utils/index.ts
+++ b/teachertool/src/utils/index.ts
@@ -1,13 +1,13 @@
 import { nanoid } from "nanoid";
-import { NotificationWithId } from "../types";
+import { ToastType, ToastWithId } from "../types";
 import { classList } from "react-common/components/util";
 
-export function makeNotification(message: string, duration: number): NotificationWithId {
+export function makeToast(type: ToastType, text: string, timeoutMs: number = 5000): ToastWithId {
     return {
         id: nanoid(),
-        message,
-        duration,
-        expiration: Date.now() + duration,
+        type,
+        text,
+        timeoutMs,
     };
 }
 
diff --git a/theme/themepacks.less b/theme/themepacks.less
index d00040c936da..4ff66835aa35 100644
--- a/theme/themepacks.less
+++ b/theme/themepacks.less
@@ -34,6 +34,15 @@
     --pxt-button-secondary-background-glass: #CBD5E140;
     --pxt-button-secondary-foreground: #1E293B;
     --pxt-button-secondary-accent: #334155;
+    /// Toasts
+    --pxt-toast-background-success: #81E6D9;
+    --pxt-toast-background-info: #63B3ED;
+    --pxt-toast-background-warning: #FBD38D;
+    --pxt-toast-background-error: #FEB2B2;
+    --pxt-toast-accent-success: #38A169;
+    --pxt-toast-accent-info: #3182CE;
+    --pxt-toast-accent-warning: #DD6B20;
+    --pxt-toast-accent-error: #E53E3E;
 }
 
 .theme-highcontrast {