From 6f0adcab0f529ed614c6e521cb79086eeb226c21 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 5 Sep 2025 11:18:05 +0530
Subject: [PATCH] refactor: simplify project creation button and enhance
 sidebar option styles

---
 app/src/components/Dashboard/SidePannel.tsx | 42 ++++++++++-----------
 app/src/styles/pages/_dashboard.scss        | 24 +++++++++++-
 2 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/app/src/components/Dashboard/SidePannel.tsx b/app/src/components/Dashboard/SidePannel.tsx
index 06ce8ac..b612ba6 100644
--- a/app/src/components/Dashboard/SidePannel.tsx
+++ b/app/src/components/Dashboard/SidePannel.tsx
@@ -92,16 +92,12 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
                     <NotificationIcon />
                 </div>
             </div>
-            <div
-                className="new-project-button"
-                style={{ cursor: "pointer" }}
-                onClick={handleCreateNewProject}
-            >
+            <div className="new-project-button" onClick={handleCreateNewProject}>
                 + New project
             </div>
             <div className="side-bar-content-container">
                 <div className="side-bar-options-container">
-                    <div
+                    <button
                         className={
                             activeTab === "Home" ? "option-list active" : "option-list"
                         }
@@ -109,8 +105,8 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
                     >
                         <HomeIcon />
                         Home
-                    </div>
-                    <div
+                    </button>
+                    <button
                         className={
                             activeTab === "Projects" ? "option-list active" : "option-list"
                         }
@@ -119,8 +115,8 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
                     >
                         <ProjectsIcon />
                         Projects
-                    </div>
-                    <div
+                    </button>
+                    <button
                         className={
                             activeTab === "Trash" ? "option-list active" : "option-list"
                         }
@@ -129,12 +125,13 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
                     >
                         <TrashIcon />
                         Trash
-                    </div>
-                    <div
+                    </button>
+                    <button
                         className={
                             activeTab === "Tutorials" ? "option-list active" : "option-list"
                         }
                         title="coming soon"
+                        disabled
                         onClick={() => {
                             // setActiveTab("Tutorials");
                             console.warn("Tutorials comming soon");
@@ -142,14 +139,15 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
                     >
                         <TutorialsIcon />
                         Tutorials
-                    </div>
-                    <div
+                    </button>
+                    <button
                         className={
                             activeTab === "Documentation"
                                 ? "option-list active"
                                 : "option-list"
                         }
                         title="coming soon"
+                        disabled
                         onClick={() => {
                             // setActiveTab("Documentation");
                             console.warn("Documentation comming soon");
@@ -157,28 +155,30 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
                     >
                         <DocumentationIcon />
                         Documentation
-                    </div>
+                    </button>
                 </div>
                 <div className="side-bar-options-container">
-                    <div className="option-list" title="coming soon">
+                    <button className="option-list" title="coming soon" disabled>
                         <SettingsIcon />
                         Settings
-                    </div>
-                    <div
+                    </button>
+                    <button
                         className="option-list"
                         style={{ cursor: "pointer" }}
                         onClick={() => {
+                            const theme = localStorage.getItem("theme") ?? "light";
                             localStorage.clear();
+                            localStorage.setItem("theme", theme);
                             navigate("/");
                         }}
                     >
                         <LogoutIcon />
                         Log out
-                    </div>
-                    <div className="option-list" title="coming soon">
+                    </button>
+                    <button className="option-list" title="coming soon" disabled>
                         <HelpIcon />
                         Help & Feedback
-                    </div>
+                    </button>
                 </div>
             </div>
         </div>
diff --git a/app/src/styles/pages/_dashboard.scss b/app/src/styles/pages/_dashboard.scss
index a87c966..eb98525 100644
--- a/app/src/styles/pages/_dashboard.scss
+++ b/app/src/styles/pages/_dashboard.scss
@@ -92,20 +92,42 @@
       .side-bar-options-container {
         .option-list {
           display: flex;
+          position: relative;
           align-items: center;
           gap: 8px;
           padding: 8px 10px;
           margin: 4px 0;
           border-radius: #{$border-radius-extra-large};
           width: 100%;
+          overflow: hidden;
           cursor: pointer;
+          transition: color 0.3s;
+
+          &::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            height: 0px;
+            width: 0px;
+            border-radius: 50%;
+            background: #7b4cd323;
+            z-index: -1;
+            transition: all 0.5s ease-in-out;
+          }
 
           &:disabled {
             cursor: help;
           }
 
           &:hover {
-            background: var(--background-color-secondary);
+            &::after {
+              height: 260px;
+              width: 260px;
+              left: 50%;
+              scale: 1;
+            }
           }
         }