Release/1.3.1

client/src/auth/internet-archive/login-button.tsx

@@ -5,18 +5,29 @@ import { SvgIcon } from 'tapestry-core-client/src/components/lib/svg-icon/index'
 import IALogo from '../../assets/icons/ia-logo-circle-grey.svg?react'
 import { IALoginDialog } from './login-dialog'
 import styles from './styles.module.css'
+import { Breakpoint, useResponsive } from '../../providers/responsive-provider'
 
-export function IALoginButton() {
+interface IALoginButtonProps {
+  isSingleProvider?: boolean
+}
+
+export function IALoginButton({ isSingleProvider = false }: IALoginButtonProps) {
   const [dialogOpen, setDialogOpen] = useState(false)
+  const isStandaloneMobile = useResponsive() <= Breakpoint.SM && isSingleProvider
 
   return (
     <>
       <Button className={styles.iaButton} variant="outline" onClick={() => setDialogOpen(true)}>
         <SvgIcon Icon={IALogo} size={20} />
-        <Text>Continue with Internet Archive</Text>
+        <Text>{isStandaloneMobile ? 'Log in' : 'Continue with Internet Archive'}</Text>
       </Button>
 
-      {dialogOpen && <IALoginDialog onClose={() => setDialogOpen(false)} />}
+      {dialogOpen && (
+        <IALoginDialog
+          onClose={() => setDialogOpen(false)}
+          title={isStandaloneMobile ? 'Log in with Internet Archive' : 'Log In'}
+        />
+      )}
     </>
   )
 }

client/src/auth/internet-archive/login-dialog/index.tsx

@@ -15,6 +15,7 @@ import { auth } from '../..'
 
 interface IALoginDialogProps {
   onClose: () => void
+  title: string
 }
 
 const REASON_MESSAGE_MAP: Record<ErrorReason, string> = {
@@ -23,7 +24,7 @@ const REASON_MESSAGE_MAP: Record<ErrorReason, string> = {
   InvalidIASession: 'Session expired',
 }
 
-export function IALoginDialog({ onClose }: IALoginDialogProps) {
+export function IALoginDialog({ onClose, title }: IALoginDialogProps) {
   const [form] = useState(() => uniqueId('form'))
 
   const [email, setEmail] = useState('')
@@ -59,7 +60,7 @@ export function IALoginDialog({ onClose }: IALoginDialogProps) {
               Internet Archive
             </Tooltip>
           </div>
-          Log In
+          {title}
         </Text>
       }
       cancel={{

client/src/components/select/index.tsx

@@ -45,7 +45,6 @@ export function Select<V>({ value, options, styles, ref, theme, ...props }: Sele
       options={options}
       value={options.find((o) => o.value === value)}
       isSearchable={false}
-      menuPortalTarget={document.body}
       menuPlacement="auto"
       theme={(baseTheme) => {
         const defaultTheme: Theme = merge({}, baseTheme, {
@@ -72,12 +71,12 @@ export function Select<V>({ value, options, styles, ref, theme, ...props }: Sele
           flexWrap: 'initial',
           backgroundColor: 'var(--theme-background-primary)',
           pointerEvents: 'auto',
-          cursor: isDisabled ? 'not-allowed' : baseStyles.cursor,
+          cursor: isDisabled ? 'not-allowed' : 'pointer',
         }),
         menu: (baseStyles) => ({
           ...baseStyles,
           width: 'fit-content',
-          top: '8px',
+          top: 'calc(100% + 8px)',
           whiteSpace: 'nowrap',
           backgroundColor: 'var(--theme-background-primary)',
           boxShadow: '0px 2px 6px 2px rgba(0, 0, 0, 0.10)',

client/src/components/toolbars/import/index.tsx

@@ -45,7 +45,7 @@ export function ImportToolbar({ className }: GlobalMenuProps) {
 
   useKeyboardShortcuts({
     KeyI: () => uploadButtonRef.current?.click(),
-    'meta + KeyK | KeyK': () => selectSubmenu('add-link'),
+    'meta + KeyK | KeyK': () => selectSubmenu('import-from-link'),
     KeyR: openMediaCaptureDialog,
   })
 
@@ -69,18 +69,20 @@ export function ImportToolbar({ className }: GlobalMenuProps) {
       },
     },
     {
-      id: 'add-link',
+      id: 'import-from-link',
       ui: {
         element: (
           <IconButton
-            aria-label="Add link"
+            aria-label="Import from link"
             icon="add_link"
-            onClick={() => selectSubmenu('add-link')}
+            onClick={() => selectSubmenu('import-from-link')}
           />
         ),
         tooltip: {
           side: 'right',
-          children: <ShortcutLabel text="Add link">{shortcutLabel('meta + K')}</ShortcutLabel>,
+          children: (
+            <ShortcutLabel text="Import from link">{shortcutLabel('meta + K')}</ShortcutLabel>
+          ),
         },
       },
       submenu: [

client/src/model/data/utils.ts

@@ -230,7 +230,7 @@ export function fromTapestryDto(
 
 export const itemSizes = {
   actionButton: { width: 350, height: 75 },
-  audio: { width: 300, height: 50 },
+  audio: { width: 400, height: 50 },
   book: { width: 700, height: 500 },
   image: getImageItemSize,
   iiif: getIiifItemSize,

client/src/pages/about-page/about-section/styles.module.css

@@ -13,15 +13,14 @@
 
     .subtitle-quote {
       position: relative;
-      margin-top: 55px;
-      margin-bottom: 60px;
+      margin: 80px 0;
       width: 640px;
 
       @media screen and (width <= 1200px) {
         max-width: 330px;
         padding-top: 20px;
         padding-left: 20px;
-        margin: 20px 0;
+        margin: 45px 0;
         width: auto;
       }
 
@@ -33,7 +32,6 @@
     .subtitle {
       padding-left: 70px;
       font-style: italic;
-      text-shadow: 0 4px var(--color-bright-red);
       margin-bottom: 45px;
     }
 
@@ -63,7 +61,7 @@
         margin-left: var(--big-letter-margin);
 
         .choice-quote {
-          margin-top: 20px;
+          margin-top: 10px;
           padding-bottom: 20px;
           position: relative;
 
@@ -95,7 +93,7 @@
 
     @media screen and (width <= 1200px) {
       .choice-title {
-        margin: 30px 0;
+        margin: 30px 0 15px;
       }
 
       .big-letter {

client/src/pages/about-page/history-section/index.tsx

@@ -9,8 +9,9 @@ function ImageContent() {
   return (
     <>
       <div className={styles.imageContainer}>
-        <ConcreteWall width={45} height={230} top={25} left={-35} rotation={2} />
         <img src={BobArchive} className={styles.imageElement} draggable={false} />
+        <ConcreteWall width="10%" height="66%" top="6%" left="-7%" rotation={2} />
+        <ConcreteWall width="50%" height="13%" top="2.5%" right="-15%" rotation={35} />
       </div>
       <Text component="div" variant="bodySm" className={styles.imageDescription}>
         A portion of Bob Stein's collection.
@@ -26,7 +27,6 @@ export function HistorySection() {
 
   return (
     <div className={styles.root}>
-      <ConcreteWall width={230} height={45} top={57} right={10} rotation={30} />
       <div className={styles.content}>
         {LGOrLess ? (
           <>

client/src/pages/about-page/principles-section/styles.module.css

@@ -18,11 +18,12 @@
 
     .principle-grid {
       display: grid;
-      grid-template-columns: 100px 1fr 200px;
+      grid-template-columns: auto 1fr 200px;
       grid-template-areas:
-        'index title title'
+        'index title icon'
         '. content icon';
       gap: 25px;
+      row-gap: 15px;
 
       @media screen and (width <= 900px) {
         grid-template-columns: 60px 1fr auto;

client/src/pages/about-page/snapshots-section/index.tsx

@@ -35,7 +35,7 @@ const SECOND_SNAPSHOT: TapestryListItem = {
   id: '',
   createdAt: new Date('Mar 21, 2025'),
   updatedAt: new Date('Mar 21, 2025'),
-  title: 'The Encyclopedia Project',
+  title: 'Dominoes by John Ré',
   description:
     'Voyager published this laserdisc in 1991, gathering 15 Music Videos on political subjects + 1000+ photos from 70s underground newspapers',
   isBookmarked: false,

client/src/pages/about-page/snapshots-section/styles.module.css

@@ -1,9 +1,13 @@
 .root {
   padding: 70px var(--section-padding-x);
   background-color: var(--color-section-red);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  display: grid;
+  grid-template-columns: min(100%, 1000px);
+  justify-content: center;
+
+  @media screen and (width <= 1200px) {
+    grid-template-columns: min(100%, 500px);
+  }
 
   .title {
     font-style: italic;
@@ -16,25 +20,17 @@
 
   .title,
   .subtitle {
-    max-width: 600px;
     text-align: center;
   }
 
   .cards {
     margin-top: 30px;
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     gap: 30px;
-    height: 400px;
 
     @media screen and (width <= 1200px) {
-      flex-direction: column;
-      align-items: center;
-      height: unset;
-      max-width: 500px;
-
-      :global(.typography) {
-        font-size: 12px;
-      }
+      grid-template-columns: 1fr;
     }
   }
 }

client/src/pages/about-page/team-section/styles.module.css

@@ -33,11 +33,12 @@
       gap: 25px;
 
       :global(.typography) {
-        font-size: 12px;
+        font-size: 14px;
       }
     }
 
     @media screen and (width <= 600px) {
+      align-self: start;
       grid-template-columns: auto;
     }
   }

client/src/pages/landing-page/events-section/index.tsx

@@ -0,0 +1,58 @@
+import { Text } from 'tapestry-core-client/src/components/lib/text'
+import { LANDING_PAGE_TEXT } from '../../pages-text'
+import EventsString from '../../../assets/images/landing-page/events-string.webp'
+import EventsStringMobile from '../../../assets/images/landing-page/events-string-mobile.webp'
+
+import styles from './styles.module.css'
+import { Button } from 'tapestry-core-client/src/components/lib/buttons'
+import { useRef } from 'react'
+import { Breakpoint, useResponsive } from '../../../providers/responsive-provider'
+
+export function EventsSection() {
+  const { title, content } = LANDING_PAGE_TEXT.events
+
+  const learnMoreRef = useRef<HTMLDivElement>(null)
+
+  const XSOrLess = useResponsive() <= Breakpoint.XS
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.learnMoreContainer}>
+        <Button
+          icon="keyboard_double_arrow_down"
+          variant="secondary"
+          aria-label="Learn more"
+          className={styles.learnMoreButton}
+          onClick={() =>
+            learnMoreRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+          }
+        />
+        <Text component="div" variant="h6" className={styles.learnMoreText} ref={learnMoreRef}>
+          Learn more
+        </Text>
+      </div>
+      <div className={styles.textWrapper}>
+        <Text component="div" variant="h6" className={styles.title}>
+          {title}
+        </Text>
+        <Text component="div" variant="bodySm">
+          {content}
+        </Text>
+      </div>
+      <Button
+        component="a"
+        variant="mono"
+        href="https://luma.com/tapestries"
+        target="_blank"
+        className={styles.eventsButton}
+      >
+        Join a circle
+      </Button>
+      <img
+        src={XSOrLess ? EventsStringMobile : EventsString}
+        className={styles.eventsString}
+        draggable={false}
+      />
+    </div>
+  )
+}