From 0acac6dceedce772cce057b9f9e42b445e6bb797 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Tue, 3 Feb 2026 15:14:45 +0000 Subject: [PATCH] fix(checkbox+dropdown): small font-size once built --- .gitignore | 1 - src/components/Elements/MainModal/Main.jsx | 17 -- .../Form/Settings/Checkbox/Checkbox.scss | 4 +- .../Form/Settings/ChipSelect/ChipSelect.scss | 10 +- .../Form/Settings/DatePicker/DatePicker.scss | 10 +- .../Form/Settings/Dropdown/Dropdown.scss | 15 +- .../LocationSearch/LocationSearch.scss | 18 +-- src/components/Form/Settings/Radio/Radio.scss | 4 +- .../Settings/SearchInput/SearchInput.scss | 4 +- .../Form/Settings/Slider/Slider.scss | 10 +- src/components/Form/Settings/Text/Text.scss | 10 +- .../Form/Settings/Textarea/Textarea.scss | 2 +- src/features/misc/views/Discover.jsx | 153 +----------------- 13 files changed, 50 insertions(+), 208 deletions(-) diff --git a/.gitignore b/.gitignore index 4a6801ff..7a27b4a5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ # Directories node_modules/ .history/ -.claude/ .vscode/ build/ .idea/ diff --git a/src/components/Elements/MainModal/Main.jsx b/src/components/Elements/MainModal/Main.jsx index 5b2214b1..5ce64dfc 100644 --- a/src/components/Elements/MainModal/Main.jsx +++ b/src/components/Elements/MainModal/Main.jsx @@ -79,22 +79,6 @@ function MainModal({ modalClose, deepLinkData }) { setCurrentTab(linkData.tab); } - // Handle discover category navigation - update section state to match hash - if (linkData.tab === TAB_TYPES.DISCOVER && linkData.category) { - const categoryToLabel = { - all: variables.getMessage('modals.main.marketplace.all'), - photo_packs: variables.getMessage('modals.main.marketplace.photo_packs'), - quote_packs: variables.getMessage('modals.main.marketplace.quote_packs'), - preset_settings: variables.getMessage('modals.main.marketplace.preset_settings'), - collections: variables.getMessage('modals.main.marketplace.collections'), - }; - const sectionLabel = categoryToLabel[linkData.category]; - if (sectionLabel) { - setCurrentSection(sectionLabel); - setCurrentSectionName(linkData.category); - } - } - // Handle settings section navigation if (linkData.tab === TAB_TYPES.SETTINGS && linkData.section) { setNavigationTrigger({ @@ -248,7 +232,6 @@ function MainModal({ modalClose, deepLinkData }) { productView={productView} iframeBreadcrumbs={iframeBreadcrumbs} onTabChange={handleChangeTab} - onSectionChange={handleSectionChange} onSubSectionChange={handleSubSectionChange} onClose={modalClose} onBack={handleBack} diff --git a/src/components/Form/Settings/Checkbox/Checkbox.scss b/src/components/Form/Settings/Checkbox/Checkbox.scss index 5755d111..9de1c910 100644 --- a/src/components/Form/Settings/Checkbox/Checkbox.scss +++ b/src/components/Form/Settings/Checkbox/Checkbox.scss @@ -42,6 +42,8 @@ transition: color 0.2s ease; pointer-events: none; + font-size: 1rem; + @include themed { color: t($color); } @@ -90,7 +92,7 @@ } svg { - font-size: 18px; + font-size: 1.125rem; color: white; } } diff --git a/src/components/Form/Settings/ChipSelect/ChipSelect.scss b/src/components/Form/Settings/ChipSelect/ChipSelect.scss index 8516896b..bcf25985 100644 --- a/src/components/Form/Settings/ChipSelect/ChipSelect.scss +++ b/src/components/Form/Settings/ChipSelect/ChipSelect.scss @@ -58,7 +58,7 @@ flex-flow: column; .chipSelect-label { - font-size: 12px; + font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; @@ -113,7 +113,7 @@ align-items: center; gap: 6px; padding: 6px 10px; - font-size: 13px; + font-size: 0.8125rem; text-transform: capitalize; transition: all 0.15s ease; @@ -147,14 +147,14 @@ } svg { - font-size: 12px; + font-size: 0.75rem; } } } .chipSelect-arrow { flex-shrink: 0; - font-size: 24px; + font-size: 1.5rem; transition: transform 0.2s ease; @include themed { @@ -254,7 +254,7 @@ } svg { - font-size: 14px; + font-size: 0.875rem; } } diff --git a/src/components/Form/Settings/DatePicker/DatePicker.scss b/src/components/Form/Settings/DatePicker/DatePicker.scss index 6429e40f..326e316e 100644 --- a/src/components/Form/Settings/DatePicker/DatePicker.scss +++ b/src/components/Form/Settings/DatePicker/DatePicker.scss @@ -97,7 +97,7 @@ .datepicker-arrow { flex-shrink: 0; - font-size: 24px; + font-size: 1.5rem; transition: all 0.2s ease; cursor: pointer; padding: 4px; @@ -175,13 +175,13 @@ } svg { - font-size: 20px; + font-size: 1.25rem; } } .calendar-month { font-weight: 600; - font-size: 14px; + font-size: 0.875rem; flex: 1; text-align: center; @@ -199,7 +199,7 @@ div { text-align: center; - font-size: 12px; + font-size: 0.75rem; font-weight: 500; padding: 8px 4px; @@ -221,7 +221,7 @@ justify-content: center; cursor: pointer; border-radius: 50%; - font-size: 14px; + font-size: 0.875rem; transition: all 0.15s ease; min-width: 32px; min-height: 32px; diff --git a/src/components/Form/Settings/Dropdown/Dropdown.scss b/src/components/Form/Settings/Dropdown/Dropdown.scss index 268b585b..e5e4db04 100644 --- a/src/components/Form/Settings/Dropdown/Dropdown.scss +++ b/src/components/Form/Settings/Dropdown/Dropdown.scss @@ -55,6 +55,7 @@ gap: 8px; display: flex; flex-flow: column; + font-size: 1rem; &.disabled { opacity: 0.5; @@ -70,7 +71,7 @@ } .dropdown-label { - font-size: 12px; + font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; @@ -85,7 +86,7 @@ align-items: center; gap: 5px; cursor: pointer; - font-size: 12px; + font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; @@ -99,7 +100,7 @@ } svg { - font-size: 12px; + font-size: 0.75rem; } } @@ -149,7 +150,7 @@ .dropdown-arrow { flex-shrink: 0; - font-size: 24px; + font-size: 1.5rem; transition: all 0.2s ease; cursor: pointer; padding: 4px; @@ -176,7 +177,7 @@ border: none; outline: none; height: 100%; - font-size: 14px; + font-size: 0.875rem; padding: 0; min-width: 0; @@ -192,7 +193,7 @@ .dropdown-clear { flex-shrink: 0; - font-size: 20px; + font-size: 1.25rem; cursor: pointer; transition: all 0.2s ease; padding: 4px; @@ -305,7 +306,7 @@ .dropdown-option-check { flex-shrink: 0; - font-size: 14px; + font-size: 0.875rem; width: 20px; height: 20px; border-radius: 50%; diff --git a/src/components/Form/Settings/LocationSearch/LocationSearch.scss b/src/components/Form/Settings/LocationSearch/LocationSearch.scss index e5608643..3411ca31 100644 --- a/src/components/Form/Settings/LocationSearch/LocationSearch.scss +++ b/src/components/Form/Settings/LocationSearch/LocationSearch.scss @@ -79,7 +79,7 @@ } .location-search-label { - font-size: 12px; + font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; @@ -94,7 +94,7 @@ align-items: center; gap: 5px; cursor: pointer; - font-size: 12px; + font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; @@ -108,7 +108,7 @@ } svg { - font-size: 14px; + font-size: 0.875rem; } } @@ -148,7 +148,7 @@ border: none; outline: none; height: 100%; - font-size: 14px; + font-size: 0.875rem; padding: 0; min-width: 0; @@ -164,7 +164,7 @@ .location-search-clear { flex-shrink: 0; - font-size: 20px; + font-size: 1.25rem; cursor: pointer; transition: all 0.2s ease; padding: 4px; @@ -195,7 +195,7 @@ .location-search-arrow { flex-shrink: 0; - font-size: 24px; + font-size: 1.5rem; transition: all 0.2s ease; cursor: pointer; padding: 4px; @@ -308,7 +308,7 @@ } .location-search-option-detail { - font-size: 12px; + font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -320,7 +320,7 @@ .location-search-option-check { flex-shrink: 0; - font-size: 14px; + font-size: 0.875rem; width: 20px; height: 20px; border-radius: 50%; @@ -343,7 +343,7 @@ .location-search-empty { padding: 16px; text-align: center; - font-size: 14px; + font-size: 0.875rem; @include themed { color: t($subColor); diff --git a/src/components/Form/Settings/Radio/Radio.scss b/src/components/Form/Settings/Radio/Radio.scss index de7d02ae..4a3930e7 100644 --- a/src/components/Form/Settings/Radio/Radio.scss +++ b/src/components/Form/Settings/Radio/Radio.scss @@ -25,7 +25,7 @@ } .radio-header-label { - font-size: 12px; + font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; @@ -91,7 +91,7 @@ .radio-label { flex: 1; - font-size: 15px; + font-size: 0.9375rem; pointer-events: none; @include themed { diff --git a/src/components/Form/Settings/SearchInput/SearchInput.scss b/src/components/Form/Settings/SearchInput/SearchInput.scss index 123e25cb..4f45c829 100644 --- a/src/components/Form/Settings/SearchInput/SearchInput.scss +++ b/src/components/Form/Settings/SearchInput/SearchInput.scss @@ -13,7 +13,7 @@ .search-input-icon { position: absolute; left: 16px; - font-size: 20px; + font-size: 1.25rem; pointer-events: none; @include themed { @@ -25,7 +25,7 @@ width: 100%; height: 48px; padding: 0 16px 0 44px; - font-size: 15px; + font-size: 0.9375rem; outline: none; transition: 0.2s ease; diff --git a/src/components/Form/Settings/Slider/Slider.scss b/src/components/Form/Settings/Slider/Slider.scss index 4fb49f81..8149c4f1 100644 --- a/src/components/Form/Settings/Slider/Slider.scss +++ b/src/components/Form/Settings/Slider/Slider.scss @@ -12,7 +12,7 @@ } .slider-value { - font-size: 16px; + font-size: 1rem; font-weight: 600; @include themed { @@ -25,7 +25,7 @@ align-items: center; gap: 5px; cursor: pointer; - font-size: 12px; + font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; @@ -41,7 +41,7 @@ } svg { - font-size: 12px; + font-size: 0.75rem; transition: transform 0.2s ease; } @@ -180,7 +180,7 @@ .slider-mark { position: absolute; transform: translateX(-50%); - font-size: 12px; + font-size: 0.75rem; @include themed { color: t($subColor); @@ -211,7 +211,7 @@ transform: translateX(-50%); padding: 4px 8px; border-radius: 4px; - font-size: 12px; + font-size: 0.75rem; font-weight: 600; white-space: nowrap; pointer-events: none; diff --git a/src/components/Form/Settings/Text/Text.scss b/src/components/Form/Settings/Text/Text.scss index d0188316..21cc0970 100644 --- a/src/components/Form/Settings/Text/Text.scss +++ b/src/components/Form/Settings/Text/Text.scss @@ -20,7 +20,7 @@ } .text-field-label { - font-size: 12px; + font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; @@ -35,7 +35,7 @@ align-items: center; gap: 5px; cursor: pointer; - font-size: 12px; + font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; @@ -49,14 +49,14 @@ } svg { - font-size: 12px; + font-size: 0.75rem; } } .text-field-input { height: 56px; padding: 0 16px; - font-size: 16px; + font-size: 1rem; outline: none; transition: 0.2s ease; @@ -83,7 +83,7 @@ .text-field-textarea { padding: 16px; - font-size: 16px; + font-size: 1rem; outline: none; resize: vertical; min-height: 100px; diff --git a/src/components/Form/Settings/Textarea/Textarea.scss b/src/components/Form/Settings/Textarea/Textarea.scss index 4d49584d..43591155 100644 --- a/src/components/Form/Settings/Textarea/Textarea.scss +++ b/src/components/Form/Settings/Textarea/Textarea.scss @@ -3,7 +3,7 @@ .textarea-autosize { width: 100%; padding: 12px 16px; - font-size: 15px; + font-size: 0.9375rem; line-height: 24px; outline: none; resize: none; diff --git a/src/features/misc/views/Discover.jsx b/src/features/misc/views/Discover.jsx index de044c12..ff2b179e 100644 --- a/src/features/misc/views/Discover.jsx +++ b/src/features/misc/views/Discover.jsx @@ -22,92 +22,6 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) { const previewParam = isPreviewMode ? '&preview=true' : ''; const isOffline = navigator.onLine === false || offlineMode; - // Helper function to update iframe based on hash - const updateIframeFromHash = useRef(() => { - if (!iframeRef.current) return; - - const hash = window.location.hash; - if (!hash || !hash.startsWith('#discover')) return; - - const parts = hash.slice(1).split('/'); - if (parts.length < 2) return; - - const theme = getResolvedTheme(); - const themeParam = `&theme=${theme}`; - let targetUrl = ''; - - if (parts[1] === 'collections') { - targetUrl = `${MARKETPLACE_URL}/collections?embed=true${previewParam}${themeParam}`; - } else if (parts[1] === 'collection' && parts[2]) { - targetUrl = `${MARKETPLACE_URL}/collection/${parts[2]}?embed=true${previewParam}${themeParam}`; - } else if (parts[2]) { - // Item view - map category to path - const pathMap = { - photo_packs: 'packs', - quote_packs: 'packs', - preset_settings: 'presets', - }; - const pathSegment = pathMap[parts[1]] || 'packs'; - targetUrl = `${MARKETPLACE_URL}/${pathSegment}/${parts[2]}?embed=true${previewParam}${themeParam}`; - } else if (parts[1] === 'all') { - // All items - targetUrl = `${MARKETPLACE_URL}?embed=true${previewParam}${themeParam}`; - } else { - // Category filter (photo_packs, quote_packs, preset_settings) - targetUrl = `${MARKETPLACE_URL}?embed=true&type=${parts[1]}${previewParam}${themeParam}`; - } - - // Update iframe src directly - if (targetUrl && iframeRef.current.src !== targetUrl) { - setIsLoading(true); - iframeRef.current.src = targetUrl; - } - }); - - // Update the ref function when previewParam changes - useEffect(() => { - updateIframeFromHash.current = () => { - if (!iframeRef.current) return; - - const hash = window.location.hash; - if (!hash || !hash.startsWith('#discover')) return; - - const parts = hash.slice(1).split('/'); - if (parts.length < 2) return; - - const theme = getResolvedTheme(); - const themeParam = `&theme=${theme}`; - let targetUrl = ''; - - if (parts[1] === 'collections') { - targetUrl = `${MARKETPLACE_URL}/collections?embed=true${previewParam}${themeParam}`; - } else if (parts[1] === 'collection' && parts[2]) { - targetUrl = `${MARKETPLACE_URL}/collection/${parts[2]}?embed=true${previewParam}${themeParam}`; - } else if (parts[2]) { - // Item view - map category to path - const pathMap = { - photo_packs: 'packs', - quote_packs: 'packs', - preset_settings: 'presets', - }; - const pathSegment = pathMap[parts[1]] || 'packs'; - targetUrl = `${MARKETPLACE_URL}/${pathSegment}/${parts[2]}?embed=true${previewParam}${themeParam}`; - } else if (parts[1] === 'all') { - // All items - targetUrl = `${MARKETPLACE_URL}?embed=true${previewParam}${themeParam}`; - } else { - // Category filter (photo_packs, quote_packs, preset_settings) - targetUrl = `${MARKETPLACE_URL}?embed=true&type=${parts[1]}${previewParam}${themeParam}`; - } - - // Update iframe src directly - if (targetUrl && iframeRef.current.src !== targetUrl) { - setIsLoading(true); - iframeRef.current.src = targetUrl; - } - }; - }, [previewParam]); - // Clear breadcrumbs when component unmounts (navigating away from discover) useEffect(() => { return () => { @@ -228,31 +142,6 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) { } }, [deepLinkData, previewParam]); - // Send navigation commands to iframe when hash changes externally (e.g., browser back/forward, breadcrumb clicks) - useEffect(() => { - const handleHashChange = () => { - updateIframeFromHash.current(); - }; - - const handlePopState = () => { - updateIframeFromHash.current(); - }; - - // Listen for hash changes from browser navigation - window.addEventListener('hashchange', handleHashChange); - window.addEventListener('popstate', handlePopState); - - // Also trigger immediately if hash exists - if (window.location.hash.startsWith('#discover')) { - updateIframeFromHash.current(); - } - - return () => { - window.removeEventListener('hashchange', handleHashChange); - window.removeEventListener('popstate', handlePopState); - }; - }, []); - useEffect(() => { // Listen for postMessage events from the iframe const handleMessage = (event) => { @@ -352,44 +241,12 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) { } break; - case 'marketplace:navigation': + case 'marketplace:navigate': // Update parent URL when iframe navigates - if (payload?.path) { - // Parse the path to extract relevant info - // e.g., /marketplace/packs/123 -> #discover/photo_packs/123 - // e.g., /marketplace/presets/456 -> #discover/preset_settings/456 - // e.g., /marketplace/collections -> #discover/collections - // e.g., /marketplace/collection/featured -> #discover/collection/featured - - const path = payload.path; - - if (path.includes('/packs/')) { - const itemId = path.split('/packs/')[1]?.split('?')[0]; - if (itemId) { - // Determine type from installed items or default to photo_packs - const installed = JSON.parse(localStorage.getItem('installed')) || []; - const item = installed.find((i) => i.id === itemId); - const category = item?.type || 'photo_packs'; - updateHash(`#discover/${category}/${itemId}`); - } - } else if (path.includes('/presets/')) { - const itemId = path.split('/presets/')[1]?.split('?')[0]; - if (itemId) { - updateHash(`#discover/preset_settings/${itemId}`); - } - } else if (path.includes('/collection/')) { - const collectionId = path.split('/collection/')[1]?.split('?')[0]; - if (collectionId) { - updateHash(`#discover/collection/${collectionId}`); - } - } else if (path.includes('/collections')) { - updateHash('#discover/collections'); - } else if (path === '/marketplace' || path === '/marketplace/') { - // Extract type from search params if present - const searchParams = new URLSearchParams(payload.search || ''); - const type = searchParams.get('type') || 'all'; - updateHash(`#discover/${type}`); - } + if (payload?.itemId) { + updateHash(`#discover/${payload.itemId}`); + } else if (payload?.category) { + updateHash(`#discover/${payload.category}`); } break;