chore: increase switch/radio sizing on mobile

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

@@ -29,6 +29,57 @@ import { PaneLayout } from '@/Controllers/PaneController/PaneLayout'
 
 const DailyEntryModeEnabled = true
 
+const SortIcon = ({ enabled, reverse }: { enabled: boolean; reverse: boolean | undefined }) => {
+  if (!enabled) {
+    return null
+  }
+  return (
+    <Icon
+      type={reverse ? 'arrows-sort-up' : 'arrows-sort-down'}
+      className="h-6 w-6 text-neutral md:h-5 md:w-6"
+      size="custom"
+    />
+  )
+}
+
+const TabButton: FunctionComponent<{
+  label: string
+  mode: PreferenceMode
+  icon?: VectorIconNameOrEmoji
+  currentMode: PreferenceMode
+  setCurrentMode: (mode: PreferenceMode) => void
+}> = ({ mode, label, icon, currentMode, setCurrentMode }) => {
+  const isSelected = currentMode === mode
+
+  return (
+    <button
+      className={classNames(
+        'relative cursor-pointer rounded-full border-2 border-solid border-transparent py-1 px-2 text-mobile-menu-item focus:shadow-none md:py-0 lg:text-sm',
+        isSelected
+          ? 'bg-info text-info-contrast'
+          : 'bg-transparent text-text hover:bg-info-backdrop focus:bg-info-backdrop',
+      )}
+      onClick={() => {
+        setCurrentMode(mode)
+      }}
+    >
+      <div className="flex items-center justify-center">
+        {icon && (
+          <Icon
+            size="custom"
+            type={icon as IconType}
+            className={classNames(
+              'mr-1 h-4.5 w-4.5 cursor-pointer md:h-3.5 md:w-3.5',
+              isSelected ? 'text-info-contrast' : 'text-neutral',
+            )}
+          />
+        )}
+        <div>{label}</div>
+      </div>
+    </button>
+  )
+}
+
 const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
   application,
   isOpen,
@@ -227,39 +278,6 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
     }
   }, [preferences.useTableView, changePreferences, paneController])
 
-  const TabButton: FunctionComponent<{
-    label: string
-    mode: PreferenceMode
-    icon?: VectorIconNameOrEmoji
-  }> = ({ mode, label, icon }) => {
-    const isSelected = currentMode === mode
-
-    return (
-      <button
-        className={classNames(
-          '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 focus:bg-info-backdrop',
-        )}
-        onClick={() => {
-          setCurrentMode(mode)
-        }}
-      >
-        <div className="flex items-center justify-center">
-          {icon && (
-            <Icon
-              size="small"
-              type={icon as IconType}
-              className={classNames('mr-1 cursor-pointer', isSelected ? 'text-info-contrast' : 'text-neutral')}
-            />
-          )}
-          <div>{label}</div>
-        </div>
-      </button>
-    )
-  }
-
   const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
   const isTableViewEnabled = Boolean(isFilesSmartView || preferences.useTableView)
   const shouldHideNonApplicableOptions = isTableViewEnabled && !isMobileScreen
@@ -269,8 +287,14 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
       <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" />
-          <TabButton label={selectedTag.title} icon={selectedTag.iconString} mode="tag" />
+          <TabButton label="Global" mode="global" currentMode={currentMode} setCurrentMode={setCurrentMode} />
+          <TabButton
+            label={selectedTag.title}
+            icon={selectedTag.iconString}
+            mode="tag"
+            currentMode={currentMode}
+            setCurrentMode={setCurrentMode}
+          />
         </div>
         {currentMode === 'tag' && (
           <button className="text-base lg:text-sm" onClick={resetTagPreferences}>
@@ -301,15 +325,9 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
         onClick={toggleSortByDateModified}
         checked={preferences.sortBy === CollectionSort.UpdatedAt}
       >
-        <div className="ml-2 flex flex-grow items-center justify-between">
+        <div className="ml-1 flex flex-grow items-center justify-between md:ml-2">
           <span>Date modified</span>
-          {preferences.sortBy === CollectionSort.UpdatedAt ? (
-            preferences.sortReverse ? (
-              <Icon type="arrows-sort-up" className="text-neutral" />
-            ) : (
-              <Icon type="arrows-sort-down" className="text-neutral" />
-            )
-          ) : null}
+          <SortIcon enabled={preferences.sortBy === CollectionSort.UpdatedAt} reverse={preferences.sortReverse} />
         </div>
       </MenuRadioButtonItem>
       <MenuRadioButtonItem
@@ -318,15 +336,9 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
         onClick={toggleSortByCreationDate}
         checked={preferences.sortBy === CollectionSort.CreatedAt}
       >
-        <div className="ml-2 flex flex-grow items-center justify-between">
+        <div className="ml-1 flex flex-grow items-center justify-between md:ml-2">
           <span>Creation date</span>
-          {preferences.sortBy === CollectionSort.CreatedAt ? (
-            preferences.sortReverse ? (
-              <Icon type="arrows-sort-up" className="text-neutral" />
-            ) : (
-              <Icon type="arrows-sort-down" className="text-neutral" />
-            )
-          ) : null}
+          <SortIcon enabled={preferences.sortBy === CollectionSort.CreatedAt} reverse={preferences.sortReverse} />
         </div>
       </MenuRadioButtonItem>
       <MenuRadioButtonItem
@@ -335,15 +347,9 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
         onClick={toggleSortByTitle}
         checked={preferences.sortBy === CollectionSort.Title}
       >
-        <div className="ml-2 flex flex-grow items-center justify-between">
+        <div className="ml-1 flex flex-grow items-center justify-between md:ml-2">
           <span>Title</span>
-          {preferences.sortBy === CollectionSort.Title ? (
-            preferences.sortReverse ? (
-              <Icon type="arrows-sort-up" className="text-neutral" />
-            ) : (
-              <Icon type="arrows-sort-down" className="text-neutral" />
-            )
-          ) : null}
+          <SortIcon enabled={preferences.sortBy === CollectionSort.Title} reverse={preferences.sortReverse} />
         </div>
       </MenuRadioButtonItem>
       <>

packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx

@@ -24,7 +24,7 @@ const MenuSwitchButtonItem = forwardRef(
           disabled={disabled}
           ref={ref}
           className={classNames(
-            'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 md:py-1.5',
+            'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5',
             'text-left text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none',
             'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
             className,

packages/web/src/javascripts/Components/Radio/RadioIndicator.tsx

@@ -6,9 +6,9 @@ type Props = {
 
 const RadioIndicator = ({ checked, className, disabled }: Props) => (
   <div
-    className={`relative h-4 w-4 rounded-full border-2 border-solid ${disabled ? 'opacity-50' : ''} ${
+    className={`relative h-5 w-5 rounded-full border-2 border-solid md:h-4 md:w-4 ${disabled ? 'opacity-50' : ''} ${
       checked
-        ? 'border-info after:absolute after:top-1/2 after:left-1/2 after:h-2 after:w-2 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:bg-info'
+        ? 'border-info after:absolute after:top-1/2 after:left-1/2 after:h-3 after:w-3 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:bg-info'
         : 'border-passive-1'
     } ${className}`}
   ></div>

packages/web/src/javascripts/Components/Switch/Switch.tsx

@@ -19,7 +19,7 @@ const Switch = ({
   return (
     <label
       className={classNames(
-        'relative box-content inline-block h-4.5 w-8 flex-shrink-0 cursor-pointer rounded-full border-2 border-solid border-transparent bg-clip-padding transition-colors duration-150 ease-out',
+        'relative box-content inline-block h-8 w-13 flex-shrink-0 cursor-pointer rounded-full border-2 border-solid border-transparent bg-clip-padding transition-colors duration-150 ease-out md:h-4.5 md:w-8',
         'ring-2 ring-transparent focus-within:border-default focus-within:shadow-none focus-within:outline-none focus-within:ring-info',
         disabled ? 'opacity-50' : '',
         isActive ? 'bg-info' : 'bg-neutral',
@@ -37,8 +37,8 @@ const Switch = ({
       </VisuallyHidden>
       <div
         className={classNames(
-          'absolute left-[2px] top-1/2 block h-3.5 w-3.5 -translate-y-1/2 rounded-full bg-default transition-transform duration-150 ease-out',
-          checked ? 'translate-x-[calc(2rem-1.125rem)]' : '',
+          'absolute left-[0.275rem] top-1/2 block h-6 w-6 -translate-y-1/2 rounded-full bg-default transition-transform duration-150 ease-out md:left-[2px] md:h-3.5 md:w-3.5',
+          checked ? 'translate-x-[calc(3.25rem-1.5rem-0.5rem)] md:translate-x-[calc(2rem-1.125rem)]' : '',
         )}
       />
     </label>