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

packages/web/src/javascripts/Components/PasswordWizard/PasswordWizard.tsx

@@ -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 className="sn-component" id="password-wizard">
-        <div id="password-wizard" className="sk-modal small auto-height">
+        <ModalDialog>
-          <div className="sk-modal-background" />
+          <ModalDialogLabel closeDialog={this.dismiss}>{this.state.title}</ModalDialogLabel>
-          <div className="sk-modal-content">
+          <ModalDialogDescription>
-            <div className="sn-component">
+            {this.state.step === Steps.PasswordStep && (
-              <div className="sk-panel">
+              <div className="flex flex-col pb-1.5">
-                <div className="sk-panel-header">
+                <form>
-                  <div className="sk-panel-header-title">{this.state.title}</div>
+                  <label htmlFor="password-wiz-current-password" className="mb-1 block">
-                  <a onClick={this.dismiss} className="sk-a info close-button">
+                    Current Password
-                    Close
+                  </label>
-                  </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>
 
-                            <DecoratedPasswordInput
+                  <DecoratedPasswordInput
-                              ref={this.currentPasswordInput}
+                    ref={this.currentPasswordInput}
-                              id="password-wiz-current-password"
+                    id="password-wiz-current-password"
-                              value={this.state.formData.currentPassword}
+                    value={this.state.formData.currentPassword}
-                              onChange={this.handleCurrentPasswordInputChange}
+                    onChange={this.handleCurrentPasswordInputChange}
-                              type="password"
+                    type="password"
-                            />
+                  />
 
-                            <div className="sk-panel-row" />
+                  <div className="min-h-2" />
 
-                            <label htmlFor="password-wiz-new-password" className="mb-1 block">
+                  <label htmlFor="password-wiz-new-password" className="mb-1 block">
-                              New Password
+                    New Password
-                            </label>
+                  </label>
 
-                            <DecoratedPasswordInput
+                  <DecoratedPasswordInput
-                              id="password-wiz-new-password"
+                    id="password-wiz-new-password"
-                              value={this.state.formData.newPassword}
+                    value={this.state.formData.newPassword}
-                              onChange={this.handleNewPasswordInputChange}
+                    onChange={this.handleNewPasswordInputChange}
-                              type="password"
+                    type="password"
-                            />
+                  />
-                            <div className="sk-panel-row" />
 
-                            <label htmlFor="password-wiz-confirm-new-password" className="mb-1 block">
+                  <div className="min-h-2" />
-                              Confirm New Password
-                            </label>
 
-                            <DecoratedPasswordInput
+                  <label htmlFor="password-wiz-confirm-new-password" className="mb-1 block">
-                              id="password-wiz-confirm-new-password"
+                    Confirm New Password
-                              value={this.state.formData.newPasswordConfirmation}
+                  </label>
-                              onChange={this.handleNewPasswordConfirmationInputChange}
+
-                              type="password"
+                  <DecoratedPasswordInput
-                            />
+                    id="password-wiz-confirm-new-password"
-                          </form>
+                    value={this.state.formData.newPasswordConfirmation}
-                        </div>
+                    onChange={this.handleNewPasswordConfirmationInputChange}
-                      </div>
+                    type="password"
-                    </div>
+                  />
-                  )}
+                </form>
-                  {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>
               </div>
-            </div>
+            )}
-          </div>
+            {this.state.step === Steps.FinishStep && (
-        </div>
+              <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>
     )
   }

packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx

@@ -12,7 +12,7 @@ const labelClassName = 'block mb-1'
 const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPassword }) => {
   return (
     <div className="flex w-full flex-col">
-      <div className="mt-2 mb-3">
+      <div className="mb-3">
         <label className={labelClassName} htmlFor="change-email-email-input">
           New Email:
         </label>

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/Bullet.tsx

@@ -5,7 +5,7 @@ type Props = {
 }
 
 const Bullet: FunctionComponent<Props> = ({ className = '' }) => (
-  <div className={`min-h-1 bg-inverted-default min-w-1 rounded-full ${className} mr-2`} />
+  <div className={`min-h-1 min-w-1 rounded-full bg-text ${className} mr-2`} />
 )
 
 export default Bullet

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/ScanQRCode.tsx

@@ -25,7 +25,7 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
           <QRCode className="border-neutral-contrast-bg border-2 border-solid" value={act.qrCode} size={100} />
         </div>
         <div className="min-w-5" />
-        <div className="flex flex-grow flex-col">
+        <div className="flex flex-grow flex-col gap-2">
           <div className="flex flex-row items-center">
             <Bullet />
             <div className="min-w-1" />
@@ -35,7 +35,6 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
             <div className="min-w-2" />
             <AuthAppInfoTooltip />
           </div>
-          <div className="min-h-2" />
           <div className="flex flex-row items-center">
             <Bullet className="mt-2 self-start" />
             <div className="min-w-1" />
@@ -43,7 +42,6 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
               <b>Scan this QR code</b> or <b>add this secret key</b>:
             </div>
           </div>
-          <div className="min-h-2" />
           <DecoratedInput
             className={{ container: 'w-92 ml-4' }}
             disabled={true}

packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx

@@ -107,9 +107,9 @@ const SessionsModalContent: FunctionComponent<{
       <ModalDialog onDismiss={close} className="sessions-modal max-h-[90vh]">
         <ModalDialogLabel
           headerButtons={
-            <button className="cursor-pointer border-0 font-bold text-info" onClick={refresh}>
+            <Button small colorStyle="info" onClick={refresh}>
               Refresh
-            </button>
+            </Button>
           }
           closeDialog={close}
         >

packages/web/src/javascripts/Components/Shared/ModalDialog.tsx

@@ -1,5 +1,6 @@
 import { useRef, ReactNode } from 'react'
 import { AlertDialogContent, AlertDialogOverlay } from '@reach/alert-dialog'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   children: ReactNode
@@ -14,7 +15,10 @@ const ModalDialog = ({ children, onDismiss, className }: Props) => {
     <AlertDialogOverlay leastDestructiveRef={ldRef} onDismiss={onDismiss}>
       <AlertDialogContent
         tabIndex={0}
-        className={`flex w-160 flex-col border border-solid border-border bg-default p-0 shadow-main ${className}`}
+        className={classNames(
+          'flex w-160 flex-col rounded border border-solid border-border bg-default p-0 shadow-main',
+          className,
+        )}
       >
         {children}
       </AlertDialogContent>

packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@/Utils/ConcatenateClassNames'
 import { FunctionComponent } from 'react'
 
 type Props = {
@@ -7,7 +8,7 @@ type Props = {
 const ModalDialogButtons: FunctionComponent<Props> = ({ children, className }) => (
   <>
     <hr className="m-0 h-[1px] border-none bg-border" />
-    <div className={`flex flex-row items-center px-4 py-4 ${className}`}>
+    <div className={classNames('flex items-center justify-end px-4 py-4', className)}>
       {children != undefined && Array.isArray(children)
         ? children.map((child, idx, arr) => (
             <>

packages/web/src/javascripts/Components/Shared/ModalDialogLabel.tsx

@@ -1,5 +1,7 @@
 import { FunctionComponent, ReactNode } from 'react'
 import { AlertDialogLabel } from '@reach/alert-dialog'
+import Icon from '@/Components/Icon/Icon'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   closeDialog: () => void
@@ -9,15 +11,18 @@ type Props = {
 
 const ModalDialogLabel: FunctionComponent<Props> = ({ children, closeDialog, className, headerButtons }) => (
   <AlertDialogLabel
-    className={`flex flex-shrink-0 items-center justify-between border-b border-solid border-border bg-contrast px-4.5 py-3 text-text ${className}`}
+    className={classNames(
+      'flex flex-shrink-0 items-center justify-between rounded-t border-b border-solid border-border bg-default px-4.5 py-3 text-text',
+      className,
+    )}
   >
     <div className="flex w-full flex-row items-center justify-between">
-      <div className="flex-grow text-base font-medium text-text">{children}</div>
+      <div className="flex-grow text-lg font-semibold text-text">{children}</div>
       <div className="flex items-center gap-2">
         {headerButtons}
-        <div tabIndex={0} className="cursor-pointer font-bold text-info" onClick={closeDialog}>
+        <button tabIndex={0} className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
-          Close
+          <Icon type="close" />
-        </div>
+        </button>
       </div>
     </div>
     <hr className="h-1px no-border m-0 bg-border" />

packages/web/tailwind.config.js

@@ -38,6 +38,10 @@ module.exports = {
         89: '22.25rem',
         125: '31.25rem',
       },
+      minHeight: {
+        1: '0.25rem',
+        2: '0.5rem',
+      },
       maxHeight: {
         110: '27.5rem',
       },