chore(shared): Mobile tweaks

sites/shared/components/icons.mjs

@@ -401,6 +401,12 @@ export const MenuIcon = (props) => (
   </IconWrapper>
 )
 
+export const MenuAltIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
+  </IconWrapper>
+)
+
 export const MsetIcon = (props) => (
   <IconWrapper {...props}>
     <path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
@@ -719,3 +725,15 @@ export const YouTubeIcon = (props) => (
     <path d="M 18.723199,4.1090377 H 5.2768074 C 2.638649,4.1090377 0.5,6.2476867 0.5,8.8858457 v 6.7217683 c 0,2.638165 2.138649,4.776807 4.7768074,4.776807 H 18.723199 c 2.638159,0 4.776801,-2.138642 4.776801,-4.776807 V 8.8858457 c 0,-2.638159 -2.138642,-4.776808 -4.776801,-4.776808 z M 15.492674,12.57377 9.2033594,15.573394 C 9.0357741,15.653314 8.8421952,15.531134 8.8421952,15.345486 V 9.1587477 c 0,-0.188291 0.1986681,-0.310321 0.3666026,-0.22521 l 6.2893152,3.1871143 c 0.186996,0.09475 0.18375,0.36291 -0.0054,0.453118 z" />
   </IconWrapper>
 )
+
+export const ZoomInIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6" />
+  </IconWrapper>
+)
+
+export const ZoomOutIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM13.5 10.5h-6" />
+  </IconWrapper>
+)

sites/shared/components/workbench/header.mjs

@@ -46,7 +46,7 @@ export const NavButton = ({
   const className = `w-full flex flex-row items-center px-4 py-2 ${extraClasses} ${
     active ? 'text-secondary' : ''
   }`
-  const span = <span className="font-bold block grow text-left">{label}</span>
+  const span = <span className="font-normal block grow text-left">{label}</span>
 
   return onClick ? (
     <button {...{ onClick, className }} title={label}>
@@ -70,7 +70,7 @@ const NavIcons = ({ setView, setDense, dense, view }) => {
       <NavButton
         onClick={() => setDense(!dense)}
         label={t('workbench:viewMenu')}
-        extraClasses="hidden lg:flex text-success bg-neutral hover:bg-success hover:text-neutral"
+        extraClasses="hidden lg:flex text-accent bg-neutral hover:bg-accent hover:text-neutral-content"
       >
         {dense ? (
           <RightIcon

sites/shared/components/workbench/menus/mobile-menubar.mjs

@@ -4,6 +4,7 @@ import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 import { CloseIcon } from 'shared/components/icons.mjs'
 import { MobileMenubarContext } from 'shared/context/mobile-menubar-context.mjs'
 import { shownHeaderSelector } from 'shared/components/wrappers/header.mjs'
+import { MenuAltIcon } from 'shared/components/icons.mjs'
 
 /**
  * A component to display menu buttons and actions in mobile.
@@ -35,6 +36,7 @@ export const MobileMenubar = () => {
           slideFrom="right"
           keepOpenOnClick={selectedMenu.keepOpenOnClick}
           keepOpenOnSwipe
+          fullWidth
         >
           <div className="mb-16">{selectedMenu.menuContent}</div>
           <button
@@ -62,10 +64,10 @@ export const MobileMenubar = () => {
     <div
       className={`
       lg:hidden
-      ${shownHeaderSelector('bottom-16')} 
+      ${shownHeaderSelector('bottom-16')}
       sticky bottom-0 w-20 -ml-20 self-end
-      duration-300 transition-all 
+      duration-300 transition-all
-      flex flex-col-reverse gap-4
+      flex flex-col-reverse gap-2 mb-2
       z-20
       mobile-menubar
       `}
@@ -73,11 +75,11 @@ export const MobileMenubar = () => {
       {Object.keys(menus)
         .sort((a, b) => menus[a].order - menus[b].order)
         .map((m) => {
-          const Icon = menus[m].Icon
+          const Icon = m === 'nav' ? MenuAltIcon : menus[m].Icon
           return (
             <button
               key={m}
-              className="btn btn-accent btn-circle mx-4"
+              className={`btn ${m === 'nav' ? 'btn-neutral' : 'btn-primary'} btn-circle mx-4`}
               onClick={() => setSelectedModal(m)}
             >
               <Icon />

sites/shared/components/workbench/views/measies/index.mjs

@@ -20,6 +20,8 @@ import { MsetIcon, BookmarkIcon, CsetIcon, EditIcon } from 'shared/components/ic
 
 export const ns = nsMerge(authNs, setsNs)
 
+const iconClasses = { className: 'w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 shrink-0', stroke: 1.5 }
+
 export const MeasiesView = ({ design, Design, settings, update, missingMeasurements, setView }) => {
   const { t } = useTranslation(['workbench'])
   const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
@@ -61,7 +63,7 @@ export const MeasiesView = ({ design, Design, settings, update, missingMeasureme
             <Fragment key={1}>
               <div className={horFlexClasses}>
                 <h5 id="ownsets">{t('workbench:chooseFromOwnSets')}</h5>
-                <MsetIcon className="w-6 h-6 shrink-0" />
+                <MsetIcon {...iconClasses} />
               </div>
               <p>{t('workbench:chooseFromOwnSetsDesc')}</p>
             </Fragment>,
@@ -77,7 +79,7 @@ export const MeasiesView = ({ design, Design, settings, update, missingMeasureme
             <Fragment key={1}>
               <div className={horFlexClasses}>
                 <h5 id="bookmarkedsets">{t('workbench:chooseFromBookmarkedSets')}</h5>
-                <BookmarkIcon className="w-6 h-6 shrink-0" />
+                <BookmarkIcon {...iconClasses} />
               </div>
               <p>{t('workbench:chooseFromBookmarkedSetsDesc')}</p>
             </Fragment>,
@@ -93,7 +95,7 @@ export const MeasiesView = ({ design, Design, settings, update, missingMeasureme
             <Fragment key={1}>
               <div className={horFlexClasses}>
                 <h5 id="curatedsets">{t('workbench:chooseFromCuratedSets')}</h5>
-                <CsetIcon className="w-6 h-6 shrink-0" />
+                <CsetIcon {...iconClasses} />
               </div>
               <p>{t('workbench:chooseFromCuratedSetsDesc')}</p>
             </Fragment>,
@@ -103,7 +105,7 @@ export const MeasiesView = ({ design, Design, settings, update, missingMeasureme
             <Fragment key={1}>
               <div className={horFlexClasses}>
                 <h5 id="editmeasies">{t('workbench:editMeasiesByHand')}</h5>
-                <EditIcon className="w-6 h-6 shrink-0" />
+                <EditIcon {...iconClasses} />
               </div>
               <p>{t('workbench:editMeasiesByHandDesc')}</p>
             </Fragment>,

sites/shared/components/workbench/views/view-header.mjs

@@ -10,11 +10,11 @@ import {
   BulletIcon,
   UnitsIcon,
   DetailIcon,
-  IconWrapper,
-  ClearIcon,
   ResetIcon,
   UploadIcon,
   BookmarkIcon,
+  ZoomInIcon,
+  ZoomOutIcon,
 } from 'shared/components/icons.mjs'
 import { shownHeaderSelector } from 'shared/components/wrappers/header.mjs'
 import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
@@ -22,18 +22,6 @@ import { capitalize, shortDate } from 'shared/utils.mjs'
 
 export const ns = ['common', 'core-settings', 'ui-settings']
 
-const ZoomInIcon = (props) => (
-  <IconWrapper {...props}>
-    <path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6" />
-  </IconWrapper>
-)
-
-const ZoomOutIcon = (props) => (
-  <IconWrapper {...props}>
-    <path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM13.5 10.5h-6" />
-  </IconWrapper>
-)
-
 const IconButton = ({ Icon, onClick, dflt = true, title, hide = false, extraClasses = '' }) => (
   <div className="tooltip tooltip-bottom tooltip-primary flex items-center" data-tip={title}>
     <button
@@ -49,13 +37,13 @@ const IconButton = ({ Icon, onClick, dflt = true, title, hide = false, extraClas
 )
 
 const smZoomClasses =
-  '[.mobile-menubar_&]:btn [.mobile-menubar_&]:btn-secondary [.mobile-menubar_&]:btn-circle [.mobile-menubar_&]:my-2'
+  '[.mobile-menubar_&]:btn [.mobile-menubar_&]:btn-secondary [.mobile-menubar_&]:btn-circle [.mobile-menubar_&]:my-1'
 const ZoomButtons = ({ t, zoomFunctions, zoomed }) => {
   if (!zoomFunctions) return null
   return (
     <div className="flex flex-col lg:flex-row items-center lg:content-center lg:gap-4">
       <IconButton
-        Icon={ClearIcon}
+        Icon={ResetIcon}
         onClick={zoomFunctions.reset}
         title={t('resetZoom')}
         hide={!zoomed}

sites/shared/components/wrappers/modal.mjs

@@ -20,6 +20,7 @@ export const ModalWrapper = ({
   keepOpenOnClick = false,
   slideFrom = 'left',
   keepOpenOnSwipe = false,
+  fullWidth = false,
 }) => {
   const { clearModal } = useContext(ModalContext)
   const [animate, setAnimate] = useState('in')
@@ -68,7 +69,9 @@ export const ModalWrapper = ({
         children
       ) : (
         <div
-          className={`bg-base-100 p-4 lg:px-8 lg:rounded-lg lg:shadow-lg max-h-full overflow-auto`}
+          className={`bg-base-100 p-4 lg:px-8 lg:rounded-lg lg:shadow-lg max-h-full overflow-auto ${
+            fullWidth ? 'w-full' : ''
+          }`}
         >
           {children}
         </div>