style/refactor: promote centered form as global style

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;
+}

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;
-    }
-}
-
+}

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")}>