fix: space app default background (#8384)

Author: aaryan610

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>

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>
     );

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>

apps/space/app/page.tsx

@@ -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>
       );

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>
   );

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"
     >

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}

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 />