slight styling tweaks for incidents table and incident icon

dashboard/src/main/home/cluster-dashboard/dashboard/incidents/IncidentPage.tsx

@@ -84,7 +84,9 @@ const IncidentPage = () => {
         <BackButton onClick={handleClose}>
           <BackButtonImg src={backArrow} />
         </BackButton>
-        <TitleSection icon={nodePng}>Incident for {incident.release_name}</TitleSection>
+        <TitleSection materialIconClass="material-icons" icon="error">
+          Incident for {incident.release_name}
+        </TitleSection>
         <IncidentMessage>{incident.latest_message}</IncidentMessage>
         <IncidentStatus status={incident.latest_state}>
           Status: <i>{incident.latest_state}</i>
@@ -240,11 +242,11 @@ const IncidentStatus = styled.span`
   > i {
     margin-left: 5px;
     color: ${(props: { status: string }) => {
-    if (props.status === "ONGOING") {
-      return "#f5cb42";
-    }
-    return "#00d12a";
-  }};
+      if (props.status === "ONGOING") {
+        return "#f5cb42";
+      }
+      return "#00d12a";
+    }};
   }
 `;
 

dashboard/src/main/home/cluster-dashboard/dashboard/incidents/IncidentsTable.tsx

@@ -139,7 +139,7 @@ export default IncidentsTable;
 const KindContainer = styled.div`
   display: flex;
   align-items: center;
-  min-width: 120px;
+  min-width: 150px;
 `;
 
 const Kind = styled.div`
@@ -163,7 +163,7 @@ const StatusDot = styled.div`
   width: 8px;
   height: 8px;
   background: ${(props: { status: string }) =>
-    props.status === "ONGOING" ? "#ed5f85" : "#f5cb42"};
+    props.status === "ONGOING" ? "#ed5f85" : "#4797ff"};
   border-radius: 20px;
   margin-left: 3px;
   margin-right: 15px;
@@ -173,5 +173,5 @@ const Message = styled.div`
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
-  max-width: 400px;
+  max-width: 500px;
 `;