feat: Update "Change Email" and "Change Password" modal designs (#714)

* feat: Add new utility classes

* feat: Update "Change Email" modal design

* feat: Use .sk-input.contrast className to mimic password wizard inputs

* feat: Add explicit labels to password wizard inputs

* feat: Make button sizing consistent

* refactor: Remove unused dependencies

* refactor: Remove unused component

app/assets/javascripts/components/shared/ModalDialog.tsx

@@ -5,7 +5,6 @@ import {
   AlertDialogLabel,
 } from '@node_modules/@reach/alert-dialog';
 import { useRef } from '@node_modules/preact/hooks';
-import { IconButton } from '@/components/IconButton';
 
 export const ModalDialog: FunctionComponent = ({ children }) => {
   const ldRef = useRef<HTMLButtonElement>(null);
@@ -19,7 +18,7 @@ export const ModalDialog: FunctionComponent = ({ children }) => {
       <div tabIndex={-1} className="sn-component">
         <div
           tabIndex={0}
-          className="w-160 bg-default rounded shadow-overlay focus:padded-ring-info"
+          className="sk-panel w-160 bg-default rounded shadow-overlay focus:padded-ring-info"
         >
           {children}
         </div>
@@ -30,17 +29,20 @@ export const ModalDialog: FunctionComponent = ({ children }) => {
 
 export const ModalDialogLabel: FunctionComponent<{
   closeDialog: () => void;
-}> = ({ children, closeDialog }) => (
-  <AlertDialogLabel className="">
-    <div className="px-4 py-4 flex flex-row items-center">
-      <div className="flex-grow color-text text-lg font-bold">{children}</div>
-      <IconButton
-        focusable={true}
-        title="Close"
-        className="color-neutral h-5 w-5"
-        icon="close"
-        onClick={() => closeDialog()}
-      />
+  className?: string;
+}> = ({ children, closeDialog, className }) => (
+  <AlertDialogLabel className={className}>
+    <div className="w-full flex flex-row justify-between items-center">
+      <div className="flex-grow color-text text-base font-medium">
+        {children}
+      </div>
+      <div
+        tabIndex={0}
+        className="font-bold color-info cursor-pointer"
+        onClick={closeDialog}
+      >
+        Close
+      </div>
     </div>
     <hr className="h-1px bg-border no-border m-0" />
   </AlertDialogLabel>
@@ -55,17 +57,20 @@ export const ModalDialogDescription: FunctionComponent<{ className?: string }> =
     </AlertDialogDescription>
   );
 
-export const ModalDialogButtons: FunctionComponent = ({ children }) => (
+export const ModalDialogButtons: FunctionComponent<{ className?: string }> = ({
+  children,
+  className,
+}) => (
   <>
     <hr className="h-1px bg-border no-border m-0" />
-    <div className="px-4 py-4 flex flex-row justify-end items-center">
+    <div className={`px-4 py-4 flex flex-row items-center ${className}`}>
       {children != undefined && Array.isArray(children)
         ? children.map((child, idx, arr) => (
-          <>
-            {child}
-            {idx < arr.length - 1 ? <div className="min-w-3" /> : undefined}
-          </>
-        ))
+            <>
+              {child}
+              {idx < arr.length - 1 ? <div className="min-w-3" /> : undefined}
+            </>
+          ))
         : children}
     </div>
   </>

app/assets/javascripts/preferences/panes/account/changeEmail/ChangeEmailForm.tsx

@@ -1,37 +1,47 @@
-import { DecoratedInput } from '@/components/DecoratedInput';
 import { StateUpdater } from 'preact/hooks';
 import { FunctionalComponent } from 'preact';
-import { HtmlInputTypes } from '@/enums';
 
 type Props = {
-  setNewEmail: StateUpdater<string>
-  setCurrentPassword: StateUpdater<string>
-}
+  setNewEmail: StateUpdater<string>;
+  setCurrentPassword: StateUpdater<string>;
+};
+
+const labelClassName = `block mb-1`;
+
+const inputClassName = 'sk-input contrast';
+
 export const ChangeEmailForm: FunctionalComponent<Props> = ({
   setNewEmail,
-  setCurrentPassword
+  setCurrentPassword,
 }) => {
   return (
-    (
-      <>
-        <div className={'mt-2 mb-3'}>
-          <DecoratedInput
-            onChange={(newEmail) => {
-              setNewEmail(newEmail);
-            }}
-            placeholder={'New Email'}
-          />
-        </div>
-        <div className={'mt-2 mb-3'}>
-          <DecoratedInput
-            type={HtmlInputTypes.Password}
-            onChange={(currentPassword) => {
-              setCurrentPassword(currentPassword);
-            }}
-            placeholder={'Current Password'}
-          />
-        </div>
-      </>
-    )
+    <div className="w-full flex flex-col">
+      <div className="mt-2 mb-3">
+        <label className={labelClassName} htmlFor="change-email-email-input">
+          New Email:
+        </label>
+        <input
+          id="change-email-email-input"
+          className={inputClassName}
+          type="email"
+          onChange={({ target }) => {
+            setNewEmail((target as HTMLInputElement).value);
+          }}
+        />
+      </div>
+      <div className="mb-2">
+        <label className={labelClassName} htmlFor="change-email-password-input">
+          Current Password:
+        </label>
+        <input
+          id="change-email-password-input"
+          className={inputClassName}
+          type="password"
+          onChange={({ target }) => {
+            setCurrentPassword((target as HTMLInputElement).value);
+          }}
+        />
+      </div>
+    </div>
   );
 };

app/assets/javascripts/preferences/panes/account/changeEmail/index.tsx

@@ -154,10 +154,13 @@ export const ChangeEmail: FunctionalComponent<Props> = ({
   return (
     <div>
       <ModalDialog>
-        <ModalDialogLabel closeDialog={handleDialogClose}>
+        <ModalDialogLabel
+          closeDialog={handleDialogClose}
+          className="sk-panel-header px-4.5"
+        >
           Change Email
         </ModalDialogLabel>
-        <ModalDialogDescription>
+        <ModalDialogDescription className="px-4.5">
           {currentStep === Steps.InitialStep && (
             <ChangeEmailForm
               setNewEmail={setNewEmail}
@@ -166,15 +169,7 @@ export const ChangeEmail: FunctionalComponent<Props> = ({
           )}
           {currentStep === Steps.FinishStep && <ChangeEmailSuccess />}
         </ModalDialogDescription>
-        <ModalDialogButtons>
-          {currentStep === Steps.InitialStep && (
-            <Button
-              className="min-w-20"
-              type="normal"
-              label="Cancel"
-              onClick={handleDialogClose}
-            />
-          )}
+        <ModalDialogButtons className="px-4.5">
           <Button
             className="min-w-20"
             type="primary"