vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.9k Packages Projects Releases Wiki Activity

fix: /event-type /apps - doesn't match designs (#9317)

Browse Source 
* updated AppCard comp for design changes

* updated rainfallForm for design changes

* Fix:: event-type/apps design issues

* Update apps/web/components/eventtype/EventAppsTab.tsx

* Update packages/app-store/_components/AppCard.tsx

* Update packages/app-store/_components/AppCard.tsx

* Fix lint

---------

Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Bailey Pumfleet <bailey@pumfleet.co.uk>
Co-authored-by: alannnc <alannnc@gmail.com>
This commit is contained in:
Saurabh Jaswal
2023-06-05 22:49:27 +00:00
committed by GitHub
co-authored by Peer Richelsen Peer Richelsen Bailey Pumfleet alannnc
parent d061572ed6
commit c182091fa9
3 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/eventtype/EventAppsTab.tsx
+2 -2
View File
@@ -104,9 +104,9 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
</div>
</div>
{!shouldLockDisableProps("apps").disabled && (
<div>
<div className="bg-muted rounded-md p-8">
{!isLoading && notInstalledApps?.length ? (
<h2 className="text-emphasis my-2 text-lg font-semibold">{t("available_apps")}</h2>
<h2 className="text-emphasis text-lg font-semibold">{t("available_apps")}</h2>
) : null}
<div className="before:border-0">
{notInstalledApps?.map((app) => (
packages/app-store/_components/AppCard.tsx
+15 -5
View File
@@ -29,20 +29,30 @@ export default function AppCard({
const [animationRef] = useAutoAnimate<HTMLDivElement>();
return (
<div className={`border-subtle mb-4 mt-2 rounded-md border ${!app.enabled && "grayscale"}`}>
<div className="p-4 text-sm sm:p-6">
<div
className={classNames(
"border-subtle mb-4",
app.isInstalled ? "mt-2" : "mt-6",
"rounded-md border",
!app.enabled && "grayscale",
"bg-red-400"
)}>
<div className={classNames(app.isInstalled ? "p-4 text-sm sm:p-4" : "px-5 py-4 text-sm sm:px-5")}>
<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} className="mr-3 h-auto w-10 rounded-sm">
<img
className={classNames(app?.logo.includes("-dark") && "dark:invert", "w-full min-w-[40px]")}
className={classNames(
app?.logo.includes("-dark") && "dark:invert",
`w-full ${app.isInstalled ? "min-w-[42px]" : "min-w-[32.47px]"}`
)}
src={app?.logo}
alt={app?.name}
/>
</Link>
<div className="flex flex-col">
<span className="text-emphasis text-base font-semibold leading-4">{app?.name}</span>
<p className="text-default mb-2 pt-2 text-sm font-normal ltr:pr-2 rtl:pl-2">
<p className="text-default max-w-md truncate pt-2 text-sm font-normal ltr:pr-2 rtl:pl-2">
{description || app?.description}
</p>
</div>
@@ -70,7 +80,7 @@ export default function AppCard({
</div>
<div ref={animationRef}>
{app?.isInstalled && switchChecked && <hr className="border-subtle" />}
{app?.isInstalled && switchChecked ? <div className="p-4 text-sm sm:px-8">{children}</div> : null}
{app?.isInstalled && switchChecked ? <div className="p-4 text-sm sm:px-4">{children}</div> : null}
</div>
</div>
);
packages/app-store/rainbow/components/RainbowInstallForm.tsx
+3 -3
View File
@@ -20,7 +20,7 @@ const RainbowInstallForm: React.FC<RainbowInstallFormProps> = ({
return (
<>
<div className="mt-4 block items-center sm:flex">
<div className="mt-5 block items-center sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<label htmlFor="blockchainId" className="text-default flex text-sm font-medium">
{t("Blockchain")}
@@ -36,7 +36,7 @@ const RainbowInstallForm: React.FC<RainbowInstallFormProps> = ({
options={SUPPORTED_CHAINS_FOR_FORM || [{ value: 1, label: "Ethereum" }]}
/>
</div>
<div className="block items-center sm:flex">
<div className="mt-5 block items-center pb-4 sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<label htmlFor="smartContractAddress" className="text-default flex text-sm font-medium">
{t("token_address")}
@@ -46,7 +46,7 @@ const RainbowInstallForm: React.FC<RainbowInstallFormProps> = ({
<div className="relative mt-1 rounded-sm">
<input
type="text"
className="border-default block w-full rounded-sm text-sm "
className="border-default block w-full rounded-sm text-sm"
placeholder={t("Example: 0x71c7656ec7ab88b098defb751b7401b5f6d8976f")}
defaultValue={(smartContractAddress || "") as string}
onChange={(e) => {