Skip to content

ui(splash): use the real QueryDen logo + readable wordmark instead of a generic gradient block #79

Description

@NicolaasGrobler

Symptom

The boot splash introduced alongside #75 used a small generic gradient block as its mark and "QueryDen" in tiny gray text. It didn't use the actual product logo (the network-graph mark in `public/img/icon.png`) and looked nothing like the rest of the app — the kind of thing that signals "placeholder" to a user.

Fix

  • Use `/img/icon.png` (the real 512×512 network-graph mark) at 84px as the splash logo, with a subtle cyan drop-shadow and a gentle float animation.
  • "QueryDen" wordmark at 30px / 600 weight; the "Den" half runs the same cyan→purple gradient used throughout the UI.
  • Small uppercase tagline ("A modern database manager") in muted slate underneath.
  • Drop the `prefers-color-scheme` rule entirely — the app is dark-only at boot, so the rule was producing its own light/dark mismatch flash.
  • Move the splash element out of `#root` and make it a sibling overlay, so it can be faded out via a CSS transition instead of being yanked when React's first paint replaces `#root`.
  • Two-RAF + 700ms minimum on-screen time before fading, so a fast warm boot doesn't flash the splash for ~80ms (perceptible but unreadable).

Closed in #77.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions