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

pl-fe: tailwind migrations

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-09-07 11:29:56 +02:00
parent bd5c13698a
commit c486f9fcd5
3 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/pl-fe/src/components/thumb-navigation-link.tsx
View File

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

8
packages/pl-fe/src/components/thumb-navigation.tsx
View File

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

25
packages/pl-fe/src/styles/new/ui.scss
View File

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