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

fix(web): update modal styles (#1220)

Browse Source
This commit is contained in:
Aman Harwara
2022-07-07 01:02:59 +05:30
committed by GitHub
parent 68356912f2
commit 6fa6374cf2
9 changed files with 86 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
packages/web/src/javascripts/Components/PasswordWizard/PasswordWizard.tsx
View File

@@ -3,6 +3,10 @@ import { createRef } from 'react'
import { PureComponent } from '@/Components/Abstract/PureComponent'
import Button from '@/Components/Button/Button'
import DecoratedPasswordInput from '../Input/DecoratedPasswordInput'
import ModalDialog from '../Shared/ModalDialog'
import ModalDialogLabel from '../Shared/ModalDialogLabel'
import ModalDialogDescription from '../Shared/ModalDialogDescription'
import ModalDialogButtons from '../Shared/ModalDialogButtons'
interface Props {
application: WebApplication
@@ -224,84 +228,69 @@ class PasswordWizard extends PureComponent<Props, State> {
override render() {
return (
<div className="sn-component">
<div id="password-wizard" className="sk-modal small auto-height">
<div className="sk-modal-background" />
<div className="sk-modal-content">
<div className="sn-component">
<div className="sk-panel">
<div className="sk-panel-header">
<div className="sk-panel-header-title">{this.state.title}</div>
<a onClick={this.dismiss} className="sk-a info close-button">
Close
</a>
</div>
<div className="sk-panel-content">
{this.state.step === Steps.PasswordStep && (
<div className="sk-panel-section">
<div className="sk-panel-row">
<div className="sk-panel-column stretch">
<form className="sk-panel-form">
<label htmlFor="password-wiz-current-password" className="mb-1 block">
Current Password
</label>
<div className="sn-component" id="password-wizard">
<ModalDialog>
<ModalDialogLabel closeDialog={this.dismiss}>{this.state.title}</ModalDialogLabel>
<ModalDialogDescription>
{this.state.step === Steps.PasswordStep && (
<div className="flex flex-col pb-1.5">
<form>
<label htmlFor="password-wiz-current-password" className="mb-1 block">
Current Password
</label>
<DecoratedPasswordInput
ref={this.currentPasswordInput}
id="password-wiz-current-password"
value={this.state.formData.currentPassword}
onChange={this.handleCurrentPasswordInputChange}
type="password"
/>
<DecoratedPasswordInput
ref={this.currentPasswordInput}
id="password-wiz-current-password"
value={this.state.formData.currentPassword}
onChange={this.handleCurrentPasswordInputChange}
type="password"
/>
<div className="sk-panel-row" />
<div className="min-h-2" />
<label htmlFor="password-wiz-new-password" className="mb-1 block">
New Password
</label>
<label htmlFor="password-wiz-new-password" className="mb-1 block">
New Password
</label>
<DecoratedPasswordInput
id="password-wiz-new-password"
value={this.state.formData.newPassword}
onChange={this.handleNewPasswordInputChange}
type="password"
/>
<div className="sk-panel-row" />
<DecoratedPasswordInput
id="password-wiz-new-password"
value={this.state.formData.newPassword}
onChange={this.handleNewPasswordInputChange}
type="password"
/>
<label htmlFor="password-wiz-confirm-new-password" className="mb-1 block">
Confirm New Password
</label>
<div className="min-h-2" />
<DecoratedPasswordInput
id="password-wiz-confirm-new-password"
value={this.state.formData.newPasswordConfirmation}
onChange={this.handleNewPasswordConfirmationInputChange}
type="password"
/>
</form>
</div>
</div>
</div>
)}
{this.state.step === Steps.FinishStep && (
<div className="sk-panel-section">
<div className="mb-1 font-bold text-info">Your password has been successfully changed.</div>
<p className="sk-p">
Please ensure you are running the latest version of Standard Notes on all platforms to ensure
maximum compatibility.
</p>
</div>
)}
</div>
<div className="sk-panel-footer">
<Button primary onClick={this.nextStep} disabled={this.state.lockContinue} className="min-w-20">
{this.state.continueTitle}
</Button>
</div>
<label htmlFor="password-wiz-confirm-new-password" className="mb-1 block">
Confirm New Password
</label>
<DecoratedPasswordInput
id="password-wiz-confirm-new-password"
value={this.state.formData.newPasswordConfirmation}
onChange={this.handleNewPasswordConfirmationInputChange}
type="password"
/>
</form>
</div>
</div>
</div>
</div>
)}
{this.state.step === Steps.FinishStep && (
<div className="flex flex-col">
<div className="mb-1 font-bold text-info">Your password has been successfully changed.</div>
<p className="sk-p">
Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum
compatibility.
</p>
</div>
)}
</ModalDialogDescription>
<ModalDialogButtons>
<Button primary onClick={this.nextStep} disabled={this.state.lockContinue} className="min-w-20">
{this.state.continueTitle}
</Button>
</ModalDialogButtons>
</ModalDialog>
</div>
)
}