🚸 Improve accessibility (#980)

* 🚸 Improve accessibility

* 🌐 Add missing translations

src/components/Dashboard/Tiles/Apps/AppPing.tsx

@@ -1,5 +1,7 @@
-import { Indicator, Tooltip } from '@mantine/core';
+import { Box, Indicator, Tooltip } from '@mantine/core';
+import { IconCheck, IconCheckbox, IconDownload, IconLoader, IconX } from '@tabler/icons-react';
 import Consola from 'consola';
+import { TargetAndTransition, Transition, motion } from 'framer-motion';
 import { useTranslation } from 'next-i18next';
 import { api } from '~/utils/api';
 
@@ -16,6 +18,7 @@ export const AppPing = ({ app }: AppPingProps) => {
   const active =
     (config?.settings.customization.layout.enabledPing && app.network.enabledStatusChecker) ??
     false;
+
   const { data, isLoading, isFetching, isSuccess } = api.app.ping.useQuery(app.id, {
     retry: false,
     enabled: active,
@@ -32,8 +35,37 @@ export const AppPing = ({ app }: AppPingProps) => {
 
   if (!active) return null;
 
+  const isOnline = data?.state === 'online';
+
+  const disablePulse = config?.settings.customization.accessibility?.disablePingPulse ?? false;
+  const replaceDotWithIcon =
+    config?.settings.customization.accessibility?.replacePingDotsWithIcons ?? false;
+
+  const scaleAnimation = isOnline ? [1, 0.7, 1] : 1;
+  const animate: TargetAndTransition | undefined = disablePulse
+    ? undefined
+    : {
+        scale: scaleAnimation,
+      };
+  const transition: Transition | undefined = disablePulse
+    ? undefined
+    : {
+        repeat: Infinity,
+        duration: 2.5,
+        ease: 'easeInOut',
+      };
+
   return (
-    <div style={{ position: 'absolute', bottom: 15, right: 15, zIndex: 2 }}>
+    <motion.div
+      style={{
+        position: 'absolute',
+        bottom: replaceDotWithIcon ? 5 : 20,
+        right: replaceDotWithIcon ? 8 : 20,
+        zIndex: 2,
+      }}
+      animate={animate}
+      transition={transition}
+    >
       <Tooltip
         withinPortal
         radius="lg"
@@ -45,17 +77,40 @@ export const AppPing = ({ app }: AppPingProps) => {
             : `${data?.statusText} ${data?.status}`
         }
       >
-        <Indicator
-          size={15}
-          processing={isSuccess}
-          color={isFetching ? 'yellow' : data?.state === 'online' ? 'green' : 'red'}
-          children={null}
-        />
+        {config?.settings.customization.accessibility?.replacePingDotsWithIcons ? (
+          <Box>
+            <AccessibleIndicatorPing isLoading={isLoading} isOnline={isOnline} />
+          </Box>
+        ) : (
+          <Indicator
+            size={15}
+            color={isLoading ? 'yellow' : isOnline ? 'green' : 'red'}
+            children={null}
+          />
+        )}
       </Tooltip>
-    </div>
+    </motion.div>
   );
 };
 
+const AccessibleIndicatorPing = ({
+  isLoading,
+  isOnline,
+}: {
+  isOnline: boolean;
+  isLoading: boolean;
+}) => {
+  if (isOnline) {
+    return <IconCheck color="green" />;
+  }
+
+  if (isLoading) {
+    return <IconLoader />;
+  }
+
+  return <IconX color="red" />;
+};
+
 export const getIsOk = (app: AppType, status: number) => {
   if (app.network.okStatus === undefined || app.network.statusCodes.length >= 1) {
     Consola.log('Using new status codes');