Merge pull request #3864 from google/enhancement/3702-analytics-links

Enhancement/3702 analytics links
google · Aug 12, 2021 · bda7e37 · bda7e37
2 parents 9a91c54 + f24d35f
commit bda7e37
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/assets/js/modules/analytics/components/settings/SettingsView.js b/assets/js/modules/analytics/components/settings/SettingsView.js
@@ -146,7 +146,11 @@ export default function SettingsView() {
 						{ __( 'View', 'google-site-kit' ) }
 					</h5>
 					<p className="googlesitekit-settings-module__meta-item-data">
-						<DisplaySetting value={ profileID } />{ ' ' }
+						<DisplaySetting value={ profileID } />
+					</p>
+				</div>
+				<div className="googlesitekit-settings-module__meta-item googlesitekit-settings-module__meta-item--data-only">
+					<p className="googlesitekit-settings-module__meta-item-data googlesitekit-settings-module__meta-item-data--tiny">
 						<Link href={ editViewSettingsURL } external inherit>
 							{ createInterpolateElement(
 								__(
@@ -189,7 +193,11 @@ export default function SettingsView() {
 								) }
 							</h5>
 							<p className="googlesitekit-settings-module__meta-item-data">
-								<DisplaySetting value={ ga4MeasurementID } />{ ' ' }
+								<DisplaySetting value={ ga4MeasurementID } />
+							</p>
+						</div>
+						<div className="googlesitekit-settings-module__meta-item googlesitekit-settings-module__meta-item--data-only">
+							<p className="googlesitekit-settings-module__meta-item-data googlesitekit-settings-module__meta-item-data--tiny">
 								<Link
 									href={ editDataStreamSettingsURL }
 									external

diff --git a/assets/sass/components/settings/_googlesitekit-settings-module.scss b/assets/sass/components/settings/_googlesitekit-settings-module.scss
@@ -128,7 +128,7 @@
 	}
 
 	.googlesitekit-settings-module__meta-items {
-		align-items: center;
+		align-items: stretch;
 		display: flex;
 		flex-wrap: wrap;
 		margin: 0;
@@ -154,6 +154,11 @@
 			margin: 0 ($grid-gap-desktop * 2) $grid-gap-desktop 0;
 		}
 
+		&--data-only {
+			align-items: flex-end;
+			display: flex;
+		}
+
 		&--nomargin {
 			margin: 0;
 		}
@@ -184,6 +189,11 @@
 		&--wrap {
 			word-break: break-all;
 		}
+
+		&--tiny {
+			font-size: 0.8125rem;
+			font-weight: 400;
+		}
 	}
 
 	.googlesitekit-settings-module__edit-button-icon,