Refactor AccountConnection with new layout and type components

Author: aveline

polaris-react/src/components/AccountConnection/AccountConnection.scss

@@ -3,12 +3,12 @@ import React from 'react';
 import type {Action} from '../../types';
 import {Avatar} from '../Avatar';
 import {buttonFrom} from '../Button';
-import {Card} from '../Card';
-import {Stack} from '../Stack';
-import {TextStyle} from '../TextStyle';
 import {SettingAction} from '../SettingAction';
-
-import styles from './AccountConnection.scss';
+import {AlphaCard} from '../AlphaCard';
+import {Box} from '../Box';
+import {Inline} from '../Inline';
+import {Text} from '../Text';
+import {AlphaStack} from '../AlphaStack';
 
 export interface AccountConnectionProps {
   /** Content to display as title */
@@ -54,39 +54,37 @@ export function AccountConnection({
 
   let titleMarkup: React.ReactNode = null;
   if (title) {
-    titleMarkup = <div>{title}</div>;
+    titleMarkup = <>{title}</>;
   } else if (accountName) {
-    titleMarkup = <div>{accountName}</div>;
+    titleMarkup = <>{accountName}</>;
   }
 
   const detailsMarkup = details ? (
-    <div>
-      <TextStyle variation="subdued">{details}</TextStyle>
-    </div>
+    <Text as="span" variant="bodyMd" color="subdued">
+      {details}
+    </Text>
   ) : null;
 
   const termsOfServiceMarkup = termsOfService ? (
-    <div className={styles.TermsOfService}>{termsOfService}</div>
+    <Box paddingTop="5">{termsOfService}</Box>
   ) : null;
 
   const actionElement = action
     ? buttonFrom(action, {primary: !connected})
     : null;
 
   return (
-    <Card sectioned>
+    <AlphaCard>
       <SettingAction action={actionElement}>
-        <Stack>
+        <Inline spacing="4">
           {avatarMarkup}
-          <Stack.Item fill>
-            <div className={styles.Content}>
-              {titleMarkup}
-              {detailsMarkup}
-            </div>
-          </Stack.Item>
-        </Stack>
+          <AlphaStack spacing="2">
+            {titleMarkup}
+            {detailsMarkup}
+          </AlphaStack>
+        </Inline>
       </SettingAction>
       {termsOfServiceMarkup}
-    </Card>
+    </AlphaCard>
   );
 }