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,24 +228,13 @@ 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">
-              <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="flex flex-col pb-1.5">
-                      <div className="sk-panel-row">
+                <form>
-                        <div className="sk-panel-column stretch">
-                          <form className="sk-panel-form">
                   <label htmlFor="password-wiz-current-password" className="mb-1 block">
                     Current Password
                   </label>
@@ -254,7 +247,7 @@ class PasswordWizard extends PureComponent<Props, State> {
                     type="password"
                   />
 
-                            <div className="sk-panel-row" />
+                  <div className="min-h-2" />
 
                   <label htmlFor="password-wiz-new-password" className="mb-1 block">
                     New Password
@@ -266,7 +259,8 @@ class PasswordWizard extends PureComponent<Props, State> {
                     onChange={this.handleNewPasswordInputChange}
                     type="password"
                   />
-                            <div className="sk-panel-row" />
+
+                  <div className="min-h-2" />
 
                   <label htmlFor="password-wiz-confirm-new-password" className="mb-1 block">
                     Confirm New Password
@@ -280,28 +274,23 @@ class PasswordWizard extends PureComponent<Props, State> {
                   />
                 </form>
               </div>
-                      </div>
-                    </div>
             )}
             {this.state.step === Steps.FinishStep && (
-                    <div className="sk-panel-section">
+              <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
+                  Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum
-                        maximum compatibility.
+                  compatibility.
                 </p>
               </div>
             )}
-                </div>
+          </ModalDialogDescription>
-                <div className="sk-panel-footer">
+          <ModalDialogButtons>
             <Button primary onClick={this.nextStep} disabled={this.state.lockContinue} className="min-w-20">
               {this.state.continueTitle}
             </Button>
-                </div>
+          </ModalDialogButtons>
-              </div>
+        </ModalDialog>
-            </div>
-          </div>
-        </div>
       </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',
       },