From b86d48d08ca64136341802dab41a87d624f2ecf9 Mon Sep 17 00:00:00 2001
From: "Rudy B." <btte.rudy@gmail.com>
Date: Sat, 25 Apr 2026 12:11:14 +0200
Subject: [PATCH] refactor(2FA): use CSS module instead of inline `style`

---
 .../modals/TwoFactorSuccessModal.module.css    | 18 ++++++++++++++++++
 .../modals/TwoFactorSuccessModal.tsx           | 16 ++++------------
 2 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 src/components/modals/TwoFactorSuccessModal.module.css

diff --git a/src/components/modals/TwoFactorSuccessModal.module.css b/src/components/modals/TwoFactorSuccessModal.module.css
new file mode 100644
index 000000000..2804fe91c
--- /dev/null
+++ b/src/components/modals/TwoFactorSuccessModal.module.css
@@ -0,0 +1,18 @@
+.dialog {
+  width: 480px;
+  max-width: 95vw;
+}
+
+.codesGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  padding: 12px;
+  background: var(--surface-sunken);
+  border-radius: 8px;
+}
+
+.code {
+  font-family: monospace;
+  font-size: 0.9rem;
+}
diff --git a/src/components/modals/TwoFactorSuccessModal.tsx b/src/components/modals/TwoFactorSuccessModal.tsx
index 9ec1fa901..68649f19d 100644
--- a/src/components/modals/TwoFactorSuccessModal.tsx
+++ b/src/components/modals/TwoFactorSuccessModal.tsx
@@ -2,6 +2,7 @@
 import { Button, Column, Dialog, Modal, Row, Text } from '@umami/react-zen';
 import { useState } from 'react';
 import { useMessages } from '@/components/hooks';
+import styles from './TwoFactorSuccessModal.module.css';
 
 interface TwoFactorSuccessModalProps {
   backupCodes: string[];
@@ -30,7 +31,7 @@ export function TwoFactorSuccessModal({ backupCodes, onClose }: TwoFactorSuccess
 
   return (
     <Modal isOpen={true} onOpenChange={() => {}}>
-      <Dialog title={t(labels.twoFactorSuccessTitle)} style={{ width: 480, maxWidth: '95vw' }}>
+      <Dialog title={t(labels.twoFactorSuccessTitle)} className={styles.dialog}>
         {() => (
           <Column gap="5">
             <Text>{t(messages.twoFactorEnabledDescription)}</Text>
@@ -39,18 +40,9 @@ export function TwoFactorSuccessModal({ backupCodes, onClose }: TwoFactorSuccess
               <Text weight="bold">{t(labels.twoFactorSaveBackupCodes)}</Text>
               <Text>{t(messages.twoFactorBackupDescription)}</Text>
 
-              <div
-                style={{
-                  display: 'grid',
-                  gridTemplateColumns: '1fr 1fr',
-                  gap: '8px',
-                  padding: '12px',
-                  background: 'var(--surface-sunken)',
-                  borderRadius: 8,
-                }}
-              >
+              <div className={styles.codesGrid}>
                 {backupCodes.map((code, i) => (
-                  <code key={i} style={{ fontFamily: 'monospace', fontSize: '0.9rem' }}>
+                  <code key={i} className={styles.code}>
                     {code}
                   </code>
                 ))}