fix(mobile): increase font sizes and other mobile-centric improvements (#1907)

packages/web/src/javascripts/Components/ContentListView/Calendar/InfiniteCalendar.tsx

@@ -28,7 +28,7 @@ const PageSize = 2
 
 const InfiniteCalendar = forwardRef<InfiniteCalendarInterface, Props>(
   ({ activities, onDateSelect, selectedDay, className }: Props, ref) => {
-    const [expanded, setExpanded] = useState(true)
+    const [expanded, setExpanded] = useState(isMobileScreen() ? false : true)
     const [restoreScrollAfterExpand, setRestoreScrollAfterExpand] = useState(false)
     const scrollerRef = useRef<InfiniteScrollerInterface | null>(null)
     const previousSelectedDay = usePrevious(selectedDay)

packages/web/src/javascripts/Components/ContentListView/Daily/DailyItemCell.tsx

@@ -9,6 +9,7 @@ import { ListableContentItem } from '../Types/ListableContentItem'
 import { DailyItemsDay } from './DailyItemsDaySection'
 import { ListItemTitle } from '../ListItemTitle'
 import { EmptyPlaceholderBars } from './EmptyPlaceholderBars'
+import { isMobileScreen } from '@/Utils'
 
 type DaySquareProps = {
   day: number
@@ -22,7 +23,7 @@ const DaySquare: FunctionComponent<DaySquareProps> = ({ day, hasActivity, weekda
       <div
         className={`${
           hasActivity ? 'bg-danger text-danger-contrast' : 'bg-neutral text-neutral-contrast'
-        } h-15 w-18 rounded p-2 text-center`}
+        } h-19 w-18 rounded p-2 text-center`}
       >
         <div className="text-sm font-bold">{weekday}</div>
         <div className="text-4xl font-bold">{day}</div>
@@ -72,7 +73,7 @@ export const DailyItemCell = forwardRef(
               {!item && (
                 <div className="w-full">
                   <div className="break-word mr-2 font-semibold">{formatDateAndTimeForNote(section.date, false)}</div>
-                  <EmptyPlaceholderBars rows={4} />
+                  <EmptyPlaceholderBars rows={isMobileScreen() ? 2 : 4} />
                 </div>
               )}
             </div>

packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx

@@ -1,5 +1,5 @@
 import { WebApplication } from '@/Application/Application'
-import { memo, useCallback, useRef, useState } from 'react'
+import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import Icon from '../../Icon/Icon'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import Popover from '@/Components/Popover/Popover'
@@ -8,6 +8,7 @@ import { NavigationMenuButton } from '@/Components/NavigationMenu/NavigationMenu
 import { IconType, isTag } from '@standardnotes/snjs'
 import RoundIconButton from '@/Components/Button/RoundIconButton'
 import { AnyTag } from '@/Controllers/Navigation/AnyTagType'
+import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 
 type Props = {
   application: WebApplication
@@ -34,30 +35,18 @@ const ContentListHeader = ({
   const displayOptionsButtonRef = useRef<HTMLButtonElement>(null)
   const isDailyEntry = isTag(selectedTag) && selectedTag.isDailyEntry
 
+  const matchesMd = useMediaQuery(MediaQueryBreakpoints.md)
+  const isTouchScreen = !useMediaQuery(MediaQueryBreakpoints.pointerFine)
+  const isTablet = matchesMd && isTouchScreen
+
   const [showDisplayOptionsMenu, setShowDisplayOptionsMenu] = useState(false)
 
   const toggleDisplayOptionsMenu = useCallback(() => {
     setShowDisplayOptionsMenu((show) => !show)
   }, [])
 
-  return (
-    <div className="section-title-bar-header items-start gap-1 overflow-hidden">
-      <NavigationMenuButton />
-      <div className="flex min-w-0 flex-grow flex-col break-words">
-        <div className={`flex min-w-0 flex-grow flex-row ${!optionsSubtitle ? 'items-center' : ''}`}>
-          {icon && (
-            <Icon
-              type={icon as IconType}
-              size={'large'}
-              className={`ml-0.5 mr-1.5 text-neutral ${optionsSubtitle ? 'mt-1' : ''}`}
-            />
-          )}
-          <div className="flex min-w-0 flex-grow flex-col break-words">
-            <div className="text-lg font-semibold text-text">{panelTitle}</div>
-            {optionsSubtitle && <div className="text-xs text-passive-0">{optionsSubtitle}</div>}
-          </div>
-        </div>
-      </div>
+  const OptionsMenu = useMemo(() => {
+    return (
       <div className="flex">
         <div className="relative" ref={displayOptionsContainerRef}>
           <RoundIconButton
@@ -83,21 +72,90 @@ const ContentListHeader = ({
             />
           </Popover>
         </div>
-        <button
-          className={classNames(
-            'absolute bottom-6 right-6 z-editor-title-bar ml-3 flex h-13 w-13 cursor-pointer items-center',
-            `justify-center rounded-full border border-solid border-transparent ${
-              isDailyEntry ? 'bg-danger text-danger-contrast' : 'bg-info text-info-contrast'
-            }`,
-            'hover:brightness-125 md:static md:h-8 md:w-8',
-          )}
-          title={addButtonLabel}
-          aria-label={addButtonLabel}
-          onClick={addNewItem}
-        >
-          <Icon type="add" size="custom" className="h-6 w-6 md:h-5 md:w-5" />
-        </button>
       </div>
+    )
+  }, [
+    showDisplayOptionsMenu,
+    toggleDisplayOptionsMenu,
+    displayOptionsButtonRef,
+    application,
+    isFilesSmartView,
+    selectedTag,
+  ])
+
+  const AddButton = useMemo(() => {
+    return (
+      <button
+        className={classNames(
+          'fixed bottom-6 right-6 z-editor-title-bar ml-3 flex h-15 w-15 cursor-pointer items-center',
+          `justify-center rounded-full border border-solid border-transparent ${
+            isDailyEntry ? 'bg-danger text-danger-contrast' : 'bg-info text-info-contrast'
+          }`,
+          'hover:brightness-125 md:static md:h-8 md:w-8',
+        )}
+        title={addButtonLabel}
+        aria-label={addButtonLabel}
+        onClick={addNewItem}
+      >
+        <Icon type="add" size="custom" className="h-8 w-8 md:h-5 md:w-5" />
+      </button>
+    )
+  }, [addButtonLabel, addNewItem, isDailyEntry])
+
+  const FolderName = useMemo(() => {
+    return (
+      <div className="flex min-w-0 flex-grow flex-col break-words pt-1 lg:pt-0">
+        <div className={`flex min-w-0 flex-grow flex-row ${!optionsSubtitle ? 'items-center' : ''}`}>
+          {icon && (
+            <Icon
+              type={icon as IconType}
+              size={'custom'}
+              className={` ml-0.5 mr-1.5 h-7 w-7 text-2xl text-neutral lg:h-6 lg:w-6 lg:text-lg ${
+                optionsSubtitle ? 'mt-1' : ''
+              }`}
+            />
+          )}
+          <div className="flex min-w-0 flex-grow flex-col break-words">
+            <div className=" text-2xl font-semibold text-text md:text-lg">{panelTitle}</div>
+            {optionsSubtitle && <div className="text-xs text-passive-0">{optionsSubtitle}</div>}
+          </div>
+        </div>
+      </div>
+    )
+  }, [optionsSubtitle, icon, panelTitle])
+
+  const PhoneAndDesktopLayout = useMemo(() => {
+    return (
+      <div className={'flex w-full justify-between md:flex'}>
+        <NavigationMenuButton />
+        {FolderName}
+        <div className="flex">
+          {OptionsMenu}
+          {AddButton}
+        </div>
+      </div>
+    )
+  }, [OptionsMenu, AddButton, FolderName])
+
+  const TabletLayout = useMemo(() => {
+    return (
+      <div className={'w-full flex-col'}>
+        <div className="mb-2 flex justify-between">
+          <NavigationMenuButton />
+          <div className="flex">
+            {OptionsMenu}
+            {AddButton}
+          </div>
+        </div>
+        {FolderName}
+      </div>
+    )
+  }, [OptionsMenu, AddButton, FolderName])
+
+  return (
+    <div className="section-title-bar-header items-start gap-1 overflow-hidden">
+      {!isTablet && PhoneAndDesktopLayout}
+      {isTablet && TabletLayout}
     </div>
   )
 }

packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx

@@ -23,9 +23,8 @@ import { PreferenceMode } from './PreferenceMode'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '@/Components/Icon/PremiumFeatureIcon'
 import Button from '@/Components/Button/Button'
 import { classNames } from '@/Utils/ConcatenateClassNames'
-import { isDev } from '@/Utils'
 
-const DailyEntryModeEnabled = isDev
+const DailyEntryModeEnabled = true
 
 const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
   closeDisplayOptionsMenu,
@@ -180,7 +179,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
     return (
       <button
         className={classNames(
-          'relative cursor-pointer rounded-full border-2 border-solid border-transparent px-2 text-sm focus:shadow-none',
+          'relative cursor-pointer rounded-full border-2 border-solid border-transparent px-2 text-base focus:shadow-none lg:text-sm',
           isSelected ? 'bg-info text-info-contrast' : 'bg-transparent text-text hover:bg-info-backdrop',
         )}
         onClick={() => {
@@ -209,7 +208,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
       </div>
       <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">
         {DailyEntryModeEnabled &&
-          'Create powerful workflows and organizational layouts with per-tag display preferences and the all-new Daily Notebook feature.'}
+          'Create powerful workflows and organizational layouts with per-tag display preferences and the all-new Daily Notebook calendar layout.'}
         {!DailyEntryModeEnabled &&
           'Create powerful workflows and organizational layouts with per-tag display preferences.'}
       </p>
@@ -226,20 +225,24 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
 
   return (
     <Menu className="text-sm" a11yLabel="Notes list options menu" closeMenu={closeDisplayOptionsMenu} isOpen={isOpen}>
-      <div className="my-1 px-3 text-xs font-semibold uppercase text-text">Preferences for</div>
+      <div className="my-1 px-3 text-base font-semibold uppercase text-text lg:text-xs">Preferences for</div>
       <div className={classNames('mt-1.5 flex w-full justify-between px-3', !controlsDisabled && 'mb-3')}>
         <div className="flex items-center gap-1.5">
           <TabButton label="Global" mode="global" />
           {!isSystemTag && <TabButton label={selectedTag.title} icon={selectedTag.iconString} mode="tag" />}
         </div>
-        {currentMode === 'tag' && <button onClick={resetTagPreferences}>Reset</button>}
+        {currentMode === 'tag' && (
+          <button className="text-base lg:text-sm" onClick={resetTagPreferences}>
+            Reset
+          </button>
+        )}
       </div>
 
       {controlsDisabled && <NoSubscriptionBanner />}
 
       <MenuItemSeparator />
 
-      <div className="my-1 px-3 text-xs font-semibold uppercase text-text">Sort by</div>
+      <div className="my-1 px-3 text-base font-semibold uppercase text-text lg:text-xs">Sort by</div>
       <MenuItem
         disabled={controlsDisabled || isDailyEntry}
         className="py-2"
@@ -295,7 +298,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
         </div>
       </MenuItem>
       <MenuItemSeparator />
-      <div className="px-3 py-1 text-xs font-semibold uppercase text-text">View</div>
+      <div className="px-3 py-1 text-base font-semibold uppercase text-text lg:text-xs">View</div>
       {!isFilesSmartView && (
         <MenuItem
           disabled={controlsDisabled}
@@ -335,7 +338,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
         Show icon
       </MenuItem>
       <MenuItemSeparator />
-      <div className="px-3 py-1 text-xs font-semibold uppercase text-text">Other</div>
+      <div className="px-3 py-1 text-base font-semibold uppercase text-text lg:text-xs">Other</div>
       <MenuItem
         disabled={controlsDisabled}
         type={MenuItemType.SwitchButton}
@@ -384,7 +387,12 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
             onChange={toggleEntryMode}
           >
             <div className="flex flex-col pr-5">
-              <div className="text-xs font-semibold uppercase text-text">Daily Notebook</div>
+              <div className="flex flex-row items-center">
+                <div className="text-base font-semibold uppercase text-text lg:text-xs">Daily Notebook</div>
+                <div className="ml-2 rounded bg-success px-1.5 py-[1px] text-[10px] font-bold text-success-contrast">
+                  Experimental
+                </div>
+              </div>
               <div className="mt-1">Capture new notes daily with a calendar-based layout</div>
             </div>
           </MenuItem>

packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx

@@ -206,9 +206,9 @@ const NewNotePreferences: FunctionComponent<Props> = ({
 
   return (
     <div className="my-1 px-3 pb-2 pt-1">
-      <div className="text-xs font-semibold uppercase text-text">New Note Defaults</div>
+      <div className="text-base font-semibold uppercase text-text lg:text-xs">New Note Defaults</div>
       <div>
-        <div className="mt-3">Note Type</div>
+        <div className="mt-3 text-mobile-menu-item md:text-menu-item">Note Type</div>
         <div className="mt-2">
           <Dropdown
             portal={false}
@@ -223,7 +223,7 @@ const NewNotePreferences: FunctionComponent<Props> = ({
         </div>
       </div>
       <div>
-        <div className="mt-3">Title Format</div>
+        <div className="mt-3 text-mobile-menu-item md:text-menu-item">Title Format</div>
         <div className="mt-2">
           <Dropdown
             portal={false}
@@ -249,10 +249,11 @@ const NewNotePreferences: FunctionComponent<Props> = ({
               spellCheck={false}
             />
           </div>
-          <div className="mt-2">
-            <span className="font-bold">Preview:</span> {dayjs().format(customNoteTitleFormat)}
+          <div className="mt-3 text-neutral">
+            <span className="font-bold">Preview: </span>
+            <em>{dayjs().format(customNoteTitleFormat)}</em>
           </div>
-          <div className="mt-1">
+          <div className="mt-2 text-neutral">
             <a
               className="underline"
               href={HelpPageUrl}
@@ -267,7 +268,7 @@ const NewNotePreferences: FunctionComponent<Props> = ({
             >
               Options
             </a>
-            . Use <code>[]</code> to escape date-time formatting.
+            . Use <code>[]</code> to escape formatting.
           </div>
         </div>
       )}

packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx

@@ -18,12 +18,12 @@ const ListItemFlagIcons: FunctionComponent<Props> = ({ item, hasFiles = false })
     <div className="flex items-start border-b border-solid border-border p-4 pl-0">
       {item.locked && (
         <span className="flex items-center" title="Editing Disabled">
-          <Icon ariaLabel="Editing Disabled" type="pencil-off" className="text-info" size="small" />
+          <Icon ariaLabel="Editing Disabled" type="pencil-off" className="text-info" size="medium" />
         </span>
       )}
       {item.trashed && (
         <span className="ml-1.5 flex items-center" title="Trashed">
-          <Icon ariaLabel="Trashed" type="trash-filled" className="text-danger" size="small" />
+          <Icon ariaLabel="Trashed" type="trash-filled" className="text-danger" size="medium" />
         </span>
       )}
       {item.archived && (
@@ -33,17 +33,17 @@ const ListItemFlagIcons: FunctionComponent<Props> = ({ item, hasFiles = false })
       )}
       {item.pinned && (
         <span className="ml-1.5 flex items-center" title="Pinned">
-          <Icon ariaLabel="Pinned" type="pin-filled" className="text-info" size="small" />
+          <Icon ariaLabel="Pinned" type="pin-filled" className="text-info" size="medium" />
         </span>
       )}
       {hasFiles && (
         <span className="ml-1.5 flex items-center" title="Files">
-          <Icon ariaLabel="Files" type="attachment-file" className="text-info" size="small" />
+          <Icon ariaLabel="Files" type="attachment-file" className="text-info" size="medium" />
         </span>
       )}
       {item.starred && (
         <span className="ml-1.5 flex items-center" title="Starred">
-          <Icon ariaLabel="Starred" type="star-filled" className="text-warning" size="small" />
+          <Icon ariaLabel="Starred" type="star-filled" className="text-warning" size="medium" />
         </span>
       )}
     </div>

packages/web/src/javascripts/Components/ContentListView/ListItemMetadata.tsx

@@ -20,7 +20,7 @@ const ListItemMetadata: FunctionComponent<Props> = ({ item, hideDate, sortBy })
   }
 
   return (
-    <div className="leading-1.4 mt-1 text-xs opacity-50">
+    <div className="leading-1.4 mt-1 text-sm opacity-50 lg:text-xs">
       {item.protected && <span>Protected {hideDate ? '' : ' • '}</span>}
       {!hideDate && showModifiedDate && <span>Modified {item.updatedAtString || 'Now'}</span>}
       {!hideDate && !showModifiedDate && <span>{item.createdAtString || 'Now'}</span>}

packages/web/src/javascripts/Components/ContentListView/ListItemNotePreviewText.tsx

@@ -14,7 +14,7 @@ const ListItemNotePreviewText: FunctionComponent<Props> = ({ item, hidePreview,
   }
 
   return (
-    <div className={`overflow-hidden overflow-ellipsis text-sm ${item.archived ? 'opacity-60' : ''}`}>
+    <div className={`overflow-hidden overflow-ellipsis text-base lg:text-sm ${item.archived ? 'opacity-60' : ''}`}>
       {item.preview_html && (
         <div
           className="my-1"

packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx

@@ -13,7 +13,7 @@ const ListItemTags: FunctionComponent<Props> = ({ hideTags, tags }) => {
   }
 
   return (
-    <div className="mt-1.5 flex flex-wrap gap-2 text-xs">
+    <div className="mt-1.5 flex flex-wrap gap-2 text-sm lg:text-xs">
       {tags.map((tag) => (
         <span
           className="inline-flex items-center rounded-sm bg-passive-4-opacity-variant py-1 px-1.5 text-foreground"

packages/web/src/javascripts/Components/ContentListView/ListItemTitle.tsx

@@ -3,8 +3,12 @@ import { ListableContentItem } from './Types/ListableContentItem'
 
 export const ListItemTitle: FunctionComponent<{ item: ListableContentItem }> = ({ item }) => {
   return (
-    <div className="flex items-start justify-between overflow-hidden text-base font-semibold leading-[1.3]">
-      <div className={`break-word mr-2 ${item.archived ? 'opacity-60' : ''}`}>{item.title}</div>
+    <div
+      className={`break-word mr-2 flex items-start justify-between overflow-hidden text-lg font-semibold leading-[1.3] lg:text-base lg:leading-[1.3] ${
+        item.archived ? 'opacity-60' : ''
+      }`}
+    >
+      {item.title}
     </div>
   )
 }