🌐 Fix strings for DNS module

public/locales/en/common.json

@@ -6,6 +6,10 @@
   "delete": "Delete",
   "ok": "OK",
   "edit": "Edit",
+  "enabled": "Enabled",
+  "disabled": "Disabled",
+  "enableAll": "Enable all",
+  "disableAll": "Disable all",
   "version": "Version",
   "changePosition": "Change position",
   "remove": "Remove",

public/locales/en/modules/dns-hole-controls.json

@@ -2,15 +2,5 @@
   "descriptor": {
     "name": "DNS hole controls",
     "description": "Control PiHole or AdGuard from your dashboard"
-  },
-  "card": {
-    "buttons": {
-      "enableAll": "Enable all",
-      "disableAll": "Disable all"
-    },
-    "status": {
-      "enabled": "Enabled",
-      "disabled": "Disabled"
-    }
   }
 }

public/locales/en/modules/dns-hole-summary.json

@@ -13,7 +13,6 @@
     "metrics": {
       "domainsOnAdlist": "Domains on adlists",
       "queriesToday": "Queries today",
-      "adsBlockedTodayPercentage": "{{percentage}}%",
       "queriesBlockedTodayPercentage": "blocked today",
       "queriesBlockedToday": "blocked today"
     }

src/widgets/dnshole/DnsHoleControls.tsx

@@ -31,7 +31,7 @@ interface DnsHoleControlsWidgetProps {
 function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
   const { isInitialLoading, data, refetch } = useDnsHoleSummeryQuery();
   const { mutateAsync } = useDnsHoleControlMutation();
-  const { t } = useTranslation('modules/dns-hole-controls');
+  const { t } = useTranslation('common');
 
   const { config } = useConfigContext();
 
@@ -51,7 +51,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
           variant="light"
           color="green"
         >
-          {t('card.buttons.enableAll')}
+          {t('enableAll')}
         </Button>
         <Button
           onClick={async () => {
@@ -62,7 +62,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
           variant="light"
           color="red"
         >
-          {t('card.buttons.disableAll')}
+          {t('disableAll')}
         </Button>
       </Group>
 
@@ -101,18 +101,18 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
 }
 
 const StatusBadge = ({ status }: { status: PiholeApiSummaryType['status'] }) => {
-  const { t } = useTranslation('modules/dns-hole-controls');
+  const { t } = useTranslation('common');
   if (status === 'enabled') {
     return (
       <Badge variant="dot" color="green">
-        {t('card.status.enabled')}
+        {t('enabled')}
       </Badge>
     );
   }
 
   return (
     <Badge variant="dot" color="red">
-      {t('card.status.disabled')}
+      {t('disabled')}
     </Badge>
   );
 };

src/widgets/dnshole/DnsHoleSummary.tsx

@@ -1,6 +1,12 @@
 import { useTranslation } from 'next-i18next';
 import { Card, Center, Container, Stack, Text } from '@mantine/core';
-import { IconAd, IconBarrierBlock, IconPercentage, IconSearch, IconWorldWww } from '@tabler/icons-react';
+import {
+  IconAd,
+  IconBarrierBlock,
+  IconPercentage,
+  IconSearch,
+  IconWorldWww,
+} from '@tabler/icons-react';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';
@@ -103,12 +109,7 @@ function DnsHoleSummaryWidgetTile({ widget }: DnsHoleSummaryWidgetProps) {
         <Center h="100%">
           <Stack align="center" spacing="xs">
             <IconPercentage size={30} />
-            <div>
+            <Text align="center">{(data.adsBlockedTodayPercentage * 100).toFixed(2)}%</Text>
-              <Text align="center">{(data.adsBlockedTodayPercentage * 100).toFixed(2)}%</Text>
-              <Text align="center" lh={1.2} size="sm">
-                {t('card.metrics.queriesBlockedTodayPercentage')}
-              </Text>
-            </div>
           </Stack>
         </Center>
       </Card>