layout changes (#849)

* layout changes
* restrict max width component
* header/footer style compatible with page background image

apps/minifront/src/components/dashboard/layout.tsx

@@ -5,25 +5,28 @@ import { EduInfoCard } from '../shared/edu-panels/edu-info-card';
 import { Tabs } from '../shared/tabs';
 import { usePagePath } from '../../fetchers/page-path';
 import { DashboardTab } from './types';
+import { RestrictMaxWidth } from '../shared/restrict-max-width';
 
 export const DashboardLayout = () => {
   const pathname = usePagePath<DashboardTab>();
 
   return (
-    <div className='grid gap-6 md:gap-4 lg:grid-cols-3 xl:gap-5'>
-      <Card
-        gradient
-        className='order-2 flex flex-1 flex-col p-5 md:p-4 lg:order-1 lg:col-span-2 lg:row-span-2 xl:p-5'
-      >
-        <Tabs tabs={dashboardTabs} activeTab={pathname} className='mx-auto w-full md:w-[70%]' />
-        <Outlet />
-      </Card>
-      <EduInfoCard
-        className='order-1 row-span-1 lg:order-2'
-        src={dashboardTabsHelper[pathname].src}
-        label={dashboardTabsHelper[pathname].label}
-        content={dashboardTabsHelper[pathname].content}
-      />
-    </div>
+    <RestrictMaxWidth>
+      <div className='grid gap-6 md:gap-4 lg:grid-cols-3 xl:gap-5'>
+        <Card
+          gradient
+          className='order-2 flex flex-1 flex-col p-5 md:p-4 lg:order-1 lg:col-span-2 lg:row-span-2 xl:p-5'
+        >
+          <Tabs tabs={dashboardTabs} activeTab={pathname} className='mx-auto w-full md:w-[70%]' />
+          <Outlet />
+        </Card>
+        <EduInfoCard
+          className='order-1 row-span-1 lg:order-2'
+          src={dashboardTabsHelper[pathname].src}
+          label={dashboardTabsHelper[pathname].label}
+          content={dashboardTabsHelper[pathname].content}
+        />
+      </div>
+    </RestrictMaxWidth>
   );
 };

apps/minifront/src/components/footer/footer.tsx

@@ -0,0 +1,11 @@
+import { MinifrontVersion } from './minifront-version';
+import { RightsMessage } from './rights-message';
+
+export const Footer = () => (
+  <footer className='w-full bg-gradient-to-b from-transparent to-black to-40% pt-[3em]'>
+    <div className='text-center text-stone-700'>
+      <RightsMessage />
+      <MinifrontVersion />
+    </div>
+  </footer>
+);

apps/minifront/src/components/footer/minifront-version.tsx

@@ -0,0 +1,22 @@
+import { format } from 'date-fns';
+
+export const MinifrontVersion = () => {
+  const shortenedCommitHash = __COMMIT_HASH__.slice(0, 7);
+  const dateObj = new Date(__COMMIT_DATE__);
+  const formattedDate = format(dateObj, "MMM dd yyyy HH:mm:ss 'GMT'x");
+  return (
+    <div>
+      Version&nbsp;
+      <a
+        target='_blank'
+        className='underline'
+        href={`${__GIT_ORIGIN_URL__}/commits/${__COMMIT_HASH__}`}
+        rel='noreferrer'
+      >
+        {shortenedCommitHash}
+      </a>
+      {' - '}
+      {formattedDate}
+    </div>
+  );
+};

apps/minifront/src/components/footer/rights-message.tsx

@@ -0,0 +1,17 @@
+export const RightsMessage = () => {
+  return (
+    <div>
+      <b>This software runs entirely on your device.</b>
+      <br />
+      <a
+        target='_blank'
+        rel='noreferrer'
+        className='underline'
+        href='https://www.coincenter.org/electronic-cash-decentralized-exchange-and-the-constitution/'
+      >
+        Learn more
+      </a>{' '}
+      about your rights.
+    </div>
+  );
+};

apps/minifront/src/components/header/header.tsx

@@ -3,7 +3,7 @@ import { SyncStatusSection } from './sync-status-section';
 
 export const Header = () => {
   return (
-    <header>
+    <header className='w-full bg-gradient-to-t from-transparent to-black to-40% pb-[3em]'>
       <SyncStatusSection />
       <TopRow />
     </header>

apps/minifront/src/components/header/navbar.tsx

@@ -7,7 +7,7 @@ export const Navbar = () => {
   const pathname = usePagePath();
 
   return (
-    <nav className='hidden max-w-2xl gap-4 xl:flex xl:grow xl:justify-between'>
+    <nav className='hidden max-w-xl gap-4 xl:flex xl:grow xl:justify-between'>
       {headerLinks.map(link =>
         link.active ? (
           <Link

apps/minifront/src/components/ibc/ibc-in-form.tsx

@@ -1,9 +1,3 @@
-import { Card } from '@penumbra-zone/ui/components/ui/card';
-
 export const IbcInForm = () => {
-  return (
-    <Card gradient className='md:p-5'>
-      To come...
-    </Card>
-  );
+  return <div>To come...</div>;
 };

apps/minifront/src/components/ibc/ibc-out-form.tsx

@@ -1,5 +1,4 @@
 import { Button } from '@penumbra-zone/ui/components/ui/button';
-import { Card } from '@penumbra-zone/ui/components/ui/card';
 import { Input } from '@penumbra-zone/ui/components/ui/input';
 import { ChainSelector } from './chain-selector';
 import { useLoaderData } from 'react-router-dom';
@@ -25,68 +24,66 @@ export const IbcOutForm = () => {
   const validationErrors = useStore(ibcValidationErrors);
 
   return (
-    <Card gradient className='md:p-5'>
-      <form
-        className='flex flex-col gap-4'
-        onSubmit={e => {
-          e.preventDefault();
-          void sendIbcWithdraw();
+    <form
+      className='flex flex-col gap-4'
+      onSubmit={e => {
+        e.preventDefault();
+        void sendIbcWithdraw();
+      }}
+    >
+      <ChainSelector />
+      <InputToken
+        label='Amount to send'
+        placeholder='Enter an amount'
+        className='mb-1'
+        selection={selection}
+        setSelection={setSelection}
+        value={amount}
+        onChange={e => {
+          if (Number(e.target.value) < 0) return;
+          setAmount(e.target.value);
         }}
+        validations={[
+          {
+            type: 'error',
+            issue: 'insufficient funds',
+            checkFn: () => validationErrors.amountErr,
+          },
+        ]}
+        balances={filteredBalances}
+      />
+      <InputBlock
+        label='Recipient on destination chain'
+        className='mb-1'
+        value={destinationChainAddress}
+        validations={[
+          {
+            type: 'error',
+            issue: 'address not valid',
+            checkFn: () => validationErrors.recipientErr,
+          },
+        ]}
       >
-        <ChainSelector />
-        <InputToken
-          label='Amount to send'
-          placeholder='Enter an amount'
-          className='mb-1'
-          selection={selection}
-          setSelection={setSelection}
-          value={amount}
-          onChange={e => {
-            if (Number(e.target.value) < 0) return;
-            setAmount(e.target.value);
-          }}
-          validations={[
-            {
-              type: 'error',
-              issue: 'insufficient funds',
-              checkFn: () => validationErrors.amountErr,
-            },
-          ]}
-          balances={filteredBalances}
-        />
-        <InputBlock
-          label='Recipient on destination chain'
-          className='mb-1'
+        <Input
+          variant='transparent'
+          placeholder='Enter the address'
           value={destinationChainAddress}
-          validations={[
-            {
-              type: 'error',
-              issue: 'address not valid',
-              checkFn: () => validationErrors.recipientErr,
-            },
-          ]}
-        >
-          <Input
-            variant='transparent'
-            placeholder='Enter the address'
-            value={destinationChainAddress}
-            onChange={e => setDestinationChainAddress(e.target.value)}
-          />
-        </InputBlock>
-        <Button
-          type='submit'
-          variant='gradient'
-          className='mt-9'
-          disabled={
-            !Number(amount) ||
-            !destinationChainAddress ||
-            !!Object.values(validationErrors).find(Boolean) ||
-            !selection
-          }
-        >
-          Send
-        </Button>
-      </form>
-    </Card>
+          onChange={e => setDestinationChainAddress(e.target.value)}
+        />
+      </InputBlock>
+      <Button
+        type='submit'
+        variant='gradient'
+        className='mt-9'
+        disabled={
+          !Number(amount) ||
+          !destinationChainAddress ||
+          !!Object.values(validationErrors).find(Boolean) ||
+          !selection
+        }
+      >
+        Send
+      </Button>
+    </form>
   );
 };

apps/minifront/src/components/ibc/layout.tsx

@@ -1,11 +1,16 @@
+import { Card } from '@penumbra-zone/ui/components/ui/card';
 import { IbcInForm } from './ibc-in-form';
 import { IbcOutForm } from './ibc-out-form';
 
 export const IbcLayout = () => {
   return (
-    <div className='grid md:grid-cols-2 md:gap-5'>
-      <IbcInForm />
-      <IbcOutForm />
+    <div className='flex flex-1 flex-col gap-4 md:flex-row md:place-content-around'>
+      <Card className='md:self-start'>
+        <IbcInForm />
+      </Card>
+      <Card className='md:self-end'>
+        <IbcOutForm />
+      </Card>
     </div>
   );
 };

apps/minifront/src/components/layout.tsx

@@ -3,11 +3,11 @@ import { getChainId } from '../fetchers/chain-id';
 import { HeadTag } from './metadata/head-tag';
 import { Header } from './header/header';
 import { Toaster } from '@penumbra-zone/ui/components/ui/toaster';
-import '@penumbra-zone/ui/styles/globals.css';
 import { ExtensionNotConnected } from './extension-not-connected';
 import { ExtensionNotInstalled } from './extension-not-installed';
-import { Footer } from './footer';
+import { Footer } from './footer/footer';
 import { isPraxConnected, isPraxConnectedTimeout, isPraxAvailable } from '@penumbra-zone/client';
+import '@penumbra-zone/ui/styles/globals.css';
 
 export type LayoutLoaderResult =
   | { isInstalled: boolean; isConnected: boolean }
@@ -35,9 +35,9 @@ export const Layout = () => {
   return (
     <>
       <HeadTag />
-      <div className='relative flex min-h-screen flex-col bg-background text-muted'>
+      <div className='flex min-h-screen w-screen flex-col'>
         <Header />
-        <main className='mx-auto w-full flex-1 px-6 pb-4 pt-5 md:px-[88px] md:pb-0 xl:max-w-[1276px] xl:px-12'>
+        <main className='flex size-full flex-1 px-4'>
           <Outlet />
         </main>
         <Footer />

apps/minifront/src/components/send/layout.tsx

@@ -5,26 +5,29 @@ import { usePagePath } from '../../fetchers/page-path';
 import { Tabs } from '../shared/tabs';
 import { Outlet } from 'react-router-dom';
 import { EduInfoCard } from '../shared/edu-panels/edu-info-card';
+import { RestrictMaxWidth } from '../shared/restrict-max-width';
 
 export const SendLayout = () => {
   const pathname = usePagePath<SendTab>();
 
   return (
-    <div className='grid gap-6 md:grid-cols-2 md:gap-4 xl:grid-cols-3 xl:gap-5'>
-      <div className='hidden xl:order-1 xl:block' />
-      <Card
-        gradient
-        className='order-2 row-span-2 flex flex-1 flex-col p-5 md:order-1 md:p-4 xl:p-5'
-      >
-        <Tabs tabs={sendTabs} activeTab={pathname} />
-        <Outlet />
-      </Card>
-      <EduInfoCard
-        className='order-1 md:order-2'
-        src={sendTabsHelper[pathname].src}
-        label={sendTabsHelper[pathname].label}
-        content={sendTabsHelper[pathname].content}
-      />
-    </div>
+    <RestrictMaxWidth>
+      <div className='grid gap-6 md:grid-cols-2 md:gap-4 xl:grid-cols-3 xl:gap-5'>
+        <div className='hidden xl:order-1 xl:block' />
+        <Card
+          gradient
+          className='order-2 row-span-2 flex flex-1 flex-col p-5 md:order-1 md:p-4 xl:p-5'
+        >
+          <Tabs tabs={sendTabs} activeTab={pathname} />
+          <Outlet />
+        </Card>
+        <EduInfoCard
+          className='order-1 row-span-1 md:order-2'
+          src={sendTabsHelper[pathname].src}
+          label={sendTabsHelper[pathname].label}
+          content={sendTabsHelper[pathname].content}
+        />
+      </div>
+    </RestrictMaxWidth>
   );
 };

apps/minifront/src/components/shared/restrict-max-width.tsx

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export const RestrictMaxWidth = ({ children }: { children: ReactNode }) => {
+  return <div className='mx-auto xl:max-w-[1276px]'>{children}</div>;
+};