Style the data center form components.

Automattic · Sep 30, 2024 · 0b63cb0 · 0b63cb0
1 parent 3956e16
commit 0b63cb0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/client/blocks/data-center-picker/index.tsx b/client/blocks/data-center-picker/index.tsx
@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import { SelectControl } from '@wordpress/components';
 import { localize, LocalizeProps, translate } from 'i18n-calypso';
 import { useState } from 'react';
-import ExternalLink from 'calypso/components/external-link';
 
 interface ExternalProps {
 	value: string;
@@ -50,18 +49,25 @@ const DataCenterOptions = [
 
 const Form = styled.div( {
 	maxWidth: '564px',
+	border: '1px solid var( --color-border-subtle )',
+	borderRadius: '4px',
+	padding: '24px',
 } );
 
 const FormHidden = styled.div( {
 	fontSize: '0.75rem',
 } );
 
 const CustomizeLink = styled.a`
-	color: var( --color-link );
 	text-decoration: underline;
 	cursor: pointer;
 `;
 
+const SupportLink = styled.a`
+	text-decoration: underline;
+	color: var( --color-text-subtle ) !important;
+`;
+
 const DataCenterPicker = ( {
 	onChange,
 	onClickShowPicker = () => null,
@@ -101,8 +107,7 @@ const DataCenterPicker = ( {
 							{
 								components: {
 									supportLink: (
-										<ExternalLink
-											icon
+										<SupportLink
 											target="_blank"
 											href={ localizeUrl(
 												'https://wordpress.com/support/choose-your-sites-primary-data-center/'

diff --git a/client/blocks/eligibility-warnings/style.scss b/client/blocks/eligibility-warnings/style.scss
@@ -298,6 +298,6 @@
 	}
 }
 
-.eligibility-warnings__data-center-picker {
-	padding-top: 8px;
+.card.eligibility-warnings__data-center-picker.is-compact {
+	padding-bottom: 8px;
 }