Merge pull request #2 from p-num/fix/rebranding

Fix/rebranding
2026-04-06 19:14:06 +03:30
parent b15626a4ce 2a363aefdd
commit fee3f90124
41 changed files with 1076 additions and 346 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>matrix-authentication-service</title>
+    <title>letro-authentication-service</title>
    <script type="application/javascript">
      window.APP_CONFIG = JSON.parse(
        '{"root": "/account/", "graphqlEndpoint": "/graphql"}',
--- a/frontend/locales/da.json
+++ b/frontend/locales/da.json
@@ -391,7 +391,7 @@
    "scope": {
      "edit_profile": "Rediger din profil og dine kontaktoplysninger",
      "manage_sessions": "Administrer dine enheder og sessioner",
-      "mas_admin": "Administrer enhver bruger på matrix-authentication-service",
+      "mas_admin": "Administrer enhver bruger på letro-authentication-service",
      "send_messages": "Send nye beskeder på dine vegne",
      "synapse_admin": "Administrer Synapse hjemmeserveren",
      "view_messages": "Se dine eksisterende beskeder og data",
--- a/frontend/locales/pt.json
+++ b/frontend/locales/pt.json
@@ -391,7 +391,7 @@
    "scope": {
      "edit_profile": "Editar o seu perfil e detalhes de contacto",
      "manage_sessions": "Gerir os seus dispositivos e sessões",
-      "mas_admin": "Administrar qualquer usuário no matrix-authentication-service",
+      "mas_admin": "Administrar qualquer usuário no letro-authentication-service",
      "send_messages": "Envie novas mensagens em seu nome",
      "synapse_admin": "Administrar o servidor Synapse",
      "view_messages": "Ver as mensagens e os dados existentes",
--- a/frontend/locales/sv.json
+++ b/frontend/locales/sv.json
@@ -391,7 +391,7 @@
    "scope": {
      "edit_profile": "Ändra din profil och kontaktuppgifter",
      "manage_sessions": "Hantera dina enheter och sessioner",
-      "mas_admin": "Administrera valfri användare på matrix-authentication-service",
+      "mas_admin": "Administrera valfri användare på letro-authentication-service",
      "send_messages": "Skicka nya meddelanden för din räkning",
      "synapse_admin": "Administrera Synapse-hemservern",
      "view_messages": "Visa dina befintliga meddelanden och data",
--- a/frontend/locales/zh-Hans.json
+++ b/frontend/locales/zh-Hans.json
@@ -388,7 +388,7 @@
    "scope": {
      "edit_profile": "编辑个人资料和联系方式",
      "manage_sessions": "管理设备和会话",
-      "mas_admin": "管理 matrix-authentication-service 上的用户",
+      "mas_admin": "管理 letro-authentication-service 上的用户",
      "send_messages": "以你的名义发送新消息",
      "synapse_admin": "管理 Synapse 服务器",
      "view_messages": "查看现有信息和数据",
--- a/frontend/src/components/PageHeading/PageHeading.module.css
+++ b/frontend/src/components/PageHeading/PageHeading.module.css
@@ -48,6 +48,19 @@
    }
  }

+  & .brand-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    margin-block-end: var(--cpd-space-1x);
+
+    & svg {
+      display: block;
+      block-size: auto;
+    }
+  }
+
  & .header {
    display: flex;
    flex-direction: column;
@@ -78,5 +91,9 @@
@media screen and (min-width: 768px) {
  .page-heading {
    margin-block-start: var(--cpd-space-8x);
+
+    & .brand-logo {
+      margin-block-end: var(--cpd-space-2x);
+    }
  }
 }
--- a/frontend/src/entrypoints/templates.css
+++ b/frontend/src/entrypoints/templates.css
@@ -17,6 +17,7 @@
@import "../components/Layout/Layout.module.css";
@import "../components/Footer/Footer.module.css";
@import "../components/PageHeading/PageHeading.module.css";
+@import "../styles/brand-theme.css";

 .cpd-text-body-lg-regular {
  font: var(--cpd-font-body-lg-regular);
--- a/frontend/src/entrypoints/templates.ts
+++ b/frontend/src/entrypoints/templates.ts
@@ -96,3 +96,26 @@ for (const element of document.querySelectorAll<HTMLInputElement>(
 )) {
  patchUsernameInput(element);
 }
+
+function patchDisableSubmitUntilValid(formElement: HTMLFormElement) {
+  const submitButton = formElement.querySelector<HTMLButtonElement>(
+    '.cpd-button[data-kind="primary"][type="submit"]',
+  );
+
+  if (!submitButton) return;
+
+  const syncDisabledState = () => {
+    submitButton.disabled = !formElement.checkValidity();
+  };
+
+  syncDisabledState();
+
+  formElement.addEventListener("input", syncDisabledState);
+  formElement.addEventListener("change", syncDisabledState);
+}
+
+for (const formElement of document.querySelectorAll<HTMLFormElement>(
+  "form[data-disable-submit-until-valid]",
+)) {
+  patchDisableSubmitUntilValid(formElement);
+}
--- a/frontend/src/styles/brand-theme.css
+++ b/frontend/src/styles/brand-theme.css
@@ -0,0 +1,107 @@
+/* Copyright 2026 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+:root {
+  --brand-color-accent: #d51c0b;
+  --brand-input-background: #f4f4f4;
+  --brand-input-background-autofill: #eef3fa;
+  --brand-link-muted: #696b7799;
+  --brand-link-muted-hover: #55565e;
+  --brand-link-muted-active: #292a2d;
+  --brand-primary-gradient: linear-gradient(
+    45deg,
+    #c20000 6.43%,
+    #c30300 19.99%,
+    #c60e00 32.57%,
+    #cb2000 45.16%,
+    #d33900 56.78%,
+    #dd5a00 67.43%,
+    #e98200 79.04%,
+    #f7b000 89.69%,
+    #ffc800 94.53%
+  );
+}
+
+.cpd-text-control {
+  background: var(--brand-input-background);
+  border-color: transparent;
+}
+
+.cpd-text-control:-webkit-autofill,
+.cpd-text-control:-webkit-autofill:hover,
+.cpd-text-control:-webkit-autofill:focus,
+.cpd-text-control:-webkit-autofill:active {
+  -webkit-text-fill-color: var(--cpd-color-text-primary);
+  -webkit-box-shadow: 0 0 0 1000px var(--brand-input-background-autofill) inset;
+  box-shadow: 0 0 0 1000px var(--brand-input-background-autofill) inset;
+  background-color: var(--brand-input-background-autofill);
+  border-color: transparent;
+  transition: background-color 99999s ease-out 0s;
+}
+
+.cpd-text-control:-webkit-autofill:not(:hover):not(:focus):not(:active) {
+  border-color: transparent;
+}
+
+@media (hover) {
+  .cpd-text-control:hover {
+    border-color: var(--brand-color-accent);
+  }
+}
+
+.cpd-text-control:active {
+  border-color: var(--brand-color-accent);
+}
+
+.cpd-text-control:focus,
+.cpd-text-control:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--brand-color-accent) 20%, white);
+  outline-offset: 0;
+  border-color: var(--brand-color-accent);
+}
+
+.cpd-button[data-kind="primary"]:not(.destructive) {
+  background: var(--brand-primary-gradient);
+  border-width: 0;
+}
+
+@media (hover) {
+  .cpd-button[data-kind="primary"]:not(.destructive):hover {
+    filter: brightness(1.03);
+  }
+}
+
+.cpd-button[data-kind="primary"]:not(.destructive):active,
+.cpd-button[data-kind="primary"]:not(.destructive)[aria-expanded="true"] {
+  filter: brightness(0.96);
+}
+
+.cpd-button[data-kind="primary"]:not(.destructive)[disabled] {
+  filter: none;
+}
+
+.login-page .cpd-link[data-kind="primary"] {
+  color: var(--brand-link-muted);
+}
+
+@media (hover) {
+  .login-page .cpd-link[data-kind="primary"]:hover {
+    color: var(--brand-link-muted-hover);
+    background: transparent;
+  }
+}
+
+.login-page .cpd-link[data-kind="primary"]:active {
+  color: var(--brand-link-muted-active);
+  background: transparent;
+}
+
+[data-disable-submit-until-valid]
+  .cpd-button[type="submit"][data-kind="primary"][disabled] {
+  cursor: not-allowed;
+  filter: grayscale(0.2);
+  opacity: 0.55;
+}