fix: indexer manager UI behaviour + class naming (#1134)

packages/widgets/src/indexer-manager/component.tsx

@@ -16,9 +16,6 @@ export default function IndexerManagerWidget({
   integrationIds,
   serverData,
 }: WidgetComponentProps<"indexerManager">) {
-  if (integrationIds.length === 0) {
-    throw new NoIntegrationSelectedError();
-  }
   const t = useI18n();
   const [indexersData, setIndexersData] = useState<{ integrationId: string; indexers: Indexer[] }[]>(
     serverData?.initialData ?? [],
@@ -39,26 +36,49 @@ export default function IndexerManagerWidget({
     },
   );
 
+  const iconStyle = { height: "7.5cqmin", width: "7.5cqmin" };
+
+  if (integrationIds.length === 0) {
+    throw new NoIntegrationSelectedError();
+  }
+
   return (
-    <Flex h="100%" direction="column">
+    <Flex className="indexer-manager-container" h="100%" direction="column" gap="2.5cqmin" p="2.5cqmin" align="center">
-      <Text size="6.5cqmin" mt="1.5cqmin" pl="20cqmin">
+      <Text className="indexer-manager-title" size="6.5cqmin">
-        <IconReportSearch size="7cqmin" /> {t("widget.indexerManager.title")}
+        <IconReportSearch className="indexer-manager-title-icon" size="7cqmin" /> {t("widget.indexerManager.title")}
       </Text>
-      <Card m="2.5cqmin" p="2.5cqmin" radius="md" withBorder>
+      <Card className="indexer-manager-list-container" w="100%" p="2.5cqmin" radius="md" flex={1} withBorder>
-        <ScrollArea h="100%">
+        <ScrollArea className="indexer-manager-list-scroll-area" h="100%">
           {indexersData.map(({ integrationId, indexers }) => (
-            <Container key={integrationId}>
+            <Container className={`indexer-manager-${integrationId}-list-container`} p={0} key={integrationId}>
               {indexers.map((indexer) => (
-                <Group key={indexer.id} justify="space-between">
+                <Group
-                  <Anchor href={indexer.url} target={options.openIndexerSiteInNewTab ? "_blank" : "_self"}>
+                  className={`indexer-manager-line indexer-manager-${indexer.name}`}
-                    <Text c="dimmed" size="xs">
+                  h="7.5cqmin"
+                  key={indexer.id}
+                  justify="space-between"
+                >
+                  <Anchor
+                    className="indexer-manager-line-anchor"
+                    href={indexer.url}
+                    target={options.openIndexerSiteInNewTab ? "_blank" : "_self"}
+                  >
+                    <Text className="indexer-manager-line-anchor-text" c="dimmed" size="5cqmin">
                       {indexer.name}
                     </Text>
                   </Anchor>
                   {indexer.status === false || indexer.enabled === false ? (
-                    <IconCircleX color="#d9534f" />
+                    <IconCircleX
+                      className="indexer-manager-line-status-icon indexer-manager-line-icon-disabled"
+                      color="#d9534f"
+                      style={iconStyle}
+                    />
                   ) : (
-                    <IconCircleCheck color="#2ecc71" />
+                    <IconCircleCheck
+                      className="indexer-manager-line-status-icon indexer-manager-line-icon-enabled"
+                      color="#2ecc71"
+                      style={iconStyle}
+                    />
                   )}
                 </Group>
               ))}
@@ -67,11 +87,13 @@ export default function IndexerManagerWidget({
         </ScrollArea>
       </Card>
       <Button
-        m="2.5cqmin"
+        className="indexer-manager-test-button"
-        p="2.5cqmin"
+        w="100%"
+        fz="5cqmin"
+        h="12.5cqmin"
         radius="md"
         variant="light"
-        leftSection={<IconTestPipe size={20} />}
+        leftSection={<IconTestPipe style={iconStyle} />}
         loading={isPending}
         loaderProps={{ type: "dots" }}
         onClick={() => {