add %btn-register placeholder

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

@@ -0,0 +1,7 @@
+@use '~/styles/atoms/buttons';
+
+.complete-user-registration-form :global {
+  .btn.register-btn {
+    @extend %btn-register;
+  }
+}

apps/app/src/components/CompleteUserRegistrationForm.tsx

@@ -11,6 +11,12 @@ import { toastError } from '../client/util/toastr';
 
 import { CompleteUserRegistration } from './CompleteUserRegistration';
 
+
+import styles from './CompleteUserRegistrationForm.module.scss';
+
+const moduleClass = styles['complete-user-registration-form'] ?? '';
+
+
 interface Props {
   email: string,
   token: string,
@@ -85,7 +91,7 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <div className="nologin-dialog mx-auto rounded-4 rounded-top-0" id="nologin-dialog">
+      <div className={`${moduleClass} nologin-dialog mx-auto rounded-4 rounded-top-0`} id="nologin-dialog">
         <div className="row mx-0">
           <div className="col-12 px-4">
 
@@ -178,7 +184,7 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
                 <button
                   type="button"
                   disabled={forceDisableForm || disableForm}
-                  className="btn btn-secoundary register-btn col-6 mx-auto d-flex justify-content-between"
+                  className="btn btn-secondary register-btn col-6 mx-auto d-flex justify-content-between"
                 >
                   <span>
                     <span className="material-symbols-outlined">person_add</span>

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

@@ -0,0 +1,7 @@
+@use '~/styles/atoms/buttons';
+
+.installer-form :global {
+  .btn.register-btn {
+    @extend %btn-register;
+  }
+}

apps/app/src/components/InstallerForm.tsx

@@ -12,6 +12,11 @@ import { apiv3Post } from '~/client/util/apiv3-client';
 import { toastError } from '~/client/util/toastr';
 
 
+import styles from './InstallerForm.module.scss';
+
+const moduleClass = styles['installer-form'] ?? '';
+
+
 const InstallerForm = memo((): JSX.Element => {
   const { t, i18n } = useTranslation();
 
@@ -88,7 +93,7 @@ const InstallerForm = memo((): JSX.Element => {
     : <span><span className="material-symbols-outlined">block</span>{ t('installer.unavaliable_user_id') }</span>;
 
   return (
-    <div data-testid="installerForm" className={`nologin-dialog py-3 px-4 rounded-4 rounded-top-0 mx-auto${hasErrorClass}`}>
+    <div data-testid="installerForm" className={`${moduleClass} nologin-dialog py-3 px-4 rounded-4 rounded-top-0 mx-auto${hasErrorClass}`}>
       <div className="row mt-3">
         <div className="col-md-12">
           <p className="alert alert-success">

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

@@ -64,11 +64,6 @@
     --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

@@ -1,5 +1,7 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+@use '~/styles/atoms/buttons';
+
 .login-form :global {
   // To adjust the behavior, this problem is not solved.
   // See https://github.com/AaronCCWong/react-card-flip/issues/56
@@ -52,6 +54,10 @@
 // Buttons
 .login-form :global {
 
+  .btn.register-btn {
+    @extend %btn-register;
+  }
+
   .btn.login-btn {
     --bs-btn-bg: #{rgba(#204986, 0.6)};
     --bs-btn-hover-bg: #{rgba(#204986, 0.8)};

apps/app/src/styles/atoms/_buttons.scss

@@ -10,3 +10,9 @@ fieldset[disabled] .btn {
     pointer-events: none;
   }
 }
+
+%btn-register {
+  --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)};
+}