New: (UI) Indexer privacy label

Fixes #2132

frontend/src/Indexer/Index/Table/IndexerIndexRow.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSelect } from 'App/SelectContext';
-import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
@@ -15,10 +14,10 @@ import createIndexerIndexItemSelector from 'Indexer/Index/createIndexerIndexItem
 import Indexer from 'Indexer/Indexer';
 import IndexerTitleLink from 'Indexer/IndexerTitleLink';
 import { SelectStateInputProps } from 'typings/props';
-import firstCharToUpper from 'Utilities/String/firstCharToUpper';
 import translate from 'Utilities/String/translate';
 import CapabilitiesLabel from './CapabilitiesLabel';
 import IndexerStatusCell from './IndexerStatusCell';
+import PrivacyLabel from './PrivacyLabel';
 import ProtocolLabel from './ProtocolLabel';
 import styles from './IndexerIndexRow.css';
 
@@ -175,7 +174,7 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
         if (name === 'privacy') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>
-              <Label>{translate(firstCharToUpper(privacy))}</Label>
+              <PrivacyLabel privacy={privacy} />
             </VirtualTableRowCell>
           );
         }

frontend/src/Indexer/Index/Table/PrivacyLabel.css

@@ -0,0 +1,20 @@
+.publicLabel {
+  composes: label from '~Components/Label.css';
+
+  border-color: var(--dangerColor);
+  background-color: var(--dangerColor);
+}
+
+.semiPrivateLabel {
+  composes: label from '~Components/Label.css';
+
+  border-color: var(--warningColor);
+  background-color: var(--warningColor);
+}
+
+.privateLabel {
+  composes: label from '~Components/Label.css';
+
+  border-color: var(--infoColor);
+  background-color: var(--infoColor);
+}

frontend/src/Indexer/Index/Table/PrivacyLabel.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'privateLabel': string;
+  'publicLabel': string;
+  'semiPrivateLabel': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Indexer/Index/Table/PrivacyLabel.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Label from 'Components/Label';
+import { IndexerPrivacy } from 'Indexer/Indexer';
+import firstCharToUpper from 'Utilities/String/firstCharToUpper';
+import translate from 'Utilities/String/translate';
+import styles from './PrivacyLabel.css';
+
+interface PrivacyLabelProps {
+  privacy: IndexerPrivacy;
+}
+
+function PrivacyLabel({ privacy }: PrivacyLabelProps) {
+  return (
+    <Label className={styles[`${privacy}Label`]}>
+      {translate(firstCharToUpper(privacy))}
+    </Label>
+  );
+}
+
+export default PrivacyLabel;