Fix installer and user-action button style

apps/app/src/components/CompleteUserRegistrationForm.tsx

@@ -175,9 +175,15 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
               </div>
 
               <div className="input-group justify-content-center mt-4">
-                <button type="button" disabled={forceDisableForm || disableForm} className="btn btn-fill register-btn col-6 login mx-auto">
-                  <span className="btn-label pe-0"><span className="material-symbols-outlined">person_add</span></span>
-                  <span className="btn-label-text">{t('Create')}</span>
+                <button
+                  type="button"
+                  disabled={forceDisableForm || disableForm}
+                  className="btn btn-secoundary register-btn col-6 mx-auto d-flex justify-content-between"
+                >
+                  <span>
+                    <span className="material-symbols-outlined">person_add</span>
+                  </span>
+                  <span className="flex-grow-1">{t('Create')}</span>
                 </button>
               </div>
 

apps/app/src/components/InstallerForm.tsx

@@ -205,21 +205,21 @@ const InstallerForm = memo((): JSX.Element => {
             />
           </div>
 
-          <div className="input-group mt-4 d-flex justify-content-center">
+          <div className="input-group mt-4 justify-content-center">
             <button
               data-testid="btnSubmit"
               type="submit"
-              className="btn-fill btn register-btn"
+              className="btn btn-secondary register-btn col-6 d-flex justify-content-between"
               disabled={isLoading}
             >
-              <span className="btn-label pe-0">
+              <span>
                 {isLoading ? (
                   <LoadingSpinner />
                 ) : (
                   <span className="material-symbols-outlined">person_add</span>
                 )}
               </span>
-              <span className="btn-label-text">{ t('Create') }</span>
+              <span className="flex-grow-1">{ t('Create') }</span>
             </button>
           </div>
 

apps/app/src/components/Layout/NoLoginLayout.module.scss

@@ -58,6 +58,17 @@
   .nologin-dialog {
     max-width: 480px;
   }
+
+  .btn.btn-secondary {
+    transition: 0.8s ease;
+    --bs-btn-border-color: #{rgba(white, 0.1)};
+  }
+
+  .btn.register-btn {
+    --bs-btn-bg: #{rgba(bs.$success, 0.4)};
+    --bs-btn-hover-bg: #{rgba(bs.$success, 0.8)};
+    --bs-btn-active-bg: #{rgba(bs.$success, 0.8)};
+  }
 }
 
 .link-switch {

apps/app/src/components/LoginForm.module.scss

@@ -52,17 +52,6 @@
 // Buttons
 .login-form :global {
 
-  .btn.btn-secondary {
-    transition: 0.8s ease;
-    --bs-btn-border-color: #{rgba(white, 0.1)};
-  }
-
-  .btn.register-btn {
-    --bs-btn-bg: #{rgba(bs.$success, 0.4)};
-    --bs-btn-hover-bg: #{rgba(bs.$success, 0.8)};
-    --bs-btn-active-bg: #{rgba(bs.$success, 0.8)};
-  }
-
   .btn.login-btn {
     --bs-btn-bg: #{rgba(#204986, 0.6)};
     --bs-btn-hover-bg: #{rgba(#204986, 0.8)};

apps/app/src/components/LoginForm.tsx

@@ -316,7 +316,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
         </div>
       </>
     );
-  }, [props, renderExternalAuthInput]);
+  }, [props, t, renderExternalAuthInput]);
 
   const resetRegisterErrors = useCallback(() => {
     if (registerErrors.length === 0) return;
@@ -507,7 +507,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           <div className="input-group justify-content-center my-4">
             <button
               type="submit"
-              className="btn btn-secondary d-flex register-btn col-7"
+              className="btn btn-secondary register-btn d-flex col-7"
               disabled={(!isMailerSetup && isEmailAuthenticationEnabled) || isLoading}
             >
               <span>