overhaul of colors

a-type · Mar 24, 2024 · 36ad252 · 36ad252
1 parent a10ea83
commit 36ad252
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 13 deletions.
diff --git a/web/index.html b/web/index.html
@@ -45,7 +45,7 @@
     />
   </head>
 
-  <body class="theme-leek">
+  <body class="theme-lemon">
     <div id="root"></div>
     <script type="module" src="./src/main.tsx"></script>
   </body>

diff --git a/web/src/components/auth/UserMenu.tsx b/web/src/components/auth/UserMenu.tsx
@@ -23,7 +23,9 @@ export function UserMenu({ className }: UserMenuProps) {
   if (!data?.me) {
     return (
       <Link to="/join">
-        <Button className={classNames(className)}>Join the club</Button>
+        <Button color="primary" className={classNames(className)}>
+          Join the club
+        </Button>
       </Link>
     );
   }

diff --git a/web/src/components/subscription/Price.tsx b/web/src/components/subscription/Price.tsx
@@ -5,9 +5,25 @@ export interface PriceProps {
 }
 
 export function Price({ value, currency, ...rest }: PriceProps) {
+  const currencySymbol =
+    currencySymbols[currency?.toUpperCase() ?? 'USD'] ?? '$';
   return (
     <span {...rest}>
-      {((value ?? 0) / 100).toFixed(2)} {currency} / month
+      {currencySymbol}
+      {((value ?? 0) / 100).toFixed(2)} / month
     </span>
   );
 }
+
+const currencySymbols: Record<string, string> = {
+  USD: '$',
+  EUR: '€',
+  GBP: '£',
+  YEN: '¥',
+  INR: '₹',
+  AUD: 'A$',
+  CAD: 'C$',
+  CHF: 'CHF',
+  SEK: 'kr',
+  NZD: 'NZ$',
+};
diff --git a/web/src/main.css b/web/src/main.css
@@ -0,0 +1,5 @@
+h1,
+h2,
+h3 {
+  font-family: 'VC Henrietta Trial', 'Noto Serif', serif;
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
@@ -1,4 +1,5 @@
 import 'uno.css';
+import './main.css';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Pages } from './pages/index.jsx';

diff --git a/web/src/pages/HomePage.tsx b/web/src/pages/HomePage.tsx
@@ -17,7 +17,7 @@ const innerProps = {
 
 export default function HomePage() {
   return (
-    <PageRoot className="bg-primary flex-basis-auto">
+    <PageRoot className="bg-primary-wash flex-basis-auto">
       <Background />
       <Suspense>
         <Paws />
@@ -28,7 +28,7 @@ export default function HomePage() {
             className={classNames(
               '[font-family:"VC_Henrietta_Trial","Noto_Serif",serif]',
               'text-[5vmin] m-0 font-normal text-primary-dark text-shadow',
-              'bg-primary p-2 rounded-lg leading-none',
+              'bg-primary-wash p-2 rounded-lg leading-none',
             )}
           >
             Biscuits
@@ -75,7 +75,7 @@ function Background() {
           c 14.109208,6.556587 28.71589,-4.334327 40.138713,5.166369 11.422824,9.500696 -0.04547,17.716434 5.50578,29.604545 6.792338,14.54591 13.568365,19.601822 34.23552,25.635865
           l -0.52988,-95.90900901
           z`}
-        className="fill-primary-light"
+        className="fill-primary-light opacity-20"
       />
     </svg>
   );

diff --git a/web/src/pages/JoinPage.tsx b/web/src/pages/JoinPage.tsx
@@ -1,7 +1,92 @@
+import {
+  PageContent,
+  PageFixedArea,
+  PageRoot,
+  PageSection,
+  PageSectionGrid,
+} from '@a-type/ui/components/layouts';
+import { Button } from '@a-type/ui/components/button';
+import { Icon } from '@a-type/ui/components/icon';
+import { graphql, useLocalStorage, useQuery } from '@biscuits/client';
+import { Link, useNavigate } from '@verdant-web/react-router';
+import { useEffect } from 'react';
+import classNames from 'classnames';
+import { Price } from '@/components/subscription/Price.jsx';
+
 export interface JoinPageProps {}
 
+const startingPriceQuery = graphql(`
+  query StartingPrice {
+    productInfo(lookupKey: "for_two") {
+      price
+      currency
+    }
+  }
+`);
+
 export function JoinPage({}: JoinPageProps) {
-  return <div>TODO: join page</div>;
+  const [seen] = useLocalStorage('seenBefore', false);
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (seen) {
+      navigate(`/login`);
+    }
+  }, [seen, navigate]);
+
+  return (
+    <PageRoot className="bg-gray-1">
+      <PageContent>
+        <div className="flex flex-col gap-6">
+          <h1 className={classNames('text-gray-9')}>
+            Join Biscuits to unlock features and collaboration in every app
+          </h1>
+          <p>
+            Biscuits apps are always free to use, but members can sync and share
+            data with family or friends. Plans start at <StartingPrice />.
+          </p>
+          <PageFixedArea className="flex flex-row gap-3 py-4 justify-between">
+            <Button asChild color="default">
+              <Link to="/">
+                <Icon name="arrowLeft" />
+                Back to apps
+              </Link>
+            </Button>
+            <Button asChild color="primary">
+              <Link to="/login">Get started</Link>
+            </Button>
+          </PageFixedArea>
+          <PageSection>
+            <h2>Gnocchi</h2>
+            <p>
+              Your personal cooking app becomes a family groceries list and
+              recipe box.
+            </p>
+            <PageSectionGrid>
+              <div>TODO: screenshots</div>
+            </PageSectionGrid>
+          </PageSection>
+          <PageSection>
+            <h2>Trip Tick</h2>
+            <p>
+              Now everyone can be on the same page when packing. Plus, get a
+              weather forecast and more powerful trip planning tools.
+            </p>
+          </PageSection>
+        </div>
+      </PageContent>
+    </PageRoot>
+  );
 }
 
+const StartingPrice = () => {
+  const [{ data }] = useQuery({ query: startingPriceQuery });
+  return (
+    <Price
+      value={data?.productInfo.price}
+      currency={data?.productInfo.currency}
+      className="font-bold"
+    />
+  );
+};
+
 export default JoinPage;
diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx
@@ -17,14 +17,14 @@ export default function LoginPage() {
   const activeTab = searchParams.get('tab') ?? 'signin';
 
   return (
-    <div className="flex flex-col items-center justify-center h-screen flex-1 bg-primary">
+    <div className="flex flex-col items-center justify-center h-screen flex-1 bg-primary-wash">
       <div className="absolute top-0 left-0 w-full h-screen flex-[2]">
         <Paws />
       </div>
       <div className="flex flex-col gap-3 p-6 items-center bg-primary-light border-solid border border-3 border-primary-dark rounded-lg relative z-1">
-        <H1 className='[font-family:"VC_Henrietta_Trial","Noto_Serif",serif]'>
+        <h1 className='[font-family:"VC_Henrietta_Trial","Noto_Serif",serif] mb-0'>
           Join the club
-        </H1>
+        </h1>
         <TabsRoot
           className="flex flex-col"
           value={activeTab}

diff --git a/web/src/pages/PlanPage.tsx b/web/src/pages/PlanPage.tsx
@@ -13,7 +13,7 @@ import { Button } from '@a-type/ui/components/button';
 import { Icon } from '@a-type/ui/components/icon';
 import { MembersAndInvitations } from '@/components/plan/MembersAndInvitations.jsx';
 import { VerdantLibraries } from '@/components/storage/VerdantLibraries.jsx';
-import { LogoutButton } from '@biscuits/client';
+import { LogoutButton, useLocalStorage } from '@biscuits/client';
 import { apps } from '@biscuits/apps';
 
 const PlanPageData = graphql(`
@@ -40,16 +40,22 @@ export function PlanPage({}: PlanPageProps) {
     ? returnToApp?.devOriginOverride
     : returnToApp?.url;
 
+  const hasAccount = !!result.data?.me;
+  const [_, setSeen] = useLocalStorage('seenBefore', false);
+  useEffect(() => {
+    if (hasAccount) setSeen(true);
+  }, [setSeen, hasAccount]);
+
   const navigate = useNavigate();
 
   useEffect(() => {
-    if (!result.fetching && !result.data?.me) {
+    if (!result.fetching && !hasAccount) {
       const search = window.location.search;
       const path = window.location.pathname;
       const returnTo = encodeURIComponent(path + search);
       navigate(`/login?returnTo=${returnTo}`);
     }
-  }, [result, navigate]);
+  }, [result, navigate, hasAccount]);
 
   return (
     <PageRoot>