fix: revamped auth background

riipandi · Oct 4, 2024 · 3a58d2c · 3a58d2c
1 parent 23e9e34
commit 3a58d2c
Show file tree

Hide file tree

Showing 5 changed files with 373 additions and 11 deletions.
diff --git a/app/routes/_auth+/_layout.tsx b/app/routes/_auth+/_layout.tsx
@@ -21,15 +21,15 @@ export default function AuthLayout() {
         <div className="relative hidden bg-center bg-cover bg-no-repeat lg:block lg:w-3/5">
           <div
             className="absolute inset-0 bg-center bg-cover"
-            style={{ backgroundImage: `url('/images/cartist-hOGKh5qHNAE-unsplash.jpg')` }}
+            style={{ backgroundImage: `url('/images/login-illustration.svg')` }}
           />
-          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-gray-50/70 to-gray-50 dark:via-gray-900/70 dark:to-gray-900" />
+          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-gray-50/40 to-gray-50 dark:via-gray-900/70 dark:to-gray-900" />
           <div className="relative flex h-full items-center px-20">
             <div className="rounded-xl p-6">
-              <h2 className="font-bold text-2xl drop-shadow-[0_0_0.3rem_#ffffff70] sm:text-4xl dark:text-white">
+              <h2 className="font-bold text-2xl text-gray-100 drop-shadow-[0_0_0.3rem_#00000040] sm:text-4xl dark:text-white dark:drop-shadow-[0_0_0.3rem_#ffffff70]">
                 Remix Start
               </h2>
-              <p className="mt-3 max-w-xl font-medium text-gray-700 dark:text-gray-100">
+              <p className="mt-3 max-w-xl font-medium text-gray-100 drop-shadow-[0_0_0.2rem_#00000030] dark:text-gray-100 dark:drop-shadow-[0_0_0.2rem_#ffffff50]">
                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. In autem ipsa, nulla
                 laboriosam dolores, repellendus perferendis libero suscipit nam temporibus molestiae
               </p>
@@ -40,11 +40,17 @@ export default function AuthLayout() {
           <main className="w-full max-w-md">
             <div className="mx-auto flex justify-center">
               <Link to="/" title="Back to home">
-                <img
-                  src="/favicon.svg"
-                  className="h-12 w-auto sm:h-10 dark:invert"
-                  alt="Remix Start"
-                />
+                {['light', 'dark'].map((mode) => (
+                  <img
+                    key={mode}
+                    src={`/${mode === 'dark' ? 'favicon-white.svg' : 'favicon.svg'}`}
+                    className={clx(
+                      mode === 'dark' ? 'hidden dark:block' : 'dark:hidden',
+                      `h-12 w-auto sm:h-10`
+                    )}
+                    alt="Remix Start"
+                  />
+                ))}
               </Link>
             </div>
 

diff --git a/app/routes/docs+/_layout.tsx b/app/routes/docs+/_layout.tsx
@@ -89,7 +89,17 @@ export default function DocsLayout() {
                   className="group flex flex-row items-center gap-2"
                   aria-label="Remix Start home"
                 >
-                  <img src="/favicon.svg" className="h-8 dark:invert" alt="Remix Start" />
+                  {['light', 'dark'].map((mode) => (
+                    <img
+                      key={mode}
+                      src={`/${mode === 'dark' ? 'favicon-white.svg' : 'favicon.svg'}`}
+                      className={clx(
+                        mode === 'dark' ? 'hidden dark:block' : 'dark:hidden',
+                        `h-8 w-auto sm:h-10`
+                      )}
+                      alt="Remix Start"
+                    />
+                  ))}
                 </Link>
                 <div className="absolute top-[13px] right-2.5 z-20 block md:hidden">
                   <button

diff --git a/public/images/cartist-hOGKh5qHNAE-unsplash.jpg b/public/images/cartist-hOGKh5qHNAE-unsplash.jpg