Skip to content

chore: remove login-background.svg to reduce the package size #591

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emrberk merged 2 commits into from
Jul 23, 2026
Merged

chore: remove login-background.svg to reduce the package size #591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d899f4d
chore: remove login-background.svg to reduce the package size
emrberk Jul 23, 2026
d737fb3
Merge branch 'main' into chore/remove-login-background
puzpuzpuz Jul 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion public/assets/login-background.svg
View file
Open in desktop

This file was deleted.

19 changes: 2 additions & 17 deletions src/modules/OAuth2/views/login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { getSSOUserNameWithClientID } from "../utils"
import { RawDqlResult } from "utils/questdb/types"
import { LoadingSpinner } from "../../../components/LoadingSpinner"
import { Box } from "../../../components/Box"
import { LoginBackground } from "./loginBackground"

const LoginContainer = styled.div`
width: 100%;
Expand All @@ -23,18 +24,6 @@ const LoginContainer = styled.div`
overflow-y: auto;
`

const LoginBackground = styled.img`
position: absolute;
top: 1%;
left: 0;
width: 100%;
max-height: 100vh;
object-fit: cover;
z-index: 0;
pointer-events: none;
user-select: none;
`

const LogoContainer = styled.div`
padding: 2.4rem 4.8rem;
display: flex;
Expand Down Expand Up @@ -397,11 +386,7 @@ export const Login = ({
return settings["acl.basic.auth.realm.enabled"] ? null : (
<>
<LoginContainer data-hook="auth-login">
<LoginBackground
src="assets/login-background.svg"
aria-hidden="true"
alt=""
/>
<LoginBackground />
{(redirectErrorTitle || redirectErrorMessage) && (
<RedirectErrorContainer>
<PlugsContainer>
Expand Down
81 changes: 81 additions & 0 deletions src/modules/OAuth2/views/loginBackground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import React from "react"
import styled from "styled-components"

type Segment = string | { sql: string }

const SEGMENTS: Segment[] = [
"0101001010001010100110001000101010000110101010000100000011101 000110100101101101011001010111001101110100011000010110110101110000001011000010000001100010 011\n01100100 01010010100010101001100010001010100001 ",
{ sql: "SELECT * FROM trades" },
" 00000011101 ",
{ sql: "WHERE symbol in ('AAPL', 'NVDA')" },
" 010101000 ",
{ sql: "LATEST ON timestamp PARTITION BY symbol" },
" 0010 01101001 01100100 0101001010001010100110 001000101010000110101010000100000011101 000110100101101101011001 101010000110101010000100000011101 00100000011101 000110100101101101011001010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 0101001010001010100110001000101 0100001 10101010000100000011101 00011010010110110101100101011100110111010001100 00101101101011100000010110000100000011000100 SELECT 011000100110 01100100 0101001010001010100110001000101010000110101010000100000011101 10101010000100000011101 0001101 00100110 timestamp, symbol, 01000000110001000 0010110110101110000001011000010000001100010 01101001 01100100 0101001010001010100110 0010001010100001101010100001000 first(price) AS open, 11001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 01010010100010101 last(price) AS close, 00110001000100 0001100010 01101001 01100100 01010010100010101001100010001010100001 10101010000100000011101 000110100101101101011001010111001100110010010 ",
{ sql: "min(price) AS low," },
" 011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 01100010001010100 ",
{ sql: "max(price) AS high," },
" 0011 010101000 0100000011101 01000000111010 011010010110110101100101011100110111010001100 01101001 01100100 01010010100010101001100010001010100001101010100001 ",
{ sql: "sum(amount) AS volume" },
" \n01101 101011001010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 010100101000101 010011010101000010 0000011101 0000001 1101010000001 110100011010010110110101100101011100110111010001100 0101001010001010100110 001000101010000110101010000100000011101 00011010010110 1101011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 010100101000101010011000100010101000011010101000010 ",
{ sql: "FROM trades" },
"\n0000011101 0001100010 01101001 01100100 01010010100010101001100010001010100001 10101010000100000011101 00011010010110110101100101011100110111010001100 0010110110101110000001011000010000001100010 01101001 01100100 000110100101101101011001 01011 ",
{ sql: "WHERE symbol = 'MSFT' AND timestamp IN today()" },
" 0000 1011000010000001100010 01101001 011001000101001010001010100110001000101010000110101010000100000011101 01 SAMPLE BY 15m 0110 001000101010000110101010000100000011101 000110100101101101011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 011011010111000000 1011000010000001100010 01101001 01100100 01010010100010101001100010001010100001 10101010000100000011101 00011010010110110101100101011100110111010001100 0101001010001010100110 volume,001000101010000110101010000100000011101 000110100101101101011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 0101001010001010100110001000101010000110101010000100000011101 0010110110101110000001011000010000001100010 01101001 01100100 0101001010001010100110 01000101010000110101SELECT timestamp00000011101 000110100101101101011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 0101001010001010100110001000101010000110101010000100000011101 0101001010001010100110 001000101010000110101010000100000011101 000110100101101101011001 15m0101001010001010100110 001000101010000110101010000100000011101 000110100101101101011001 010010000001100010 ",
{ sql: "SELECT timestamp time, symbol, price as priceAAPL," },
" 01101001 ",
{
sql: "avg(price) over (PARTITION BY symbol ORDER BY timestamp RANGE between 30 days PRECEDING AND CURRENT ROW) moving_avg_30_days",
},
" 00001 10101010000100000011101\n010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 0101001010001010100110001000 101010000110101010000100000011101 01000101010000110101010000100000011101 00011010010110110101100 00100010101000011 FROM trades 00100000011101 00011010000 01 10110110101 1100 11001 0101110011011101000110000011010010110110101100101011100110111010001100001011 001011000010000001100001 001000101010000110101010000100000011 001010 \n01100100 01010010100010101001100010001010100001 10101010000100000011101 ",
{ sql: "WHERE timestamp > dateadd('M', -1, now())" },
" 100110111010001100 0101110000001011000010 000000101100\n000001100010 01101001 01100100 0101001010001010100110001000101010000110101010000100000011101 001100010 01101001 01100100 ",
{ sql: "AND symbol = 'AMZN';" },
" 1100010001010100001 101010100001 00000011101 00011010010110110101100101011100110111010001100 0010110110101110000001011000010000001100010 01101001 01100100 01101001 01100100 01101001 01100100 \n0101001010001010100110 001000101010000110101010000100000011101 000110100101101101011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 \n0101001010001010100110001000101010000110101010000100000011101 000110100101101101011001010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 01010010100010101001100010001010100001 10101010000100000011101 00011010010110110101100101011100110111010001100 0010110110101110000001011000010000001100010 01101001 01100100 \n0101001010001010100110 001000101010000110101010000100000011101 000110100101101101011001 010111001101110100011000010110110101110000001011000010000001100010 01101001 01100100 ",
]

const designPx = (value: number) => `calc(${value} * 100vw / 1920)`

const Backdrop = styled.div`
position: absolute;
top: 1%;
left: 0;
width: 100%;
aspect-ratio: 2 / 1;
max-height: 100vh;
overflow: hidden;
opacity: 0.4;
mask-image: linear-gradient(black 11.6%, transparent 63.8%);
z-index: 0;
pointer-events: none;
user-select: none;
`

const Noise = styled.div`
margin: ${designPx(-22)} ${designPx(-125)} 0 ${designPx(-127)};
font-family: ${({ theme }) => theme.fontMonospace};
font-size: ${designPx(19)};
font-weight: 400;
letter-spacing: ${designPx(1.674)};
line-height: 1.475;
color: rgba(144, 137, 252, 0.64);
white-space: pre-wrap;
word-break: break-word;
`

const Query = styled.span`
color: #9089fc;
`

export const LoginBackground = () => (
<Backdrop aria-hidden="true">
<Noise>
{SEGMENTS.map((segment) =>
typeof segment === "string" ? (
segment
) : (
<Query key={segment.sql}>{segment.sql}</Query>
),
)}
</Noise>
</Backdrop>
)
Loading