Minor ui improvements

Aims to address: https://jira.newfold.com/browse/PRESS8-24
newfold-labs · Oct 10, 2024 · 6d6474f · 6d6474f
1 parent 88893d8
commit 6d6474f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 20 deletions.
diff --git a/src/OnboardingSPA/components/AdminBar/index.js b/src/OnboardingSPA/components/AdminBar/index.js
@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import { Icon, wordpress } from '@wordpress/icons';
+import { Dashicon } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as nfdOnboardingStore } from '../../../OnboardingSPA/store';
 
@@ -18,7 +18,7 @@ const AdminBar = () => {
 	return (
 		<div className="nfd-onboarding-header__admin-bar">
 			<div className="nfd-onboarding-header__admin-bar__wplogo">
-				<Icon icon={ wordpress } />
+				<Dashicon icon="wordpress" />
 				<span>{ __( 'WordPress', 'wp-module-onboarding' ) }</span>
 			</div>
 			<div className="nfd-onboarding-header__admin-bar__profile">

diff --git a/src/OnboardingSPA/components/AdminBar/stylesheet.scss b/src/OnboardingSPA/components/AdminBar/stylesheet.scss
@@ -7,47 +7,45 @@ $light-grey : #a0a5aa;
 		background-color: var(--nfd-onboarding-admin-bar-background);
 		width: 100%;
 		color: var(--nfd-onboarding-admin-bar-color);
+		font-size: 13px;
+		font-weight: 400;
 		margin: 0;
-		padding: 5px;
+		padding: 5px 7px;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		box-sizing: border-box;
 
 		&__wplogo {
-			color: var(--nfd-onboarding-white);
 			display: flex;
-			font-size: 16px;
-			font-weight: 510;
 			align-items: center;
 
-			svg {
-				color: $light-grey;
-				fill: $light-grey;
-			}
-
 			span {
-				margin-left: 15px;
+				margin-left: 7px;
+
+				&:first-of-type {
+					color: $light-grey;
+					margin-left: 0;
+				}
 			}
 		}
 
 		&__profile {
 			display: flex;
 			align-items: center;
+			margin-right: 2.5px;
 
 			&__greeting {
-				color: var(--nfd-onboarding-white);
-				font-size: 16px;
-				font-weight: 510;
-				margin-right: 5px;
+				margin-right: 6px;
 			}
 
 			&__avatar {
-				height: 20px;
-				width: 20px;
+				height: 16px;
+				width: 16px;
 				display: inline-block;
 
 				img {
+					border: 1px solid #8c8f94;
 					width: 100%;
 					height: 100%;
 					object-fit: contain;

diff --git a/src/OnboardingSPA/components/StartOptions/stylesheet.scss b/src/OnboardingSPA/components/StartOptions/stylesheet.scss
@@ -107,7 +107,8 @@
 				color: var(--nfd-onboarding-primary) !important;
 				font-weight: 510;
 				text-align: center;
-				font-size: 14px;
+				text-wrap: balance;
+				font-size: 13.5px;
 				margin: 5px;
 
 				&--large {

diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
@@ -321,7 +321,7 @@ body {
 		--nfd-onboarding-hover: #c3c4c7;
 		--nfd-onboarding-secondary: #fff;
 		--nfd-onboarding-secondary-rgb: 255, 255, 255;
-		--nfd-onboarding-admin-bar-color: #c3c4c7;
+		--nfd-onboarding-admin-bar-color: #f0f0f1;
 		--nfd-onboarding-shimmer-color: 0, 0, 0;
 		--nfd-onboarding-card-background: #fff;
 		--nfd-onboarding-admin-bar-background: #1d2327;