fix(checkbox+dropdown): small font-size once built

2026-07-16 13:34:03 +02:00 · 2026-02-03 15:14:45 +00:00
parent e7ad7ba131
commit 0acac6dcee
13 changed files with 50 additions and 208 deletions
--- 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}
--- 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;
    }
  }
--- 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;
    }
  }

--- 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;
--- 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%;
--- 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);
--- 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 {
--- 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;

--- 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;
--- 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;
--- 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;
--- 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;