Skip to content

Commit 8026e60

Browse files
Mark-Htheboxer
Mark-H
and
theboxer
authored
style: new spark button
* feat(icons): change the contextual button to a simple icon with subtle animation * chore(deps): bump dependencies including @esbuild and @eslint-related packages * chore(icons): move sparkle animation styles from JS to CSS * feat(ui): improve button order and styling - Updated button append order in the generateButton component to align with desired layout. - Enhanced CSS styles for buttons and containers to ensure consistent appearance, added accessibility outlines, and improved responsive handling. * fix(css): update color and border styles for buttons and history elements * fix(css): apply @rthrash's changes to make the options more in line with the sparkle * feat: disable pointer events on disabled element --------- Co-authored-by: Jan Peca <[email protected]>
1 parent d186979 commit 8026e60

File tree

5 files changed

+635
-453
lines changed

5 files changed

+635
-453
lines changed

‎_build/js/src/ui/generateButton/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@ const createHistoryNav = (cache: ReturnType<typeof history.init<DataContext>>) =
100100
wrapper.info = info;
101101

102102
wrapper.appendChild(prevButton);
103-
wrapper.appendChild(nextButton);
104103
wrapper.appendChild(info);
104+
wrapper.appendChild(nextButton);
105105

106106
wrapper.hide();
107107
prevButton.disable();

‎_build/js/src/ui/icons/index.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,11 @@ export const triangleError = `<svg xmlns="http://www.w3.org/2000/svg" width="24"
2424

2525
export const x = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>`;
2626

27-
export const sparkle = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkle"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path></svg>`;
27+
export const sparkle = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkle">
28+
<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
29+
<path class="bonus-sparkle-1" d="M20 2.5a1 1 0 0 0-1-1 1 1 0 0 0 0 2 1 1 0 0 0 1-1z" stroke-width="1"></path>
30+
<path class="bonus-sparkle-2" d="M5 21.5a1 1 0 0 0-1-1 1 1 0 0 0 0 2 1 1 0 0 0 1-1z" stroke-width="1"></path>
31+
</svg>`;
2832

2933
export const arrowLeft = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>`;
3034

‎assets/components/modai/css/modai.css

Lines changed: 161 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,39 @@
22
from {
33
transform: rotate(0deg);
44
}
5+
56
to {
67
transform: rotate(360deg);
78
}
89
}
910

1011
@keyframes modai--dot-bounds {
11-
0%, 80%, 100% {
12+
13+
0%,
14+
80%,
15+
100% {
1216
transform: scale(0);
1317
}
18+
1419
40% {
1520
transform: scale(1.0);
1621
}
1722
}
1823

24+
@keyframes modai--sparkle {
25+
26+
0%,
27+
100% {
28+
opacity: 1;
29+
transform: scale(1);
30+
}
31+
32+
50% {
33+
opacity: 0;
34+
transform: scale(0);
35+
}
36+
}
37+
1938
:host {
2039
--primary: #4499E1;
2140
--primary-dark: #3a87c7;
@@ -38,6 +57,7 @@
3857

3958
font: normal 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4059
}
60+
4161
.icon {
4262
display: flex;
4363
align-items: center;
@@ -70,14 +90,15 @@
7090
::-webkit-resizer {
7191
display: none;
7292
z-index: 1;
73-
background: rgba(0,0,0,0);
93+
background: rgba(0, 0, 0, 0);
7494
left: -20px;
7595
}
7696

7797
.chat-modal {
78-
padding-bottom: 20px; /* webkit fix for resizer */
79-
width: clamp(374px,800px,90%);
80-
height: clamp(500px,80vh,90%);
98+
padding-bottom: 20px;
99+
/* webkit fix for resizer */
100+
width: clamp(374px, 800px, 90%);
101+
height: clamp(500px, 80vh, 90%);
81102
min-width: 374px;
82103
min-height: 500px;
83104
max-width: 90%;
@@ -136,7 +157,8 @@
136157
border-radius: 50%;
137158
transition: background-color var(--transition-speed);
138159

139-
&:hover, &:focus {
160+
&:hover,
161+
&:focus {
140162
background-color: var(--border-light);
141163
}
142164

@@ -246,7 +268,7 @@
246268
padding-block: 0;
247269

248270
&:hover .trigger,
249-
&:focus .trigger{
271+
&:focus .trigger {
250272
opacity: 1;
251273
}
252274

@@ -291,7 +313,7 @@
291313
}
292314

293315
&:hover .trigger,
294-
&:focus .trigger{
316+
&:focus .trigger {
295317
opacity: 1;
296318
}
297319

@@ -400,7 +422,8 @@
400422
border-radius: 28px;
401423
line-height: 1;
402424

403-
&:focus, &:hover {
425+
&:focus,
426+
&:hover {
404427
background-color: var(--border-light);
405428
}
406429

@@ -502,7 +525,8 @@
502525
gap: 5px;
503526
cursor: pointer;
504527

505-
&:hover, &:focus {
528+
&:hover,
529+
&:focus {
506530
background-color: var(--border-light);
507531
}
508532
}
@@ -542,7 +566,7 @@
542566
padding-block: 0;
543567

544568
&:hover .trigger,
545-
&:focus .trigger{
569+
&:focus .trigger {
546570
opacity: 1;
547571
}
548572

@@ -555,7 +579,8 @@
555579
background-color: #f8fafc;
556580
transition: transform 0.2s ease;
557581

558-
&:hover, &:focus {
582+
&:hover,
583+
&:focus {
559584
transform: scale(1.05);
560585
}
561586

@@ -610,7 +635,7 @@
610635
}
611636

612637
&:hover .trigger,
613-
&:focus .trigger{
638+
&:focus .trigger {
614639
opacity: 1;
615640
}
616641

@@ -757,7 +782,8 @@
757782
pointer-events: none;
758783
color: var(--text-light);
759784

760-
&:hover, &:focus {
785+
&:hover,
786+
&:focus {
761787
background-color: var(--primary-dark);
762788
}
763789

@@ -822,7 +848,8 @@
822848
z-index: 2;
823849
}
824850

825-
&:focus, &:hover {
851+
&:focus,
852+
&:hover {
826853
background-color: var(--border-light);
827854
opacity: 1;
828855
}
@@ -836,7 +863,8 @@
836863
background-color: var(--primary);
837864
color: var(--text-light);
838865

839-
&:hover, &:focus {
866+
&:hover,
867+
&:focus {
840868
background-color: var(--primary);
841869
color: var(--text-light);
842870
}
@@ -988,6 +1016,7 @@
9881016
outline-offset: 2px;
9891017
}
9901018
}
1019+
9911020
.confirmBtn {
9921021
padding: 8px 16px;
9931022
border: none;
@@ -1005,47 +1034,138 @@
10051034
}
10061035

10071036
.generate {
1008-
display: inline-flex;
1009-
height: 24px;
1037+
display: inline-block;
10101038
vertical-align: middle;
10111039
padding-left: 5px;
10121040

1041+
/* Common variables for consistent styling */
1042+
--sparkle-h: 222;
1043+
--sparkle-s: 49%;
1044+
--sparkle-l: 60%;
1045+
--nav-h: 191;
1046+
--nav-s: 100%;
1047+
--nav-l: 44%;
1048+
--button-transition: 200ms all;
1049+
1050+
.btn {
1051+
--button-color: hsl(var(--sparkle-h), var(--sparkle-s), var(--sparkle-l));
1052+
display: inline-flex;
1053+
align-items: center;
1054+
justify-content: center;
1055+
cursor: pointer;
1056+
color: var(--button-color);
1057+
background: transparent;
1058+
border: none;
1059+
padding: 3px 6px 4px;
1060+
height: 100%;
1061+
transition: var(--button-transition);
1062+
1063+
&:hover {
1064+
transform: scale(1.15);
1065+
--button-color: hsl(var(--nav-h), var(--nav-s), var(--nav-l));
1066+
}
1067+
1068+
&:focus {
1069+
outline: 2px solid hsl(var(--sparkle-h), var(--sparkle-s), var(--sparkle-l), 0.5);
1070+
outline-offset: 2px;
1071+
}
1072+
1073+
&:focus:not(:focus-visible) {
1074+
outline: none;
1075+
}
1076+
1077+
&:disabled {
1078+
opacity: 0.5;
1079+
cursor: initial;
1080+
}
1081+
}
1082+
10131083
.history--wrapper {
10141084
align-items: center;
10151085
}
10161086

1017-
.btn,
10181087
.history--next,
10191088
.history--prev {
1020-
--button-h: 191;
1021-
--button-s: 100%;
1022-
--button-l: 44%;
1023-
--button-hover-darken: 15%;
1024-
--button-border-darken: 20%;
1025-
--button-color: hsl(var(--button-h), var(--button-s), var(--button-l));
1026-
--button-color-border: hsl( var(--button-h), var(--button-s), calc(var(--button-l) - var(--button-border-darken)) );
1027-
--button-color-hover: hsl( var(--button-h), var(--button-s), calc(var(--button-l) - var(--button-hover-darken)) );
1028-
display: inline-block;
1089+
--button-color: hsl(var(--sparkle-h), var(--sparkle-s), var(--sparkle-l));
1090+
--button-color-hover: hsl(var(--nav-h), var(--nav-s), var(--nav-l));
10291091
cursor: pointer;
1030-
background: var(--button-color);
1031-
color: #ffffff;
1032-
border-radius: 4px;
1033-
margin-right: 6px;
1034-
padding: 3px 6px 4px;
1035-
border: 2px solid var(--button-color-border);
1036-
border-top-width: 1px;
1037-
border-left-width: 1px;
1038-
height: 100%;
1039-
transition: 200ms all;
1092+
background: transparent;
1093+
color: var(--button-color);
1094+
border: none;
1095+
transition: var(--button-transition);
1096+
min-width: 24px;
1097+
1098+
svg {
1099+
stroke: currentColor;
1100+
width: 14px;
1101+
height: 14px;
1102+
}
10401103

10411104
&:hover {
10421105
transform: scale(1.15);
1043-
background: var(--button-color-hover);
1106+
color: var(--button-color-hover);
1107+
}
1108+
1109+
&:focus {
1110+
outline: 2px solid hsl(var(--sparkle-h), var(--sparkle-s), var(--sparkle-l), 0.5);
1111+
outline-offset: 2px;
1112+
}
1113+
1114+
&:focus:not(:focus-visible) {
1115+
outline: none;
10441116
}
10451117

10461118
&:disabled {
1047-
opacity:0.5;
1048-
cursor:initial;
1119+
opacity: 0.5;
1120+
cursor: initial;
1121+
pointer-events: none;
1122+
}
1123+
}
1124+
1125+
/* Style the counter to match the buttons */
1126+
.history--wrapper>div:not(.history--next):not(.history--prev) {
1127+
color: hsl(var(--sparkle-h), var(--sparkle-s), var(--sparkle-l));
1128+
transition: var(--button-transition);
1129+
font-weight: 600;
1130+
min-width: 26px;
1131+
padding-bottom: 2px;
1132+
text-align: center;
1133+
}
1134+
1135+
/* Animation for counter updates */
1136+
.history--wrapper>div.updated {
1137+
animation: counterUpdate 0.3s ease-in-out forwards;
1138+
}
1139+
1140+
/* Ensure buttons maintain their appearance at different screen sizes */
1141+
@media (max-width: 480px) {
1142+
.history--wrapper {
1143+
gap: 0;
1144+
}
1145+
1146+
.history--next,
1147+
.history--prev {
1148+
padding: 3px 4px;
1149+
}
1150+
}
1151+
}
1152+
1153+
@media (prefers-reduced-motion: no-preference) {
1154+
.lucide-sparkle {
1155+
.bonus-sparkle-1 {
1156+
animation: modai--sparkle 5s ease-in-out;
1157+
animation-iteration-count: infinite;
1158+
animation-delay: 0s;
1159+
transform-origin: center;
1160+
transform-box: fill-box;
1161+
}
1162+
1163+
.bonus-sparkle-2 {
1164+
animation: modai--sparkle 5s ease-in-out;
1165+
animation-iteration-count: infinite;
1166+
animation-delay: 4s;
1167+
transform-origin: center;
1168+
transform-box: fill-box;
10491169
}
10501170
}
10511171
}

0 commit comments

Comments
 (0)