Toast Component for Undecided Schedules (#270)

### Summary

Resolves #266 

Create reusable toast component for undecided schedules, let color,
icon, message, self disappearing or not be passed in

### Checklist

- [x] Add a new component folder inside src/components
- [x] Create similar abstractions as the code snippet above


### How to Test
```
import Toast, { notifyToast } from '../Toast';

<div>
  <button type="button" onClick={(): void => notifyToast('atoast')}>
    Notify!
  </button>
  <Toast
    className="atoast"
    color="orange"
    message="Note: The final exam matrix for Fall 2023 may not be fully finalized."
    selfDisappearing={false}
  />
</div>
```

---------

Co-authored-by: Yatharth Bhargava <[email protected]>

src/components/Toast/index.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import './stylesheet.scss';
+import { classes } from '../../utils/misc';
+import { faWarning, faClose } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+export type ToastProps = {
+  className?: string;
+  color?: string;
+  icon?: IconProp;
+  message?: string;
+  selfDisappearing?: boolean;
+};
+
+export function notifyToast(className: string): void {
+  const t = document.getElementsByClassName(
+    classes('toast', className)
+  )[0] as HTMLElement;
+  const selfDisappearing = !t.getElementsByClassName('toast-close-icon')[0];
+  t.style.visibility = 'visible';
+  t.style.animation = 'fadein 0.5s';
+  if (selfDisappearing) {
+    setTimeout(function () {
+      t.style.animation = 'fadeout 0.5s';
+    }, 5000);
+    setTimeout(function () {
+      t.style.visibility = 'hidden';
+    }, 5500);
+  }
+}
+
+export default function Toast({
+  className,
+  color = 'orange',
+  icon = faWarning,
+  message = '',
+  selfDisappearing = false,
+}: ToastProps): React.ReactElement {
+  return (
+    <div
+      className={classes('toast', className)}
+      style={{ backgroundColor: color }}
+    >
+      <FontAwesomeIcon fixedWidth icon={icon} className="toast-icon" />
+      <div className="toast-message">{message}</div>
+      {!selfDisappearing && (
+        <FontAwesomeIcon
+          fixedWidth
+          icon={faClose}
+          className="toast-close-icon"
+          onClick={(): void => {
+            const t = document.getElementsByClassName(
+              classes('toast', className)
+            )[0] as HTMLElement;
+            t.style.animation = 'fadeout 0.5s';
+            setTimeout(function () {
+              t.style.visibility = 'hidden';
+            }, 500);
+          }}
+        />
+      )}
+    </div>
+  );
+}

src/components/Toast/stylesheet.scss

@@ -0,0 +1,54 @@
+@import '../../variables';
+
+.toast {
+  display: flex;
+  align-items: center;
+  column-gap: 15px;
+  visibility: hidden;
+  position: fixed;
+  right: 30px;
+  top: 30px;
+  z-index: 1;
+  width: 400px;
+  padding: 16px;
+  border-radius: 8px;
+  text-align: left;
+  color: #000000;
+  font-weight: bold;
+  font-size: 1em;
+}
+
+@keyframes fadein {
+  from {
+    right: 0;
+    opacity: 0;
+  }
+  to {
+    right: 30px;
+    opacity: 1;
+  }
+}
+
+@keyframes fadeout {
+  from {
+    right: 30px;
+    opacity: 1;
+  }
+  to {
+    right: 0;
+    opacity: 0;
+  }
+}
+
+.toast-icon {
+  font-size: 2em;
+}
+
+.toast-close-icon {
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+.toast-message {
+  flex: 1 0;
+}