public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: positioning of arrows (#4478) 

Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
pull/4609/head^2
Udit Takkar 2022-09-20 17:07:46 +05:30 committed by GitHub
parent 9b6d5d2ff8
commit ae46d615ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/ui/v2/core/form/FormCard.tsx
View File

@ -20,7 +20,10 @@ export default function FormCard({
moveDown?: Action | null;
className?: string;
} & JSX.IntrinsicElements["div"]) {
className = classNames(className, "group relative w-full rounded-md p-4 border border-gray-200");
className = classNames(
className,
"flex items-center group relative w-full rounded-md p-4 border border-gray-200"
);
return (
<div className={className} {...restProps}>
@ -28,7 +31,7 @@ export default function FormCard({
{moveUp?.check() ? (
<button
type="button"
className="invisible absolute left-0 -ml-[13px] mb-4 flex h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 "
className="invisible absolute left-0 -ml-[13px] -mt-10 flex h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 "
onClick={() => moveUp?.fn()}>
<Icon.FiArrowUp />
</button>
@ -36,27 +39,29 @@ export default function FormCard({
{moveDown?.check() ? (
<button
type="button"
className="invisible absolute left-0 -ml-[13px] mt-8 flex h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100"
className="invisible absolute left-0 -ml-[13px] -mt-2 flex h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100"
onClick={() => moveDown?.fn()}>
<Icon.FiArrowDown />
</button>
) : null}
</div>
<div className="flex items-center justify-between">
<span className="text-sm font-semibold leading-none">{label}</span>
{deleteField?.check() ? (
<button
type="button"
onClick={() => {
deleteField?.fn();
}}
color="secondary">
<Icon.FiTrash className="h-4 w-4 text-gray-400" />
</button>
) : null}
<div className="w-full">
<div className="flex items-center justify-between">
<span className="text-sm font-semibold leading-none">{label}</span>
{deleteField?.check() ? (
<button
type="button"
onClick={() => {
deleteField?.fn();
}}
color="secondary">
<Icon.FiTrash className="h-4 w-4 text-gray-400" />
</button>
) : null}
</div>
<Divider className="mt-3 mb-6" />
{children}
</div>
<Divider className="mt-3 mb-6" />
{children}
</div>
);
}