60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { create, InstanceProps } from 'react-modal-promise'
|
|
import { ActionButton } from './ActionButton'
|
|
|
|
type ModalResolve = {
|
|
wantRestart: boolean
|
|
}
|
|
|
|
type ModalReject = boolean
|
|
|
|
type UpdaterRestartModalProps = InstanceProps<ModalResolve, ModalReject> & {
|
|
version: string
|
|
}
|
|
|
|
export const createUpdaterRestartModal = create<
|
|
UpdaterRestartModalProps,
|
|
ModalResolve,
|
|
ModalReject
|
|
>
|
|
|
|
export const UpdaterRestartModal = ({
|
|
onResolve,
|
|
version,
|
|
}: UpdaterRestartModalProps) => (
|
|
<div className="fixed inset-0 z-50 grid place-content-center bg-chalkboard-110/50">
|
|
<div className="max-w-3xl p-8 rounded bg-chalkboard-10 dark:bg-chalkboard-90">
|
|
<h1 className="text-3xl font-bold">Ready to restart?</h1>
|
|
<p className="my-4" data-testid="update-restart-version">
|
|
v{version} is now installed. Restart the app to use the new features.
|
|
</p>
|
|
<div className="flex justify-between">
|
|
<ActionButton
|
|
Element="button"
|
|
onClick={() => onResolve({ wantRestart: false })}
|
|
iconStart={{
|
|
icon: 'close',
|
|
bgClassName: 'bg-destroy-80',
|
|
iconClassName: 'text-destroy-20 group-hover:text-destroy-10',
|
|
}}
|
|
className="hover:border-destroy-40 hover:bg-destroy-10/50 dark:hover:bg-destroy-80/50"
|
|
data-testid="update-restrart-button-cancel"
|
|
>
|
|
Not now
|
|
</ActionButton>
|
|
<ActionButton
|
|
Element="button"
|
|
onClick={() => onResolve({ wantRestart: true })}
|
|
iconStart={{
|
|
icon: 'arrowRight',
|
|
bgClassName: 'dark:bg-chalkboard-80',
|
|
}}
|
|
className="dark:hover:bg-chalkboard-80/50"
|
|
data-testid="update-restrart-button-update"
|
|
>
|
|
Restart
|
|
</ActionButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|