Keep the sign-in background photo

login-bg.jpg is the SkyWalking website's home background, licensed for the
project, so the sign-in and Connect an agent pages keep it. This restores
both pages, the Horizon theme tagline, the admin-pages doc line and the
1.1.0 changelog to what main has.

Author: wu-sheng

apps/ui/src/assets/login-bg.jpg

@@ -20,11 +20,12 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 // Full "SkyWalking" wordmark + moon, white-fill. The login page's
-// backdrop is always dark, so the logo stays white
+// backdrop is always the dark canyon photo, so the logo stays white
 // regardless of which theme the operator has picked for the post-
 // login app. (The sidebar logo DOES swap to blue on light themes —
 // see AppSidebar.vue — because that surface follows the theme.)
 import logoSw from '@/assets/icons/logo-sw.svg?raw';
+import loginBgUrl from '@/assets/login-bg.jpg?url';
 import { useAuthStore } from '@/state/auth';
 import { bff, API_BASE, type SsoProvider } from '@/api/client';
 import type { AuthHealth } from '@/api/scopes/admin-auth';
@@ -244,7 +245,10 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-  <div class="stage">
+  <div class="stage" :style="{ backgroundImage: `url(${loginBgUrl})` }">
+    <!-- Desaturate + dim the photo so the UI floats above. -->
+    <div class="dim" />
+    <!-- Color wash tying the canyon orange to the brand palette. -->
     <div class="wash" />
     <!-- Subtle grid overlay. -->
     <div class="grid" />
@@ -452,21 +456,27 @@ async function submit(): Promise<void> {
   overflow: hidden;
   color: var(--sw-fg-0);
   font-family: var(--sw-sans);
-  /* Not --sw-bg-0: the backdrop stays dark on a light theme too, because
-     the white logo and the card are drawn for it. */
-  background-color: #0a0d12;
+  background-size: cover;
+  background-position: center;
+  background-color: var(--sw-bg-0);
   /* Flex column lays out top / main / footer in flow, so nothing
      overlaps on short viewports and the card stays centered while
      real estate is available. */
   display: flex;
   flex-direction: column;
 }
+.dim,
 .wash,
 .grid {
   position: absolute;
   inset: 0;
   pointer-events: none;
 }
+.dim {
+  background: rgba(10, 13, 18, 0.62);
+  backdrop-filter: saturate(0.55) blur(1px);
+  -webkit-backdrop-filter: saturate(0.55) blur(1px);
+}
 .wash {
   /* Viewport-relative sizes so the orange/purple washes scale on
      ultra-wide and ultra-tall screens (5K, portrait phones). Caps with

apps/ui/src/features/auth/LoginView.vue

@@ -33,6 +33,7 @@ import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import logoSw from '@/assets/icons/logo-sw.svg?raw';
+import loginBgUrl from '@/assets/login-bg.jpg?url';
 import { bff, type ConsentRequest } from '@/api/client';
 
 const { t } = useI18n({ useScope: 'global' });
@@ -101,7 +102,8 @@ async function decide(approve: boolean): Promise<void> {
 </script>
 
 <template>
-  <div class="stage">
+  <div class="stage" :style="{ backgroundImage: `url(${loginBgUrl})` }">
+    <div class="dim" />
     <div class="wash" />
 
     <header class="top">
@@ -197,14 +199,21 @@ async function decide(approve: boolean): Promise<void> {
 .stage {
   position: fixed;
   inset: 0;
-  /* Dark on every theme, like the sign-in page it continues. */
-  background-color: #0a0d12;
+  background-size: cover;
+  background-position: center;
   display: flex;
   flex-direction: column;
 }
+.dim,
 .wash {
   position: absolute;
   inset: 0;
+}
+.dim {
+  background: rgb(6 10 16 / 82%);
+  backdrop-filter: saturate(60%);
+}
+.wash {
   background: linear-gradient(160deg, rgb(255 138 60 / 10%), rgb(10 16 26 / 60%));
 }
 .top {

apps/ui/src/features/auth/OAuthConsentView.vue

@@ -75,7 +75,7 @@ export interface ThemeDef {
 export const AVAILABLE_THEMES: readonly ThemeDef[] = [
   {
     id: 'horizon', label: 'Horizon', tag: 'default',
-    tagline: 'Dark ground · amber accent',
+    tagline: 'Dark · amber accent · canyon hero',
     description: 'The shipped SkyWalking NG look. Dense, warm, observability-first.',
     appearance: 'dark', font: 'Inter', radius: 6, density: 'Compact',
     bg0: '#0a0d12', bg1: '#0f131a', bg2: '#151a23', line: '#232a37',

apps/ui/src/state/theme.ts

@@ -8,7 +8,7 @@ Three pages under `/admin/` surface authentication, user, and RBAC state for liv
 
 The redesigned login page:
 
-- Full-bleed dark background with an amber and purple glow, the same on every theme.
+- Full-bleed canyon background (the SkyWalking homepage backdrop).
 - Centered glass-morphism card with the Horizon wordmark.
 - **Inline auth-status pill** that adapts to the active backend:
   - Green: local backend, **or** LDAP backend with the directory reachable.

docs/access-control/admin-pages.md

@@ -434,8 +434,6 @@ The **3D Infra Map** opens framed on the tiers that hold services. A deployment
 
 ### Fixes
 
-**The sign-in page and the Connect an agent page no longer show the canyon photograph.** It came from a stock-photo library whose terms do not let it be redistributed under the Apache License, so the release no longer ships it. Both pages keep their dark background, the amber and purple glow and the faint grid, on every theme, Daybreak included.
-
 **The topbar's time-range label pushed the bar out of shape on a narrow window.** *This page uses its own time range* is the longest label the chip carries, and on a triage page in a narrow window it grew past its share and shoved the rest of the topbar along. It now shortens with an ellipsis, and the whole sentence stays in the button's tooltip.
 
 **On a light theme the browser still drew its controls dark.** `color-scheme` was declared once as `dark` and never turned back for **Daybreak**, so the calendar icon was white on a white field, native dropdowns and scrollbars stayed dark, and the focus ring was the dark-mode one. It now follows the theme's own appearance, so any light theme is covered.

docs/changelog/1.1.0.md

@@ -20,7 +20,7 @@
  * Token values are LIFTED VERBATIM from the design bundle's
  * `screens/style-setup.jsx`. The 5 bundled themes are:
  *
- *   horizon   default · dark · amber accent
+ *   horizon   default · dark · amber accent · canyon hero
  *   meridian  dense   · dark · indigo accent · navy ground
  *   obsidian  high-contrast · dark · cyan accent · true-black, monospaced
  *   daybreak  light   · violet accent · airy