fix(design): a toggle is pressed, never a bare aria-pressed; static labels are flat Badges with a tone, edged label spans lint-refused (E28)

frontend/src/components/SettingsPanel.tsx

@@ -15,6 +15,7 @@ import Avatar from "./ui/Avatar";
 import { notify, type NotifSettings } from "../lib/notifications";
 import Tooltip from "./ui/Tooltip";
 import { Section, SwitchRow } from "./ui/form";
+import { Badge } from "./ui/Badge";
 import { Button } from "./ui/Button";
 import { type SaveState } from "./ui/DraftSaveBar";
 import { useConfirm } from "./confirmContext";
@@ -320,9 +321,7 @@ function AccessRow({
         </p>
       </div>
       {granted ? (
-        <span className="shrink-0 text-2xs px-2 py-1 rounded-full border border-accent/40 text-accent">
-          {t("settings.account.granted")}
-        </span>
+        <Badge tone="accent">{t("settings.account.granted")}</Badge>
       ) : (
         <Tooltip hint={t("settings.account.enableHint")}>
           <Button variant="glass" size="sm" className="shrink-0" onClick={onEnable}>
@@ -422,9 +421,7 @@ function SignInMethods({ me }: { me: Me }) {
             )}
           </div>
           {me.has_google ? (
-            <span className="shrink-0 text-2xs px-2 py-1 rounded-full border border-accent/40 text-accent">
-              {t("settings.account.googleLink.connected")}
-            </span>
+            <Badge tone="accent">{t("settings.account.googleLink.connected")}</Badge>
           ) : (
             <Button
               variant="glass"