From ba7b2a3e27df5677631bff042ed65299056e1246 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 18 Dec 2025 18:43:37 +0530
Subject: [PATCH] fix: space app default background (#8384)

---
 apps/space/app/error.tsx                                  | 2 +-
 apps/space/app/issues/[anchor]/layout.tsx                 | 2 +-
 apps/space/app/not-found.tsx                              | 4 ++--
 apps/space/app/page.tsx                                   | 4 ++--
 apps/space/app/root.tsx                                   | 2 +-
 apps/space/core/components/common/powered-by.tsx          | 2 +-
 apps/space/core/components/issues/issue-layouts/error.tsx | 4 ++--
 apps/space/core/components/views/auth.tsx                 | 2 +-
 8 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/space/app/error.tsx b/apps/space/app/error.tsx
index 36f18c230..35267ad5c 100644
--- a/apps/space/app/error.tsx
+++ b/apps/space/app/error.tsx
@@ -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>
diff --git a/apps/space/app/issues/[anchor]/layout.tsx b/apps/space/app/issues/[anchor]/layout.tsx
index e32b008a2..79f2f7e3e 100644
--- a/apps/space/app/issues/[anchor]/layout.tsx
+++ b/apps/space/app/issues/[anchor]/layout.tsx
@@ -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>
     );
diff --git a/apps/space/app/not-found.tsx b/apps/space/app/not-found.tsx
index 411859ac0..2ae119c39 100644
--- a/apps/space/app/not-found.tsx
+++ b/apps/space/app/not-found.tsx
@@ -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">
       <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>
diff --git a/apps/space/app/page.tsx b/apps/space/app/page.tsx
index 4b473b566..6f58126ed 100644
--- a/apps/space/app/page.tsx
+++ b/apps/space/app/page.tsx
@@ -29,7 +29,7 @@ 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>
     );
@@ -37,7 +37,7 @@ const HomePage = observer(function HomePage() {
   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>
       );
diff --git a/apps/space/app/root.tsx b/apps/space/app/root.tsx
index a7f04af7d..ad5e8fff2 100644
--- a/apps/space/app/root.tsx
+++ b/apps/space/app/root.tsx
@@ -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>
   );
diff --git a/apps/space/core/components/common/powered-by.tsx b/apps/space/core/components/common/powered-by.tsx
index 2edac3781..824cad483 100644
--- a/apps/space/core/components/common/powered-by.tsx
+++ b/apps/space/core/components/common/powered-by.tsx
@@ -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"
       target="_blank"
       rel="noreferrer noopener"
     >
diff --git a/apps/space/core/components/issues/issue-layouts/error.tsx b/apps/space/core/components/issues/issue-layouts/error.tsx
index a0c5697ff..8ae86f1ba 100644
--- a/apps/space/core/components/issues/issue-layouts/error.tsx
+++ b/apps/space/core/components/issues/issue-layouts/error.tsx
@@ -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}
diff --git a/apps/space/core/components/views/auth.tsx b/apps/space/core/components/views/auth.tsx
index 04b11626d..3fdf13735 100644
--- a/apps/space/core/components/views/auth.tsx
+++ b/apps/space/core/components/views/auth.tsx
@@ -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 />