finished fixes from liana and rob

libs/remix-ui/static-analyser/src/lib/components/BasicTitle.tsx

@@ -32,8 +32,8 @@ export function calculateWarningStateEntries(entries: [string, any][]) {
 export function BasicTitle(props: BasicTitleProps) {
 
   return (
-    <span>Remix{props.warningStateEntries.length > 0 ?   !props.hideWarnings ? <i data-id="StaticAnalysisErrorCount" className="badge badge-info rounded-circle ml-1">{calculateWarningStateEntries(props.warningStateEntries).length}</i>: (
+    <span>Remix{props.warningStateEntries.length > 0 ?   !props.hideWarnings ? <i data-id="StaticAnalysisErrorCount" className={`badge ${calculateWarningStateEntries(props.warningStateEntries).length > 0 ? 'badge-warning' : 'badge-danger'} rounded-circle ml-1 text-center`}>{calculateWarningStateEntries(props.warningStateEntries).length}</i>: (
-      <i className="badge badge-info rounded-circle ml-1">
+      <i className="badge badge-warning rounded-circle ml-1 text-center">
         {
           calculateWarningStateEntries(props.warningStateEntries).errors.length
         }

libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx

@@ -388,13 +388,11 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                               : "alert alert-danger"
                           }`}
                           style={{ cursor: "pointer" }}
-                        >
-                          <div
                           onClick={async () => {
                             await props.analysisModule.call(
                               "editor",
                               "discardHighlight"
-                              );
+                            )
                             await props.analysisModule.call(
                               "editor",
                               "highlight",
@@ -414,6 +412,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                             );
                           }}
                         >
+                          <div>
                             <span className="text-wrap">
                               {hint.formattedMessage}
                             </span>
@@ -428,8 +427,6 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                           key={index}
                           className="alert alert-danger"
                           style={{ cursor: "pointer" }}
-                        >
-                          <div
                           onClick={async () => {
                             await props.analysisModule.call(
                               "editor",
@@ -454,6 +451,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                             );
                           }}
                         >
+                          <div>
                             <span className="text-wrap">
                               {hint.formattedMessage}
                             </span>
@@ -474,11 +472,13 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
           Linter
           {hints.length > 0 ? (
             hideWarnings ? (
-              <i className="badge badge-info rounded-circle ml-1">
+              <i className={`badge ${hints.filter(x => x.type === 'error').length > 0
+                ? `badge-danger` : 'badge-warning'} rounded-circle ml-1 text-center`}>
                 {hintErrors.length}
               </i>
             ) : (
-              <i className="badge badge-info rounded-circle ml-1">
+              <i className={`badge ${hints.filter(x => x.type === 'error').length > 0
+              ? `badge-danger` : 'badge-warning'} rounded-circle ml-1 text-center`}>
                 {hints.length}
               </i>
             )
@@ -536,11 +536,11 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
           Slither
           {slitherWarnings.length > 0 ? (
             hideWarnings ? (
-              <i className="badge badge-info rounded-circle ml-1">
+              <i className="badge badge-warning rounded-circle ml-1">
                 {slitherErrors.length}
               </i>
             ) : (
-              <i className="badge badge-info rounded-circle ml-1">
+              <i className={`badge ${slitherErrors.length > 0 ? `badge-danger` : 'badge-warning'} rounded-circle ml-1 text-center`}>
                 {slitherWarnings.length}
               </i>
             )