From 29016d1cf5c3015c59bfbb10341d20efa6045deb Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 10 Feb 2026 01:26:07 +0200
Subject: [PATCH] style/refactor: promote centered form as global style

---
 .../src/stylesheets/theme-next/forms.css      | 32 +++++++++++++++++++
 .../widgets/type_widgets/ProtectedSession.css | 31 +-----------------
 .../widgets/type_widgets/ProtectedSession.tsx |  2 +-
 3 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css
index 2e92f2e59c..bccf7ab6d4 100644
--- a/apps/client/src/stylesheets/theme-next/forms.css
+++ b/apps/client/src/stylesheets/theme-next/forms.css
@@ -810,3 +810,35 @@ input[type="range"] {
         scrollbar-width: unset;
     }
 }
+
+/*
+ * Centered forms
+ */
+
+.tn-centered-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 20vh;
+}
+
+.tn-centered-form .form-group {
+    text-align: center;
+    color: var(--muted-text-color);
+}
+
+.tn-centered-form .form-icon {
+    font-size: 140px;
+    color: var(--main-border-color);
+}
+
+.tn-centered-form .protected-session-password {
+    margin-inline: auto;
+    max-width: 350px;
+    text-align: center;
+}
+
+.tn-centered-form input,
+.tn-centered-form button {
+    margin-top: 12px;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/ProtectedSession.css b/apps/client/src/widgets/type_widgets/ProtectedSession.css
index ec4012dc00..6bfcb87737 100644
--- a/apps/client/src/widgets/type_widgets/ProtectedSession.css
+++ b/apps/client/src/widgets/type_widgets/ProtectedSession.css
@@ -3,33 +3,4 @@
     margin-inline: 40px;
     flex-direction: column;
     justify-content: center;
-
-    .protected-session-password-form {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-bottom: 20vh;
-    }
-
-    .form-group {
-        text-align: center;
-        color: var(--muted-text-color);
-    }
-
-    .form-icon {
-        font-size: 140px;
-        color: var(--main-border-color);
-    }
-
-    .protected-session-password {
-        margin-inline: auto;
-        max-width: 350px;
-        text-align: center;
-    }
-
-    input,
-    button {
-        margin-top: 12px;
-    }
-}
-
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/ProtectedSession.tsx b/apps/client/src/widgets/type_widgets/ProtectedSession.tsx
index f852396d2a..5f7b763501 100644
--- a/apps/client/src/widgets/type_widgets/ProtectedSession.tsx
+++ b/apps/client/src/widgets/type_widgets/ProtectedSession.tsx
@@ -20,7 +20,7 @@ export default function ProtectedSession() {
     }, [ passwordRef ]);
 
     return (
-        <form class="protected-session-password-form" onSubmit={submitCallback}>
+        <form class="protected-session-password-form tn-centered-form" onSubmit={submitCallback}>
             <span class="form-icon bx bx-key" />
             
             <FormGroup name="protected-session-password-in-detail" label={t("protected_session.enter_password_instruction")}>