Release notification changes

src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js

@@ -143,4 +143,4 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
       {optionsDisplay}
     </Grid>
   );
-});
+});

src/components/UpgradeIcon/UpgradeIcon.css

@@ -17,5 +17,9 @@
   max-width: 100%;
   max-height: 100%;
   box-sizing: border-box;
-  opacity: 0.65;
- }
+  color: var(--heading_text_color);
+}
+
+.UpgradeIcon.Release {
+  color: var(--heading_other_text_color);
+}

src/components/UpgradeIcon/UpgradeIcon.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import './UpgradeIcon.css';
-import availableImage from '../../assets/images/release_available.png';
 import ReactTooltip from 'react-tooltip';
+import {faExclamationTriangle} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 
 export default props => {
+  const styles = ['UpgradeIcon'];
   let placement = 'left';
   let toolTipText = 'UI Upgrade Available';
   if (props.release) {
     placement='bottom';
+    styles.push('Release');
+  }
+
+  if (props.release || props.newReleases) {
     toolTipText = 'New Release Available';
   }
 
@@ -16,13 +22,14 @@ export default props => {
     (
       <div className={'UpgradeIconOwner'}>
         <p data-tip='' data-for={placement}>
-          <img alt=''
-               onClick={props.clicked}
-               src={availableImage}
-               className={'UpgradeIcon'}/>
+          <a href={'#'}
+             className={styles.join(' ')}
+             onClick={props.clicked}>
+            <FontAwesomeIcon icon={faExclamationTriangle}/>
+          </a>
         </p>
         <ReactTooltip id={placement} place={placement}>{toolTipText}</ReactTooltip>
       </div>
     )
     : null;
-};
+};