From 85c93958226526c496eab4569be9a7d5db2c7822 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Thu, 23 Oct 2025 13:34:48 +0200
Subject: [PATCH] pl-fe: add backdrop saturate filter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/components/ui/column.tsx   | 2 +-
 packages/pl-fe/src/components/ui/modal.tsx    | 2 +-
 packages/pl-fe/src/pages/search/search.tsx    | 2 +-
 packages/pl-fe/src/styles/new/components.scss | 2 +-
 packages/pl-fe/src/styles/new/layout.scss     | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/pl-fe/src/components/ui/column.tsx b/packages/pl-fe/src/components/ui/column.tsx
index 96a8adddb..31875175c 100644
--- a/packages/pl-fe/src/components/ui/column.tsx
+++ b/packages/pl-fe/src/components/ui/column.tsx
@@ -99,7 +99,7 @@ const Column: React.FC<IColumn> = (props): JSX.Element => {
           backHref={backHref}
           className={clsx({
             'rounded-t-3xl': !isScrolled && !transparent,
-            'sticky top-0 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/80 backdrop-blur': !transparent,
+            'sticky top-0 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/75 backdrop-blur backdrop-saturate-200': !transparent,
             'p-4 sm:p-0 sm:pb-4 black:p-4': transparent,
             '-mt-4 -mx-4 p-4': size !== 'lg' && !transparent,
             '-mt-4 -mx-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
diff --git a/packages/pl-fe/src/components/ui/modal.tsx b/packages/pl-fe/src/components/ui/modal.tsx
index 5db1dbbdb..d220a1d78 100644
--- a/packages/pl-fe/src/components/ui/modal.tsx
+++ b/packages/pl-fe/src/components/ui/modal.tsx
@@ -106,7 +106,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
       })}
     >
       {title && (
-        <div className='sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur black:bg-black/80 dark:bg-primary-900/75'>
+        <div className='sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur backdrop-saturate-200 black:bg-black/75 dark:bg-primary-900/75'>
           <div
             className={clsx('flex w-full items-center gap-2', {
               'flex-row-reverse': closePosition === 'left',
diff --git a/packages/pl-fe/src/pages/search/search.tsx b/packages/pl-fe/src/pages/search/search.tsx
index 9a908dc6f..747a3e810 100644
--- a/packages/pl-fe/src/pages/search/search.tsx
+++ b/packages/pl-fe/src/pages/search/search.tsx
@@ -70,7 +70,7 @@ const SearchInput: React.FC<ISearchInput> = ({ placeholder }) => {
 
   return (
     <div
-      className='sticky top-[74px] z-10 w-full bg-white/90 backdrop-blur black:bg-black/80 dark:bg-primary-900/90'
+      className='sticky top-[74px] z-10 w-full bg-white/90 backdrop-blur backdrop-saturate-200 black:bg-black/75 dark:bg-primary-900/90'
     >
       <label htmlFor='search' className='sr-only'>{placeholder || intl.formatMessage(messages.placeholder)}</label>
 
diff --git a/packages/pl-fe/src/styles/new/components.scss b/packages/pl-fe/src/styles/new/components.scss
index bc82a0801..aca8f22d2 100644
--- a/packages/pl-fe/src/styles/new/components.scss
+++ b/packages/pl-fe/src/styles/new/components.scss
@@ -242,7 +242,7 @@ a.⁂-list-item,
     border-radius: 9999px;
     padding: 0.5rem 1rem;
     color: white;
-    @apply bg-primary-600/80 backdrop-blur-md transition-transform hover:scale-105 hover:bg-primary-700/80 active:scale-100;
+    @apply bg-primary-600/80 backdrop-blur-md backdrop-saturate-200 transition-transform hover:scale-105 hover:bg-primary-700/80 active:scale-100;
   
     .⁂-icon svg {
       width: 1rem;
diff --git a/packages/pl-fe/src/styles/new/layout.scss b/packages/pl-fe/src/styles/new/layout.scss
index 9602dd888..3c801ab64 100644
--- a/packages/pl-fe/src/styles/new/layout.scss
+++ b/packages/pl-fe/src/styles/new/layout.scss
@@ -30,7 +30,7 @@ body {
 }
 
 .⁂-dropdown-navigation {
-  @apply fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white/90 shadow-lg backdrop-blur-md ease-in-out black:bg-black/90 no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900/90 dark:shadow-none rtl:right-2 rtl:origin-bottom-right no-reduce-motion:scale-0;
+  @apply fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white/90 shadow-lg backdrop-blur-md backdrop-saturate-200 ease-in-out black:bg-black/80 no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900/90 dark:shadow-none rtl:right-2 rtl:origin-bottom-right no-reduce-motion:scale-0;
   
   &__overlay {
     @apply fixed inset-0 cursor-default bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700;
@@ -114,7 +114,7 @@ body {
 }
 
 .⁂-thumb-navigation {
-  @apply fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/80 dark:border-gray-800 dark:bg-primary-900/90 lg:hidden;
+  @apply fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md backdrop-saturate-200 black:bg-black/75 dark:border-gray-800 dark:bg-primary-900/90 lg:hidden;
 
   &__item {
     @apply flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600;