matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: more tailwind -> scss migrations

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-09-10 16:49:34 +02:00
parent 4506a61fa3
commit 8203ab68a3
5 changed files with 79 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/pl-fe/src/components/dropdown-navigation.tsx
View File

@ -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>
) : (

10
packages/pl-fe/src/components/sidebar-navigation.tsx
View File

@ -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>
);
});

2
packages/pl-fe/src/components/site-logo.tsx
View File

@ -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}
/>

2
packages/pl-fe/src/styles/new/components.scss
View File

@ -44,7 +44,7 @@
.⁂-divider {
@apply relative;
> div::first-child {
> div:first-child {
@apply absolute inset-0 flex items-center;
> div {

56
packages/pl-fe/src/styles/new/layout.scss
View File

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