Makes add DNS record button primary (#96935)

* Makes add record primary button * Remove space
Automattic · Dec 10, 2024 · 2c6ebb4 · 2c6ebb4
1 parent e45aca8
commit 2c6ebb4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/client/my-sites/domains/domain-management/dns/dns-add-new-record-button.tsx b/client/my-sites/domains/domain-management/dns/dns-add-new-record-button.tsx
@@ -17,8 +17,9 @@ function DnsAddNewRecordButton( { site, domain, isMobile }: DndAddNewRecordButto
 			borderless={ isMobile }
 			href={ domainManagementDnsAddRecord( site, domain, currentRoute ) }
 			className={ className }
+			primary
 		>
-			<Icon icon={ plus } viewBox="4 4 16 16" size={ 16 } />
+			<Icon className="add-record__icon" icon={ plus } viewBox="4 4 16 16" size={ 16 } />
 			{ ! isMobile && __( 'Add a record' ) }
 		</Button>
 	);

diff --git a/client/my-sites/domains/domain-management/dns/dns-records.jsx b/client/my-sites/domains/domain-management/dns/dns-records.jsx
@@ -135,13 +135,13 @@ class DnsRecords extends Component {
 		);
 
 		const buttons = [
-			<DnsAddNewRecordButton
-				key="add-new-record-button"
+			<DnsImportBindFileButton
+				key="import-bind-file-button"
 				site={ selectedSite?.slug }
 				domain={ selectedDomainName }
 			/>,
-			<DnsImportBindFileButton
-				key="import-bind-file-button"
+			<DnsAddNewRecordButton
+				key="add-new-record-button"
 				site={ selectedSite?.slug }
 				domain={ selectedDomainName }
 			/>,

diff --git a/client/my-sites/domains/domain-management/dns/style.scss b/client/my-sites/domains/domain-management/dns/style.scss
@@ -247,6 +247,13 @@ button.dns__breadcrumb-button {
 		display: flex;
 		justify-content: center;
 	}
+	.add-record__icon{
+		fill: var(--studio-gray-80);
+
+		@include break-large {
+			fill: var(--studio-white);
+		}
+	}
 }
 
 .dns__breadcrumb-button {