ui(User Settings): Color changes to match new thmee

resources/scripts/components/dashboard/AccountOverviewContainer.tsx

@@ -12,7 +12,7 @@ const AccountOverviewContainer = () => {
     const { state } = useLocation();
 
     return (
-        <PageContentBlock title={'Your Settings'}>
+        <PageContentBlock title={'Account Settings'}>
             <div className='w-full h-full min-h-full flex-1 flex flex-col px-2 sm:px-0'>
                 {state?.twoFactorRedirect && (
                     <div
@@ -29,7 +29,7 @@ const AccountOverviewContainer = () => {
                     </div>
                 )}
 
-                <div className='flex flex-col w-full h-full gap-4'>
+                <div className='flex flex-col w-full h-full gap-4 '>
                     <div
                         className='transform-gpu skeleton-anim-2'
                         style={{

resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx

@@ -41,7 +41,7 @@ const ConfigureTwoFactorForm = () => {
                         Remove Authenticator App
                     </ActionButton>
                 ) : (
-                    <ActionButton variant='primary' onClick={() => setVisible('enable')}>
+                    <ActionButton variant='secondary' onClick={() => setVisible('enable')}>
                         Enable Authenticator App
                     </ActionButton>
                 )}

resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx

@@ -61,7 +61,7 @@ const UpdateEmailAddressForm = () => {
                             <Field id={'confirm_password'} type={'password'} name={'password'} label={'Password'} />
                         </div>
                         <div className={`mt-6`}>
-                            <ActionButton variant='primary' disabled={isSubmitting || !isValid}>
+                            <ActionButton variant='secondary' disabled={isSubmitting || !isValid}>
                                 Update Email
                             </ActionButton>
                         </div>

resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx

@@ -23,7 +23,7 @@ const schema = Yup.object().shape({
     confirmPassword: Yup.string().test(
         'password',
         'Password confirmation does not match the password you entered.',
-        function (value) {
+        function(value) {
             return value === this.parent.password;
         },
     ),
@@ -92,7 +92,7 @@ const UpdatePasswordForm = () => {
                                 />
                             </div>
                             <div className={`mt-6`}>
-                                <ActionButton variant='primary' disabled={isSubmitting || !isValid}>
+                                <ActionButton variant='secondary' disabled={isSubmitting || !isValid}>
                                     {isSubmitting && <Spinner size='small' />}
                                     {isSubmitting ? 'Updating...' : 'Update Password'}
                                 </ActionButton>

resources/scripts/components/elements/ContentBox.tsx

@@ -11,7 +11,7 @@ type Props = Readonly<
 >;
 
 const ContentBox = ({ title, showFlashes, showLoadingOverlay, children, ...props }: Props) => (
-    <div className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-xs rounded-xl' {...props}>
+    <div className='p-8 bg-mocha-500 border-[1px] border-mocha-400 shadow-xs rounded-xl' {...props}>
         {title && <h2 className={`font-extrabold mb-4  text-2xl`}>{title}</h2>}
         {showFlashes && <FlashMessageRender byKey={typeof showFlashes === 'string' ? showFlashes : undefined} />}
         <div>