mg updated loading check and exclamation

Author: morahgeist

src/app/components/Loader.tsx

@@ -2,8 +2,8 @@
 
 import React from 'react';
 import { ClipLoader } from 'react-spinners';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheck, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 
 /*
 This file is what decides what icon (loading, checkmark, exclamation point) is displayed next to the checks in the ErrorContainer loading screen:
@@ -15,9 +15,11 @@ This file is what decides what icon (loading, checkmark, exclamation point) is d
 
 const handleResult = (result: boolean): JSX.Element =>
   result ? (
-    <FontAwesomeIcon icon={faCheck} className='check' size='lg' /> // if result boolean is true, we display a checkmark icon
+    <CheckCircleOutlineIcon className='check'/>
+  // if result boolean is true, we display a checkmark icon
   ) : (
-    <FontAwesomeIcon icon={faExclamationCircle} className='fail' size='lg' /> // if the result boolean is false, we display a fail icon
+    <ErrorOutlineIcon className='fail'/>
+    // if the result boolean is false, we display a fail icon
   );
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types

src/app/styles/components/_buttons.scss

@@ -166,32 +166,25 @@
 }
 
 .backward-button {
-  width: 30px;
-  height: 25px;
-  // margin: 7px;
-  padding: 0px;
   color: $brand-color;
   border-color: transparent;
   background: $blue-color-gradient;
   border-radius: 5px;
 }
 
 .forward-button {
-  width: 30px;
-  height: 25px;
-  margin: 7px;
   color: $brand-color;
   border-color: transparent;
   background: $blue-color-gradient;
   border-radius: 5px;
 }
 
-.play-button:focus,
-.backward-button:focus,
-.forward-button:focus {
-  outline: none;
-  box-shadow: $box-shadow-blue;
-}
+// .play-button:focus,
+// .backward-button:focus,
+// .forward-button:focus {
+//   outline: none;
+//   box-shadow: $box-shadow-blue;
+// }
 
 .forward-button:hover,
 .backward-button:hover {
@@ -200,16 +193,16 @@
   cursor: pointer;
 }
 
-.import-button,
-.howToUse-button,
-.export-button,
-.pause-button {
-  @extend %button-shared;
-  font-size: 16px;
-  color: white;
-  border-color: transparent;
-  background: $blue-color-gradient;
-}
+// .import-button,
+// .howToUse-button,
+// .export-button,
+// .pause-button {
+//   @extend %button-shared;
+//   font-size: 16px;
+//   color: white;
+//   border-color: transparent;
+//   background: $blue-color-gradient;
+// }
 
 .import-button:hover,
 .howToUse-button:hover,