This PR adds customization and Template saving Features to extension.

src/index.css

@@ -7,82 +7,205 @@ body {
 * {
 	box-sizing: border-box;
 }
-.datepicker {
-	margin-bottom: 5px !important;
-}
-.tabs .tab a:hover,
-.tabs .tab a.active {
-	background-color: transparent;
-	color: #3f51b5;
+
+/* Tab Content Styles */
+.tab-content {
+	padding: 0;
 }
+
+/* Tabs styling */
 .tabs {
 	background-color: transparent;
+	margin-bottom: 5px;
 }
+
 .tabs .tab a {
 	color: #3f51b5;
+	font-weight: 500;
 }
+
+.tabs .tab a:hover,
+.tabs .tab a.active {
+	background-color: transparent;
+	color: #3f51b5;
+}
+
 .tabs .indicator {
 	background-color: #3f51b5;
+	height: 3px;
 }
-.switch label input[type="checkbox"]:checked + .lever {
+
+/* Settings Styles */
+#settingsBox {
+	padding: 20px 0;
+}
+
+#settingsBox h5 {
+	margin-top: 10px;
+	margin-bottom: 10px;
+	padding-bottom: 10px;
+	border-bottom: 1px solid #e0e0e0;
+}
+
+.template-list {
+	margin-top: 15px;
+	max-height: 200px;
+	overflow-y: auto;
+	padding: 10px;
+	background-color: #f5f5f5;
+	border-radius: 4px;
+}
+
+.template-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 8px;
+	margin: 5px 0;
+	background-color: white;
+	border-radius: 4px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.template-item button {
+	margin-left: 8px;
+}
+
+.template-actions {
+	display: flex;
+	gap: 8px;
+}
+
+/* Form Elements */
+.datepicker {
+	margin-bottom: 5px !important;
+}
+
+.switch label input[type="checkbox"]:checked+.lever {
 	background-color: #3f51b5;
 }
-.switch label input[type="checkbox"]:checked + .lever:after {
+
+.switch label input[type="checkbox"]:checked+.lever:after {
 	background-color: #fcfcfc;
 	left: 24px;
 }
-[type="checkbox"].filled-in:checked + label:after {
+
+[type="checkbox"].filled-in:checked+label:after {
 	border: 2px solid #3f51b5;
 	background-color: #3f51b5;
 }
+
+/* Buttons */
+.btn,
+.btn-large {
+	background-color: #3f51b5;
+}
+
 .btn:hover,
 .btn-large:hover {
 	background-color: #3f51b5;
+	opacity: 0.9;
 }
+
+/* Links */
 a {
 	color: #3f51b5;
 }
-.btn,
-.btn-large {
-	background-color: #3f51b5;
-}
+
+/* Lists */
 li {
 	list-style-type: disc !important;
 	margin-left: 1rem;
 }
+
+/* Labels */
 .selectedLabel {
 	font-weight: 400;
 	color: #333333;
 }
 
 .unselectedLabel {
-	font-weight: 300; 
-	color: #666666; 
+	font-weight: 300;
+	color: #666666;
 }
 
-.selectedLabel, .unselectedLabel {
+.selectedLabel,
+.unselectedLabel {
 	transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;
 }
 
+/* Scrum Report */
 #scrumReport {
-    border: 1px solid #ccc;
-    padding: 10px;
-    min-height: 200px;
-    max-height: 400px;
-    overflow-y: auto;
-    background-color: white;
+	border: 1px solid #ccc;
+	padding: 10px;
+	min-height: 200px;
+	max-height: 400px;
+	overflow-y: auto;
+	background-color: white;
+	margin-bottom: 15px;
+	border-radius: 4px;
 }
 
 #scrumReport:focus {
-    outline: none;
-    border-color: #26a69a;
+	outline: none;
+	border-color: #26a69a;
 }
 
 #scrumReport a {
-    color: #26a69a;
-    text-decoration: none;
+	color: #26a69a;
+	text-decoration: none;
 }
 
 #scrumReport a:hover {
-    text-decoration: underline;
+	text-decoration: underline;
+}
+
+/* Tab content visibility */
+#mainContentBox {
+	display: block;
+}
+
+#settingsBox {
+	display: none;
+}
+
+/* When settings tab is active */
+.tabs .tab a.active[href="#settingsBox"]~#mainContentBox {
+	display: none;
+}
+
+.tabs .tab a.active[href="#settingsBox"]~#settingsBox {
+	display: block;
+}
+
+/* Settings specific styles */
+#settingsBox {
+	padding: 20px;
+}
+
+.section-box {
+	display: none;
 }
+
+.section-box.active {
+	display: block;
+}
+
+/* Make checkboxes more visible */
+[type="checkbox"]:checked+label:before {
+	border-right: 2px solid #26a69a;
+	border-bottom: 2px solid #26a69a;
+}
+
+/* Make the settings tab content scrollable independently */
+#settingsBox .row {
+	max-height: calc(100vh - 200px);
+	overflow-y: auto;
+}
+
+/* Ensure proper spacing in settings */
+#settingsBox .col.s12 {
+	margin-bottom: 20px;
+}
+
+/* Fixed button container styles */

src/manifest.json

@@ -17,17 +17,20 @@
   "content_scripts": [
     {
       "matches": [
-        "*://groups.google.com/forum/*", 
+        "*://groups.google.com/forum/*",
         "*://groups.google.com/g/*",
-        "*://mail.google.com/*",         
-        "*://outlook.live.com/*",        
-        "*://outlook.office.com/*",      
-        "*://mail.yahoo.com/*"          
+        "*://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"] 
+      "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';"
   },
@@ -45,4 +48,4 @@
     "*://*.yahoo.com/*",
     "https://api.github.com/*"
   ]
-}
+}