adjust spacing and replace buttons with ExternalLink

Author: CacheMeOwside

routes/ai-home/stage.tsx

@@ -2,7 +2,13 @@
  * WordPress dependencies
  */
 import { Page } from '@wordpress/admin-ui';
-import { Button, Notice, Spinner, ToggleControl } from '@wordpress/components';
+import {
+	Button,
+	ExternalLink,
+	Notice,
+	Spinner,
+	ToggleControl,
+} from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { DataForm } from '@wordpress/dataviews';
@@ -798,24 +804,14 @@ function AISettingsPage() {
 				'ai'
 			) }
 			actions={
-				<>
-					<Button
-						variant="secondary"
-						href="https://github.com/WordPress/ai/tree/develop/docs"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
+				<div className="ai-settings-page__actions">
+					<ExternalLink href="https://github.com/WordPress/ai/tree/develop/docs">
 						{ __( 'Docs', 'ai' ) }
-					</Button>
-					<Button
-						variant="primary"
-						href="https://github.com/WordPress/ai/blob/develop/CONTRIBUTING.md"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
+					</ExternalLink>
+					<ExternalLink href="https://github.com/WordPress/ai/blob/develop/CONTRIBUTING.md">
 						{ __( 'Contribute', 'ai' ) }
-					</Button>
-				</>
+					</ExternalLink>
+				</div>
 			}
 		>
 			<div className="ai-settings-page">

routes/ai-home/style.scss

@@ -10,15 +10,35 @@
 	}
 
 	.dataforms-layouts-card__field-header-label {
-		font-size: 0.9rem;
+		font-size: 1rem;
 		font-weight: 600;
 	}
+
+	.dataforms-layouts-card__field-description {
+		margin-bottom: 36px;
+	}
 }
 
 .ai-settings-page .components-notice {
 	margin: 0 0 24px;
 }
 
+.ai-settings-page__actions {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+}
+
+.ai-settings-page__link {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+
+	svg {
+		fill: currentColor;
+	}
+}
+
 .ai-feature-settings-form {
 	margin-top: 4px;
 	padding-left: 40px;