Feat: Add accordion for settings form

src/pages/UserSettings/SettingsPageAccount.tsx

@@ -31,8 +31,8 @@ export const SettingsPageAccount = observer(() => {
       </Flex>
 
       <PatreonIntegration user={userStore.activeUser} />
-      <ChangeEmailForm />
       <ChangePasswordForm />
+      <ChangeEmailForm />
 
       <Text variant="body">
         {title}

src/pages/UserSettings/content/sections/ChangeEmail.form.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Field, Form } from 'react-final-form'
-import { Button, FieldInput, Icon } from 'oa-components'
+import { Button, ButtonIcon, FieldInput } from 'oa-components'
 import { PasswordField } from 'src/common/Form/PasswordField'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
 import { FormFieldWrapper } from 'src/pages/Howto/Content/Common'
@@ -22,7 +22,7 @@ export const ChangeEmailForm = () => {
 
   const { userStore } = useCommonStores().stores
   const formId = 'changeEmail'
-  const glyph = isExpanded ? 'arrow-full-up' : 'arrow-full-down'
+  const dropdownIcon = isExpanded ? 'chevron-up' : 'chevron-down'
 
   useEffect(() => {
     getUserEmail()
@@ -54,7 +54,33 @@ export const ChangeEmailForm = () => {
       sx={{ flexDirection: 'column', gap: 2 }}
     >
       <UserContactError submitResults={submitResults} />
-
+      <Flex
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Heading as="h3" variant="small">
+          {headings.changeEmail}
+        </Heading>
+        <ButtonIcon
+          data-cy="ChangeEmail-DropdownButton"
+          icon={dropdownIcon}
+          onClick={() => setIsExpanded(!isExpanded)}
+          sx={{
+            paddingRight: 3,
+            paddingLeft: 2,
+            border: 'none',
+            ':hover': {
+              backgroundColor: 'unset',
+              cursor: 'pointer',
+            },
+          }}
+        />
+      </Flex>
+      <Text sx={{ fontSize: 1 }}>
+        {fields.email.title}: <strong>{currentEmail}</strong>
+      </Text>
       {isExpanded && currentEmail && (
         <Form
           onSubmit={onSubmit}
@@ -67,16 +93,8 @@ export const ChangeEmailForm = () => {
             return (
               <Flex
                 data-cy="changeEmailForm"
-                sx={{ flexDirection: 'column', gap: 2 }}
+                sx={{ flexDirection: 'column', gap: 2, marginTop: 5 }}
               >
-                <Heading as="h3" variant="small">
-                  {headings.changeEmail}
-                </Heading>
-
-                <Text sx={{ fontSize: 1 }}>
-                  {fields.email.title}: <strong>{currentEmail}</strong>
-                </Text>
-
                 <FormFieldWrapper
                   text={fields.newEmail.title}
                   htmlFor="newEmail"
@@ -125,21 +143,6 @@ export const ChangeEmailForm = () => {
           }}
         />
       )}
-
-      <Button
-        type="button"
-        data-cy="changeEmailButton"
-        onClick={() => setIsExpanded(!isExpanded)}
-        variant="secondary"
-        sx={{
-          alignSelf: 'flex-start',
-        }}
-      >
-        <Flex sx={{ gap: 2 }}>
-          <Text>{buttons.changeEmail}</Text>
-          <Icon glyph={glyph} />
-        </Flex>
-      </Button>
     </Flex>
   )
 }

src/pages/UserSettings/content/sections/ChangePassword.form.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Form } from 'react-final-form'
-import { Button, FieldInput, Icon } from 'oa-components'
+import { Button, ButtonIcon, FieldInput } from 'oa-components'
 import { PasswordField } from 'src/common/Form/PasswordField'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
 import { FormFieldWrapper } from 'src/pages/Howto/Content/Common'
@@ -22,7 +22,7 @@ export const ChangePasswordForm = () => {
 
   const { userStore } = useCommonStores().stores
   const formId = 'changePassword'
-  const glyph = isExpanded ? 'arrow-full-up' : 'arrow-full-down'
+  const dropdownIcon = isExpanded ? 'chevron-up' : 'chevron-down'
 
   const onSubmit = async (values: IFormValues) => {
     const { oldPassword, newPassword } = values
@@ -45,7 +45,36 @@ export const ChangePasswordForm = () => {
       sx={{ flexDirection: 'column', gap: 2 }}
     >
       <UserContactError submitResults={submitResults} />
-
+      <Flex
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          ':hover': {
+            cursor: 'pointer',
+          },
+        }}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <Heading as="h3" variant="small">
+          {headings.changePassword}
+        </Heading>
+        <ButtonIcon
+          data-cy="ChangePassword-DropdownButton"
+          icon={dropdownIcon}
+          sx={{
+            paddingRight: 3,
+            paddingLeft: 2,
+            border: 'none',
+            ':hover': {
+              backgroundColor: 'unset',
+              cursor: 'pointer',
+            },
+          }}
+        />
+      </Flex>
+      <Text sx={{ fontSize: 1 }}>
+        Here you can change your password to be a stronger one. 💪
+      </Text>
       {isExpanded && (
         <Form
           onSubmit={onSubmit}
@@ -62,12 +91,8 @@ export const ChangePasswordForm = () => {
             return (
               <Flex
                 data-cy="changePasswordForm"
-                sx={{ flexDirection: 'column', gap: 1 }}
+                sx={{ flexDirection: 'column', gap: 1, marginTop: 5 }}
               >
-                <Heading as="h3" variant="small">
-                  {headings.changePassword}
-                </Heading>
-
                 <FormFieldWrapper
                   text={fields.oldPassword.title}
                   htmlFor="oldPassword"
@@ -130,21 +155,6 @@ export const ChangePasswordForm = () => {
           }}
         />
       )}
-
-      <Button
-        type="button"
-        data-cy="changePasswordButton"
-        onClick={() => setIsExpanded(!isExpanded)}
-        variant="secondary"
-        sx={{
-          alignSelf: 'flex-start',
-        }}
-      >
-        <Flex sx={{ gap: 2 }}>
-          <Text>{buttons.changePassword}</Text>
-          <Icon glyph={glyph} />
-        </Flex>
-      </Button>
     </Flex>
   )
 }