Skip to content

Commit 1ab259b

Browse files
vedansh-5vedansh-5
committed
button enhancement
Signed-off-by: Vedansh Saini <[email protected]>
1 parent ab04d67 commit 1ab259b

File tree

4 files changed

+60
-152
lines changed

4 files changed

+60
-152
lines changed

‎src/popup.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ <h4>Your Github Username</h4>
8383
</div>
8484
<div class="my-4">
8585
<p class="text-sm font-medium">What is stopping you from doing your work?</p>
86-
<input id="userReason" type="text" class="w-full text-gray-800 mt-3" placeholder="Enter your reason">
86+
<input id="userReason" type="text" class="w-full text-gray-800 mt-3 rounded-xl px-4 py-1" placeholder="Enter your reason">
8787
<hr class="border-t-2 border-gray-700 mt-1 ">
8888
</div>
8989
<div>

‎src/scripts/main.js

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -142,22 +142,7 @@ function handleUserReasonChange() {
142142
var value = userReasonElement.value;
143143
chrome.storage.local.set({ userReason: value });
144144
}
145-
function handleCodeheatClick() {
146-
gsoc = 0;
147-
$('#codeheatTab').addClass('active');
148-
$('.tabs').tabs();
149-
$('#noDays').text('7 days');
150-
chrome.storage.local.set({ gsoc: 0 });
151-
handleLastWeekContributionChange();
152-
}
153-
function handleGsocClick() {
154-
gsoc = 1;
155-
$('#gsocTab').addClass('active');
156-
$('.tabs').tabs();
157-
$('#noDays').text('1 day');
158-
chrome.storage.local.set({ gsoc: 1 });
159-
handleLastWeekContributionChange();
160-
}
145+
161146
enableToggleElement.addEventListener('change', handleEnableChange);
162147
githubUsernameElement.addEventListener('keyup', handleGithubUsernameChange);
163148
projectNameElement.addEventListener('keyup', handleProjectNameChange);
@@ -166,6 +151,4 @@ endingDateElement.addEventListener('change', handleEndingDateChange);
166151
lastWeekContributionElement.addEventListener('change', handleLastWeekContributionChange);
167152
showOpenLabelElement.addEventListener('change', handleOpenLabelChange);
168153
userReasonElement.addEventListener('keyup', handleUserReasonChange);
169-
document.addEventListener('DOMContentLoaded', handleBodyOnLoad);
170-
document.getElementById('codeheatTab').addEventListener('click', handleCodeheatClick);
171-
document.getElementById('gsocTab').addEventListener('click', handleGsocClick);
154+
document.addEventListener('DOMContentLoaded', handleBodyOnLoad);

‎src/scripts/popup.js

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,44 +11,45 @@ document.addEventListener('DOMContentLoaded', function() {
1111

1212
copyBtn.addEventListener('click', function() {
1313
const scrumReport = document.getElementById('scrumReport');
14-
1514
const tempDiv = document.createElement('div');
1615
tempDiv.innerHTML = scrumReport.innerHTML;
17-
1816
const links = tempDiv.getElementsByTagName('a');
1917
Array.from(links).forEach(link => {
2018
const title = link.textContent;
2119
const url = link.href;
2220
const markdownLink = `[${title}](${url})`;
2321
link.outerHTML = markdownLink;
2422
});
25-
2623
const stateButtons = tempDiv.getElementsByClassName('State');
2724
Array.from(stateButtons).forEach(button => {
2825
button.remove();
2926
});
30-
3127
tempDiv.innerHTML = tempDiv.innerHTML.replace(/<br\s*\/?>/gi, '\n');
32-
3328
const listItems = tempDiv.getElementsByTagName('li');
3429
Array.from(listItems).forEach(item => {
3530
item.innerHTML = '\n- '+ item.innerHTML;
3631
});
37-
3832
tempDiv.innerHTML = tempDiv.innerHTML.replace(/<\/?ul>/gi, '\n');
3933
let textContent = tempDiv.textContent;
4034
textContent = textContent.replace(/\n\s*\n/g, '\n\n');
4135
textContent = textContent.trim();
42-
4336
const textArea = document.createElement('textarea');
4437
textArea.value = textContent;
4538
document.body.appendChild(textArea);
4639
textArea.select();
4740
document.execCommand('copy');
4841
document.body.removeChild(textArea);
49-
5042

51-
})
43+
const originalText = this.innerHTML;
44+
this.innerHTML = '<i class="fa fa-check"></i> Copied!';
45+
this.classList.add('bg-green-600');
46+
47+
setTimeout(() => {
48+
this.innerHTML = originalText;
49+
this.classList.remove('bg-green-600');
50+
}, 2000);
51+
});
52+
5253
})
5354

5455
function toggleRadio(radio){

‎src/tailwindcss.css

Lines changed: 47 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,9 @@
77
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
88
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
99
"Courier New", monospace;
10-
--color-red-100: oklch(93.6% 0.032 17.717);
11-
--color-red-500: oklch(63.7% 0.237 25.331);
12-
--color-orange-500: oklch(70.5% 0.213 47.604);
13-
--color-amber-900: oklch(41.4% 0.112 45.904);
14-
--color-yellow-100: oklch(97.3% 0.071 103.193);
15-
--color-green-500: oklch(72.3% 0.219 149.579);
10+
--color-green-400: oklch(79.2% 0.209 151.711);
1611
--color-green-600: oklch(62.7% 0.194 149.214);
17-
--color-cyan-400: oklch(78.9% 0.154 211.53);
18-
--color-cyan-500: oklch(71.5% 0.143 215.221);
1912
--color-blue-300: oklch(80.9% 0.105 251.813);
20-
--color-blue-500: oklch(62.3% 0.214 259.815);
2113
--color-blue-600: oklch(54.6% 0.245 262.881);
2214
--color-blue-700: oklch(48.8% 0.243 264.376);
2315
--color-blue-800: oklch(42.4% 0.199 265.638);
@@ -27,8 +19,6 @@
2719
--color-gray-600: oklch(44.6% 0.03 256.802);
2820
--color-gray-700: oklch(37.3% 0.034 259.733);
2921
--color-gray-800: oklch(27.8% 0.033 256.848);
30-
--color-gray-900: oklch(21% 0.034 264.665);
31-
--color-zinc-100: oklch(96.7% 0.001 286.375);
3222
--color-black: #000;
3323
--color-white: #fff;
3424
--spacing: 0.25rem;
@@ -38,17 +28,12 @@
3828
--text-sm--line-height: calc(1.25 / 0.875);
3929
--text-base: 1rem;
4030
--text-base--line-height: calc(1.5 / 1);
41-
--text-lg: 1.125rem;
42-
--text-lg--line-height: calc(1.75 / 1.125);
4331
--text-xl: 1.25rem;
4432
--text-xl--line-height: calc(1.75 / 1.25);
45-
--text-2xl: 1.5rem;
46-
--text-2xl--line-height: calc(2 / 1.5);
4733
--text-3xl: 1.875rem;
4834
--text-3xl--line-height: calc(2.25 / 1.875);
4935
--font-weight-medium: 500;
5036
--font-weight-semibold: 600;
51-
--radius-lg: 0.5rem;
5237
--radius-xl: 0.75rem;
5338
--radius-2xl: 1rem;
5439
--radius-3xl: 1.5rem;
@@ -269,9 +254,6 @@
269254
.my-4 {
270255
margin-block: calc(var(--spacing) * 4);
271256
}
272-
.ms-3 {
273-
margin-inline-start: calc(var(--spacing) * 3);
274-
}
275257
.mt-1 {
276258
margin-top: calc(var(--spacing) * 1);
277259
}
@@ -308,9 +290,6 @@
308290
.inline-block {
309291
display: inline-block;
310292
}
311-
.inline-flex {
312-
display: inline-flex;
313-
}
314293
.list-item {
315294
display: list-item;
316295
}
@@ -347,6 +326,9 @@
347326
.w-full {
348327
width: 100%;
349328
}
329+
.border-collapse {
330+
border-collapse: collapse;
331+
}
350332
.transform {
351333
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
352334
}
@@ -425,12 +407,15 @@
425407
.bg-gray-200 {
426408
background-color: var(--color-gray-200);
427409
}
410+
.bg-green-400 {
411+
background-color: var(--color-green-400);
412+
}
413+
.bg-green-600 {
414+
background-color: var(--color-green-600);
415+
}
428416
.bg-white {
429417
background-color: var(--color-white);
430418
}
431-
.bg-yellow-100 {
432-
background-color: var(--color-yellow-100);
433-
}
434419
.p-1 {
435420
padding: calc(var(--spacing) * 1);
436421
}
@@ -440,17 +425,17 @@
440425
.px-4 {
441426
padding-inline: calc(var(--spacing) * 4);
442427
}
428+
.py-1 {
429+
padding-block: calc(var(--spacing) * 1);
430+
}
443431
.py-2 {
444432
padding-block: calc(var(--spacing) * 2);
445433
}
446434
.py-4 {
447435
padding-block: calc(var(--spacing) * 4);
448436
}
449-
.pl-2 {
450-
padding-left: calc(var(--spacing) * 2);
451-
}
452-
.pl-4 {
453-
padding-left: calc(var(--spacing) * 4);
437+
.pl-1 {
438+
padding-left: calc(var(--spacing) * 1);
454439
}
455440
.text-3xl {
456441
font-size: var(--text-3xl);
@@ -492,12 +477,16 @@
492477
.text-gray-800 {
493478
color: var(--color-gray-800);
494479
}
495-
.text-gray-900 {
496-
color: var(--color-gray-900);
497-
}
498480
.text-white {
499481
color: var(--color-white);
500482
}
483+
.underline {
484+
text-decoration-line: underline;
485+
}
486+
.outline {
487+
outline-style: var(--tw-outline-style);
488+
outline-width: 1px;
489+
}
501490
.blur {
502491
--tw-blur: blur(8px);
503492
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -522,12 +511,6 @@
522511
background-color: var(--color-blue-600);
523512
}
524513
}
525-
.peer-focus\:ring-4 {
526-
&:is(:where(.peer):focus ~ *) {
527-
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
528-
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
529-
}
530-
}
531514
.peer-focus\:ring-blue-300 {
532515
&:is(:where(.peer):focus ~ *) {
533516
--tw-ring-color: var(--color-blue-300);
@@ -648,11 +631,6 @@
648631
background-color: var(--color-gray-700);
649632
}
650633
}
651-
.dark\:text-gray-300 {
652-
@media (prefers-color-scheme: dark) {
653-
color: var(--color-gray-300);
654-
}
655-
}
656634
.dark\:peer-checked\:bg-blue-600 {
657635
@media (prefers-color-scheme: dark) {
658636
&:is(:where(.peer):checked ~ *) {
@@ -716,6 +694,25 @@ li {
716694
list-style-type: disc !important;
717695
margin-left: 1rem;
718696
}
697+
.dark-mode {
698+
background: #1a1a1a !important;
699+
color: #ffffff !important;
700+
}
701+
.dark-mode .bg-white {
702+
background-color: #2d2d2d !important;
703+
border-color: #404040 !important;
704+
}
705+
.dark-mode input[type="text"], .dark-mode input[type="date"], .dark-mode #scrumReport {
706+
background-color: #404040 !important;
707+
border-color: #505050 !important;
708+
color: #ffffff !important;
709+
}
710+
.dark-mode h3, .dark-mode h4, .dark-mode p, .dark-mode label {
711+
color: #ffffff !important;
712+
}
713+
.dark-mode hr {
714+
border-color: #505050 !important;
715+
}
719716
@property --tw-rotate-x {
720717
syntax: "*";
721718
inherits: false;
@@ -750,6 +747,11 @@ li {
750747
syntax: "*";
751748
inherits: false;
752749
}
750+
@property --tw-outline-style {
751+
syntax: "*";
752+
inherits: false;
753+
initial-value: solid;
754+
}
753755
@property --tw-blur {
754756
syntax: "*";
755757
inherits: false;
@@ -807,71 +809,6 @@ li {
807809
syntax: "*";
808810
inherits: false;
809811
}
810-
@property --tw-shadow {
811-
syntax: "*";
812-
inherits: false;
813-
initial-value: 0 0 #0000;
814-
}
815-
@property --tw-shadow-color {
816-
syntax: "*";
817-
inherits: false;
818-
}
819-
@property --tw-shadow-alpha {
820-
syntax: "<percentage>";
821-
inherits: false;
822-
initial-value: 100%;
823-
}
824-
@property --tw-inset-shadow {
825-
syntax: "*";
826-
inherits: false;
827-
initial-value: 0 0 #0000;
828-
}
829-
@property --tw-inset-shadow-color {
830-
syntax: "*";
831-
inherits: false;
832-
}
833-
@property --tw-inset-shadow-alpha {
834-
syntax: "<percentage>";
835-
inherits: false;
836-
initial-value: 100%;
837-
}
838-
@property --tw-ring-color {
839-
syntax: "*";
840-
inherits: false;
841-
}
842-
@property --tw-ring-shadow {
843-
syntax: "*";
844-
inherits: false;
845-
initial-value: 0 0 #0000;
846-
}
847-
@property --tw-inset-ring-color {
848-
syntax: "*";
849-
inherits: false;
850-
}
851-
@property --tw-inset-ring-shadow {
852-
syntax: "*";
853-
inherits: false;
854-
initial-value: 0 0 #0000;
855-
}
856-
@property --tw-ring-inset {
857-
syntax: "*";
858-
inherits: false;
859-
}
860-
@property --tw-ring-offset-width {
861-
syntax: "<length>";
862-
inherits: false;
863-
initial-value: 0px;
864-
}
865-
@property --tw-ring-offset-color {
866-
syntax: "*";
867-
inherits: false;
868-
initial-value: #fff;
869-
}
870-
@property --tw-ring-offset-shadow {
871-
syntax: "*";
872-
inherits: false;
873-
initial-value: 0 0 #0000;
874-
}
875812
@property --tw-content {
876813
syntax: "*";
877814
initial-value: "";
@@ -902,6 +839,7 @@ li {
902839
--tw-skew-y: skewY(0);
903840
--tw-border-style: solid;
904841
--tw-font-weight: initial;
842+
--tw-outline-style: solid;
905843
--tw-blur: initial;
906844
--tw-brightness: initial;
907845
--tw-contrast: initial;
@@ -916,20 +854,6 @@ li {
916854
--tw-drop-shadow-alpha: 100%;
917855
--tw-drop-shadow-size: initial;
918856
--tw-ease: initial;
919-
--tw-shadow: 0 0 #0000;
920-
--tw-shadow-color: initial;
921-
--tw-shadow-alpha: 100%;
922-
--tw-inset-shadow: 0 0 #0000;
923-
--tw-inset-shadow-color: initial;
924-
--tw-inset-shadow-alpha: 100%;
925-
--tw-ring-color: initial;
926-
--tw-ring-shadow: 0 0 #0000;
927-
--tw-inset-ring-color: initial;
928-
--tw-inset-ring-shadow: 0 0 #0000;
929-
--tw-ring-inset: initial;
930-
--tw-ring-offset-width: 0px;
931-
--tw-ring-offset-color: #fff;
932-
--tw-ring-offset-shadow: 0 0 #0000;
933857
--tw-content: "";
934858
--tw-translate-x: 0;
935859
--tw-translate-y: 0;

0 commit comments

Comments
 (0)