From c486f9fcd52cb20683cb311e508fbaa5abf61995 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Sun, 7 Sep 2025 11:29:56 +0200
Subject: [PATCH] pl-fe: tailwind migrations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../src/components/thumb-navigation-link.tsx  | 16 ++----------
 .../pl-fe/src/components/thumb-navigation.tsx |  8 +++---
 packages/pl-fe/src/styles/new/ui.scss         | 25 +++++++++++++++++++
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/packages/pl-fe/src/components/thumb-navigation-link.tsx b/packages/pl-fe/src/components/thumb-navigation-link.tsx
index a1d92b13b..760786da8 100644
--- a/packages/pl-fe/src/components/thumb-navigation-link.tsx
+++ b/packages/pl-fe/src/components/thumb-navigation-link.tsx
@@ -34,27 +34,15 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
   const icon = (active && activeSrc) || src;
 
   return (
-    <NavLink to={to} exact={exact} className='flex flex-1 flex-col items-center space-y-1 px-2 py-4 text-lg text-gray-600' title={text}>
+    <NavLink to={to} exact={exact} className={clsx('⁂-thumb-navigation__item', { '⁂-thumb-navigation__item--active': active })} title={text}>
       {!demetricator && count !== undefined ? (
         <IconWithCounter
           src={icon}
-          className={clsx({
-            'h-5 w-5': true,
-            'text-gray-600 black:text-white': !active,
-            'text-primary-500': active,
-          })}
           count={count}
           countMax={countMax}
         />
       ) : (
-        <Icon
-          src={icon}
-          className={clsx({
-            'h-5 w-5': true,
-            'text-gray-600 black:text-white': !active,
-            'text-primary-500': active,
-          })}
-        />
+        <Icon src={icon} />
       )}
     </NavLink>
   );
diff --git a/packages/pl-fe/src/components/thumb-navigation.tsx b/packages/pl-fe/src/components/thumb-navigation.tsx
index a4c048c1e..93c3fa7af 100644
--- a/packages/pl-fe/src/components/thumb-navigation.tsx
+++ b/packages/pl-fe/src/components/thumb-navigation.tsx
@@ -53,27 +53,25 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
 
   const composeButton = (
     <button
-      className='flex flex-1 flex-col items-center px-1.5 py-3.5 text-lg text-gray-600'
+      className='⁂-thumb-navigation__item ⁂-thumb-navigation__item--compose'
       onClick={handleOpenComposeModal}
       title={intl.formatMessage(messages.compose)}
     >
       <Icon
         src={require('@tabler/icons/outline/square-rounded-plus.svg')}
-        className='size-6 text-gray-600 black:text-white'
       />
     </button>
   );
 
   return (
-    <div className='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'>
+    <div className='⁂-thumb-navigation'>
       <button
-        className='flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600'
+        className='⁂-thumb-navigation__item'
         onClick={isSidebarOpen ? closeSidebar : openSidebar}
         title={intl.formatMessage(isSidebarOpen ? messages.closeSidebar : messages.openSidebar)}
       >
         <Icon
           src={require('@tabler/icons/outline/menu-2.svg')}
-          className='size-5 text-gray-600 black:text-white'
         />
       </button>
 
diff --git a/packages/pl-fe/src/styles/new/ui.scss b/packages/pl-fe/src/styles/new/ui.scss
index 1662a5285..3023374d4 100644
--- a/packages/pl-fe/src/styles/new/ui.scss
+++ b/packages/pl-fe/src/styles/new/ui.scss
@@ -109,3 +109,28 @@ a.⁂-list-item,
 .⁂-select {
   @apply truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm;
 }
+
+.⁂-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;
+
+  &__item {
+    @apply flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600;
+
+      .⁂-icon {
+        @apply size-5 text-gray-600 black:text-white;
+
+      }
+
+    &--active .⁂-icon {
+      @apply text-primary-500;
+    }
+
+    &--compose {
+      @apply px-1.5 py-3.5;
+
+      .⁂-icon {
+        @apply size-6;
+      }
+    }
+  }
+}
\ No newline at end of file