From 8203ab68a33d82bed1dfa54c2ed9496781a33ee4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Wed, 10 Sep 2025 16:49:34 +0200
Subject: [PATCH] pl-fe: more tailwind -> scss 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/dropdown-navigation.tsx    | 44 +++++++--------
 .../src/components/sidebar-navigation.tsx     | 10 +---
 packages/pl-fe/src/components/site-logo.tsx   |  2 +-
 packages/pl-fe/src/styles/new/components.scss |  2 +-
 packages/pl-fe/src/styles/new/layout.scss     | 56 ++++++++++++++++++-
 5 files changed, 79 insertions(+), 35 deletions(-)

diff --git a/packages/pl-fe/src/components/dropdown-navigation.tsx b/packages/pl-fe/src/components/dropdown-navigation.tsx
index ce7f39581..a1e7aeb41 100644
--- a/packages/pl-fe/src/components/dropdown-navigation.tsx
+++ b/packages/pl-fe/src/components/dropdown-navigation.tsx
@@ -64,7 +64,7 @@ interface IDropdownNavigationLink {
 const DropdownNavigationLink: React.FC<IDropdownNavigationLink> = React.memo(({ href, to, icon, text, onClick }) => {
   const body = (
     <>
-      <div className='⁂-dropdown-navigation__icon'>
+      <div className='⁂-dropdown-navigation__link__icon'>
         <Icon src={icon} />
       </div>
 
@@ -149,8 +149,8 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
   };
 
   const renderAccount = (account: AccountEntity) => (
-    <a href='#' className='block py-2' onClick={handleSwitchAccount(account)} key={account.id}>
-      <div className='pointer-events-none'>
+    <a href='#' onClick={handleSwitchAccount(account)} key={account.id}>
+      <div>
         <Account account={account} showAccountHoverCard={false} withRelationship={false} withLinkToProfile={false} />
       </div>
     </a>
@@ -196,10 +196,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
       onTouchEnd={handleTouchEnd}
     >
       <div
-        className={clsx('⁂-dropdown-navigation__overlay', {
-          '': !(sidebarVisible && isSidebarOpen),
-          'opacity-20': (sidebarVisible && isSidebarOpen),
-        })}
+        className='⁂-dropdown-navigation__overlay'
         role='button'
         onClick={handleClose}
       />
@@ -406,33 +403,32 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
 
               <Divider />
 
-              <Stack space={4}>
-                <button type='button' onClick={handleSwitcherClick} className='py-1'>
-                  <HStack alignItems='center' justifyContent='between'>
-                    <Text tag='span'>
-                      <FormattedMessage id='profile_dropdown.switch_account' defaultMessage='Switch accounts' />
-                    </Text>
+              <div
+                className={clsx('⁂-dropdown-navigation__account-switcher', {
+                  '⁂-dropdown-navigation__account-switcher--expanded': switcher,
+                })}
+              >
+                <button type='button' onClick={handleSwitcherClick}>
+                  <Text tag='span'>
+                    <FormattedMessage id='profile_dropdown.switch_account' defaultMessage='Switch accounts' />
+                  </Text>
 
-                    <Icon
-                      src={require('@tabler/icons/outline/chevron-down.svg')}
-                      className={clsx('size-4 text-gray-900 transition-transform dark:text-gray-100', {
-                        'rotate-180': switcher,
-                      })}
-                    />
-                  </HStack>
+                  <Icon
+                    src={require('@tabler/icons/outline/chevron-down.svg')}
+                  />
                 </button>
 
                 {switcher && (
-                  <div className='border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800'>
+                  <div className='⁂-dropdown-navigation__account-switcher__accounts'>
                     {otherAccounts.map(account => renderAccount(account))}
 
-                    <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
-                      <Icon className='size-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
+                    <NavLink className='⁂-dropdown-navigation__account-switcher__add' to='/login/add' onClick={handleClose}>
+                      <Icon src={require('@tabler/icons/outline/plus.svg')} />
                       <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
                     </NavLink>
                   </div>
                 )}
-              </Stack>
+              </div>
             </Stack>
           </div>
         ) : (
diff --git a/packages/pl-fe/src/components/sidebar-navigation.tsx b/packages/pl-fe/src/components/sidebar-navigation.tsx
index 12a617448..c5f341eb5 100644
--- a/packages/pl-fe/src/components/sidebar-navigation.tsx
+++ b/packages/pl-fe/src/components/sidebar-navigation.tsx
@@ -172,12 +172,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
   }, [!!account, features, followRequestsCount, interactionRequestsCount, scheduledStatusCount, draftCount]);
 
   return (
-    <Stack space={4} alignItems={shrink ? 'center' : undefined}>
-      <SiteLogo
-        className={clsx('h-12 w-auto cursor-pointer', {
-          'max-w-10 h-auto': shrink,
-        })}
-      />
+    <div className={clsx('⁂-sidebar-navigation', { '⁂-sidebar-navigation__narrow': shrink })}>
+      <SiteLogo />
 
       {account && (
         <Stack space={4}>
@@ -361,7 +357,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
       {account && (
         <ComposeButton shrink={shrink} />
       )}
-    </Stack>
+    </div>
   );
 });
 
diff --git a/packages/pl-fe/src/components/site-logo.tsx b/packages/pl-fe/src/components/site-logo.tsx
index 461e740ad..38eb5630a 100644
--- a/packages/pl-fe/src/components/site-logo.tsx
+++ b/packages/pl-fe/src/components/site-logo.tsx
@@ -26,7 +26,7 @@ const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
     // eslint-disable-next-line jsx-a11y/alt-text
     <img
       alt={intl.formatMessage(messages.logo)}
-      className={clsx('object-contain', alignment === 'left' && 'w-fit', className)}
+      className={clsx('⁂-site-logo object-contain', alignment === 'left' && 'w-fit', className)}
       src={logoSrc}
       {...rest}
     />
diff --git a/packages/pl-fe/src/styles/new/components.scss b/packages/pl-fe/src/styles/new/components.scss
index 76eb0db47..ca6010f95 100644
--- a/packages/pl-fe/src/styles/new/components.scss
+++ b/packages/pl-fe/src/styles/new/components.scss
@@ -44,7 +44,7 @@
 .⁂-divider {
   @apply relative;
 
-  > div::first-child {
+  > div:first-child {
     @apply absolute inset-0 flex items-center;
 
     > div {
diff --git a/packages/pl-fe/src/styles/new/layout.scss b/packages/pl-fe/src/styles/new/layout.scss
index 13c8cbf9b..634e8d433 100644
--- a/packages/pl-fe/src/styles/new/layout.scss
+++ b/packages/pl-fe/src/styles/new/layout.scss
@@ -27,7 +27,7 @@ body {
   }
 
   &__container {
-    @apply z-1000;
+    @apply z-[1000];
 
     &:not(&--partially-visible) {
       @apply hidden;
@@ -47,7 +47,7 @@ body {
   }
 
   &__link {
-    @apply group rounded-lg text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800 flex flex-col gap-2 items-center;
+    @apply rounded-lg text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800 flex gap-2 items-center;
 
     &__icon {
       @apply relative inline-flex rounded-lg bg-primary-100 p-2 dark:bg-gray-800;
@@ -58,6 +58,42 @@ body {
     }
   }
 
+  &__account-switcher {
+    @apply flex flex-col gap-4;
+
+    button {
+      @apply flex items-center justify-between py-1;
+
+      .⁂-icon {
+        @apply size-4 text-gray-900 transition-transform dark:text-gray-100;
+      }
+    }
+
+    &__accounts {
+      @apply border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800;
+
+      > a {
+        @apply block py-2;
+
+        > div {
+          @apply pointer-events-none;
+        }
+      }
+    }
+
+    &__add {
+      @apply flex items-center space-x-1 py-2;
+
+      .⁂-icon {
+        @apply size-4 text-primary-500;
+      }
+    }
+
+    &--expanded button .⁂-icon {
+      @apply rotate-180;
+    }
+  }
+
   > div {
     @apply flex flex-col gap-y-4 relative size-full overflow-auto p-4;
   }
@@ -86,4 +122,20 @@ body {
       }
     }
   }
+}
+
+.⁂-sidebar-navigation {
+  @apply flex flex-col gap-4;
+
+  .⁂-site-logo {
+    @apply h-12 w-auto cursor-pointer;
+  }
+
+  &--narrow {
+    @apply items-center;
+
+    .⁂-site-logo {
+      @apply max-w-10 h-auto;
+    }
+  }
 }
\ No newline at end of file