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/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"