rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: migrate dialogs & tooltips from reach-ui (#2314)

Browse Source
This commit is contained in:
Aman Harwara
2023-04-21 01:51:22 +05:30
committed by GitHub
parent 5a02003458
commit 9996dac00a
62 changed files with 387 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/SuccessPrompt.tsx
View File

@@ -1,5 +1,4 @@
import Icon from '@/Components/Icon/Icon'
import { AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
export const SuccessPrompt = ({
ctaRef,
@@ -10,7 +9,7 @@ export const SuccessPrompt = ({
}) => {
return (
<>
<AlertDialogLabel>
<div>
<div className="flex justify-end p-1">
<button
className="flex cursor-pointer border-0 bg-transparent p-0"
@@ -27,11 +26,9 @@ export const SuccessPrompt = ({
<Icon className={'h-24 w-24 px-7 py-2 text-[50px]'} size={'custom'} type={'🎉'} />
</div>
<div className="mb-1 text-center text-lg font-bold">Your purchase was successful!</div>
</AlertDialogLabel>
</div>
<AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
Enjoy your new powered up experience.
</AlertDialogDescription>
<div className="mb-2 px-4.5 text-center text-sm text-passive-1">Enjoy your new powered up experience.</div>
<div className="p-4">
<button

9
packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/UpgradePrompt.tsx
View File

@@ -1,4 +1,3 @@
import { AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
import { useCallback } from 'react'
import { WebApplication } from '@/Application/Application'
import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
@@ -29,7 +28,7 @@ export const UpgradePrompt = ({
return (
<>
<AlertDialogLabel>
<div>
<div className="flex justify-end p-1">
<button
className="flex cursor-pointer border-0 bg-transparent p-0"
@@ -46,8 +45,8 @@ export const UpgradePrompt = ({
<Icon className={`h-12 w-12 ${PremiumFeatureIconClass}`} size={'custom'} type={PremiumFeatureIconName} />
</div>
<div className="mb-1 text-center text-lg font-bold">Enable Advanced Features</div>
</AlertDialogLabel>
<AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
</div>
<div className="mb-2 px-4.5 text-center text-sm text-passive-1">
{featureName && (
<span>
To take advantage of <span className="font-semibold">{featureName}</span> and other advanced features,
@@ -74,7 +73,7 @@ export const UpgradePrompt = ({
</ul>
</div>
)}
</AlertDialogDescription>
</div>
<div className="p-4">
<button