zero-knowledge file sharing
fix sizing
+16
-15
+16
-15
web/src/pages/Upload.tsx
+16
-15
web/src/pages/Upload.tsx
···
200
200
return (
201
201
<>
202
202
<div
203
-
class="group relative mx-auto flex aspect-square w-[65vw] max-w-[500px] items-center justify-center"
203
+
class="group relative mx-auto flex aspect-square w-[80vw] max-w-[500px] items-center justify-center"
204
204
onClick={() => fileInput.click()}
205
205
>
206
206
<svg
···
209
209
>
210
210
<defs>
211
211
<clipPath id="circle-clip">
212
-
<circle cx={CENTER} cy={CENTER} r={RADIUS - 2.5} />
212
+
<circle cx={CENTER} cy={CENTER} r={RADIUS - 3.5} />
213
213
</clipPath>
214
214
</defs>
215
215
<style>{`@keyframes wave { from { transform: translateX(0) } to { transform: translateX(-${WAVE_LEN}px) } }`}</style>
···
219
219
r={RADIUS}
220
220
fill="none"
221
221
stroke={dragging() ? "var(--color-accent)" : "var(--color-border)"}
222
-
stroke-width="5"
223
-
stroke-dasharray={dragging() ? "6 4" : "none"}
222
+
stroke-width="7"
223
+
pathLength={dragging() ? "100" : undefined}
224
+
stroke-dasharray={dragging() ? "3 2" : "none"}
224
225
class="transition-all duration-200"
225
226
/>
226
227
<circle
···
229
230
r={RADIUS}
230
231
fill="none"
231
232
stroke={tooLarge() ? "var(--color-danger)" : "var(--color-accent)"}
232
-
stroke-width="5"
233
+
stroke-width="7"
233
234
stroke-dasharray={`${CIRCUMFERENCE}`}
234
-
stroke-dashoffset={`${CIRCUMFERENCE * (1 - (uploading() ? 0 : sizeRatio()))}`}
235
+
stroke-dashoffset={`${CIRCUMFERENCE * (1 - (uploading() || dragging() ? 0 : sizeRatio()))}`}
235
236
stroke-linecap="round"
236
237
transform={`rotate(-90 ${CENTER} ${CENTER})`}
237
238
style={{
238
-
transition: `all ${animDuration()}ms ease-out`,
239
+
transition: dragging() ? "none" : `all ${animDuration()}ms ease-out`,
239
240
}}
240
241
/>
241
242
{/* Upload liquid fill */}
···
252
253
</g>
253
254
</svg>
254
255
255
-
<div class="z-10 flex flex-col items-center gap-3 text-center">
256
+
<div class="z-10 flex flex-col items-center gap-2 text-center sm:gap-3">
256
257
<Show when={uploading()}>
257
258
<span
258
259
class="text-accent font-medium tabular-nums"
···
277
278
fallback={
278
279
<>
279
280
<span
280
-
class="text-text truncate text-xs"
281
-
style={{ "max-width": "clamp(120px, 40vw, 300px)" }}
281
+
class="text-text truncate"
282
+
style={{
283
+
"max-width": "clamp(120px, 40vw, 300px)",
284
+
"font-size": "clamp(0.75rem, 2vw, 1rem)",
285
+
}}
282
286
>
283
287
{file()!.name}
284
288
</span>
285
289
<span
286
-
class={
287
-
tooLarge()
288
-
? "text-danger text-xs font-medium"
289
-
: "text-muted text-xs"
290
-
}
290
+
class={`font-medium ${tooLarge() ? "text-danger" : "text-muted"}`}
291
+
style={{ "font-size": "clamp(0.625rem, 1.5vw, 0.875rem)" }}
291
292
>
292
293
{formatBytes(file()!.size)}
293
294
{tooLarge() ? ` / ${formatBytes(maxFileSize())} limit` : ""}