fossasia · hpdang · Jun 10, 2025 · Apr 6, 2025 · Apr 8, 2025 · Apr 9, 2025
diff --git a/package.json b/package.json
@@ -11,14 +11,24 @@
 		"check": "biome check .",
 		"fix": "biome lint --write"
 	},
-	"keywords": ["scrum", "google groups", "fossasia"],
+	"keywords": [
+		"scrum",
+		"google groups",
+		"fossasia"
+	],
 	"author": "hkedia321",
 	"license": "ISC",
 	"bugs": {
 		"url": "https://github.com/fossasia/scrum_helper/issues"
 	},
 	"homepage": "https://github.com/fossasia/scrum_helper",
 	"devDependencies": {
-		"@biomejs/biome": "1.9.4"
+		"@biomejs/biome": "1.9.4",
+		"autoprefixer": "^10.4.21",
+		"postcss": "^8.5.3",
+		"tailwindcss": "^4.1.4"
+	},
+	"dependencies": {
+		"@tailwindcss/cli": "^4.1.3"
 	}
 }
diff --git a/src/icons/light-mode.png b/src/icons/light-mode.png
diff --git a/src/icons/night-mode.png b/src/icons/night-mode.png
diff --git a/src/index.css b/src/index.css
@@ -1,9 +1,12 @@
+@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 body {
 	margin: 0;
 	padding: 0;
 	background-color: rgba(251, 251, 251, 0.6);
 }
-
 * {
 	box-sizing: border-box;
 }
@@ -50,39 +53,68 @@ li {
 	list-style-type: disc !important;
 	margin-left: 1rem;
 }
-.selectedLabel {
-	font-weight: 400;
-	color: #333333;
+
+body,input,div,h3,h4,p,label,hr, #scrumReport{
+	transition: all 0.3s ease-in-out;
 }
 
-.unselectedLabel {
-	font-weight: 300; 
-	color: #666666; 
+.dark-mode { 
+	background: #1a1a1a !important;
+	color: #ffffff !important;
+	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+.dark-mode .bg-white{
+	background-color: #2d2d2d !important;
+	border-color: #404040 !important;
+	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
 }
 
-.selectedLabel, .unselectedLabel {
-	transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;
+.dark-mode input[type="text"],
+.dark-mode input[type="date"],
+.dark-mode #scrumReport {
+	background-color: #404040 !important;
+	border-color: #505050 !important;
+	color: #ffffff !important;
+	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+.dark-mode h3,
+.dark-mode h4,
+.dark-mode p,
+.dark-mode label {
+	color: #ffffff !important;
+	transition: color 0.3s ease-in-out;
 }
 
+.dark-mode hr {
+	border-color: #505050 !important;
+	transition: border-color 0.3s ease-in-out;
+}
 #scrumReport {
-    border: 1px solid #ccc;
-    padding: 10px;
-    min-height: 200px;
-    max-height: 400px;
-    overflow-y: auto;
-    background-color: white;
+	font-size: 13px !important; 
+	line-height: 1.5 !important; 
 }
 
-#scrumReport:focus {
-    outline: none;
-    border-color: #26a69a;
+#scrumReport b {
+	font-size: 13px !important; 
 }
 
-#scrumReport a {
-    color: #26a69a;
-    text-decoration: none;
+#scrumReport li {
+	font-size: 13px !important; 
+	margin-bottom: 4px !important; 
 }
 
-#scrumReport a:hover {
-    text-decoration: underline;
+.dark-mode #scrumReport {
+	font-size: 13px !important;
 }
+
+.dark-mode #scrumReport b {
+	font-size: 13px !important;
+}
+
+.dark-mode #scrumReport li {
+	font-size: 13px !important;
+}
+
+.dark-mode a {
+	color: #00b7ff !important;
+}
diff --git a/src/manifest.json b/src/manifest.json
@@ -31,6 +31,13 @@
   "content_security_policy": {
     "extension_pages": "script-src 'self'; object-src 'self';"
   },
+  "web_accessible_resources": [{
+    "resources": [
+      "/icons/night-mode.png",
+      "icons/night-mode.png"
+    ],
+    "matches": ["<all_urls>"]
+  }],
   "permissions": [
     "tabs",
     "storage",

diff --git a/src/popup.html b/src/popup.html
@@ -4,116 +4,149 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<link href="materialize/css/materialize.min.css" type="text/css" rel="stylesheet">
+	<link rel="stylesheet" href="./tailwindcss.css">
 	<link rel="stylesheet" type="text/css" href="index.css">
 	<script src="./scripts/fontawesome.js"></script>
 	<style type="text/css">
 	html,body{
-		width: 350px !important;
+		width: 375px !important;
 		height: 600px !important;
 		max-height: 600px !important;
 		overflow-y: scroll;
+		background: #eae4e4;
 	}
 </style>
 </head>
 <body>
-	<div class="container">
-		<h4 class="center">SCRUM Helper</h4>
-		<h6 class="center">
-			SCRUM helper prefills the Scrums in google groups, with your FOSSASIA's contributions.
-		</h6>
-		<br />
-		<div class="row center">
-			<div class="switch">
-				<label>
-					Disable
-					<input type="checkbox" id="enable">
-					<span class="lever"></span>
-					Enable
-				</label>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col s12">
-				<ul class="tabs">
-					<li class="tab col s6" title="I am doing CodeHeat!"><a id="codeheatTab" href="#codeheatBox">CodeHeat</a></li>
-					<li class="tab col s6" title="I am doing GSoC!"><a id="gsocTab" href="#gsocBox">GSoC</a></li>
-				</ul>
-			</div>
-		</div>
-		<div class="row">
-            <div class="input-field col s12">
-                <input placeholder="Your Project Name" id="projectName" type="text">
-                <label for="projectName">Your Project Name</label>
-            </div>
-			<div class="input-field col s12">
-				<input placeholder="Required for getting data from github" id="githubUsername" type="text">
-				<label for="githubUsername">Your Github Username</label>
-			</div>
-			<div class="col s12"><span>Fetch your contributions between:</span>
-				<input type="checkbox" class="filled-in" id="lastWeekContribution"/>
-				<label for="lastWeekContribution">Show past <span id="noDays"></span> from today</label>
-			</div>
-
-			<div class="input-field col s6">
-				<div>Starting Date:</div>
-				<input id="startingDate" type="date" class="datepicker" placeholder=" ">
-
-			</div>
-			<div class="input-field col s6">
-				<div>Ending Date</div>
-				<input id="endingDate" type="date" class="datepicker" placeholder=" ">
-			</div>
-			<div class="col s12">
-				<br />
-				<input type="checkbox" class="filled-in" id="showOpenLabel"/>
-				<label for="showOpenLabel">Show Open/Closed Label</label>
-			</div>
-			<div class="input-field col s12">
-				<input placeholder="Reason" id="userReason" type="text">
-				<label for="userReason">What is stopping you from doing your work?</label>
-			</div>
-			<div>
-				<h6>Scrum Report</h3>
-					<div id="scrumReport" contenteditable="true" 
-					class="materialize-textarea border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2" 
-					style="min-height: 200px; overflow-y: auto; white-space: pre-wrap;">
-			   </div>
-			</div>
-			<div style="display: flex; justify-content: space-between; gap: 10px;">
-				<button id="generateReport" class="btn waves-effect waves-light">
-					<i class="fa fa-refresh"></i> Generate Report
-				</button>
-				<button id="copyReport" class="btn waves-effect waves-light">
-					<i class="fa fa-copy"></i> Copy Report
-				</button>
+	<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>
+					<img src="icons/night-mode.png" alt="Night Mode" class="w-7 h-7 mx-3 cursor-pointer">
+				</div>
+				<div>
+					<p class="">Report your development progress by auto-fetching your Git activity for a selected period</p>
+				</div>
 
+			<div class="center mt-2 ">
+					<label class="flex items-center justify-center gap-2">
+						Disable
+						<input type="checkbox" value="" id="enable" class="sr-only peer" checked>
+						<div class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
+						<span class=""></span>
+						Enable
+					</label>
 			</div>
-			<div class="col s12">
+		</div>
+
+		<div class="rounded-2xl">
+			<div class=" border-gray-100 border-2 bg-white rounded-3xl px-4 py-4 mx-2 my-2">
+				<div>
+					<h4>Your Project Name</h4>
+					<input id="projectName" type="text" class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800  p-2 my-2" placeholder="Enter your project name">
+				</div>
+				<div>
+					<h4>Your Github Username</h4>
+					<input id="githubUsername" type="text" class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800  p-2 my-2" placeholder="Required for fetching your contributions">
+				</div>
 
-				<h5>Note:</h5>
-				<h6>
-					<ul>
-						<li>The PRs fetched are according to the date last reviewed by anyone. So if you reviewed a PR 10 days back, and someone reviewed it 2 days back, it will appear in your last week's activity. See <a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">this issue</a>.
-						</li>
-						<li>By using the extension you understand that there might be discrepancies in the SCRUM generated. You are advised to edit the SCRUM afterwards to remove any discrepancies.
-						</li>
-					</ul>
-				</h6>
+				<div>
+					<p class="text-sm">Fetch your contributions between:</p>
+					<div class="flex justify-between items-center my-2 mx-4">
+						<div class="flex items-center gap-2">
+							<input type="radio" id="lastWeekContribution" name="timeframe" class="form-radio" onclick="toggleRadio(this)">
+							<label for="lastWeekContribution">Last 7 days</label>
+						</div>
+						<div class="flex items-center gap-2">
+							<input type="radio" id="yesterdayContribution" name="timeframe" class="form-radio" onclick="toggleRadio(this)">
+							<label for="yesterdayContribution">Last 1 day</label>
+						</div>
+					</div>
+
+					<div id="customDateContainer" class="flex justify-between items-center mt-2">
+						<div>
+							<label for="startingDate">Start Date:</label>
+							<input type="date" id="startingDate" class="border-2 border-gray-200 bg-gray-200 rounded-xl p-1">
+						</div>
+						<div>
+							<label for="endingDate">End Date:</label>
+							<input type="date" id="endingDate" class="border-2 border-gray-200 bg-gray-200 rounded-xl p-1">
+						</div>
+					</div>
+				</div>
+
+				<div class="col s12">
+					<br />
+					<input type="checkbox" id="showOpenLabel" class="form-checkbox h-4 w-4 text-blue-600">
+					<label id="checkboxLabel" for="showOpenLabel" class="text-gray-700 font-medium text-sm">Show Open/Closed Label</label>
+				</div>
+				<div class="my-4">
+					<p class="text-sm font-medium">What is blocking you from making progress?</p>
+					<input id="userReason" type="text" class="w-full text-gray-800 mt-3 rounded-xl px-4 py-1" placeholder="Enter your reason">
+					<hr class="border-t-2 border-gray-700 mt-1 ">
+				</div>
+				<div>
+					<div>
+						<h6 class="text-base font-semibold">Scrum Report</h6>
+						<div id="scrumReport"
+							 contenteditable="true"
+							 class="min-h-[200px] overflow-y-auto whitespace-pre-wrap border-2 border-gray-200 bg-gray-100 rounded-xl text-gray-800 p-2 my-2">
+						</div>
+					</div>
+					<div class="flex justify-between gap-2">
+						<button id="generateReport" class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
+						  <i class="fa fa-refresh"></i> Generate Report
+						</button>
+						<button id="copyReport" class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
+						  <i class="fa fa-copy"></i> Copy Report
+						</button>
+					  </div>
+
+
+					<div class="border-gray-100 border-2 bg-white rounded-3xl px-4 py-2 mx-2 my-2">
+						<div>
+							<h4 class="font-semibold text-xl">Note:</h4>
+							<ul class="text-xs list-disc list-inside">
+								<li>The PRs fetched are based on the most recent review by any contributor. If you reviewed a PR 10 days ago and someone else reviewed it 2 days ago, it will still appear in your activity for the past week. (<a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">See this issue</a>.)
+								</li>
+								<li>Please note that some discrepancies may occur in the generated SCRUM. We recommend manually reviewing and editing the report to ensure accuracy before sharing
+								</li>
+							</ul>
+						</div>
+					</div>
 			</div>
 		</div>
 
-		<hr />
-		<footer>
-			<div class="center">
-				<a target="_blank" href="https://github.com/fossasia/scrum_helper"><h6><i class="fa fa-github" aria-hidden="true"></i> view code</h6></a>
-			</div>
-		</footer>
+		<div class="mt-6 border-t border-gray-300">
+	<div class="bg-white rounded-3xl mx-2 mt-4 mb-2 p-4 border border-gray-100 shadow-sm">
+		<div class="flex items-center justify-center space-x-3">
+			<a target="_blank" 
+			   href="https://github.com/fossasia/scrum_helper" 
+			   class="bg-blue-50 hover:bg-blue-100 text-blue-600 transition-all duration-200 rounded-lg px-4 py-2 flex items-center space-x-2">
+				<i class="fa fa-code text-sm"></i>
+				<span class="text-sm font-medium">View Code</span>
+			</a>
+			<a target="_blank" 
+			   href="https://github.com/fossasia/scrum_helper/issues" 
+			   class="bg-blue-50 hover:bg-blue-100 text-blue-600 transition-all duration-200 rounded-lg px-4 py-2 flex items-center space-x-2">
+				<i class="fa fa-bug text-sm"></i>
+				<span class="text-sm font-medium">Report Issue</span>
+			</a>
+		</div>
+	</div>
+		<div class="mt-3 pt-3 border-t border-gray-200 flex justify-center items-center py-5">
+			<p class="text-xs text-gray-600 text-center">
+				Made with ❤️ by <strong>FOSSASIA</strong> • 
+				<span class="text-gray-500 dark:text-gray-300">v2.0</span>
+			</p>
+		</div>
+	</div>
+</div>
 	</div>
 	<script src="scripts/jquery-3.2.1.min.js"></script>
 	<script type="text/javascript" type="text/javascript" src="materialize/js/materialize.min.js"></script>
-	<script src="scripts/scrumHelper.js"></script>
 	<script src="scripts/main.js"></script>
+	<script src="scripts/scrumHelper.js"></script>
 	<script src="scripts/popup.js"></script>
 </body>
 </html>