From bb9852b5d3315e6fa0fac4ad52a8701df5134aef Mon Sep 17 00:00:00 2001
From: Maharshi Patel <maharshi.patel988@gmail.com>
Date: Tue, 22 Aug 2023 18:03:37 +0530
Subject: [PATCH] fix: updated onboarding widget style

removed drop shadow and updated styles to match the new design
---
 frappe/public/scss/desk/desktop.scss | 43 ++++++++++++++++++----------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/frappe/public/scss/desk/desktop.scss b/frappe/public/scss/desk/desktop.scss
index f6b155d69a..a3d32077f1 100644
--- a/frappe/public/scss/desk/desktop.scss
+++ b/frappe/public/scss/desk/desktop.scss
@@ -341,11 +341,11 @@ body {
 	&.onboarding-widget-box {
 		margin-bottom: var(--margin-2xl);
 		padding: var(--padding-lg) !important;
-		background-color: var(--bg-light-gray);
-		box-shadow: var(--card-shadow) ;
+		background-color: var(--neutral-white);
+		border: 1px solid var(--gray-200);
 
 		&.edit-mode:hover {
-			background-color: var(--fg-color);
+			background-color: var(--bg-color);
 
 			.onboarding-step {
 				&.active,
@@ -404,6 +404,13 @@ body {
 					margin-bottom: var(--margin-sm);
 				}
 
+				.onboarding-step-body {
+					color: var(--gray-700);
+
+					p {
+						font-size: var(--text-base);
+					}
+				}
 				.onboarding-step-footer {
 					margin-top: var(--margin-md);
 				}
@@ -412,10 +419,11 @@ body {
 			.onboarding-step {
 				@include flex(flex, space-between, center, null);
 				border-radius: var(--border-radius);
-				padding: 8px;
-				font-size: var(--text-md);
+				padding: 5px 8px;
+				font-size: var(--text-base);
 				max-width: 350px;
 				text-decoration: none;
+				margin-bottom: var(--margin-xs);
 
 				&.pending {
 					.step-index.step-pending {
@@ -437,21 +445,21 @@ body {
 					}
 
 					span {
-						color: $text-color;
+						color: var(--gray-700);
 					}
 				}
 
 				&.active,
 				&:hover {
-					background-color: var(--fg-color);
+					background-color: var(--gray-100);
 
 					.step-index {
-						background-color: var(--bg-color);
+						background-color: var(--gray-100);
 					}
 
-					.step-skip {
-						visibility: visible;
-					}
+				}
+				&.active .step-skip {
+					visibility: visible;
 				}
 
 				.step-title {
@@ -460,14 +468,19 @@ body {
 
 				.step-index {
 					@include flex(flex, center, center, null);
-					height: 20px;
-					width: 20px;
+					height: 16px;
+					width: 16px;
 					color: var(--text-on-light-gray);
-					background-color: var(--bg-light-gray);
+					border: 1px solid var(--gray-900);
 
 					margin-right: var(--margin-sm);
 					border-radius: var(--border-radius-full);
 
+					.step-icon {
+						padding: 1px;
+						stroke-width: 1.5px;
+					}
+
 					&.step-pending {
 						display: none;
 					}
@@ -490,7 +503,7 @@ body {
 				}
 
 				.step-skip {
-					font-size: var(--text-md);
+					font-size: var(--text-base);
 					visibility: hidden;
 					cursor: pointer;
 				}