fix: (Multi-Account) switch account modal styling tweaks (#3771)

Author: ChitlangeSahas

src/accounts/AccountPage.tsx

@@ -63,23 +63,24 @@ const AccountAboutPage: FC = () => {
 
   const inputStyle = {width: 250}
   const labelStyle = {marginBottom: 8}
+  const dividerStyle = {marginTop: '32px'}
 
   return (
     <AccountTabContainer activeTab="about">
       <>
         {userAccounts && userAccounts.length >= 2 && (
-          <React.Fragment>
+          <div>
             <Button
               text="Switch Account"
               icon={IconFont.Switch_New}
               onClick={showSwitchAccountDialog}
               testID="user-account-switch-btn"
             />
-            <hr />
-          </React.Fragment>
+            <hr style={dividerStyle} />
+          </div>
         )}
 
-        <h2 data-testid="account-settings--header"> Account Details </h2>
+        <h4 data-testid="account-settings--header"> Account Details </h4>
         <div style={labelStyle}>Account Name</div>
         <FlexBox direction={FlexDirection.Row} margin={ComponentSize.Medium}>
           <Input

src/accounts/SwitchAccountOverlay.tsx

@@ -42,7 +42,7 @@ const ToggleGroup: FC<ToggleProps> = ({onClickAcct}) => {
     setSelectedAcct(numAcct)
   }
 
-  const style = {marginBottom: 7}
+  const style = {marginBottom: 17}
 
   return (
     <React.Fragment>
@@ -132,9 +132,9 @@ export const SwitchAccountOverlay: FC<Props> = ({onDismissOverlay}) => {
     'Select a Different Account to Enable the Switch Button'
 
   return (
-    <Overlay.Container maxWidth={630} testID="switch-account--dialog">
+    <Overlay.Container maxWidth={420} testID="switch-account--dialog">
       <Overlay.Header
-        title="Switch Account"
+        title="Switch account"
         wrapText={true}
         onDismiss={onDismissOverlay}
       />
@@ -146,19 +146,21 @@ export const SwitchAccountOverlay: FC<Props> = ({onDismissOverlay}) => {
           text="Cancel"
           testID="multi-account-switch-cancel"
           onClick={onDismissOverlay}
+          color={ComponentColor.Tertiary}
         />
         <Button
           testID="switch-default-account--btn"
-          text="Set Default Account"
+          text="Set as default"
           status={defaultButtonStatus}
           onClick={doSetDefaultAccount}
         />
         <Button
-          text="Switch Account"
+          text="Switch"
           onClick={doSwitchAccount}
           status={switchButtonStatus}
           disabledTitleText={disabledTitleText}
           testID="actually-switch-account--btn"
+          color={ComponentColor.Primary}
         />
       </Overlay.Footer>
     </Overlay.Container>