Merge pull request #26 from oslabs-beta/hazzardIcon

Final pop up style css complete

Author: jimmally

src/app/containers/ButtonsContainer.tsx

@@ -14,6 +14,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import StatusDot from '../components/StatusDot'; 
 import LoopIcon from '@mui/icons-material/Loop';
 import CloseIcon from '@mui/icons-material/Close';
+import WarningIcon from '@mui/icons-material/Warning';
 
 function exportHandler(snapshots: []): void { // function that takes in our tabs[currentTab] object to be exported as a JSON file. NOTE: TypeScript needs to be updated
   const fileDownload: HTMLAnchorElement = document.createElement('a'); // invisible HTML element that will hold our tabs[currentTab] object
@@ -127,7 +128,10 @@ function ButtonsContainer(): JSX.Element {
         <div className='close-icon-pop-up-div' >
         <CloseIcon type="button" onClick={() => handleReconnectCancel()} className='close-icon-pop-up'/>
         </div>
-        <DialogTitle className='dialog-pop-up-header'>WARNING</DialogTitle>
+        <div className="warning-header-container">
+          <WarningIcon className='warning-icon-pop-up'/>
+          <DialogTitle className='dialog-pop-up-header'>WARNING</DialogTitle>
+        </div>
         <DialogContent className='dialog-pop-up-contents'>
             <h3>Status: {connectionStatus ? 'Connected' : 'Disconnected'}</h3>
             {connectionStatus

src/app/styles/components/_buttons.scss

@@ -406,7 +406,8 @@ aside {
   cursor: pointer;
   color: $text-color;
   font-size: 20px; 
-  padding-right: 10px;
+  padding-right: 8px;
+  color: black;
 }
 
 .download-button-pop-up {
@@ -423,4 +424,10 @@ aside {
     color: $text-color;
     background-color: $highlight-color;
   }
+}
+
+.warning-icon-pop-up {
+  color: #d72828;
+  margin-left: 5px;
+  margin-right: -22px;
 }

src/app/styles/layout/_buttonsContainer.scss

@@ -73,22 +73,22 @@
 .dialog-pop-up {
   border: 1px solid $border-color;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
+  padding: 13px;
 }
 
 .dialog-pop-up-header {
-  background-color: $brand-color;
   color: $text-color;
-  padding: 12px 20px; 
+  padding: 8px 16px;  
   font-size: 20px; 
   font-family: $text-font-stack;
 }
 
 .dialog-pop-up-contents {
-  padding: 20px; 
   background-color: $brand-color;
   color: $text-color; 
   font-family: $text-font-stack;
-  line-height: 1.4; 
+  line-height: 1.4;  
+  padding: 0px 15px 15px 15px !important;  
 }
 
 .dialog-pop-up-actions {
@@ -106,3 +106,10 @@
   align-items: center;
 }
 
+.warning-header-container {
+  background-color: $brand-color;
+  display: flex;
+  align-items: center;
+  height: 20%;
+}
+