From 0127000de26fa614428736510d0b72eea83a2e01 Mon Sep 17 00:00:00 2001
From: Harshit-7373 <harshit.sansanwal2528@gmail.com>
Date: Wed, 19 Mar 2025 22:58:14 +0530
Subject: [PATCH] Fix background color issue on hover for sketch name by
 username #2676

---
 .../modules/IDE/components/Header/Toolbar.jsx   |  6 ++++--
 client/styles/components/_toolbar.scss          | 17 +++++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/client/modules/IDE/components/Header/Toolbar.jsx b/client/modules/IDE/components/Header/Toolbar.jsx
index 5ebdbdafea..8f2f766b8a 100644
--- a/client/modules/IDE/components/Header/Toolbar.jsx
+++ b/client/modules/IDE/components/Header/Toolbar.jsx
@@ -61,7 +61,6 @@ const Toolbar = (props) => {
       </button>
       <button
         className={playButtonClass}
-        id="play-sketch"
         onClick={() => {
           props.syncFileContent();
           dispatch(startSketch());
@@ -104,7 +103,10 @@ const Toolbar = (props) => {
             return (
               <p className="toolbar__project-project.owner">
                 {t('Toolbar.By')}{' '}
-                <Link to={`/${project.owner.username}/sketches`}>
+                <Link
+                  className="toolbar__username"
+                  to={`/${project.owner.username}/sketches`}
+                >
                   {project.owner.username}
                 </Link>
               </p>
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index 00f2be6ec3..ea3dc756ee 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -126,6 +126,23 @@
 	}
 }
 
+.toolbar__username {
+	cursor: pointer;
+	@include themify() {
+	  color: getThemifyVariable('secondary-text-color');
+	  
+	  &:hover {
+		// Default hover color for light/dark theme
+		color: $p5-light-pink;
+  
+		// If the logo color is yellow, override the hover color
+		@if (getThemifyVariable('logo-color') == $yellow) {
+		  color: $yellow;
+		}
+	  }
+	}
+  }
+
 .toolbar__autorefresh-label {
 	cursor: pointer;
 	@include themify() {