Quality turns gray if no service is on

Signed-off-by: Mantas Domaševičius <mantas@mysterium.network>

Author: mdomasevicius

src/Pages/Authenticated/Components/Quality/Quality.tsx

@@ -11,8 +11,10 @@ import { tequila } from '../../../../api/tequila'
 import styled from 'styled-components'
 import { Link } from '../../../../Components/Common/Link'
 import { NODE_QUALITY } from '../../../../constants/urls'
+import { useAppSelector } from '../../../../commons/hooks'
+import { selectors } from '../../../../redux/selectors'
 
-type IndicatorVariants = 'good' | 'normal' | 'poor'
+type IndicatorVariants = 'good' | 'normal' | 'poor' | 'unknown'
 interface IndicatorProps {
   $variant: IndicatorVariants
 }
@@ -35,6 +37,8 @@ const Tooltip = styled.div`
 
 export const Quality = () => {
   const [quality, setQuality] = useState(0)
+  const services = useAppSelector(selectors.runningServices)
+  const anyOnline = services.length > 0
 
   useEffect(() => {
     tequila.api.provider.quality().then((r) => setQuality(r.quality))
@@ -74,7 +78,7 @@ export const Quality = () => {
           </Link>
         </Tooltip>
       }
-      content={<Indicator $variant={resolveVariant(quality)} />}
+      content={<Indicator $variant={anyOnline ? resolveVariant(quality) : 'unknown'} />}
     />
   )
 }

src/theme/dark.ts

@@ -169,6 +169,7 @@ const dark: Omit<Theme, 'common'> = {
       good: themeCommon.colorGreen,
       normal: themeCommon.colorWarning,
       poor: themeCommon.colorRed,
+      unknown: themeCommon.colorGrayBlue2,
     },
   },
   adminPanel: {

src/theme/light.ts

@@ -166,6 +166,7 @@ const light: Omit<Theme, 'common'> = {
       good: themeCommon.colorGreen,
       normal: themeCommon.colorWarning,
       poor: themeCommon.colorRed,
+      unknown: themeCommon.colorGrayBlue2,
     },
   },
   adminPanel: {

src/types/theme.d.ts

@@ -174,6 +174,7 @@ export type Theme = {
       good: string
       normal: string
       poor: string
+      unknown: string
     }
   }
   notifications: {