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

6
packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
View File

@@ -1,4 +1,4 @@
import { AlertDialog } from '@reach/alert-dialog'
import AlertDialog from '../AlertDialog/AlertDialog'
import { FunctionComponent, useRef } from 'react'
import { WebApplication } from '@/Application/Application'
import { PremiumFeatureModalType } from './PremiumFeatureModalType'
@@ -30,9 +30,9 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
}
return (
<AlertDialog leastDestructiveRef={ctaButtonRef} className="p-0">
<AlertDialog closeDialog={onClose} className="!max-w-89">
<div tabIndex={-1} className="sn-component bg-default">
<div tabIndex={0} className="max-w-89 rounded bg-default p-4 shadow-main">
<div tabIndex={0}>
{type === PremiumFeatureModalType.UpgradePrompt && (
<UpgradePrompt
featureName={featureName}

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