refactor: landing ux.

package.json

@@ -23,7 +23,8 @@
     "lint": "npm run lint:tests && npm run lint --workspaces",
     "lint:tests": "eslint . tests --ext .ts,.tsx --max-warnings 0",
     "build:deps": "npm run build -w @busmap/components && npm run build -w @busmap/common",
-    "test": "playwright test --reporter=list"
+    "test": "playwright test --reporter=list",
+    "test:local": "playwright test --project=chromium"
   },
   "devDependencies": {
     "@playwright/test": "^1.40.1",

packages/components/src/alert/mod.tsx

@@ -10,21 +10,37 @@ interface AlertProps {
   children: ReactNode
   icon?: ReactNode
   fullWidth?: boolean
+  fontSize?: string
   onClose?: (evt: SyntheticEvent | Event | CustomEvent) => void
 }
 type AlertRef = HTMLDivElement
 
-const AlertBase = styled(MuiAlert)<{ $fullWidth: boolean }>`
+const AlertBase = styled(MuiAlert)<{ $fullWidth: boolean; $fontSize: string }>`
   &.MuiAlert-root {
     width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
 
     .MuiAlert-message {
       width: 100%;
+      font-size: ${({ $fontSize }) => $fontSize};
+    }
+
+    .MuiAlert-action {
+      .MuiSvgIcon-root {
+        font-size: 20px;
+      }
     }
   }
 `
 const Alert: FC<AlertProps> = forwardRef<AlertRef, AlertProps>(function Alert(
-  { children, icon, onClose, type = 'info', variant = 'standard', fullWidth = false },
+  {
+    children,
+    icon,
+    onClose,
+    type = 'info',
+    variant = 'standard',
+    fullWidth = false,
+    fontSize = '14px'
+  },
   ref
 ) {
   return (
@@ -33,6 +49,7 @@ const Alert: FC<AlertProps> = forwardRef<AlertRef, AlertProps>(function Alert(
       severity={type}
       variant={variant}
       icon={icon}
+      $fontSize={fontSize}
       $fullWidth={fullWidth}
       onClose={onClose}>
       {children}

packages/components/src/alert/story.tsx

@@ -61,7 +61,8 @@ export default {
   args: {
     children: 'An alert message',
     type: 'info',
-    variant: 'standard'
+    variant: 'standard',
+    fontSize: '0.875rem'
   },
   argTypes: {
     type: {

packages/components/src/toast/mod.tsx

@@ -34,7 +34,11 @@ const EVENT_NAME = 'busmap-toaster'
 const toast = (props: ToasterProps) => {
   window.dispatchEvent(new CustomEvent(EVENT_NAME, { detail: props }))
 }
-const Toaster: FC<{ anchor?: Positions; kind?: Variant }> = ({ anchor, kind }) => {
+const Toaster: FC<{ anchor?: Positions; kind?: Variant; fontSize?: string }> = ({
+  anchor,
+  kind,
+  fontSize = '14px'
+}) => {
   const [{ open, type, variant, message, position, timeout }, setState] =
     useState(defaultState)
   const onClose = useCallback(
@@ -72,6 +76,7 @@ const Toaster: FC<{ anchor?: Positions; kind?: Variant }> = ({ anchor, kind }) =
     <Snackbar open={open} autoHideDuration={timeout} anchorOrigin={pos} onClose={onClose}>
       <Alert
         type={type ?? 'info'}
+        fontSize={fontSize}
         variant={variant ?? kind ?? 'standard'}
         onClose={onClose}>
         {message ?? ''}

packages/components/src/tooltip/mod.tsx

@@ -8,10 +8,14 @@ interface TooltipProps {
   className?: string
   children: ReactNode
   title: string
+  fontSize?: string
   placement?: 'top' | 'bottom' | 'right' | 'left'
   underline?: UnderlineStyle
 }
 
+const Tip = styled.span<{ $fontSize: string }>`
+  font-size: ${({ $fontSize }) => $fontSize};
+`
 const Wrap = styled.div<{ underline: UnderlineStyle }>`
   text-decoration: ${({ underline }) => (underline ? `underline ${underline}` : 'none')};
 `
@@ -20,10 +24,15 @@ const Tooltip: FC<TooltipProps> = ({
   children,
   underline = 'dotted',
   placement = 'top',
+  fontSize = '12px',
   title = ''
 }) => {
   return (
-    <MuiTooltip title={title} placement={placement} className={className}>
+    <MuiTooltip
+      describeChild
+      title={<Tip $fontSize={fontSize}>{title}</Tip>}
+      placement={placement}
+      className={className}>
       <Wrap underline={underline}>{children}</Wrap>
     </MuiTooltip>
   )

packages/components/src/tooltip/story.tsx

@@ -25,7 +25,8 @@ export default {
   args: {
     title: 'Story title',
     placement: 'top',
-    underline: 'dashed'
+    underline: 'dashed',
+    fontSize: '12px'
   },
   argTypes: {
     placement: {

packages/ui/src/components/busmap.tsx

@@ -1,60 +1,99 @@
+import styled from 'styled-components'
+
 import { Page } from './page.js'
+import { PageTabButton } from './pageTabButton.js'
 
 import type { FC } from 'react'
 
+const Section = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`
 const BusmapPage: FC = () => {
   return (
-    <Page title="About">
+    <Page title="Welcome">
       <p>
         Busmap provides real-time arrival and departure times for vehicles servicing bus
-        stops along routes in San Francisco Muni CIS, Toronto Transit Commission,
-        OmniTrans, and other transit agencies across North and South America.
-      </p>
-      <p>
-        Busmap is a public, open source project{' '}
-        <a href="https://github.com/morganney/busmap" target="_blank" rel="noreferrer">
-          hosted on GitHub
-        </a>{' '}
-        and powered by the{' '}
-        <a
-          href="https://retro.umoiq.com/xmlFeedDocs/NextBusXMLFeed.pdf"
-          target="_blank"
-          rel="noreferrer">
-          UMO public XML feed
-        </a>{' '}
-        and{' '}
-        <a href="http://restbus.info/" target="_blank" rel="noreferrer">
-          <code>restbus</code>
+        stops along routes in{' '}
+        <a href="https://www.sfmta.com/" target="_blank" rel="noreferrer">
+          San Francisco Muni CIS
         </a>
-        .{' '}
-        <a
-          href="https://github.com/morganney/busmap/pulls"
-          target="_blank"
-          rel="noreferrer">
-          Pull requests
+        ,{' '}
+        <a href="https://www.ttc.ca/" target="_blank" rel="noreferrer">
+          Toronto Transit Commission
         </a>
         ,{' '}
-        <a
-          href="https://github.com/morganney/busmap/discussions"
-          target="_blank"
-          rel="noreferrer">
-          feedback
-        </a>{' '}
-        and{' '}
-        <a
-          href="https://github.com/morganney/busmap/issues"
-          target="_blank"
-          rel="noreferrer">
-          issues or bugs
-        </a>{' '}
-        are welcome.
-      </p>
-      <p>
-        Maintained with ❤️ by{' '}
-        <a href="https://github.com/morganney" target="_blank" rel="noreferrer">
-          morganney
+        <a href="https://omnitrans.org/" target="_blank" rel="noreferrer">
+          OmniTrans
         </a>
+        , and other transit agencies across North and South America.
       </p>
+      <Section>
+        <h2>Finding Your Stop</h2>
+        <p>
+          To find your desired stop, you can start with the{' '}
+          <PageTabButton page="select">Selector</PageTabButton> tab to find a transit
+          agency, route, direction, and stop that fits your itinerary. Alternatively, you
+          can use the <PageTabButton page="locate">Nearby</PageTabButton> tab where you
+          will be prompted to permit your device to share its geolocation with Busmap, and
+          a list of the nearest stops for currently running transit agencies will be
+          displayed.
+        </p>
+        <p>
+          From either option, you can favorite the stop by clicking the star ⭐ icon, and
+          a bookmark will be added to the{' '}
+          <PageTabButton page="favorites">Favorites</PageTabButton> tab.
+        </p>
+      </Section>
+      <Section>
+        <h2>About</h2>
+        <p>
+          Busmap is a public, open source project{' '}
+          <a href="https://github.com/morganney/busmap" target="_blank" rel="noreferrer">
+            hosted on GitHub
+          </a>{' '}
+          and powered by the{' '}
+          <a
+            href="https://retro.umoiq.com/xmlFeedDocs/NextBusXMLFeed.pdf"
+            target="_blank"
+            rel="noreferrer">
+            UMO public XML feed
+          </a>{' '}
+          and{' '}
+          <a href="http://restbus.info/" target="_blank" rel="noreferrer">
+            <code>restbus</code>
+          </a>
+          .{' '}
+          <a
+            href="https://github.com/morganney/busmap/pulls"
+            target="_blank"
+            rel="noreferrer">
+            Pull requests
+          </a>
+          ,{' '}
+          <a
+            href="https://github.com/morganney/busmap/discussions"
+            target="_blank"
+            rel="noreferrer">
+            feedback
+          </a>{' '}
+          and{' '}
+          <a
+            href="https://github.com/morganney/busmap/issues"
+            target="_blank"
+            rel="noreferrer">
+            issues or bugs
+          </a>{' '}
+          are welcome.
+        </p>
+        <p>
+          Maintained with ❤️ by{' '}
+          <a href="https://github.com/morganney" target="_blank" rel="noreferrer">
+            morganney
+          </a>
+        </p>
+      </Section>
     </Page>
   )
 }