feat: sign in page.

packages/components/src/icons/mapMarked/mod.tsx

@@ -8,6 +8,7 @@ import type { IconProps } from '../common.js'
 const MapMarked: FC<IconProps> = ({
   onClick,
   className,
+  cursor,
   size = 'medium',
   color = 'black',
   tabIndex = 0
@@ -29,6 +30,7 @@ const MapMarked: FC<IconProps> = ({
   return (
     <Icon
       color={color}
+      cursor={cursor}
       size={size}
       className={className}
       tabIndex={tabIndex}

packages/components/src/icons/signIn/mod.tsx

@@ -0,0 +1,47 @@
+import { useCallback } from 'react'
+
+import { Icon } from '../common.js'
+
+import type { FC, KeyboardEvent } from 'react'
+import type { IconProps } from '../common.js'
+
+const SignIn: FC<IconProps> = ({
+  onClick,
+  className,
+  cursor,
+  size = 'medium',
+  color = 'black',
+  tabIndex = 0
+}) => {
+  const handleOnClick = useCallback(() => {
+    if (typeof onClick === 'function') {
+      onClick()
+    }
+  }, [onClick])
+  const onKeyDown = useCallback(
+    (evt: KeyboardEvent) => {
+      if (evt.code === 'Enter') {
+        handleOnClick()
+      }
+    },
+    [handleOnClick]
+  )
+
+  return (
+    <Icon
+      color={color}
+      cursor={cursor}
+      size={size}
+      className={className}
+      tabIndex={tabIndex}
+      onClick={handleOnClick}
+      onKeyDown={onKeyDown}>
+      <svg viewBox="0 0 512 512">
+        <path d="M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z" />
+      </svg>
+    </Icon>
+  )
+}
+
+export { SignIn }
+export type { IconProps }

packages/components/src/icons/signIn/story.tsx

@@ -0,0 +1,31 @@
+import { SignIn } from './mod.js'
+
+import type { StoryFn } from '@storybook/react'
+
+const Primary: StoryFn<typeof SignIn> = args => {
+  return <SignIn {...args} />
+}
+
+export default {
+  title: 'Icons/SignIn',
+  component: SignIn,
+  args: {
+    outlined: false,
+    size: 'medium',
+    color: '#c1c1c1',
+    tabIndex: 0
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large']
+    },
+    color: {
+      control: 'color'
+    },
+    onClick: {
+      action: 'onClick'
+    }
+  }
+}
+export { Primary }

packages/components/src/icons/signOut/mod.tsx

@@ -0,0 +1,47 @@
+import { useCallback } from 'react'
+
+import { Icon } from '../common.js'
+
+import type { FC, KeyboardEvent } from 'react'
+import type { IconProps } from '../common.js'
+
+const SignOut: FC<IconProps> = ({
+  onClick,
+  className,
+  cursor,
+  size = 'medium',
+  color = 'black',
+  tabIndex = 0
+}) => {
+  const handleOnClick = useCallback(() => {
+    if (typeof onClick === 'function') {
+      onClick()
+    }
+  }, [onClick])
+  const onKeyDown = useCallback(
+    (evt: KeyboardEvent) => {
+      if (evt.code === 'Enter') {
+        handleOnClick()
+      }
+    },
+    [handleOnClick]
+  )
+
+  return (
+    <Icon
+      color={color}
+      cursor={cursor}
+      size={size}
+      className={className}
+      tabIndex={tabIndex}
+      onClick={handleOnClick}
+      onKeyDown={onKeyDown}>
+      <svg viewBox="0 0 512 512">
+        <path d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z" />
+      </svg>
+    </Icon>
+  )
+}
+
+export { SignOut }
+export type { IconProps }

packages/components/src/icons/signOut/story.tsx

@@ -0,0 +1,31 @@
+import { SignOut } from './mod.js'
+
+import type { StoryFn } from '@storybook/react'
+
+const Primary: StoryFn<typeof SignOut> = args => {
+  return <SignOut {...args} />
+}
+
+export default {
+  title: 'Icons/SignOut',
+  component: SignOut,
+  args: {
+    outlined: false,
+    size: 'medium',
+    color: '#c1c1c1',
+    tabIndex: 0
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large']
+    },
+    color: {
+      control: 'color'
+    },
+    onClick: {
+      action: 'onClick'
+    }
+  }
+}
+export { Primary }

packages/ui/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>BusMap</title>
+    <title>Busmap</title>
     <meta
       name="description"
       content="Real-time arrival predictions with route and vehicle locations for bus stops in San Francisco Muni CIS, Toronto Transit Commission, OmniTrans and more." />
@@ -28,6 +28,7 @@
       referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/src/global.css" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <script src="https://accounts.google.com/gsi/client" async></script>
   </head>
   <body>
     <main></main>

packages/ui/src/components/authnCallback.tsx

@@ -0,0 +1,7 @@
+import type { FC } from 'react'
+
+const AuthnCallback: FC = () => {
+  return null
+}
+
+export { AuthnCallback }

packages/ui/src/components/navigation.tsx

@@ -6,9 +6,11 @@ import { Bus } from '@busmap/components/icons/bus'
 import { Cog } from '@busmap/components/icons/cog'
 import { InfoCircle } from '@busmap/components/icons/infoCircle'
 import { Exchange } from '@busmap/components/icons/exchange'
+import { SignIn } from '@busmap/components/icons/signIn'
 import {
   SO,
   SDB,
+  PB10T,
   PB70T,
   PB80T,
   PB30T,
@@ -35,11 +37,11 @@ const Nav = styled.nav<{ mode: Mode }>`
 
   ul {
     margin: 0;
-    padding: 12px 0 0;
+    padding: 6px 0 0;
     list-style: none;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 4px;
     width: 48px;
     height: 100%;
   }
@@ -65,19 +67,19 @@ const Nav = styled.nav<{ mode: Mode }>`
     }
 
     &.active {
-      color: ${({ mode }) => (mode === 'light' ? PB30T : `${PB90T}`)};
+      color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
 
       svg {
-        color: ${({ mode }) => (mode === 'light' ? PB30T : `${PB90T}`)};
+        color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
       }
     }
 
     &:hover {
       cursor: pointer;
-      color: ${({ mode }) => (mode === 'light' ? PB30T : `${PB90T}`)};
+      color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
 
       svg {
-        color: ${({ mode }) => (mode === 'light' ? PB30T : `${PB90T}`)};
+        color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
       }
     }
 
@@ -86,7 +88,7 @@ const Nav = styled.nav<{ mode: Mode }>`
       height: 16px;
     }
 
-    span:last-child {
+    span:nth-of-type(2) {
       display: none;
     }
   }
@@ -108,18 +110,56 @@ const Nav = styled.nav<{ mode: Mode }>`
     }
   }
 
-  li:last-child {
-    margin-top: auto;
+  li:nth-child(2) {
+    margin: 6px 0;
+    border: 1px solid ${({ mode }) => (mode === 'light' ? PB80T : PB50T)};
+    border-right: none;
+    border-left: none;
+    background: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
 
     button {
-      color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
+      padding: 3px 5px;
+      white-space: nowrap;
+      flex-direction: row;
+      justify-content: center;
+      color: ${({ mode }) => (mode === 'light' ? PB70T : PB40T)};
 
-      svg {
+      span {
+        width: auto;
+        height: auto;
+        font-weight: bold;
+
+        &:last-child {
+          width: 10px;
+          height: 10px;
+        }
+      }
+
+      &:hover {
+        svg {
+          color: ${({ mode }) => (mode === 'light' ? PB70T : PB40T)};
+        }
+      }
+    }
+
+    &.active {
+      width: calc(100% + 1px);
+      background: ${({ mode }) => (mode === 'light' ? '#fffc' : `${PB10T}cc`)};
+
+      button {
         color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
+
+        svg {
+          color: ${({ mode }) => (mode === 'light' ? PB30T : PB90T)};
+        }
       }
     }
   }
 
+  li:last-child {
+    margin-top: auto;
+  }
+
   @media (width >= 431px) and (height >= 536px) {
     ul {
       width: 78px;
@@ -131,7 +171,7 @@ const Nav = styled.nav<{ mode: Mode }>`
         height: 24px;
       }
 
-      span:last-child {
+      span:nth-of-type(2) {
         display: block;
       }
     }
@@ -161,25 +201,31 @@ const Navigation: FC = () => {
   return (
     <Nav mode={mode}>
       <ul>
-        <li>
-          <a href="/" title="BusMap" dangerouslySetInnerHTML={{ __html: logoSvg }} />
+        <li title="Busmap">
+          <a href="/" dangerouslySetInnerHTML={{ __html: logoSvg }} />
+        </li>
+        <li title="Sign In" className={page === 'signin' ? 'active' : undefined}>
+          <button data-name="signin" onClick={onClick}>
+            <span>Sign in</span>
+            <SignIn />
+          </button>
         </li>
-        <li title="Nearby Stops">
+        <li title="Nearby">
           <button
             data-name="locate"
             onClick={onClick}
             className={page === 'locate' ? 'active' : undefined}>
             <MapPin />
-            <span>Nearby Stops</span>
+            <span>Nearby</span>
           </button>
         </li>
-        <li title="Bus Selector">
+        <li title="Selector">
           <button
             data-name="select"
             onClick={onClick}
             className={page === 'select' ? 'active' : undefined}>
             <Bus />
-            <span>Bus Selector</span>
+            <span>Selector</span>
           </button>
         </li>
         <li title="Favorites">
@@ -210,7 +256,7 @@ const Navigation: FC = () => {
           </button>
         </li>
         <li>
-          <button onClick={onClickToggle}>
+          <button onClick={onClickToggle} className={!collapsed ? 'active' : undefined}>
             <Exchange />
             <span>{collapsed ? 'Open' : 'Close'}</span>
           </button>

packages/ui/src/components/page.tsx

@@ -17,6 +17,10 @@ const Section = styled.section`
     font-size: 22px;
     margin: 0;
   }
+
+  p {
+    margin: 0;
+  }
 `
 const Page: FC<PageProps> = ({ title, children, className }) => {
   return (