Fix the extension background (#580)

* Fix a z-index issue in SplashPage; make it possible to include a description * Refactor the successful login page to use SplashPage * Simplify the extension background
penumbra-zone · Feb 21, 2024 · 2ec823d · 2ec823d
1 parent b1309cc
commit 2ec823d
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 69 deletions.
diff --git a/apps/extension/src/routes/page/index.tsx b/apps/extension/src/routes/page/index.tsx
@@ -1,15 +1,6 @@
 import { redirect } from 'react-router-dom';
 import { PagePath } from './paths';
-import {
-  Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  CompressedVideoLogo,
-  FadeTransition,
-} from '@penumbra-zone/ui';
+import { Button, SplashPage } from '@penumbra-zone/ui';
 import { localExtStorage } from '@penumbra-zone/storage';
 
 // Because Zustand initializes default empty (prior to persisted storage synced),
@@ -25,32 +16,20 @@ export const pageIndexLoader = async () => {
 
 export const PageIndex = () => {
   return (
-    <FadeTransition>
-      <div className='absolute inset-0 flex w-screen items-center justify-center'>
-        <CompressedVideoLogo noWords className='w-[850px]' />
-      </div>
-      <Card className='w-[650px] p-6' gradient>
-        <CardHeader>
-          <CardTitle className='bg-gradient-to-r from-teal-400 via-neutral-300 to-orange-400 bg-clip-text text-6xl text-transparent opacity-80'>
-            Successful login
-          </CardTitle>
-          <CardDescription>
-            Use your account to transact, stake, swap or market make. All of it is shielded and
-            private.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className='grid gap-4'>
-          <Button
-            variant='gradient'
-            onClick={() => {
-              window.open('https://app.testnet.penumbra.zone/', '_blank');
-              window.close();
-            }}
-          >
-            Visit testnet web app
-          </Button>
-        </CardContent>
-      </Card>
-    </FadeTransition>
+    <SplashPage
+      title='Successful login'
+      description='Use your account to transact, stake, swap or market make.'
+    >
+      <Button
+        variant='gradient'
+        className='w-full'
+        onClick={() => {
+          window.open('https://app.testnet.penumbra.zone/', '_blank');
+          window.close();
+        }}
+      >
+        Visit testnet web app
+      </Button>
+    </SplashPage>
   );
 };
diff --git a/apps/extension/src/routes/popup/home/index.tsx b/apps/extension/src/routes/popup/home/index.tsx
@@ -35,8 +35,7 @@ export const PopupIndex = () => {
   const getAddrByIndex = useStore(addrByIndexSelector);
 
   return (
-    <div className='relative flex h-full flex-col items-stretch justify-start bg-left-bottom px-[30px]'>
-      <div className='absolute bottom-[50px] left-[-10px] -z-10 h-[715px] w-[900px] overflow-hidden bg-logo opacity-10' />
+    <div className='flex h-full grow flex-col items-stretch justify-start bg-logo bg-left-bottom px-[30px]'>
       <IndexHeader />
       <div className='my-32'>
         <SelectAccount getAddrByIndex={getAddrByIndex} />

diff --git a/apps/extension/src/routes/popup/popup-layout.tsx b/apps/extension/src/routes/popup/popup-layout.tsx
@@ -1,7 +1,4 @@
-import { Outlet, useLocation } from 'react-router-dom';
-import { cn } from '@penumbra-zone/ui/lib/utils';
-import { PopupPath } from './paths';
-import { useMemo } from 'react';
+import { Outlet } from 'react-router-dom';
 
 /**
  * @todo: Fix the issue where the detached popup isn't sized correctly. This
@@ -14,25 +11,8 @@ import { useMemo } from 'react';
  * routes here in `PopupLayout`, and using a different root class name for each,
  * then removing the hard-coded width from `globals.css`.
  */
-export const PopupLayout = () => {
-  const location = useLocation();
-
-  const isDarkBg = useMemo(() => {
-    const pathname = location.pathname as PopupPath;
-    return pathname === PopupPath.INDEX || pathname === PopupPath.LOGIN;
-  }, [location]);
-
-  return (
-    <div
-      className={cn(
-        'relative flex flex-col min-h-full',
-        isDarkBg ? 'bg-charcoal' : 'bg-charcoal-secondary',
-      )}
-    >
-      <div className='relative z-10'>
-        <Outlet />
-      </div>
-      <div className='absolute inset-0 z-0 bg-card-radial opacity-20' />
-    </div>
-  );
-};
+export const PopupLayout = () => (
+  <div className='flex min-h-full flex-col bg-card-radial'>
+    <Outlet />
+  </div>
+);
diff --git a/packages/tailwind-config/index.js b/packages/tailwind-config/index.js
@@ -146,7 +146,13 @@ export default {
         'text-linear': 'linear-gradient(90deg, var(--teal-700), var(--sand-700), var(--rust-600))',
         'button-gradient-secondary':
           'linear-gradient(90deg, var(--teal-420) 0%, var(--sand-420) 50%, var(--rust-420) 100%)',
-        logo: "url('penumbra-logo.svg')",
+        logo: `
+          linear-gradient(
+            color-mix(in srgb, var(--charcoal) 80%, transparent),
+            color-mix(in srgb, var(--charcoal) 80%, transparent)
+          ),
+          url('penumbra-logo.svg')
+        `,
       },
       backgroundPosition: {
         'right-center': 'right center',

diff --git a/packages/ui/components/ui/splash-page.tsx b/packages/ui/components/ui/splash-page.tsx
@@ -1,12 +1,20 @@
 import { ReactNode } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from './card';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
 import { CompressedVideoLogo } from './logo/compressed-video';
 import { FadeTransition } from './fade-transition';
 
-export const SplashPage = ({ title, children }: { title: string; children: ReactNode }) => {
+export const SplashPage = ({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: ReactNode;
+  children: ReactNode;
+}) => {
   return (
     <FadeTransition>
-      <div className='absolute inset-0 flex w-screen items-center justify-center'>
+      <div className='absolute inset-0 z-[-1] flex w-screen items-center justify-center'>
         <CompressedVideoLogo noWords className='w-[calc(100%-25vw)]' />
       </div>
       <Card className='w-[608px]' gradient>
@@ -15,6 +23,7 @@ export const SplashPage = ({ title, children }: { title: string; children: React
             {title}
           </CardTitle>
         </CardHeader>
+        {description && <CardDescription>{description}</CardDescription>}
         <CardContent className='mt-4'>{children}</CardContent>
       </Card>
     </FadeTransition>