fossasia · vedansh-5 · Mar 15, 2025 · Mar 15, 2025 · Mar 15, 2025 · Mar 15, 2025
diff --git a/next.md b/next.md
@@ -0,0 +1,10 @@
+I have to copy the popup ke ui ka code from popup.js to main.js or I can even use it there only
+I have to write fetch function, integrate it with generatescrum report function
+Have to ask whether email client selection option is even neede or not, that option is not of much use anyways and with that option intact the functionality is increased/ Its a good bang for your buck.
+emailClientAdapter.js ke andar hai injectors ka code, vo vahi se use kar lunga in main.js and scrumHelper.js
+add active class in css
+add hidden class in css
+
+
+
+If I click on the date after selecting the radio, then the radio should disable but the date should stay and I should be able to set another date if I want to.
diff --git a/src/icons/codeheat.png b/src/icons/codeheat.png
diff --git a/src/icons/down-arrow.png b/src/icons/down-arrow.png
diff --git a/src/icons/gsoc.png b/src/icons/gsoc.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
@@ -10,8 +10,7 @@ body{
 .datepicker{
 	margin-bottom: 5px !important;
 }
-.container{
-}
+
 .tabs .tab a:hover, .tabs .tab a.active {
 	background-color: transparent;
 	color: #3f51b5;
@@ -48,4 +47,10 @@ a {
 li{
 	list-style-type: disc !important;
 	margin-left: 1rem;
-}
+}
+.issueLink{
+    font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+    color: rgb(0, 65, 175)!important;
+    /* font-size: 14px!important; */
+    font-weight: 600!important;
+}
diff --git a/src/libs/tailwind.min.css b/src/libs/tailwind.min.css
diff --git a/src/manifest.json b/src/manifest.json
@@ -2,29 +2,55 @@
   "manifest_version": 3,
   "name": "Scrum Helper Extension",
   "version": "1.0",
-  "description": "This extension helps in writing Scrums in Google groups, particularly related to FOSSASIA. ",
+  "description": "This extension helps in writing Scrums in Google Groups, particularly related to FOSSASIA.",
   "action": {
     "default_popup": "popup.html",
-    "default_title": "SCRUM Helper",
-    "default_icon": {
-      "96": "icons/icon.png",
-      "48": "icons/icon.png"
-    }
+    "default_title": "SCRUM Helper"
+  },
+  "icons": {
+    "96": "icons/icon.png",
+    "48": "icons/icon.png"
   },
   "background": {
     "service_worker": "scripts/background.js"
   },
   "content_scripts": [
     {
-      "matches": ["*://groups.google.com/forum/*", "*://groups.google.com/g/*"],
-      "js": ["scripts/jquery-3.2.1.min.js", "scripts/scrumHelper.js"]
+      "matches": [
+        "*://groups.google.com/forum/*", 
+        "*://groups.google.com/g/*",
+        "*://mail.google.com/*",         
+        "*://outlook.live.com/*",        
+        "*://outlook.office.com/*",      
+        "*://mail.yahoo.com/*"          
+      ],
+      "js": ["scripts/jquery-3.2.1.min.js", "scripts/scrumHelper.js",  "scripts/emailClientAdapter.js"] 
     }
   ],
 
   "content_security_policy": {
-    "extension_pages": "script-src 'self'; object-src 'self';"
+    "extension_pages": "script-src 'self'; object-src 'self'"
   },
-  "optional_host_permissions": ["https://*/*", "http://*/*", "<all_urls>"],
-
-  "permissions": ["tabs", "storage", "activeTab", "notifications"]
+  "web_accessible_resources": [{
+    "resources": [
+      "scripts/*",
+      "icons/*",
+      "libs/*"
+    ],
+    "matches": ["<all_urls>"]
+  }],
+  "permissions": [
+    "tabs",
+    "storage",
+    "activeTab",
+    "notifications"
+  ],
+  "host_permissions": [
+    "<all_urls>",
+    "*://*.google.com/*",
+    "*://*.outlook.live.com/*",
+    "*://*.office.com/*",
+    "*://*.yahoo.com/*",
+    "https://api.github.com/*"
+  ]
 }
diff --git a/src/materialize/css/all.min.css b/src/materialize/css/all.min.css
diff --git a/src/materialize/webfonts/fa-brands-400.ttf b/src/materialize/webfonts/fa-brands-400.ttf
diff --git a/src/materialize/webfonts/fa-brands-400.woff2 b/src/materialize/webfonts/fa-brands-400.woff2
diff --git a/src/materialize/webfonts/fa-regular-400.ttf b/src/materialize/webfonts/fa-regular-400.ttf
diff --git a/src/materialize/webfonts/fa-regular-400.woff2 b/src/materialize/webfonts/fa-regular-400.woff2
diff --git a/src/materialize/webfonts/fa-solid-900.ttf b/src/materialize/webfonts/fa-solid-900.ttf
diff --git a/src/materialize/webfonts/fa-solid-900.woff2 b/src/materialize/webfonts/fa-solid-900.woff2
diff --git a/src/materialize/webfonts/fa-v4compatibility.ttf b/src/materialize/webfonts/fa-v4compatibility.ttf
diff --git a/src/materialize/webfonts/fa-v4compatibility.woff2 b/src/materialize/webfonts/fa-v4compatibility.woff2
diff --git a/src/popup.html b/src/popup.html
@@ -1,101 +1,142 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
 	<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" type="text/css" href="index.css">
-	<script src="./scripts/fontawesome.js"></script>
-	<style type="text/css">
-	html,body{
-		width: 350px !important;
-		height: 600px !important;
-		max-height: 600px !important;
-		overflow-y: scroll;
-	}
-</style>
+	<link rel="stylesheet" href="libs/tailwind.min.css">
+	<link rel="stylesheet" href="index.css">
+    <script src="./scripts/fontawesome.js"></script>
+	<script src="scripts/jquery-3.2.1.min.js"></script>
+	<script src="scripts/main.js"></script>
+	<script src="scripts/emailClientAdapter.js"></script>
+	<script src="scripts/scrumHelper.js"></script>
+	<script src="scripts/popup.js"></script>
+	<title>Scrum Helper</title>
+	<style>
+		html, .body{
+			width: 350px !important;
+			border-radius: 20px; /* Adjust as needed */
+			overflow: auto; /* Ensures content does not overflow */
+			background: #efeeee;
+		}
+	</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 class="h-screen pl-2">
+		<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">
 		</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>
+			<p class="font-semibold">Prefills the scrum with your fossasia's contributions</p>
 		</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 class="flex justify-between mt-2">
+			<div class="relative w-1/2">
+                <!-- GSOC AND CODEHEAT ID -->
+				<div id="customSelect" class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2 cursor-pointer flex items-center justify-between">
+					<div class="flex items-center gap-2">
+						<img src="../icons/codeheat.png" alt="Logo" class="w-7 h-7" id="selectedImage">
+						<span id="selectedText">Codeheat</span>
+					</div>
+					<img class="w-5 h-5" src="../icons/down-arrow.png" alt="">
+				</div>
+				<div id="dropdown" class="hidden absolute w-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg z-10">
+                    <div id="codeheatOption" class="option p-2 hover:bg-gray-100 cursor-pointer flex items-center gap-2" data-value="codeheat">
+                        <img src="../icons/codeheat.png" alt="Logo" class="w-7 h-7">
+                        <span>Codeheat</span>
+                    </div>
+                    <div id="gsocOption" class="option p-2 hover:bg-gray-100 cursor-pointer flex items-center gap-2" data-value="gsoc">
+                        <img src="../icons/gsoc.png" alt="Logo" class="w-7 h-7">
+                        <span>GSoC</span>
+                    </div>
+                </div>
+			</div>
+
+			<div>
+			</div>
+			<div class="flex gap-2 mt-5 px-5 w-1/2">
+				<p class="font-medium text-gray-500">Disable</p>
+				<div id="toggleContainer" class="relative inline-block w-12 h-6 rounded-full bg-green-500 cursor-pointer transition-all duration-200 ease-in-out">
+                    <!-- Enable id -->
+					<input type="checkbox" id="toggleInput" class="sr-only" checked>
+					<div id="toggleDot" class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transform transition-transform duration-200 ease-in-out translate-x-4"></div>
+				</div>
+				<p class="font-medium text-gray-500">Enable</p>
 			</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=" border-gray-100 border-2 bg-white rounded-3xl px-4 py-2 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 class="input-field col s6">
-				<div>Starting Date:</div>
-				<input id="startingDate" type="date" class="datepicker" placeholder=" ">
-
+			<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>
-			<div class="input-field col s6">
-				<div>Ending Date</div>
-				<input id="endingDate" type="date" class="datepicker" placeholder=" ">
+			<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">
+							<label for="today">Last 7 days</label>
+						</div>
+						<div class="flex items-center gap-2">
+							<input type="radio" id="yesterday" name="timeframe" class="form-radio">
+							<label for="yesterday">Last 1 day</label>
+						</div>
+					</div>
+					<div class="flex justify-between items-center mt-2">
+						<div>
+							<label for="start-date">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="end-date">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" class="filled-in" id="showOpenLabel"/>
-				<label for="showOpenLabel">Show Open/Closed Label</label>
+		</div>
+		<div class="border-gray-100 border-2 bg-white rounded-3xl px-4 py-2 mx-2 my-2">
+			<div class="flex items-center gap-2 mt-2">
+				<input type="checkbox" id="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
+				<label id="checkboxLabel" for="checkbox" class="text-gray-700 font-medium text-sm">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 class="mt-4">
+				<p class="text-sm font-medium">What is stopping you from doing your work?</p>
+				<input id="userReason" type="text" class="w-full text-gray-800 mt-3" placeholder="Enter your reason">
+				<hr class="border-t-2 border-gray-700 mt-1 ">
 			</div>
-			<div class="col s12">
-
-				<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_extension/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 class="mt-5">
+				<h4 class="text-2xl font-medium">Scrum Report:</h4>
+				<textarea id="scrumReport" class="w-full h-40 border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2" placeholder="Your scrum report will appear here..."></textarea>
 			</div>
+				<div class="flex justify-between">
+					<button id="copyButton" class="flex items-center gap-2 bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
+						<span>Copy to Clipboard</span>
+					</button>
+					<button id="fetchButton" class="flex items-center gap-2 bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 ml-2 mt-2">
+						<i class="fas fa-sync"></i>
+						<span>Fetch Report</span>
+					</button>
+				</div>
 		</div>
-
-		<hr />
-		<footer>
-			<div class="center">
-				<a target="_blank" href="https://github.com/fossasia/scrum_helper_extension"><h6><i class="fa fa-github" aria-hidden="true"></i> view code</h6></a>
+		<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 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>
 			</div>
-		</footer>
+		</div>
+		<hr class="border-t-2 border-black">
+		<div class="flex items-center justify-center text-xl">
+			<a target="_blank" href="https://github.com/fossasia/scrum_helper" class="flex items-center"><h6><i class="fa fa-github" aria-hidden="true"></i> view code</h6></a>
+		</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/main.js"></script>
 </body>
-</html>
+</html>