feat: minor ux fixes

This commit is contained in:
Nevo David 2025-01-08 01:11:02 +07:00
parent ba84a67095
commit 0de53d2f10
5 changed files with 17 additions and 21 deletions

View File

@ -282,7 +282,7 @@ html {
width: auto !important;
}
.editor * {
.editor :not(.removeEditor *) {
@apply text-textColor;
}

View File

@ -561,7 +561,7 @@ export const CalendarColumn: FC<{
))}
{!showAll && postList.length > 3 && (
<div
className="text-center hover:underline py-[5px]"
className="text-center hover:underline py-[5px] text-textColor"
onClick={showAllFunc}
>
+ Show more ({postList.length - 3})
@ -683,7 +683,7 @@ const CalendarItem: FC<{
className={clsx('w-full flex h-full flex-1 flex-col group', 'relative')}
style={{ opacity }}
>
<div className="bg-forth text-[11px] h-[15px] w-full rounded-tr-[10px] rounded-tl-[10px] flex justify-center gap-[10px] px-[5px]">
<div className="text-primary bg-forth text-[11px] h-[15px] w-full rounded-tr-[10px] rounded-tl-[10px] flex justify-center gap-[10px] px-[5px]">
<div
className="hidden group-hover:block hover:underline cursor-pointer"
onClick={duplicatePost}

View File

@ -316,7 +316,7 @@ export const PickPlatforms: FC<{
height={15}
/>
</div>
<div>{integration.name}</div>
<div>{integration.name.slice(0, 10)}{integration.name.length > 10 ? '...' : ''}</div>
</div>
</div>
</div>

View File

@ -409,7 +409,9 @@ export const withProvider = function <T extends object>(
>
{editInPlace
? 'Edit globally'
: `Edit only ${integration?.name} (${capitalize(
: `Edit only ${integration?.name.slice(0, 10)}${
(integration?.name?.length || 0) > 10 ? '...' : ''
} (${capitalize(
integration?.identifier.replace('-', ' ')
)})`}
</Button>

View File

@ -75,8 +75,8 @@ export const Pagination: FC<{
aria-current="page"
onClick={() => setPage(page)}
className={clsx(
'cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border hover:bg-forth h-10 w-10 hover:text-white border-[#1F1F1F] text-white',
current === page && 'bg-forth'
'cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border hover:bg-forth h-10 w-10 hover:text-white border-[#1F1F1F]',
current === page ? 'bg-forth !text-white' : 'text-textColor hover:text-white'
)}
>
{page + 1}
@ -89,7 +89,7 @@ export const Pagination: FC<{
)}
>
<a
className="cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-10 px-4 py-2 gap-1 pr-2.5 text-gray-400 hover:text-white border-[#1F1F1F] hover:bg-forth"
className="text-textColor hover:text-white group cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-10 px-4 py-2 gap-1 pr-2.5 text-gray-400 border-[#1F1F1F] hover:bg-forth"
aria-label="Go to next page"
onClick={() => setPage(current + 1)}
>
@ -292,7 +292,7 @@ export const MediaBox: FC<{
}, [data]);
return (
<div className="fixed left-0 top-0 bg-primary/80 z-[300] w-full min-h-full p-4 md:p-[60px] animate-fade">
<div className="removeEditor fixed left-0 top-0 bg-primary/80 z-[300] w-full min-h-full p-4 md:p-[60px] animate-fade">
<div className="max-w-[1000px] w-full h-full bg-sixth border-tableBorder border-2 rounded-xl relative mx-auto">
<DropFiles onDrop={dragAndDrop}>
<div className="pb-[20px] px-[20px] w-full h-full">
@ -375,8 +375,10 @@ export const MediaBox: FC<{
) : (
<>
{selectedMedia.length > 0 && (
<div className="flex justify-center absolute top-[7px]">
<Button onClick={addMedia}>Add selected media</Button>
<div className="flex justify-center absolute top-[7px] text-white">
<Button onClick={addMedia} className="!text-white">
<span className="!text-white">Add selected media</span>
</Button>
</div>
)}
</>
@ -403,7 +405,7 @@ export const MediaBox: FC<{
>
<div
onClick={removeItem(media)}
className="border border-red-400 text-white flex justify-center items-center absolute w-[20px] h-[20px] rounded-full bg-red-700 -top-[5px] -right-[5px]"
className="border border-red-400 !text-white flex justify-center items-center absolute w-[20px] h-[20px] rounded-full bg-red-700 -top-[5px] -right-[5px]"
>
X
</div>
@ -445,15 +447,7 @@ export const MultiMediaComponent: FC<{
target: { name: string; value?: Array<{ id: string; path: string }> };
}) => void;
}> = (props) => {
const {
onOpen,
onClose,
name,
error,
text,
onChange,
value,
} = props;
const { onOpen, onClose, name, error, text, onChange, value } = props;
const user = useUser();
useEffect(() => {