From 0d48c9681d14e4dc92ee13c89e51bdf9d0c6d8a4 Mon Sep 17 00:00:00 2001 From: Ginger Date: Thu, 10 Sep 2026 09:46:00 -0400 Subject: [PATCH] feat: Give scope lists and device cards a fresh coat of paint --- src/web/pages/components/mod.rs | 2 - src/web/pages/resources/common.css | 84 ++++++++++++++++--- src/web/pages/resources/components.css | 3 +- src/web/pages/resources/grant.css | 6 ++ .../_components/client_scopes.html.j2 | 14 +++- .../templates/_components/device_card.html.j2 | 14 +--- src/web/pages/templates/_icons.html.j2 | 25 ++++++ src/web/pages/templates/account.html.j2 | 5 +- src/web/pages/templates/device_info.html.j2 | 45 +++++----- src/web/pages/templates/grant.html.j2 | 3 +- 10 files changed, 147 insertions(+), 54 deletions(-) create mode 100644 src/web/pages/templates/_icons.html.j2 diff --git a/src/web/pages/components/mod.rs b/src/web/pages/components/mod.rs index d66ad2dcb..5cfd9af22 100644 --- a/src/web/pages/components/mod.rs +++ b/src/web/pages/components/mod.rs @@ -122,7 +122,6 @@ pub(super) struct DeviceCard { pub display_name: Option, pub avatar: Avatar, pub last_active: String, - pub oauth_metadata: Option, pub style: DeviceCardStyle, pub dehydrated: bool, } @@ -192,7 +191,6 @@ impl DeviceCard { display_name, avatar, last_active, - oauth_metadata, style, dehydrated, } diff --git a/src/web/pages/resources/common.css b/src/web/pages/resources/common.css index 169343019..0ead096d1 100644 --- a/src/web/pages/resources/common.css +++ b/src/web/pages/resources/common.css @@ -16,6 +16,8 @@ --card-bg: oklch(from var(--panel-bg) calc(l - 0.05) c h); --c1: oklch(0.44 0.177 353.06); --c2: oklch(0.59 0.158 150.88); + --danger-color: oklch(87.303% 0.06774 18.457); + --danger-color-dark: oklch(0.2 0.197 20.272); --avatar-color: var(--c2); --name-lightness: 0.45; @@ -41,6 +43,7 @@ --secondary: var(--secondary-dark); --bg: var(--bg-dark); --panel-bg: var(--panel-bg-dark); + --danger-color: var(--danger-color-dark); --name-lightness: 0.8; --background-lightness: 0.2; @@ -143,7 +146,6 @@ small.error { margin-bottom: 0.5rem; } - img.matrix-icon { @media (prefers-color-scheme: dark) { filter: invert(); @@ -173,7 +175,8 @@ label { margin-bottom: 0.2em; } -a, a:visited { +a, +a:visited { color: oklch(from var(--c1) var(--name-lightness) c h); } @@ -182,13 +185,15 @@ code { } pre { - background-color: oklch(from var(--panel-bg) calc(l - 0.05) c h); + background-color: var(--card-bg); border-radius: var(--border-radius-sm); padding: 8px; overflow-x: scroll; } -input, button, a.button { +input, +button, +a.button { display: inline-block; padding: 0.5em; @@ -218,10 +223,11 @@ input[type="checkbox"] { width: auto !important; } -button, a.button { +button, +a.button { color: white; background-color: var(--c1); - transition: opacity .2s; + transition: opacity 0.2s; text-align: center; margin: 0.5rem 0; @@ -231,7 +237,9 @@ button, a.button { } &:not(:disabled) { - transition: linear color, background-color 0.1s; + transition: + linear color, + background-color 0.1s; &:hover { opacity: 0.8; @@ -265,6 +273,44 @@ ul.bullet-separated { } } +ul.list-group { + list-style: none; + display: flex; + flex-direction: column; + padding: 0; + + li { + display: block; + background-color: var(--card-bg); + padding: 10px; + margin-bottom: 3px; + color: var(--secondary); + + &:first-child { + border-top-left-radius: var(--border-radius-lg); + border-top-right-radius: var(--border-radius-lg); + } + + &:last-child { + border-bottom-left-radius: var(--border-radius-lg); + border-bottom-right-radius: var(--border-radius-lg); + margin-bottom: 0; + } + + &.danger { + color: var(--text-color); + background-color: var(--danger-color); + } + + svg { + vertical-align: center; + margin-inline-end: 0.5rem; + width: 20px; + height: 20px; + } + } +} + .fullwidth { width: 100%; margin-bottom: 0 !important; @@ -274,6 +320,10 @@ ul.bullet-separated { user-select: all; } +.small-text { + font-size: small; +} + .panel { --preferred-width: 12rem + 40dvw; --maximum-width: 48rem; @@ -297,7 +347,9 @@ ul.bullet-separated { --preferred-width: 12rem + 20dvw; --maximum-width: 36rem; - input, button, a.button { + input, + button, + a.button { width: 100%; } } @@ -340,7 +392,12 @@ ul.bullet-separated { } } -@media (max-width: 450px) { +.bi { + display: inline-block; + vertical-align: -.125em; +} + +@media (max-width: 425px) { main { padding-block-start: 2rem; width: 100%; @@ -362,7 +419,14 @@ ul.bullet-separated { } @media (max-width: 799px) { - input, button, a.button { + input, + button, + a.button { width: 100%; } } + +@font-face { + font-family: "Boots"; + src: url(); +} diff --git a/src/web/pages/resources/components.css b/src/web/pages/resources/components.css index 12cd5ac64..4993d1140 100644 --- a/src/web/pages/resources/components.css +++ b/src/web/pages/resources/components.css @@ -48,7 +48,8 @@ &.danger { display: block; - background-color: oklch(from red 0.2 c h); + color: var(--text-color); + background-color: var(--danger-color); border: 1px dashed red; } diff --git a/src/web/pages/resources/grant.css b/src/web/pages/resources/grant.css index 8b95f1896..fca28078d 100644 --- a/src/web/pages/resources/grant.css +++ b/src/web/pages/resources/grant.css @@ -9,6 +9,12 @@ color: var(--secondary); font-size: x-large; user-select: none; + + svg { + vertical-align: center; + width: 24px; + height: 24px; + } } } diff --git a/src/web/pages/templates/_components/client_scopes.html.j2 b/src/web/pages/templates/_components/client_scopes.html.j2 index 6a4f8097c..7be5f2726 100644 --- a/src/web/pages/templates/_components/client_scopes.html.j2 +++ b/src/web/pages/templates/_components/client_scopes.html.j2 @@ -1,10 +1,18 @@ -
    +{% import "../_icons.html.j2" as icons %} + +
      {% for scope in scopes %} {% match scope %} {% when OAuthClientScope::ApiFullAccess %} -
    • Access and control all features of your Matrix account
      • +
    • + {{ icons::person_circle() }} + Access and control all features of your Matrix account +
      • {% when OAuthClientScope::ServerAdministration %} -
    • ⚠️ Access your homeserver's administrator tools
      • +
    • + {{ icons::house_gear() }} + Access your homeserver's administrator tools +
      • {% when _ %}
    • missingno
      • {% endmatch %} diff --git a/src/web/pages/templates/_components/device_card.html.j2 b/src/web/pages/templates/_components/device_card.html.j2 index 93040a6b5..b145f6635 100644 --- a/src/web/pages/templates/_components/device_card.html.j2 +++ b/src/web/pages/templates/_components/device_card.html.j2 @@ -14,22 +14,12 @@ {% if style == DeviceCardStyle::Detailed %} - • -
        -
      • {{ device_id }}
        • -
      • - {% if let Some(metadata) = oauth_metadata %} - Client website - {% else %} - legacy - {% endif %} -
        • - + #{{ device_id }} {% endif %}
        - Last active: {{ last_active }} + Last active {{ last_active }}
        {% if style != DeviceCardStyle::Detailed %} diff --git a/src/web/pages/templates/_icons.html.j2 b/src/web/pages/templates/_icons.html.j2 new file mode 100644 index 000000000..1fa139cc2 --- /dev/null +++ b/src/web/pages/templates/_icons.html.j2 @@ -0,0 +1,25 @@ +{% macro person_circle() %} + + + + +{% endmacro %} + +{% macro house_gear() %} + + + + +{% endmacro %} + +{% macro person_lock() %} + + + +{% endmacro %} + +{% macro arrow_left_right() %} + + + +{% endmacro %} diff --git a/src/web/pages/templates/account.html.j2 b/src/web/pages/templates/account.html.j2 index 7e63cf949..5efd122da 100644 --- a/src/web/pages/templates/account.html.j2 +++ b/src/web/pages/templates/account.html.j2 @@ -1,4 +1,5 @@ {% extends "_layout.html.j2" %} +{% import "_icons.html.j2" as icons %} {%- block title -%} Your account @@ -12,7 +13,7 @@ Your account {% when AccountBody::Unlocked { suspended, email_requirement, email, devices, oidc_enabled, dehydrated_device_id } %} {% if suspended %}

        - ⚠️ Your account has been suspended by your homeserver's administrator. + {{ icons::person_lock() }} Your account has been suspended by your homeserver's administrator. Some functionality may be restricted.

        {% endif %} @@ -73,7 +74,7 @@ Your account {% when AccountBody::Locked %}

        - ⚠️ Your account has been locked by your homeserver's administrator. + {{ icons::person_lock() }} Your account has been locked by your homeserver's administrator.

        Log out diff --git a/src/web/pages/templates/device_info.html.j2 b/src/web/pages/templates/device_info.html.j2 index a8b242600..46d8e197f 100644 --- a/src/web/pages/templates/device_info.html.j2 +++ b/src/web/pages/templates/device_info.html.j2 @@ -9,36 +9,35 @@ Device information

        About device Back

        {{ device_card }} {% if let Some((client_metadata, _)) = client_metadata %} - {% if client_metadata.tos_uri.is_some() || client_metadata.policy_uri.is_some() %} -
        -
          - {% if let Some(tos_uri) = &client_metadata.tos_uri %} -
        • Terms of service
          • - {% endif %} - {% if let Some(policy_uri) = &client_metadata.policy_uri %} -
        • Policies
          • - {% endif %} -
        -
        - {% endif %} +
        +
          +
        • Client website
          • + {% if let Some(tos_uri) = &client_metadata.tos_uri %} +
        • Terms of service
          • + {% endif %} + {% if let Some(policy_uri) = &client_metadata.policy_uri %} +
        • Policies
          • + {% endif %} +
        +
        {% endif %}
        -

        - {% if let Some((_, session_info)) = client_metadata %} - This device has permission to: - {{ ClientScopes { scopes: session_info.scopes() } }} - {% else if device_card.dehydrated %} - This is your dehydrated device. It saves encryption keys for you while you're offline. - {% else %} + {% if let Some((_, session_info)) = client_metadata %} +

        This device has permission to:

        + {{ ClientScopes { scopes: session_info.scopes() } }} + {% else if device_card.dehydrated %} +

        This is your dehydrated device. It saves encryption keys for you while you're offline.

        + {% else %} +

        This device can access and control all features of your Matrix account.
        ❖ This is a legacy device. Legacy devices always have full access to your account. - {% endif %} -

        +

        + {% endif %} + Remove this device
        - Remove this device {% if let Some((client_metadata, session_info)) = client_metadata %} -
        +
        Client registration

        OAuth client ID: {{ session_info.client_id }} diff --git a/src/web/pages/templates/grant.html.j2 b/src/web/pages/templates/grant.html.j2 index 23f59ef5e..d8904d98b 100644 --- a/src/web/pages/templates/grant.html.j2 +++ b/src/web/pages/templates/grant.html.j2 @@ -1,4 +1,5 @@ {% extends "_layout.html.j2" %} +{% import "_icons.html.j2" as icons %} {%- block head -%} @@ -17,7 +18,7 @@ Authorize client {{ user_avatar }}

        {{ Avatar::for_client(client_metadata) }}