Skip to content

fix: space app default background #8384

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
pushya22 merged 1 commit into from
Dec 18, 2025
Merged

fix: space app default background #8384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion apps/space/app/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ function ErrorPage() {
};

return (
<div className="grid h-screen place-items-center p-4">
<div className="bg-surface-1 grid h-screen place-items-center p-4">
<div className="space-y-8 text-center">
<div className="space-y-2">
<h3 className="text-16 font-semibold">Yikes! That doesn{"'"}t look good.</h3>
Expand Down
2 changes: 1 addition & 1 deletion apps/space/app/issues/[anchor]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ function IssuesLayout(props: Route.ComponentProps) {

if (!publishSettings && !error) {
return (
<div className="flex items-center justify-center h-screen w-full">
<div className="bg-surface-1 flex items-center justify-center h-screen w-full">
<LogoSpinner />
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/space/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";

function NotFound() {
return (
<div className="h-screen w-screen grid place-items-center">
<div className="h-screen w-screen grid place-items-center bg-surface-1">
Copy link

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For consistency with other files in this PR where bg-surface-1 is placed at the beginning of the className string, consider placing it at the start rather than at the end. This maintains a consistent pattern across all the background color additions.

Suggested change
<div className="h-screen w-screen grid place-items-center bg-surface-1">
<div className="bg-surface-1 h-screen w-screen grid place-items-center">

Copilot uses AI. Check for mistakes.
<div className="text-center">
<div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-layer-1">
<div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full">
<div className="size-16 md:size-32 grid place-items-center">
<img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} />
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/space/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@ const HomePage = observer(function HomePage() {

if (isInitializing)
return (
<div className="flex h-screen min-h-[500px] w-full justify-center items-center">
<div className="bg-surface-1 flex h-screen min-h-[500px] w-full justify-center items-center">
<LogoSpinner />
</div>
);

if (currentUser && isAuthenticated) {
if (nextPath && isValidNextPath(nextPath)) {
return (
<div className="flex h-screen min-h-[500px] w-full justify-center items-center">
<div className="bg-surface-1 flex h-screen min-h-[500px] w-full justify-center items-center">
<LogoSpinner />
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/space/app/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export default function Root() {

export function HydrateFallback() {
return (
<div className="relative flex h-screen w-full items-center justify-center">
<div className="bg-surface-1 relative flex h-screen w-full items-center justify-center">
<LogoSpinner />
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/space/core/components/common/powered-by.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export function PoweredBy(props: TPoweredBy) {
return (
<a
href={WEBSITE_URL}
className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-surface-1 px-2 py-1 shadow-raised-100"
className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-layer-3 px-2 py-1 shadow-raised-100"
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Incorrect layer usage without matching parent surface.

Changing from bg-surface-1 to bg-layer-3 violates the layering guidelines. According to the learnings: "Match layers to their parent surface: use bg-layer-1 within bg-surface-1, use bg-layer-2 within bg-surface-2, and bg-layer-3 within bg-surface-3."

This fixed-position component doesn't have a parent with bg-surface-3, so bg-layer-3 is incorrect. Since this component exists on a different z-index plane (z-[999999]), it should use a surface class (like the original bg-surface-1) rather than a layer class.

🔎 Revert to the correct surface background: 
-      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-layer-3 px-2 py-1 shadow-raised-100"
+      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-surface-1 px-2 py-1 shadow-raised-100"

Based on learnings.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-layer-3 px-2 py-1 shadow-raised-100"
className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-surface-1 px-2 py-1 shadow-raised-100"
🤖 Prompt for AI Agents 
In apps/space/core/components/common/powered-by.tsx around line 18, the
component uses bg-layer-3 on a fixed, high z-index element which violates the
layering rules because it has no parent with bg-surface-3; replace the layer
class with the appropriate surface class (e.g., revert bg-layer-3 back to
bg-surface-1 or another matching bg-surface-X that corresponds to this element's
actual parent surface) so the background uses a surface token instead of a layer
token and keep the existing z-index and other classes unchanged.

target="_blank"
rel="noreferrer noopener"
>
Expand Down
4 changes: 2 additions & 2 deletions apps/space/core/components/issues/issue-layouts/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";

export function SomethingWentWrongError() {
return (
<div className="grid min-h-screen w-full place-items-center p-6">
<div className="bg-surface-1 grid min-h-screen w-full place-items-center p-6">
<div className="text-center">
<div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-layer-1">
<div className="mx-auto grid h-52 w-52 place-items-center rounded-full">
<div className="grid h-32 w-32 place-items-center">
<img
src={SomethingWentWrongImage}
Expand Down
2 changes: 1 addition & 1 deletion apps/space/core/components/views/auth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { AuthHeader } from "./header";

export function AuthView() {
return (
<div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
<div className="bg-surface-1 relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
<AuthHeader />
<AuthRoot />
<PoweredBy />
Expand Down
Loading