mg updated font to Outfit, locked, download, upload, tutorial icons updated to MUI

Author: morahgeist

src/app/components/Tutorial.tsx

@@ -10,6 +10,7 @@ import { faQuestion } from '@fortawesome/free-solid-svg-icons';
 import { tutorialSaveSeriesToggle, setCurrentTabInApp } from '../actions/actions';
 import { TutorialProps, TutorialState, StepsObj } from '../FrontendTypes';
 import { Button } from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 //Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly.
 const { Steps } = require('intro.js-react');
 
@@ -355,7 +356,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           type='button'
           onClick={() => startIntro()}
         >
-          <FontAwesomeIcon icon={faQuestion} /> Tutorial
+          <HelpOutlineIcon /> Tutorial
         </Button>
       </>
     );

src/app/containers/ButtonsContainer.tsx

@@ -17,6 +17,7 @@ import LockIcon from '@mui/icons-material/Lock';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import FileUploadIcon from '@mui/icons-material/FileUpload';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 
 // function exportHandler takes in a parameter snapshots which is typed as an array
 // the function does not return anything so the type is void

src/app/styles/abstracts/_variables.scss

@@ -1,7 +1,7 @@
 /// fontFamily: 'monaco, Consolas, Lucida Console, monospace'
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 /// @type List
-$text-font-stack: 'Roboto', sans-serif !default;
+$text-font-stack: 'Outfit', sans-serif !default;
 
 /// @type Color
 /// fiery-rose changed from ff6569 to F00008 globally to improve contrast

src/app/styles/components/_buttons.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 
 .save-series-button {
   padding: 3px;
@@ -13,7 +13,7 @@
   border-radius: 5px;
   cursor: pointer;
   line-height: 1.5em;
-  font: 400 16px 'Roboto', sans-serif;
+  font: 400 16px 'Outfit', sans-serif;
   // font-size: $button-text-size;
   width: 120px;
   background: $red-color-gradient;
@@ -38,7 +38,7 @@
   border-radius: 3px;
   cursor: pointer;
   line-height: 1.5em;
-  font: 300 16px 'Roboto', sans-serif;
+  font: 300 16px 'Outfit', sans-serif;
   font-size: $button-text-size;
   width: 120px;
   // background: $red-color-gradient;
@@ -61,7 +61,7 @@
   border-radius: 3px;
   cursor: pointer;
   line-height: 1.5em;
-  font: 500 16px 'Roboto', sans-serif;
+  font: 500 16px 'Outfit', sans-serif;
   // font-size: $button-text-size; increase the font size and contrast for readability
   width: 120px;
   background: #62d6fb;
@@ -95,7 +95,7 @@
   border: none;
   /* border-radius: 3px; */
   background: linear-gradient(145deg, #5c6068, #4d5157);
-  font: normal 16px 'Roboto', sans-serif;
+  font: normal 16px 'Outfit', sans-serif;
   color: #ffffff;
   display: flex;
   justify-content: center;
@@ -111,7 +111,7 @@
   border: transparent;
   border-radius: 3px;
   background-color: #232529;
-  font: normal 16px 'Roboto', sans-serif;
+  font: normal 16px 'Outfit', sans-serif;
   color: #ffffff;
   transform: rotateX(90deg);
   transition: opacity 300ms, transform 0.15s linear;
@@ -137,7 +137,7 @@
   width: 100px;
   border: transparent;
   border-radius: 3px;
-  font: normal 16px 'Roboto', sans-serif;
+  font: normal 16px 'Outfit', sans-serif;
 }
 
 .empty-button:hover {
@@ -236,7 +236,7 @@
   align-items: center;
   cursor: pointer;
   line-height: 1.5em;
-  font: 300 16px 'Roboto', sans-serif;
+  font: 300 16px 'Outfit', sans-serif;
   font-size: $button-text-size;
 
   background: $brand-color;

src/app/styles/components/_performanceVisx.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 
 #RenderContainer {
   display: flex;
@@ -24,7 +24,7 @@
 #routes-formcontrol {
   padding: 3px;
   margin-left: 50px;
-  font: 400 16px 'Roboto', sans-serif;
+  font: 400 16px 'Outfit', sans-serif;
   text-align: left;
   // min-width: 10em;
   // max-height: 50%;
@@ -33,7 +33,7 @@
 #routes-dropdown {
   color: white !important;
   // background-color: #ff6569 !important;
-  font: 400 16px 'Roboto', sans-serif;
+  font: 400 16px 'Outfit', sans-serif;
   text-align: left;
 }
 
@@ -45,7 +45,7 @@
 
 #routes-select, #snapshot-select{
   color: white !important;
-  font: 400 16px 'Roboto', sans-serif;
+  font: 400 16px 'Outfit', sans-serif;
   text-align: left;
   width: 120px;
   height: 30px;

src/app/styles/layout/_buttonsContainer.scss

@@ -1,6 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 * {
-  font-family: 'Roboto', sans-serif;
+  font-family: 'Outfit', sans-serif;
 }
 .buttons-container {
   margin: 0 1% 0 1%;

src/app/styles/layout/_errorContainer.scss

@@ -1,13 +1,13 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 * {
-	font-family: 'Roboto', sans-serif;
+	font-family: 'Outfit', sans-serif;
 }
 .error-container {
 	height: 100%;
 	margin: 0 auto;
 	background-color: $brand-color;
 	overflow: hidden;
-	font: 'Roboto', sans-serif;
+	font: 'Outfit', sans-serif;
 
 	display: flex;
 	flex-direction: column;

src/app/styles/layout/_headContainer.scss

@@ -1,6 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 * {
-	font-family: 'Roboto', sans-serif;
+	font-family: 'Outfit', sans-serif;
 }
 
 .head-container {