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

fix: ui bugs in apps (#5465) 

* fix: ui bugs in apps

* fix: recurring text

* fix: logo size and font

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
pull/5478/head^2
Udit Takkar 2022-11-12 01:05:10 +05:30 committed by GitHub
parent 30eea089ba
commit fcde1f7a9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/app-store/_components/AppCard.tsx
View File

@ -26,35 +26,42 @@ export default function AppCard({
const [animationRef] = useAutoAnimate<HTMLDivElement>();
return (
<div ref={animationRef} className="mb-4 mt-2 rounded-md border border-gray-200 p-4 text-sm sm:p-8">
<div className="flex w-full flex-col gap-2 sm:flex-row sm:gap-0">
{/* Don't know why but w-[42px] isn't working, started happening when I started using next/dynamic */}
<Link href={"/apps/" + app.slug}>
<a className="mr-3 h-auto w-10 rounded-sm">
<img src={app?.logo} alt={app?.name} />
</a>
</Link>
<div className="flex flex-col">
<span className="font-semibold leading-none text-black">{app?.name}</span>
<p className="pt-2 text-sm font-normal text-gray-600">{description || app?.description}</p>
</div>
{app?.isInstalled ? (
<div className="ml-auto flex items-center">
<Switch
onCheckedChange={(enabled) => {
if (switchOnClick) {
switchOnClick(enabled);
}
setAppData("enabled", enabled);
}}
checked={switchChecked}
/>
<div className="mb-4 mt-2 rounded-md border border-gray-200">
<div className="p-4 text-sm sm:p-8">
<div className="flex w-full flex-col gap-2 sm:flex-row sm:gap-0">
{/* Don't know why but w-[42px] isn't working, started happening when I started using next/dynamic */}
<Link href={"/apps/" + app.slug}>
<a className="mr-3 h-auto w-10 rounded-sm">
<img className="w-full" src={app?.logo} alt={app?.name} />
</a>
</Link>
<div className="flex flex-col">
<span className="text-base font-semibold leading-4 text-black">{app?.name}</span>
<p className="pt-2 text-sm font-normal leading-4 text-gray-600">
{description || app?.description}
</p>
</div>
) : (
<OmniInstallAppButton className="ml-auto flex items-center" appId={app?.slug} />
)}
{app?.isInstalled ? (
<div className="ml-auto flex items-center">
<Switch
onCheckedChange={(enabled) => {
if (switchOnClick) {
switchOnClick(enabled);
}
setAppData("enabled", enabled);
}}
checked={switchChecked}
/>
</div>
) : (
<OmniInstallAppButton className="ml-auto flex items-center" appId={app?.slug} />
)}
</div>
</div>
<div ref={animationRef}>
{app?.isInstalled && switchChecked && <hr />}
{app?.isInstalled && switchChecked ? <div className="p-4 text-sm sm:px-8">{children}</div> : null}
</div>
{app?.isInstalled && switchChecked ? <div className="mt-4">{children}</div> : null}
</div>
);
}

6
packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
View File

@ -47,7 +47,7 @@ const VerticalTabItem = function ({
target={props.isExternalLink ? "_blank" : "_self"}
className={classNames(
props.textClassNames || "text-sm font-medium leading-none text-gray-600",
"min-h-9 group flex w-64 flex-row items-center rounded-md px-3 py-[10px] hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900",
"min-h-9 group flex w-64 flex-row rounded-md px-3 py-[10px] hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900",
props.disabled && "pointer-events-none !opacity-30",
(isChild || !props.icon) && "ml-7 mr-5 w-auto",
!info ? "h-6" : "h-14",
@ -56,9 +56,9 @@ const VerticalTabItem = function ({
data-testid={`vertical-tab-${name}`}
aria-current={isCurrent ? "page" : undefined}>
{props.icon && <props.icon className="mr-[10px] h-[16px] w-[16px] stroke-[2px] md:mt-0" />}
<div>
<div className="h-fit">
<span className="flex items-center space-x-2">
<Skeleton title={t(name)} as="p" className="max-w-36 truncate">
<Skeleton title={t(name)} as="p" className="max-w-36 min-h-4 truncate">
{t(name)}
</Skeleton>
{props.isExternalLink ? <Icon.FiExternalLink /> : null}