add optional props to static analyser button and round up cosmetic look of ssa

libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx

@@ -35,7 +35,7 @@ export const RemixUiCheckbox = ({
   title,
   visibility,
   display = 'flex',
-  disabled = true,
+  disabled = false,
   tooltipPlacement = 'right'
 }: RemixUiCheckboxProps) => {
 

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

@@ -6,18 +6,21 @@ interface StaticAnalyserButtonProps {
   buttonText: string,
   disabled?: boolean,
   title?: string
+  classList?: string
 }
 
 const StaticAnalyserButton = ({
   onClick,
   buttonText,
   disabled,
-  title
+  title,
+  classList
 }: StaticAnalyserButtonProps) => {
-  let classList = "btn btn-sm w-25 btn-primary"
-  classList += disabled ? " disabled" : ""
+  const defaultStyle = "btn btn-sm w-25 btn-primary"
+  const newclassList = disabled && classList.length > 0 ? `${classList} disabled` :
+  classList.length === 0 && disabled ? `${defaultStyle} disabled` : classList.length > 0 ? `${classList}` : defaultStyle
   return (
-    <button className={classList} disabled={disabled} onClick={onClick}>
+    <button className={newclassList} disabled={disabled} onClick={onClick}>
       <CustomTooltip
         placement="right"
         tooltipId="ssaRunButtonTooltip"

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

@@ -477,12 +477,11 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
   return (
     <div className="analysis_3ECCBV px-3 pb-1">
       <div className="my-2 d-flex flex-column align-items-left">
-        testing...
-        <div className="d-flex justify-content-between" id="staticanalysisButton">
+        <div className="d-flex justify-content-between mb-3" id="staticanalysisButton">
           <RemixUiCheckbox
             id="autorunstaticanalysis"
             inputType="checkbox"
-            title="Run static analysis after the compilation"
+            title="Run solhint static analysis on file save"
             onClick={handleAutoRun}
             checked={autoRun}
             label="Linter"
@@ -498,29 +497,42 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                 return x._index.toString()
               }))
             }).flat().every(el => categoryIndex.includes(el))}
-            label="Select all"
+            label="Basic"
             onClick={() => handleCheckAllModules(groupedModules)}
             onChange={() => {}}
             tooltipPlacement={'top-start'}
           />
+          <div className="d-flex mt-1" id="enableSlitherAnalysis">
             <RemixUiCheckbox
-            id="autorunstaticanalysis"
+              id="enableSlither"
               inputType="checkbox"
-            title="Run static analysis after the compilation"
-            onClick={handleAutoRun}
-            checked={autoRun}
-            label="Autorun"
+              onClick={handleSlitherEnabled}
+              checked={slitherEnabled}
+              label="Slither"
+              disabled={showSlither}
               onChange={() => {}}
-            tooltipPlacement={'bottom-start'}
             />
+
+            <a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/slither.html#enable-slither-analysis' target={'_blank'}>
+              <CustomTooltip
+                placement={'right'}
+                tooltipClasses="text-nowrap"
+                tooltipId="overlay-tooltip"
+                tooltipText={<span className="border bg-light text-dark p-1 pr-3" style={{minWidth: '230px' }}>Learn how to use Slither Analysis</span>}
+              >
+                <i style={{ fontSize: 'medium' }} className={'fal fa-info-circle ml-3'} aria-hidden="true"></i>
+              </CustomTooltip>
+            </a>
+          </div>
         </div>
         <Button
           buttonText="Run"
           title={runButtonTitle}
+          classList="btn btn-sm btn-primary btn-block"
           onClick={async () => await run(state.data, state.source, state.file)}
           disabled={(state.data === null || categoryIndex.length === 0) && !slitherEnabled || !isSupportedVersion }
         />
-        { showSlither &&
+        {/* { showSlither &&
           <div className="d-flex mt-2" id="enableSlitherAnalysis">
             <RemixUiCheckbox
               id="enableSlither"
@@ -528,7 +540,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
               onClick={handleSlitherEnabled}
               checked={slitherEnabled}
               label="Enable Slither Analysis"
-              
+              disabled={showSlither}
               onChange={() => {}}
             />
 
@@ -543,7 +555,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
               </CustomTooltip>
             </a>
           </div>
-        }
+        } */}
       </div>
       {/* <div id="staticanalysismodules" className="list-group list-group-flush">
         {Object.keys(groupedModules).map((categoryId, i) => {