home button

Signed-off-by: Vedansh Saini <[email protected]>

Author: vedansh-5

src/index.css

@@ -338,4 +338,18 @@ body,input,div,h3,h4,p,label,hr, #scrumReport{
 
 .dark-mode .tooltip-container.tooltip-right .tooltip-bubble::after {
     border-color: transparent #374151 transparent transparent;
+}
+#homeButton {
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+#homeButton:active {
+    background: #e5e7eb;
+}
+.dark-mode #homeButton:active {
+    background: #374151;
 }

src/popup.html

@@ -21,7 +21,7 @@
 	<div class="pl-1 py-4 rounded-2xl">
 		<div class="bg-white px-4 py-4 mx-2 mb-2 rounded-3xl">
 				<div class="flex justify-between py-2">
-					<h3  class="text-3xl font-semibold ">Scrum Helper</h3>
+					<h3 id="scrumHelperHeading" class="text-3xl font-semibold cursor-pointer">Scrum Helper</h3>
 					<img src="icons/night-mode.png" alt="Night Mode" class="w-7 h-7 mx-3 cursor-pointer">
 				</div>
 				<div>
@@ -36,9 +36,14 @@ <h3  class="text-3xl font-semibold ">Scrum Helper</h3>
 						<span class=""></span>
 						Enable
 					</label>
-					<button id="settingsToggle">
-						<img id="settingsIcon" src="icons/settings-light.png" alt="Settings" class="w-7 h-7 mx-3 cursor-pointer">
-					</button>
+					<div class="flex">
+						<button id="homeButton" title="Go to Report" class="ml-1 p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition" style="font-size: 2.5rem;">
+							<i class="fa fa-home text-4xl text-gray-600 dark:text-gray-300"></i>
+						</button>
+						<button id="settingsToggle">
+							<img id="settingsIcon" src="icons/settings-light.png" alt="Settings" class="w-7 h-7 mx-3 cursor-pointer">
+						</button>
+					</div>
 			</div>
 		</div>
 

src/scripts/popup.js

@@ -47,6 +47,13 @@ document.addEventListener('DOMContentLoaded', function() {
     const darkModeToggle = document.querySelector('img[alt="Night Mode"]');
     const settingsIcon = document.getElementById('settingsIcon');
     const body = document.body;
+    const homeButton = document.getElementById('homeButton');
+    const scrumHelperHeading = document.getElementById('scrumHelperHeading');
+    const settingsToggle = document.getElementById('settingsToggle');
+    const reportSection = document.getElementById('reportSection');
+    const settingsSection = document.getElementById('settingsSection');
+
+    let isSettingsVisible = false;
 
     chrome.storage.local.get(['darkMode'], function(result) {
         if(result.darkMode) {
@@ -261,12 +268,6 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
-    const settingsToggle = document.getElementById('settingsToggle');
-    const reportSection = document.getElementById('reportSection');
-    const settingsSection = document.getElementById('settingsSection');
-
-    let isSettingsVisible = false;
-
     function showReportView() {
         isSettingsVisible = false;
         reportSection.classList.remove('hidden');
@@ -293,6 +294,13 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
+    if (homeButton) {
+        homeButton.addEventListener('click', showReportView);
+    }
+    if (scrumHelperHeading) {
+        scrumHelperHeading.addEventListener('click', showReportView);
+    }
+
     showReportView();
 
 });