fix(auth): Use WordmarkLogo react component in auth layout to include lightbg asset

* styles: fix align and height

Signed-off-by: lindwurm <lindwurm.q@gmail.com>

Author: lindwurm

app/javascript/entrypoints/public.tsx

@@ -20,6 +20,7 @@ import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions';
 import { loadLocale, getLocale } from '../mastodon/locales';
 import { loadPolyfills } from '../mastodon/polyfills';
 import ready from '../mastodon/ready';
+import { WordmarkLogo } from '@/mastodon/components/logo';
 
 import 'cocoon-js-vanilla';
 
@@ -183,6 +184,12 @@ function loaded() {
       });
   }
 
+  const authLogoHost = document.querySelector<HTMLElement>('.logo-react-root');
+  if (authLogoHost) {
+    const root = createRoot(authLogoHost);
+    root.render(<WordmarkLogo />);
+  }
+
   on(
     'input',
     'input#user_account_attributes_username',

app/javascript/styles/mods/custom.scss

@@ -38,3 +38,12 @@
 .compose-form__submit > button {
   padding: 7px 50%;
 }
+
+.logo-react-root {
+  text-align: center;
+
+  img {
+    height: 48px;
+    width: auto;
+  }
+}

app/views/layouts/auth.html.haml

@@ -4,11 +4,7 @@
 - content_for :content do
   .container-alt
     .logo-container
-      - if within_authorization_flow?
-        = logo_as_symbol(:wordmark)
-      - else
-        = link_to root_path do
-          = logo_as_symbol(:wordmark)
+      .logo-react-root
 
     .form-container
       = render 'flashes'