frontend: show enable bluetooth message in a status component

Showing a warning looks nicer than plain text.

Author: thisconnect

frontends/web/src/components/bluetooth/bluetooth.tsx

@@ -18,6 +18,7 @@ import { useTranslation } from 'react-i18next';
 import { useSync } from '@/hooks/api';
 import { connect, getState, syncState } from '@/api/bluetooth';
 import { runningInIOS } from '@/utils/env';
+import { Status } from '@/components/status/status';
 import { ActionableItem } from '@/components/actionable-item/actionable-item';
 import { Badge } from '@/components/badge/badge';
 import styles from './bluetooth.module.css';
@@ -29,7 +30,11 @@ const _Bluetooth = () => {
     return null;
   }
   if (!state.bluetoothAvailable) {
-    return <>Please turn on Bluetooth</>;
+    return (
+      <Status type="warning">
+        {t('bluetooth.enable')}
+      </Status>
+    );
   }
   return (
     <>

frontends/web/src/locales/en/app.json

@@ -368,6 +368,7 @@
   },
   "bluetooth": {
     "connectionFailed": "failed",
+    "enable": "Please turn on Bluetooth",
     "select": "Select your BitBox"
   },
   "bootloader": {