feat: centralize frontend branding

frontend/src/features/auth/views/LoginView.vue

@@ -5,8 +5,7 @@
                 class="login-brand"
                 to="/"
             >
-                <span class="login-brand-mark">S</span>
-                <span class="login-brand-text">Socialize</span>
+                <BrandLogo class="login-brand-logo" />
             </router-link>
 
             <section class="login-card">
@@ -131,6 +130,7 @@
     import { useI18n } from 'vue-i18n';
     import { useRouter } from 'vue-router';
     import { mdiEye, mdiEyeOff, mdiFacebook, mdiGoogle } from '@mdi/js';
+    import BrandLogo from '@/components/branding/BrandLogo.vue';
 
     const { t } = useI18n();
     const router = useRouter();
@@ -212,18 +212,11 @@
     }
 
     .login-brand {
-        @apply mx-auto flex items-center gap-3 px-4 pt-6 no-underline sm:px-0 sm:pt-0;
-        color: #172033;
+        @apply mx-auto flex items-center px-4 pt-6 no-underline sm:px-0 sm:pt-0;
     }
 
-    .login-brand-mark {
-        @apply flex h-11 w-11 items-center justify-center rounded-2xl text-lg font-black;
-        background: var(--socialize-brand-gradient);
-        color: #fffaf2;
-    }
-
-    .login-brand-text {
-        @apply text-lg font-black uppercase tracking-[0.18em];
+    .login-brand-logo {
+        @apply h-12 max-w-[180px];
     }
 
     .login-card {

frontend/src/features/auth/views/RegisterView.vue

@@ -7,7 +7,8 @@
         >
             <img
                 :alt="t('alt')"
-                src="/images/hutopymedia/loginpage/hutopylogin.svg"
+                :src="branding.assets.authIllustration"
+                class="auth-illustration"
             />
             <div class="flex flex-col gap-10 text-center">
                 <h1 class="login-text text-2xl font-bold text-green-600">
@@ -41,7 +42,8 @@
         >
             <img
                 :alt="t('alt')"
-                src="/images/hutopymedia/loginpage/hutopylogin.svg"
+                :src="branding.assets.authIllustration"
+                class="auth-illustration"
             />
             <div class="flex flex-col gap-10">
                 <h1 class="login-text text-center text-2xl font-bold">
@@ -134,6 +136,7 @@
     import { useClient } from '@/plugins/api.js';
     import { useI18n } from 'vue-i18n';
     import { mdiEye, mdiEyeOff } from '@mdi/js';
+    import { branding } from '@/branding/branding.js';
 
     const { t } = useI18n();
     const clientApi = useClient();
@@ -185,6 +188,10 @@
         @apply z-10;
     }
 
+    .auth-illustration {
+        @apply h-auto w-full max-w-xs;
+    }
+
     /* Override Vuetify's default padding to accommodate our icon */
     :deep(.v-field__append-inner) {
         padding-inline-start: 0;
@@ -195,7 +202,7 @@
 {
     "en": {
         "title": "Create your account",
-        "alt": "Hutopy Registration",
+        "alt": "Socialize registration",
         "name": "Full Name",
         "email": "Email",
         "password": "Password",
@@ -215,7 +222,7 @@
     },
     "fr": {
         "title": "Créer votre compte",
-        "alt": "Inscription Hutopy",
+        "alt": "Inscription Socialize",
         "name": "Nom complet",
         "email": "Email",
         "password": "Mot de passe",