Skip to content

Commit 09f09c5

Browse files
hpdanghpdang
authored
Merge pull request #83 from vedansh-5/ui2
[Feature] new UI
2 parents 63c1916 + 055aab5 commit 09f09c5

File tree

11 files changed

+1346
-185
lines changed

11 files changed

+1346
-185
lines changed

‎package.json

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,24 @@
1111
"check": "biome check .",
1212
"fix": "biome lint --write"
1313
},
14-
"keywords": ["scrum", "google groups", "fossasia"],
14+
"keywords": [
15+
"scrum",
16+
"google groups",
17+
"fossasia"
18+
],
1519
"author": "hkedia321",
1620
"license": "ISC",
1721
"bugs": {
1822
"url": "https://github.com/fossasia/scrum_helper/issues"
1923
},
2024
"homepage": "https://github.com/fossasia/scrum_helper",
2125
"devDependencies": {
22-
"@biomejs/biome": "1.9.4"
26+
"@biomejs/biome": "1.9.4",
27+
"autoprefixer": "^10.4.21",
28+
"postcss": "^8.5.3",
29+
"tailwindcss": "^4.1.4"
30+
},
31+
"dependencies": {
32+
"@tailwindcss/cli": "^4.1.3"
2333
}
2434
}

‎src/icons/light-mode.png

731 Bytes
Loading

‎src/icons/night-mode.png

9.76 KB
Loading

‎src/index.css

Lines changed: 55 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1+
@import "tailwindcss";
2+
@tailwind base;
3+
@tailwind components;
4+
@tailwind utilities;
15
body {
26
margin: 0;
37
padding: 0;
48
background-color: rgba(251, 251, 251, 0.6);
59
}
6-
710
* {
811
box-sizing: border-box;
912
}
@@ -50,39 +53,68 @@ li {
5053
list-style-type: disc !important;
5154
margin-left: 1rem;
5255
}
53-
.selectedLabel {
54-
font-weight: 400;
55-
color: #333333;
56+
57+
body,input,div,h3,h4,p,label,hr, #scrumReport{
58+
transition: all 0.3s ease-in-out;
5659
}
5760

58-
.unselectedLabel {
59-
font-weight: 300;
60-
color: #666666;
61+
.dark-mode {
62+
background: #1a1a1a !important;
63+
color: #ffffff !important;
64+
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
65+
}
66+
.dark-mode .bg-white{
67+
background-color: #2d2d2d !important;
68+
border-color: #404040 !important;
69+
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
6170
}
6271

63-
.selectedLabel, .unselectedLabel {
64-
transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;
72+
.dark-mode input[type="text"],
73+
.dark-mode input[type="date"],
74+
.dark-mode #scrumReport {
75+
background-color: #404040 !important;
76+
border-color: #505050 !important;
77+
color: #ffffff !important;
78+
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
79+
}
80+
.dark-mode h3,
81+
.dark-mode h4,
82+
.dark-mode p,
83+
.dark-mode label {
84+
color: #ffffff !important;
85+
transition: color 0.3s ease-in-out;
6586
}
6687

88+
.dark-mode hr {
89+
border-color: #505050 !important;
90+
transition: border-color 0.3s ease-in-out;
91+
}
6792
#scrumReport {
68-
border: 1px solid #ccc;
69-
padding: 10px;
70-
min-height: 200px;
71-
max-height: 400px;
72-
overflow-y: auto;
73-
background-color: white;
93+
font-size: 13px !important;
94+
line-height: 1.5 !important;
7495
}
7596

76-
#scrumReport:focus {
77-
outline: none;
78-
border-color: #26a69a;
97+
#scrumReport b {
98+
font-size: 13px !important;
7999
}
80100

81-
#scrumReport a {
82-
color: #26a69a;
83-
text-decoration: none;
101+
#scrumReport li {
102+
font-size: 13px !important;
103+
margin-bottom: 4px !important;
84104
}
85105

86-
#scrumReport a:hover {
87-
text-decoration: underline;
106+
.dark-mode #scrumReport {
107+
font-size: 13px !important;
88108
}
109+
110+
.dark-mode #scrumReport b {
111+
font-size: 13px !important;
112+
}
113+
114+
.dark-mode #scrumReport li {
115+
font-size: 13px !important;
116+
}
117+
118+
.dark-mode a {
119+
color: #00b7ff !important;
120+
}

‎src/manifest.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,13 @@
3131
"content_security_policy": {
3232
"extension_pages": "script-src 'self'; object-src 'self';"
3333
},
34+
"web_accessible_resources": [{
35+
"resources": [
36+
"/icons/night-mode.png",
37+
"icons/night-mode.png"
38+
],
39+
"matches": ["<all_urls>"]
40+
}],
3441
"permissions": [
3542
"tabs",
3643
"storage",

‎src/popup.html

Lines changed: 122 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -4,116 +4,149 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<link href="materialize/css/materialize.min.css" type="text/css" rel="stylesheet">
7+
<link rel="stylesheet" href="./tailwindcss.css">
88
<link rel="stylesheet" type="text/css" href="index.css">
99
<script src="./scripts/fontawesome.js"></script>
1010
<style type="text/css">
1111
html,body{
12-
width: 350px !important;
12+
width: 375px !important;
1313
height: 600px !important;
1414
max-height: 600px !important;
1515
overflow-y: scroll;
16+
background: #eae4e4;
1617
}
1718
</style>
1819
</head>
1920
<body>
20-
<div class="container">
21-
<h4 class="center">SCRUM Helper</h4>
22-
<h6 class="center">
23-
SCRUM helper prefills the Scrums in google groups, with your FOSSASIA's contributions.
24-
</h6>
25-
<br />
26-
<div class="row center">
27-
<div class="switch">
28-
<label>
29-
Disable
30-
<input type="checkbox" id="enable">
31-
<span class="lever"></span>
32-
Enable
33-
</label>
34-
</div>
35-
</div>
36-
<div class="row">
37-
<div class="col s12">
38-
<ul class="tabs">
39-
<li class="tab col s6" title="I am doing CodeHeat!"><a id="codeheatTab" href="#codeheatBox">CodeHeat</a></li>
40-
<li class="tab col s6" title="I am doing GSoC!"><a id="gsocTab" href="#gsocBox">GSoC</a></li>
41-
</ul>
42-
</div>
43-
</div>
44-
<div class="row">
45-
<div class="input-field col s12">
46-
<input placeholder="Your Project Name" id="projectName" type="text">
47-
<label for="projectName">Your Project Name</label>
48-
</div>
49-
<div class="input-field col s12">
50-
<input placeholder="Required for getting data from github" id="githubUsername" type="text">
51-
<label for="githubUsername">Your Github Username</label>
52-
</div>
53-
<div class="col s12"><span>Fetch your contributions between:</span>
54-
<input type="checkbox" class="filled-in" id="lastWeekContribution"/>
55-
<label for="lastWeekContribution">Show past <span id="noDays"></span> from today</label>
56-
</div>
57-
58-
<div class="input-field col s6">
59-
<div>Starting Date:</div>
60-
<input id="startingDate" type="date" class="datepicker" placeholder=" ">
61-
62-
</div>
63-
<div class="input-field col s6">
64-
<div>Ending Date</div>
65-
<input id="endingDate" type="date" class="datepicker" placeholder=" ">
66-
</div>
67-
<div class="col s12">
68-
<br />
69-
<input type="checkbox" class="filled-in" id="showOpenLabel"/>
70-
<label for="showOpenLabel">Show Open/Closed Label</label>
71-
</div>
72-
<div class="input-field col s12">
73-
<input placeholder="Reason" id="userReason" type="text">
74-
<label for="userReason">What is stopping you from doing your work?</label>
75-
</div>
76-
<div>
77-
<h6>Scrum Report</h3>
78-
<div id="scrumReport" contenteditable="true"
79-
class="materialize-textarea border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2"
80-
style="min-height: 200px; overflow-y: auto; white-space: pre-wrap;">
81-
</div>
82-
</div>
83-
<div style="display: flex; justify-content: space-between; gap: 10px;">
84-
<button id="generateReport" class="btn waves-effect waves-light">
85-
<i class="fa fa-refresh"></i> Generate Report
86-
</button>
87-
<button id="copyReport" class="btn waves-effect waves-light">
88-
<i class="fa fa-copy"></i> Copy Report
89-
</button>
21+
<div class="pl-1 py-4 rounded-2xl">
22+
<div class="bg-white px-4 py-4 mx-2 mb-2 rounded-3xl">
23+
<div class="flex justify-between py-2">
24+
<h3 class="text-3xl font-semibold ">Scrum Helper</h3>
25+
<img src="icons/night-mode.png" alt="Night Mode" class="w-7 h-7 mx-3 cursor-pointer">
26+
</div>
27+
<div>
28+
<p class="">Report your development progress by auto-fetching your Git activity for a selected period</p>
29+
</div>
9030

31+
<div class="center mt-2 ">
32+
<label class="flex items-center justify-center gap-2">
33+
Disable
34+
<input type="checkbox" value="" id="enable" class="sr-only peer" checked>
35+
<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>
36+
<span class=""></span>
37+
Enable
38+
</label>
9139
</div>
92-
<div class="col s12">
40+
</div>
41+
42+
<div class="rounded-2xl">
43+
<div class=" border-gray-100 border-2 bg-white rounded-3xl px-4 py-4 mx-2 my-2">
44+
<div>
45+
<h4>Your Project Name</h4>
46+
<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">
47+
</div>
48+
<div>
49+
<h4>Your Github Username</h4>
50+
<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">
51+
</div>
9352

94-
<h5>Note:</h5>
95-
<h6>
96-
<ul>
97-
<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>.
98-
</li>
99-
<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.
100-
</li>
101-
</ul>
102-
</h6>
53+
<div>
54+
<p class="text-sm">Fetch your contributions between:</p>
55+
<div class="flex justify-between items-center my-2 mx-4">
56+
<div class="flex items-center gap-2">
57+
<input type="radio" id="lastWeekContribution" name="timeframe" class="form-radio" onclick="toggleRadio(this)">
58+
<label for="lastWeekContribution">Last 7 days</label>
59+
</div>
60+
<div class="flex items-center gap-2">
61+
<input type="radio" id="yesterdayContribution" name="timeframe" class="form-radio" onclick="toggleRadio(this)">
62+
<label for="yesterdayContribution">Last 1 day</label>
63+
</div>
64+
</div>
65+
66+
<div id="customDateContainer" class="flex justify-between items-center mt-2">
67+
<div>
68+
<label for="startingDate">Start Date:</label>
69+
<input type="date" id="startingDate" class="border-2 border-gray-200 bg-gray-200 rounded-xl p-1">
70+
</div>
71+
<div>
72+
<label for="endingDate">End Date:</label>
73+
<input type="date" id="endingDate" class="border-2 border-gray-200 bg-gray-200 rounded-xl p-1">
74+
</div>
75+
</div>
76+
</div>
77+
78+
<div class="col s12">
79+
<br />
80+
<input type="checkbox" id="showOpenLabel" class="form-checkbox h-4 w-4 text-blue-600">
81+
<label id="checkboxLabel" for="showOpenLabel" class="text-gray-700 font-medium text-sm">Show Open/Closed Label</label>
82+
</div>
83+
<div class="my-4">
84+
<p class="text-sm font-medium">What is blocking you from making progress?</p>
85+
<input id="userReason" type="text" class="w-full text-gray-800 mt-3 rounded-xl px-4 py-1" placeholder="Enter your reason">
86+
<hr class="border-t-2 border-gray-700 mt-1 ">
87+
</div>
88+
<div>
89+
<div>
90+
<h6 class="text-base font-semibold">Scrum Report</h6>
91+
<div id="scrumReport"
92+
contenteditable="true"
93+
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">
94+
</div>
95+
</div>
96+
<div class="flex justify-between gap-2">
97+
<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">
98+
<i class="fa fa-refresh"></i> Generate Report
99+
</button>
100+
<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">
101+
<i class="fa fa-copy"></i> Copy Report
102+
</button>
103+
</div>
104+
105+
106+
<div class="border-gray-100 border-2 bg-white rounded-3xl px-4 py-2 mx-2 my-2">
107+
<div>
108+
<h4 class="font-semibold text-xl">Note:</h4>
109+
<ul class="text-xs list-disc list-inside">
110+
<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>.)
111+
</li>
112+
<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
113+
</li>
114+
</ul>
115+
</div>
116+
</div>
103117
</div>
104118
</div>
105119

106-
<hr />
107-
<footer>
108-
<div class="center">
109-
<a target="_blank" href="https://github.com/fossasia/scrum_helper"><h6><i class="fa fa-github" aria-hidden="true"></i> view code</h6></a>
110-
</div>
111-
</footer>
120+
<div class="mt-6 border-t border-gray-300">
121+
<div class="bg-white rounded-3xl mx-2 mt-4 mb-2 p-4 border border-gray-100 shadow-sm">
122+
<div class="flex items-center justify-center space-x-3">
123+
<a target="_blank"
124+
href="https://github.com/fossasia/scrum_helper"
125+
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">
126+
<i class="fa fa-code text-sm"></i>
127+
<span class="text-sm font-medium">View Code</span>
128+
</a>
129+
<a target="_blank"
130+
href="https://github.com/fossasia/scrum_helper/issues"
131+
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">
132+
<i class="fa fa-bug text-sm"></i>
133+
<span class="text-sm font-medium">Report Issue</span>
134+
</a>
135+
</div>
136+
</div>
137+
<div class="mt-3 pt-3 border-t border-gray-200 flex justify-center items-center py-5">
138+
<p class="text-xs text-gray-600 text-center">
139+
Made with ❤️ by <strong>FOSSASIA</strong> •
140+
<span class="text-gray-500 dark:text-gray-300">v2.0</span>
141+
</p>
142+
</div>
143+
</div>
144+
</div>
112145
</div>
113146
<script src="scripts/jquery-3.2.1.min.js"></script>
114147
<script type="text/javascript" type="text/javascript" src="materialize/js/materialize.min.js"></script>
115-
<script src="scripts/scrumHelper.js"></script>
116148
<script src="scripts/main.js"></script>
149+
<script src="scripts/scrumHelper.js"></script>
117150
<script src="scripts/popup.js"></script>
118151
</body>
119152
</html>

0 commit comments

Comments
 (0)