Fix: Account Page UI Updates

src/components/frame/v5/pages/UserAdvancedPage/partials/NotificationsSection/NotificationsSection.tsx

@@ -51,7 +51,7 @@ const NotificationsSection = () => {
   );
 
   return (
-    <SettingsRow.Container>
+    <SettingsRow.Container className="border-none">
       <SettingsRow.Content>
         <div className="flex items-center gap-1.5">
           <SettingsRow.Title>{formatText(MSG.sectionTitle)}</SettingsRow.Title>

src/components/frame/v5/pages/UserCryptoToFiatPage/CryptoToFiatPage.tsx

@@ -12,6 +12,7 @@ import {
   USER_HOME_ROUTE,
 } from '~routes';
 import { formatText } from '~utils/intl.ts';
+import { formatMessage } from '~utils/yup/tests/helpers.ts';
 
 import CryptoToFiatContextProvider from './context/CryptoToFiatContextProvider.tsx';
 import AutomaticDeposits from './partials/AutomaticDeposits/AutomaticDeposits.tsx';
@@ -53,6 +54,9 @@ const UserCryptoToFiatPage = () => {
   return (
     <CryptoToFiatContextProvider>
       <div className="flex flex-col gap-6">
+        <h4 className="heading-4">
+          {formatMessage({ id: 'userCryptoToFiatPage.heading' })}
+        </h4>
         <p className="text-md text-gray-500">
           {formatText(MSG.pageSubHeading)}
         </p>

src/components/frame/v5/pages/UserPreferencesPage/UserPreferencesPage.tsx

@@ -7,6 +7,7 @@ import { useSetPageHeadingTitle } from '~context/PageHeadingContext/PageHeadingC
 import LoadingTemplate from '~frame/LoadingTemplate/index.ts';
 import { LANDING_PAGE_ROUTE } from '~routes/index.ts';
 import { formatText } from '~utils/intl.ts';
+import { formatMessage } from '~utils/yup/tests/helpers.ts';
 
 import EmailSection from './partials/EmailSection/EmailSection.tsx';
 import NotificationSettingsSection from './partials/NotificationSettingsSection.tsx';
@@ -35,7 +36,10 @@ const UserPreferencesPage: FC = () => {
   }
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col gap-6">
+      <h4 className="heading-4">
+        {formatMessage({ id: 'userPreferencesPage.accountPreferences' })}
+      </h4>
       <EmailSection />
       <WalletSection />
       <NotificationSettingsSection />

src/components/frame/v5/pages/UserPreferencesPage/partials/EmailSection/EmailSection.tsx

@@ -85,12 +85,13 @@ const EmailSection = () => {
   const getRightContent = () => {
     if (!isEmailInputVisible) {
       return (
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-end md:gap-6">
+        <div className="flex w-full flex-col gap-4 md:w-fit md:flex-row md:items-center md:justify-end md:gap-6">
           <span className="text-md">{emailValue}</span>
           <Button
             mode="primarySolid"
             text={{ id: 'button.updateEmail' }}
             onClick={() => setIsEmailInputVisible(true)}
+            isFullSize
           />
         </div>
       );
@@ -135,7 +136,10 @@ const EmailSection = () => {
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <SettingsRow.Container>
-        <SettingsRow.Content rightContent={getRightContent()}>
+        <SettingsRow.Content
+          rightContent={getRightContent()}
+          className="flex-col gap-2 md:flex-row"
+        >
           <SettingsRow.Subtitle>
             {formatText({ id: 'field.email' })}
           </SettingsRow.Subtitle>

src/components/frame/v5/pages/UserProfilePage/partials/UserAccountForm/UserAccountForm.tsx

@@ -3,6 +3,7 @@ import React, { type FC } from 'react';
 import { useSetPageHeadingTitle } from '~context/PageHeadingContext/PageHeadingContext.ts';
 import { useMobile } from '~hooks/index.ts';
 import { formatText } from '~utils/intl.ts';
+import { formatMessage } from '~utils/yup/tests/helpers.ts';
 import Button from '~v5/shared/Button/index.ts';
 
 import Row from '../Row/index.ts';
@@ -19,6 +20,7 @@ const UserAccountForm: FC = () => {
 
   return (
     <div className="flex flex-col gap-6">
+      <h4 className="heading-4">{formatMessage({ id: 'profile.page' })}</h4>
       <Row groups={columnsList} />
       <div className="flex justify-end">
         <Button type="submit" isFullSize={isMobile} mode="primarySolid">

src/components/v5/common/SettingsRow/SettingsRowContainer.tsx

@@ -14,7 +14,7 @@ const SettingsRowContainer: FC<SettingsRowContainerProps> = ({
   return (
     <div
       className={clsx(
-        'flex w-full flex-col items-start gap-6 border-b border-gray-200 py-6',
+        'flex w-full flex-col items-start gap-6 border-b border-gray-200 pb-6',
         className,
       )}
     >

src/components/v5/common/SettingsRow/SettingsRowContent.tsx

@@ -1,17 +1,20 @@
+import clsx from 'clsx';
 import React, { type FC, type PropsWithChildren } from 'react';
 
 const displayName = 'v5.common.SettingsRow.Content';
 
 interface SettingsRowContentProps extends PropsWithChildren {
   rightContent?: JSX.Element;
+  className?: string;
 }
 
 const SettingsRowContent: FC<SettingsRowContentProps> = ({
   children,
   rightContent,
+  className,
 }) => {
   return (
-    <div className="flex w-full items-start justify-between">
+    <div className={clsx('flex w-full items-start justify-between', className)}>
       <div className="flex flex-col items-start gap-1 sm:w-1/2">{children}</div>
       {rightContent}
     </div>

src/components/v5/shared/Navigation/Sidebar/partials/SidebarContentDivider.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { usePageThemeContext } from '~context/PageThemeContext/PageThemeContext.ts';
+
+export const SidebarContentDivider = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  const { isDarkMode } = usePageThemeContext();
+
+  return (
+    <div
+      className={clsx(
+        'mx-3 border-b border-gray-200 md:mx-2 md:border-gray-700',
+        {
+          'md:!border-gray-200': isDarkMode,
+        },
+        className,
+      )}
+    />
+  );
+};

src/components/v5/shared/Navigation/Sidebar/sidebars/AccountPageSidebar/AccountPageSidebar.tsx

@@ -13,6 +13,7 @@ import {
   USER_HOME_ROUTE,
   USER_PREFERENCES_ROUTE,
 } from '~routes';
+import { SidebarContentDivider } from '~v5/shared/Navigation/Sidebar/partials/SidebarContentDivider.tsx';
 import SidebarRouteItem from '~v5/shared/Navigation/Sidebar/partials/SidebarRouteItem/index.ts';
 import Sidebar from '~v5/shared/Navigation/Sidebar/Sidebar.tsx';
 
@@ -37,11 +38,11 @@ export const AccountPageSidebar = () => {
         />
         <SidebarRouteItem
           path={`${USER_HOME_ROUTE}/${USER_ADVANCED_ROUTE}`}
-          translation={{ id: 'advancedSettings.title' }}
+          translation={{ id: 'userAdvancedPage.title' }}
           icon={Wrench}
         />
       </section>
-      <div className="mx-3 my-[15px] border-b border-gray-200 md:mx-2 md:border-gray-700" />
+      <SidebarContentDivider className="my-[0.938rem]" />
       <SidebarRouteItem
         path={`${USER_HOME_ROUTE}/${USER_CRYPTO_TO_FIAT_ROUTE}`}
         translation={{ id: 'userCryptoToFiatPage.title' }}

src/components/v5/shared/Navigation/Sidebar/sidebars/ColonyPageSidebar/ColonyPageSidebar.tsx

@@ -1,16 +1,15 @@
 import { Plus } from '@phosphor-icons/react';
-import clsx from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
 import React from 'react';
 
 import { LEARN_MORE_COLONY_HELP_GENERAL } from '~constants';
 import { useActionSidebarContext } from '~context/ActionSidebarContext/ActionSidebarContext.ts';
 import { usePageLayoutContext } from '~context/PageLayoutContext/PageLayoutContext.ts';
-import { usePageThemeContext } from '~context/PageThemeContext/PageThemeContext.ts';
 import { useTablet } from '~hooks/index.ts';
 import LearnMore from '~shared/Extensions/LearnMore/LearnMore.tsx';
 import Button from '~v5/shared/Button/Button.tsx';
 import Sidebar from '~v5/shared/Navigation/Sidebar/index.ts';
+import { SidebarContentDivider } from '~v5/shared/Navigation/Sidebar/partials/SidebarContentDivider.tsx';
 
 import {
   colonyPageSidebarDesktopClass,
@@ -23,19 +22,10 @@ import { SidebarRoutesSection } from './partials/SidebarRoutesSection.tsx';
 const displayName = 'v5.shared.Navigation.Sidebar.sidebars.ColonyPageSidebar';
 
 const ColonyPageSidebarContent = () => {
-  const { isDarkMode } = usePageThemeContext();
-
   return (
     <section className="flex flex-col gap-3 overflow-y-auto md:gap-4">
       <SidebarActionsSection />
-      <div
-        className={clsx(
-          'mx-3 border-b border-gray-200 md:mx-2 md:border-gray-700',
-          {
-            'md:!border-gray-200': isDarkMode,
-          },
-        )}
-      />
+      <SidebarContentDivider />
       <SidebarRoutesSection />
     </section>
   );

src/i18n/en.json

@@ -805,6 +805,7 @@
     "userPreferencesPage.displayPreferences": "Display preferences",
     "userAdvancedPage.title": "Advanced",
     "userCryptoToFiatPage.title": "Crypto to fiat",
+    "userCryptoToFiatPage.heading": "Crypto to fiat settings",
     "userAdvancedPage.description": "Customise and control your Colony account",
     "advancedSettings.fees.title": "Colony pays my gas fees",
     "advancedSettings.fees.description": "Enable this to have the Metacolony cover your gas fees when performing actions on Colony. All you need to do is sign it. This is currently supported on select chains.",