feat: increase text size and adjust position in install prompt

This commit is contained in:
zaidmukaddam 2024-12-21 11:58:30 +05:30
parent be4436cae8
commit dc866d8384

View File

@ -64,7 +64,7 @@ export function InstallPrompt() {
switch (platform) { switch (platform) {
case 'ios': case 'ios':
return ( return (
<p className="text-sm text-neutral-600 dark:text-neutral-400"> <p className="text-lg text-neutral-600 dark:text-neutral-400">
Tap <Share className="inline h-4 w-4 mx-1" /> and then{" "} Tap <Share className="inline h-4 w-4 mx-1" /> and then{" "}
<span className="whitespace-nowrap"> <span className="whitespace-nowrap">
&ldquo;Add to Home Screen&rdquo; <Plus className="inline h-4 w-4 ml-1" /> &ldquo;Add to Home Screen&rdquo; <Plus className="inline h-4 w-4 ml-1" />
@ -73,13 +73,13 @@ export function InstallPrompt() {
); );
case 'android': case 'android':
return ( return (
<p className="text-sm text-neutral-600 dark:text-neutral-400"> <p className="text-lg text-neutral-600 dark:text-neutral-400">
Tap the menu <span className="font-bold"></span> and select &ldquo;Install app&rdquo; Tap the menu <span className="font-bold"></span> and select &ldquo;Install app&rdquo;
</p> </p>
); );
default: default:
return ( return (
<p className="text-sm text-neutral-600 dark:text-neutral-400"> <p className="text-lg text-neutral-600 dark:text-neutral-400">
Install our app for a better experience <Download className="inline h-4 w-4 ml-1" /> Install our app for a better experience <Download className="inline h-4 w-4 ml-1" />
</p> </p>
); );
@ -93,12 +93,12 @@ export function InstallPrompt() {
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 50 }} exit={{ opacity: 0, y: 50 }}
className="fixed bottom-4 left-4 right-4 z-[100] md:left-auto md:right-4 md:w-96" className="fixed top-4 left-4 right-4 z-[100] md:left-auto md:right-4 md:w-96"
> >
<Card className="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 shadow-lg"> <Card className="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 shadow-lg">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="space-y-2"> <div className="space-y-2">
<h3 className="font-medium text-lg text-neutral-900 dark:text-neutral-100"> <h3 className="font-medium text-2xl text-neutral-900 dark:text-neutral-100">
Install MiniPerplx Install MiniPerplx
</h3> </h3>
{getInstructions()} {getInstructions()}