fix some trip tick ui

a-type · Mar 30, 2024 · 5731d67 · 5731d67
1 parent 8641e97
commit 5731d67
Show file tree

Hide file tree

Showing 25 changed files with 331 additions and 235 deletions.
diff --git a/apps/gnocchi/web/src/components/settings/ColorModeSelect.tsx b/apps/gnocchi/web/src/components/settings/ColorModeSelect.tsx
diff --git a/apps/gnocchi/web/src/darkMode.ts b/apps/gnocchi/web/src/darkMode.ts
diff --git a/apps/gnocchi/web/src/main.tsx b/apps/gnocchi/web/src/main.tsx
@@ -1,24 +1,23 @@
 import 'virtual:uno.css';
-import './darkMode.js';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App.js';
 import { attachToPwaEvents } from './pwaEventListener.js';
 import { requestPersistentStorage } from '@/lib/platform.js';
 
 if (!import.meta.env.DEV) {
-	import('@vercel/analytics').then((mod) => {
-		mod.inject();
-	});
+  import('@vercel/analytics').then((mod) => {
+    mod.inject();
+  });
 }
 
 function main() {
-	const root = createRoot(document.getElementById('root')!);
-	root.render(
-		<StrictMode>
-			<App />
-		</StrictMode>,
-	);
+  const root = createRoot(document.getElementById('root')!);
+  root.render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
 }
 
 main();
@@ -27,13 +26,13 @@ attachToPwaEvents();
 requestPersistentStorage();
 
 function debugUno() {
-	setTimeout(
-		() =>
-			navigator.clipboard.writeText(
-				document.querySelector('[data-vite-dev-id="/__uno.css"]')
-					?.textContent ?? 'failed to copy',
-			),
-		3000,
-	);
+  setTimeout(
+    () =>
+      navigator.clipboard.writeText(
+        document.querySelector('[data-vite-dev-id="/__uno.css"]')
+          ?.textContent ?? 'failed to copy',
+      ),
+    3000,
+  );
 }
 (window as any).debugUno = debugUno;
diff --git a/apps/gnocchi/web/src/pages/PlanPage.tsx b/apps/gnocchi/web/src/pages/PlanPage.tsx
@@ -2,7 +2,6 @@ import { Icon } from '@/components/icons/Icon.jsx';
 import { BugButton } from '@/components/menu/BugButton.jsx';
 import { ManageCategoriesDialog } from '@/components/menu/ManageCategoriesDialog.jsx';
 import { TextLink } from '@/components/nav/Link.jsx';
-import { ColorModeSelect } from '@/components/settings/ColorModeSelect.jsx';
 import { ReloadButton } from '@/components/sync/ReloadButton.jsx';
 import { UpdatePrompt } from '@/components/updatePrompt/UpdatePrompt.jsx';
 import { checkForUpdate } from '@/components/updatePrompt/updateState.js';
@@ -24,6 +23,7 @@ import {
   useCanSync,
   useIsOffline,
   useMe,
+  DarkModeToggle,
 } from '@biscuits/client';
 import { ArrowRightIcon } from '@radix-ui/react-icons';
 import { ReactNode, useEffect } from 'react';
@@ -101,7 +101,7 @@ function OfflineContents() {
   return (
     <MainContainer>
       <InstallHint />
-      <ColorModeSelect />
+      <DarkModeToggle />
       <Button size="small" color="default" onClick={() => refetch()}>
         Retry connection
       </Button>
@@ -117,7 +117,7 @@ function AnonymousContents() {
   return (
     <MainContainer>
       <InstallHint />
-      <ColorModeSelect />
+      <DarkModeToggle />
       <div>
         <div className="flex flex-row items-center gap-2">
           <PromoteSubscriptionButton color="primary">
@@ -145,7 +145,7 @@ function UnsubscribedContents() {
   return (
     <MainContainer>
       <InstallHint />
-      <ColorModeSelect />
+      <DarkModeToggle />
       <div className="bg-primary-wash color-black p-4 rounded-lg">
         Subscription inactive
       </div>
@@ -163,7 +163,7 @@ function OnlineContents() {
   return (
     <MainContainer>
       <InstallHint />
-      <ColorModeSelect />
+      <DarkModeToggle />
       <H2>Collaborate</H2>
       <PushSubscriptionToggle vapidKey={VAPID_KEY} />
       <Divider />

diff --git a/apps/trip-tick/web/index.html b/apps/trip-tick/web/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"
     />
-    <title>packing-list</title>
+    <title>Trip Tick</title>
     <meta name="description" content="A new lo-fi app" />
     <link rel="icon" href="/favicon.ico" />
     <!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" /> -->
@@ -20,14 +20,14 @@
 			property="og:image:alt"
 			content=""
 		/> -->
-    <meta property="og:title" content="packing-list" />
+    <meta property="og:title" content="Trip Tick" />
     <meta property="og:description" content="A new lo-fi app" />
     <!-- <meta property="og:url" content="FILL THIS IN" /> -->
-    <meta property="og:site_name" content="packing-list" />
+    <meta property="og:site_name" content="Trip Tick" />
 
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:image:alt" content="" />
-    <meta name="twitter:title" content="packing-list" />
+    <meta name="twitter:title" content="Trip Tick" />
     <meta name="twitter:description" content="A new lo-fi app" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
   </head>

diff --git a/apps/trip-tick/web/package.json b/apps/trip-tick/web/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@a-type/ui": "^0.6.17",
+    "@a-type/ui": "^0.6.21",
     "@a-type/utils": "^1.0.6",
     "@biscuits/client": "workspace:*",
     "@radix-ui/react-progress": "^1.0.3",

diff --git a/apps/trip-tick/web/src/components/brand/Logo.tsx b/apps/trip-tick/web/src/components/brand/Logo.tsx
@@ -0,0 +1,9 @@
+export interface LogoProps {
+  className?: string;
+}
+
+export function Logo({ className }: LogoProps) {
+  return (
+    <img src="/icon.png" className={className ?? 'w-12'} alt="Trip Tick icon" />
+  );
+}
diff --git a/apps/trip-tick/web/src/components/lists/ListEditor.tsx b/apps/trip-tick/web/src/components/lists/ListEditor.tsx
@@ -18,6 +18,7 @@ import {
   CollapsibleTrigger,
 } from '@a-type/ui/components/collapsible';
 import { Icon } from '@a-type/ui/components/icon';
+import { H2 } from '@a-type/ui/components/typography';
 
 export interface ListEditorProps {
   list: List;
@@ -27,12 +28,18 @@ export function ListEditor({ list }: ListEditorProps) {
   const { name } = hooks.useWatch(list);
 
   return (
-    <div className="flex flex-col gap-3 md:(flex-row items-start)">
-      <LiveUpdateTextField
-        value={name}
-        onChange={(name) => list.set('name', name)}
-        className="h-auto"
-      />
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <label className="text-sm font-bold" htmlFor="name">
+          List Name
+        </label>
+        <LiveUpdateTextField
+          value={name}
+          onChange={(name) => list.set('name', name)}
+          className="h-auto"
+          id="name"
+        />
+      </div>
       <ListItemsEditor list={list} />
     </div>
   );
@@ -43,21 +50,24 @@ function ListItemsEditor({ list }: { list: List }) {
   hooks.useWatch(items);
 
   return (
-    <ul className="mb-2 mt-0 list-none mx-0 px-0 flex flex-col gap-3 md:flex-1">
-      {items.map((item) => (
-        <li key={item.get('id')}>
-          <ListItemEditor
-            item={item}
-            onDelete={() => {
-              items.removeAll(item);
-            }}
-          />
+    <div>
+      <H2 className="mb-4">Items</H2>
+      <ul className="mb-2 mt-0 list-none mx-0 px-0 flex flex-col gap-3 md:flex-1">
+        {items.map((item) => (
+          <li key={item.get('id')}>
+            <ListItemEditor
+              item={item}
+              onDelete={() => {
+                items.removeAll(item);
+              }}
+            />
+          </li>
+        ))}
+        <li className="self-center justify-self-center">
+          <AddListItemButton list={list} />
         </li>
-      ))}
-      <li className="self-center justify-self-center">
-        <AddListItemButton list={list} />
-      </li>
-    </ul>
+      </ul>
+    </div>
   );
 }
 
@@ -124,7 +134,7 @@ function ListItemEditor({
                   <span>day{perDays === 1 ? '' : 's'}</span>
                 </div>
               ) : (
-                <div className="flex flex-row gap-1 items-center border border-gray-7 rounded-lg border-solid px-6">
+                <div className="flex flex-row gap-1 items-center border border-gray-7 rounded-full border-solid pl-6 pr-1">
                   <span>trip</span>
                   <Button
                     size="icon"
@@ -199,8 +209,8 @@ function ListItemEditor({
       </CollapsibleSimple>
       <CollapsibleSimple open={!expanded} onOpenChange={(v) => setExpanded(!v)}>
         <CollapsibleTrigger asChild>
-          <Button size="small" color="ghost">
-            <Icon name="convert" />
+          <Button size="small" color="ghost" className="text-black">
+            <Icon name="pencil" />
             <span>{shortString}</span>
           </Button>
         </CollapsibleTrigger>

diff --git a/apps/trip-tick/web/src/components/lists/ListsList.tsx b/apps/trip-tick/web/src/components/lists/ListsList.tsx
@@ -76,7 +76,7 @@ function ListsListItemMenu({ list }: { list: List }) {
             ));
           }}
         >
-          Delete
+          Delete list
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

diff --git a/apps/trip-tick/web/src/components/nav/Navigation.tsx b/apps/trip-tick/web/src/components/nav/Navigation.tsx
@@ -9,6 +9,7 @@ import {
 } from '@a-type/ui/components/navBar';
 import { useState } from 'react';
 import { AppPicker, AppPickerNavItem } from '@biscuits/client';
+import { Logo } from '../brand/Logo.jsx';
 
 export interface NavigationProps {}
 
@@ -19,7 +20,13 @@ export function Navigation({}: NavigationProps) {
   const matchLists = pathname.startsWith('/lists');
 
   return (
-    <PageNav className="sm:mt-4">
+    <PageNav className="">
+      <div className="hidden sm:(flex flex-row gap-2 items-center justify-center px-2 py-2 mt-3)">
+        <h1 className="text-md [font-family:'VC_Henrietta_Trial','Noto_Serif',serif] font-normal">
+          Trip Tick
+        </h1>
+        <Logo className="w-12" />
+      </div>
       <NavBarRoot>
         <NavBarItem
           asChild