add %btn-nologin placeholder

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

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

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

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

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

@@ -59,11 +59,6 @@
     max-width: 480px;
   }
 
-  .btn.btn-secondary {
-    transition: 0.8s ease;
-    --bs-btn-border-color: #{rgba(white, 0.1)};
-  }
-
 }
 
 .link-switch {

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

@@ -51,52 +51,58 @@
 }
 
 
-// Buttons
-.login-form :global {
+// Button colors
+:root {
+  .login-form :global {
 
-  .btn.register-btn {
-    @extend %btn-register;
-  }
+    .btn {
+      @extend %btn-nologin;
+    }
 
-  .btn.login-btn {
-    --bs-btn-bg: #{rgba(#204986, 0.6)};
-    --bs-btn-hover-bg: #{rgba(#204986, 0.8)};
-    --bs-btn-active-bg: #{rgba(#204986, 0.8)};
-  }
+    .register-btn {
+      @extend %btn-register;
+    }
 
-  .btn.function-btn {
-    --bs-btn-bg: #{rgba(bs.$gray-800, 0.8)};
-    --bs-btn-hover-bg: #{rgba(bs.$gray-800, 0.5)};
-    --bs-btn-active-bg: #{rgba(bs.$gray-800, 0.5)};
-  }
+    .login-btn {
+      --bs-btn-bg: #{rgba(#204986, 0.6)};
+      --bs-btn-hover-bg: #{rgba(#204986, 0.8)};
+      --bs-btn-active-bg: #{rgba(#204986, 0.8)};
+    }
 
-  .btn.google-btn {
-    --bs-btn-bg: #{rgba(#4285F4, 0.4)};
-    --bs-btn-hover-bg: #{rgba(#4285F4, 0.8)};
-    --bs-btn-active-bg: #{rgba(#4285F4, 0.8)};
-  }
+    .function-btn {
+      --bs-btn-bg: #{rgba(bs.$gray-800, 0.8)};
+      --bs-btn-hover-bg: #{rgba(bs.$gray-800, 0.5)};
+      --bs-btn-active-bg: #{rgba(bs.$gray-800, 0.5)};
+    }
 
-  .btn.github-btn {
-    --bs-btn-bg: #{rgba(#403D3E, 0.4)};
-    --bs-btn-hover-bg: #{rgba(#403D3E, 0.7)};
-    --bs-btn-active-bg: #{rgba(#403D3E, 0.7)};
-  }
+    .google-btn {
+      --bs-btn-bg: #{rgba(#4285F4, 0.4)};
+      --bs-btn-hover-bg: #{rgba(#4285F4, 0.8)};
+      --bs-btn-active-bg: #{rgba(#4285F4, 0.8)};
+    }
 
-  .btn.facebook-btn {
-    --bs-btn-bg: #{rgba(#29487d, 0.4)};
-    --bs-btn-hover-bg: #{rgba(#29487d, 0.9)};
-    --bs-btn-active-bg: #{rgba(#29487d, 0.9)};
-  }
+    .github-btn {
+      --bs-btn-bg: #{rgba(#403D3E, 0.4)};
+      --bs-btn-hover-bg: #{rgba(#403D3E, 0.7)};
+      --bs-btn-active-bg: #{rgba(#403D3E, 0.7)};
+    }
 
-  .btn.oidc-btn {
-    --bs-btn-bg: #{rgba(#835B1A, 0.4)};
-    --bs-btn-hover-bg: #{rgba(#835B1A, 0.8)};
-    --bs-btn-active-bg: #{rgba(#835B1A, 0.8)};
-  }
+    .facebook-btn {
+      --bs-btn-bg: #{rgba(#29487d, 0.4)};
+      --bs-btn-hover-bg: #{rgba(#29487d, 0.9)};
+      --bs-btn-active-bg: #{rgba(#29487d, 0.9)};
+    }
+
+    .oidc-btn {
+      --bs-btn-bg: #{rgba(#835B1A, 0.4)};
+      --bs-btn-hover-bg: #{rgba(#835B1A, 0.8)};
+      --bs-btn-active-bg: #{rgba(#835B1A, 0.8)};
+    }
 
-  .btn.saml-btn {
-    --bs-btn-bg: #{rgba(#138957, 0.4)};
-    --bs-btn-hover-bg: #{rgba(#138957, 0.7)};
-    --bs-btn-active-bg: #{rgba(#138957, 0.7)};
+    .saml-btn {
+      --bs-btn-bg: #{rgba(#138957, 0.4)};
+      --bs-btn-hover-bg: #{rgba(#138957, 0.7)};
+      --bs-btn-active-bg: #{rgba(#138957, 0.7)};
+    }
   }
 }

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

@@ -11,6 +11,13 @@ fieldset[disabled] .btn {
   }
 }
 
+%btn-nologin {
+  transition: 0.8s ease;
+  --bs-btn-border-color: #{rgba(white, 0.1)};
+  --bs-btn-hover-border-color: #{rgba(white, 0.1)};
+  --bs-btn-active-border-color: #{rgba(white, 0.1)};
+}
+
 %btn-register {
   --bs-btn-bg: #{rgba(bs.$success, 0.4)};
   --bs-btn-hover-bg: #{rgba(bs.$success, 0.8)};