This PR adds customization and Template saving Features to extension.

.github/release-drafter.yml

@@ -0,0 +1,31 @@
+name-template: 'v$RESOLVED_VERSION 🌈'
+tag-template: 'v$RESOLVED_VERSION'
+categories:
+  - title: '🚀 Features'
+    labels:
+      - 'feature'
+      - 'enhancement'
+  - title: '🐛 Bug Fixes'
+    labels:
+      - 'fix'
+      - 'bugfix'
+      - 'bug'
+  - title: '🧰 Maintenance'
+    labels: 'chore'
+change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
+change-title-escapes: '\<*_&' # You can add # and @ to disable mentions, and add ` to disable code blocks.
+version-resolver:
+  major:
+    labels:
+      - 'major'
+  minor:
+    labels:
+      - 'minor'
+  patch:
+    labels:
+      - 'patch'
+  default: patch
+template: |
+  ## Changes
+
+  $CHANGES

.github/workflows/release-drafter.yml

@@ -0,0 +1,42 @@
+name: Release Drafter
+
+on:
+  push:
+    # branches to consider in the event; optional, defaults to all
+    branches:
+      - master
+
+  # pull_request event is required only for autolabeler
+  pull_request:
+    # Only following types are handled by the action, but one can default to all as well
+    types: [opened, reopened, synchronize]
+  # pull_request_target event is required for autolabeler to support PRs from forks
+  # pull_request_target:
+  #   types: [opened, reopened, synchronize]
+
+permissions:
+  contents: read
+
+jobs:
+  update_release_draft:
+    permissions:
+      # write permission is required to create a github release
+      contents: write
+      # write permission is required for autolabeler
+      # otherwise, read permission is required at least
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      # (Optional) GitHub Enterprise requires GHE_HOST variable set
+      #- name: Set GHE_HOST
+      #  run: |
+      #    echo "GHE_HOST=${GITHUB_SERVER_URL##https:\/\/}" >> $GITHUB_ENV
+
+      # Drafts your next Release notes as Pull Requests are merged into "master"
+      - uses: release-drafter/[email protected]
+        # (Optional) specify config name to use, relative to .github/. Default: release-drafter.yml
+        # with:
+        #   config-name: my-config.yml
+        #   disable-autolabeler: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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/*"
   ]
-}
+}