Skip to content

Commit 208eaf2

Browse files
timothyistimothyis
authored
Update feedback components (#1814)
* Update feedback components * Remove email input if logged in * Updates based on feedback * Fix footer feedback z-index * Change placeholder to be consistent * Fix bad merge
1 parent 3471a2e commit 208eaf2

16 files changed

+1449
-949
lines changed

‎components/feedback-input/feedback-input.module.css

+337
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,337 @@
1+
.geist-feedback-input {
2+
--open-width: 339px;
3+
--open-height: 213px;
4+
--closed-width: 90px;
5+
--closed-height: 32px;
6+
7+
padding: 0;
8+
position: relative;
9+
margin-right: var(--geist-gap-half);
10+
height: var(--closed-height);
11+
width: var(--closed-width);
12+
display: inline-block;
13+
font-family: var(--font-sans);
14+
text-rendering: optimizeLegibility;
15+
-webkit-font-smoothing: antialiased;
16+
}
17+
18+
.geist-feedback-input.email {
19+
--open-height: 277px;
20+
}
21+
22+
.geist-feedback-input .feedback-wrapper {
23+
appearance: none;
24+
border-width: 0;
25+
background: var(--geist-background);
26+
border: 1px solid var(--accents-2);
27+
display: flex;
28+
line-height: 1.5;
29+
font-size: 0.875rem;
30+
border-radius: var(--geist-radius);
31+
font-family: var(--font-sans);
32+
width: var(--closed-width);
33+
height: var(--closed-height);
34+
resize: none;
35+
/* fixes a bug in ff where the animation of the chat
36+
* counter appears on top of our input during its transition */
37+
z-index: 100;
38+
outline: 0;
39+
color: var(--geist-foreground);
40+
flex-direction: column;
41+
justify-content: flex-start;
42+
overflow: hidden;
43+
position: relative;
44+
transition: all 200ms ease-in-out, border-radius 200ms step-start, border 200ms ease-in-out;
45+
46+
&.blur {
47+
.input-wrapper, .controls {
48+
display: none;
49+
}
50+
}
51+
}
52+
53+
.geist-feedback-input.focused .feedback-wrapper {
54+
width: var(--open-width);
55+
height: var(--open-height);
56+
border: none;
57+
border-color: white;
58+
box-shadow: var(--shadow-large);
59+
background: var(--geist-background);
60+
transition: all 0ms ease-in-out, border-radius 0ms step-start, border 100ms ease-in-out;
61+
}
62+
63+
.geist-feedback-input:focus, .geist-feedback-input:active {
64+
outline: 0;
65+
}
66+
67+
.geist-feedback-input .feedback-wrapper .placeholder {
68+
display: flex;
69+
position: absolute;
70+
top: -1px;
71+
left: -1px;
72+
align-items: center;
73+
justify-content: center;
74+
width: var(--closed-width);
75+
height: var(--closed-height);
76+
border: 1px solid transparent;
77+
flex-shrink: 0;
78+
background: var(--geist-background);
79+
color: var(--accents-5);
80+
z-index: 1000;
81+
transition: opacity 0.1s ease-out, color 0.1s, top 0.1s step-start, left 0.1s step-start;
82+
transition-delay: 0.2s, 0s;
83+
cursor: text;
84+
}
85+
86+
.geist-feedback-input.focused .placeholder {
87+
opacity: 0;
88+
pointer-events: none;
89+
top: 0px;
90+
left: 0px;
91+
color: var(--geist-foreground);
92+
transition: opacity 0.005s linear;
93+
}
94+
95+
.geist-feedback-input .input-wrapper {
96+
padding: var(--geist-gap-half);
97+
opacity: 0;
98+
transition: opacity 0.2s ease;
99+
position: relative;
100+
height: 222px;
101+
}
102+
103+
.geist-feedback-input.focused .input-wrapper {
104+
opacity: 1;
105+
}
106+
107+
.geist-feedback-input .input:not(:last-child) {
108+
margin-bottom: var(--geist-gap-half)
109+
}
110+
111+
.geist-feedback-input .input label {
112+
margin: 0;
113+
display: block;
114+
font-weight: 500;
115+
font-size: 12px;
116+
text-transform: uppercase;
117+
margin-top: 0px;
118+
margin-bottom: 8px;
119+
color: var(--accents-5);
120+
}
121+
122+
.geist-feedback-input:hover .feedback-wrapper,
123+
.geist-feedback-input:focus .feedback-wrapper,
124+
.geist-feedback-input:active .feedback-wrapper {
125+
border-color: var(--geist-foreground);
126+
}
127+
128+
.geist-feedback-input:hover .input > *::placeholder,
129+
.geist-feedback-input:focus .input > *::placeholder,
130+
.geist-feedback-input:active .input > *::placeholder {
131+
color: var(--geist-foreground);
132+
}
133+
134+
.geist-feedback-input .input > *::placeholder {
135+
color: var(--accents-5);
136+
transition: color 0.2s ease-in-out;
137+
}
138+
139+
.geist-feedback-input.error textarea,
140+
.geist-feedback-input.loading textarea,
141+
.geist-feedback-input.success textarea {
142+
pointer-events: none;
143+
}
144+
145+
.geist-feedback-input.error textarea,
146+
.geist-feedback-input.success textarea {
147+
color: transparent;
148+
user-select: none;
149+
}
150+
151+
.geist-feedback-input.loading textarea {
152+
color: var(--accents-3);
153+
}
154+
155+
.geist-feedback-input .textarea-wrapper {
156+
height: var(--closed-height);
157+
width: var(--closed-width);
158+
transition: all 150ms ease-in-out, border-radius 150ms step-start;
159+
}
160+
161+
.geist-feedback-input .error-message,
162+
.geist-feedback-input .success-message {
163+
z-index: 1001;
164+
position: absolute;
165+
left: 0;
166+
top: 0;
167+
width: var(--open-width);
168+
font-size: 0.875rem;
169+
height: 100%;
170+
display: flex;
171+
align-items: center;
172+
justify-content: center;
173+
text-align: center;
174+
padding: 20px;
175+
flex-direction: column;
176+
}
177+
178+
.geist-feedback-input .success-message p {
179+
line-height: normal;
180+
margin: 0;
181+
opacity: 0;
182+
animation: appear 500ms ease forwards;
183+
}
184+
185+
.geist-feedback-input .success-message .checkmark {
186+
opacity: 0;
187+
animation: appear 200ms 100ms ease forwards;
188+
}
189+
190+
.geist-feedback-input .success-message p:first-of-type {
191+
margin-top: var(--geist-gap-half);
192+
margin-bottom: var(--geist-gap-quarter);
193+
animation-delay: 300ms;
194+
}
195+
196+
.geist-feedback-input .success-message p:nth-of-type(2) {
197+
animation-delay: 500ms;
198+
}
199+
200+
.geist-feedback-input .error-message > span {
201+
color: var(--geist-error);
202+
margin-bottom: var(--geist-gap-half);
203+
}
204+
205+
.geist-feedback-input .error-message a {
206+
color: var(--geist-foreground);
207+
text-decoration: none;
208+
}
209+
210+
.geist-feedback-input .controls {
211+
pointer-events: none;
212+
width: var(--open-width);
213+
height: 64px;
214+
background-color: var(--geist-background);
215+
display: flex;
216+
align-items: center;
217+
border-bottom-left-radius: 5px;
218+
border-bottom-right-radius: 5px;
219+
background: var(--accents-1);
220+
border-top: 1px solid var(--accents-2);
221+
padding: var(--geist-gap-half);
222+
opacity: 0;
223+
transition: opacity 0.2s ease;
224+
}
225+
226+
.geist-feedback-input.focused .controls {
227+
pointer-events: inherit;
228+
opacity: 1;
229+
}
230+
231+
.geist-feedback-input .controls .emojis {
232+
width: 160px;
233+
}
234+
235+
.geist-feedback-input .controls .buttons {
236+
flex: 1;
237+
text-align: right;
238+
transition: opacity 200ms ease;
239+
margin-left: auto;
240+
}
241+
242+
@keyframes appear {
243+
from {
244+
opacity: 0;
245+
}
246+
to {
247+
opacity: 1;
248+
}
249+
}
250+
251+
/* At 951px the dots menu disappears and changes the width */
252+
@media (max-width: 951px) {
253+
.geist-feedback-input {
254+
--open-width: 300px;
255+
}
256+
}
257+
258+
/* Emoji selector */
259+
.geist-emoji-selector {
260+
display: flex;
261+
width: 210px;
262+
pointer-events: none;
263+
}
264+
265+
.geist-emoji-selector.loading {
266+
filter: grayscale(100%);
267+
-webkit-filter: grayscale(100%);
268+
cursor: default;
269+
pointer-events: none;
270+
}
271+
272+
.geist-feedback-input.focused .geist-emoji-selector {
273+
pointer-events: all;
274+
}
275+
276+
.geist-emoji-selector > button {
277+
outline: none;
278+
background: transparent;
279+
border: 0;
280+
padding: 0;
281+
margin: 0;
282+
transition: all 0.12s ease-in-out;
283+
border-radius: 50%;
284+
border: 1px solid var(--accents-2);
285+
}
286+
287+
.geist-emoji-selector > .option.active {
288+
transform: scale(1.12);
289+
border-color: var(--geist-warning);
290+
}
291+
292+
.geist-emoji-selector > button:hover,
293+
.geist-emoji-selector > button:focus {
294+
background: var(--geist-background);
295+
transform: scale(1.08);
296+
}
297+
298+
.geist-emoji-selector > button,
299+
.geist-emoji-selector > button .inner {
300+
display: inline-flex;
301+
}
302+
303+
.geist-emoji-selector > button {
304+
cursor: pointer;
305+
text-align: center;
306+
}
307+
308+
.geist-emoji-selector button + button {
309+
margin-left: var(--geist-gap-quarter);
310+
}
311+
312+
.geist-emoji-selector.loading > button {
313+
cursor: default;
314+
}
315+
316+
.geist-emoji-selector > button:first-child {
317+
outline: none;
318+
pointer-events: all;
319+
}
320+
321+
.geist-emoji-selector.loading > button:first-child {
322+
outline: none;
323+
}
324+
325+
.geist-emoji-selector > button .inner {
326+
height: 32px;
327+
width: 32px;
328+
border-radius: 50%;
329+
display: flex;
330+
justify-content: center;
331+
align-items: center;
332+
}
333+
334+
335+
.geist-emoji-selector > button.option {
336+
transition: all 200ms cubic-bezier(.5,-1,.5,2);
337+
}

0 commit comments

Comments
 (0)