Fixed: (UI) Show available indexers count in Add Indexer

frontend/src/Indexer/Add/AddIndexerModalContent.css

@@ -72,3 +72,20 @@
     margin-left: -30px;
   }
 }
+
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  justify-content: space-between;
+}
+
+.available {
+  font-weight: bold;
+}
+
+@media only screen and (max-width: $breakpointExtraSmall) {
+  .modalFooter {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

frontend/src/Indexer/Add/AddIndexerModalContent.css.d.ts

@@ -2,12 +2,14 @@
 // Please do not change this file!
 interface CssExports {
   'alert': string;
+  'available': string;
   'filterContainer': string;
   'filterInput': string;
   'filterLabel': string;
   'filterRow': string;
   'indexers': string;
   'modalBody': string;
+  'modalFooter': string;
   'scroller': string;
 }
 export const cssExports: CssExports;

frontend/src/Indexer/Add/AddIndexerModalContent.js

@@ -278,12 +278,18 @@ class AddIndexerModalContent extends Component {
           </Scroller>
         </ModalBody>
 
-        <ModalFooter>
-          <Button
-            onPress={onModalClose}
-          >
-            {translate('Close')}
-          </Button>
+        <ModalFooter className={styles.modalFooter}>
+          <div className={styles.available}>
+            {
+              isPopulated ?
+                translate('CountIndexersAvailable', [filteredIndexers.length]) :
+                null
+            }
+          </div>
+
+          <div>
+            <Button onPress={onModalClose}>{translate('Close')}</Button>
+          </div>
         </ModalFooter>
       </ModalContent>
     );