Skip to content

Commit a1c055b

Browse files
myftijamyftija
committed
Use a slightly smaller font size for run option labels
1 parent f2c55c4 commit a1c055b

File tree

2 files changed

+68
-26
lines changed
  • apps/webapp/app
    • components/primitives
    • routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam

2 files changed

+68
-26
lines changed

‎apps/webapp/app/components/primitives/Label.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { InfoIconTooltip, SimpleTooltip } from "./Tooltip";
44

55
const variants = {
66
small: {
7-
text: "font-sans text-sm font-normal text-text-bright leading-tight flex items-center gap-1",
7+
text: "font-sans text-[0.8125rem] font-normal text-text-bright leading-tight flex items-center gap-1",
88
},
99
medium: {
1010
text: "font-sans text-sm text-text-bright leading-tight flex items-center gap-1",

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx‎

Lines changed: 67 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -418,12 +418,12 @@ function StandardTaskForm({
418418
<div className="h-full overflow-y-scroll">
419419
<Fieldset className="px-3 py-3">
420420
<InputGroup>
421-
<Label>Delay</Label>
421+
<Label variant="small">Delay</Label>
422422
<DurationPicker name={delaySeconds.name} id={delaySeconds.id} />
423423
<FormError id={delaySeconds.errorId}>{delaySeconds.error}</FormError>
424424
</InputGroup>
425425
<InputGroup>
426-
<Label>TTL</Label>
426+
<Label variant="small">TTL</Label>
427427
<DurationPicker
428428
name={ttlSeconds.name}
429429
id={ttlSeconds.id}
@@ -434,7 +434,9 @@ function StandardTaskForm({
434434
<FormError id={ttlSeconds.errorId}>{ttlSeconds.error}</FormError>
435435
</InputGroup>
436436
<InputGroup>
437-
<Label htmlFor={queue.id}>Queue</Label>
437+
<Label htmlFor={queue.id} variant="small">
438+
Queue
439+
</Label>
438440
{allowArbitraryQueues ? (
439441
<Input
440442
{...conform.input(queue, { type: "text" })}
@@ -484,7 +486,9 @@ function StandardTaskForm({
484486
<FormError id={queue.errorId}>{queue.error}</FormError>
485487
</InputGroup>
486488
<InputGroup>
487-
<Label htmlFor={tags.id}>Tags</Label>
489+
<Label htmlFor={tags.id} variant="small">
490+
Tags
491+
</Label>
488492
<RunTagInput
489493
name={tags.name}
490494
id={tags.id}
@@ -496,7 +500,9 @@ function StandardTaskForm({
496500
<FormError id={tags.errorId}>{tags.error}</FormError>
497501
</InputGroup>
498502
<InputGroup>
499-
<Label htmlFor={maxAttempts.id}>Max attempts</Label>
503+
<Label htmlFor={maxAttempts.id} variant="small">
504+
Max attempts
505+
</Label>
500506
<Input
501507
{...conform.input(maxAttempts, { type: "number" })}
502508
className="[&::-webkit-inner-spin-button]:appearance-none"
@@ -522,7 +528,7 @@ function StandardTaskForm({
522528
<FormError id={maxAttempts.errorId}>{maxAttempts.error}</FormError>
523529
</InputGroup>
524530
<InputGroup>
525-
<Label>Max duration</Label>
531+
<Label variant="small">Max duration</Label>
526532
<DurationPicker
527533
name={maxDurationSeconds.name}
528534
id={maxDurationSeconds.id}
@@ -532,7 +538,9 @@ function StandardTaskForm({
532538
<FormError id={maxDurationSeconds.errorId}>{maxDurationSeconds.error}</FormError>
533539
</InputGroup>
534540
<InputGroup>
535-
<Label htmlFor={idempotencyKey.id}>Idempotency key</Label>
541+
<Label htmlFor={idempotencyKey.id} variant="small">
542+
Idempotency key
543+
</Label>
536544
<Input {...conform.input(idempotencyKey, { type: "text" })} variant="small" />
537545
<FormError id={idempotencyKey.errorId}>{idempotencyKey.error}</FormError>
538546
<Hint>
@@ -541,7 +549,7 @@ function StandardTaskForm({
541549
</Hint>
542550
</InputGroup>
543551
<InputGroup>
544-
<Label>Idempotency key TTL</Label>
552+
<Label variant="small">Idempotency key TTL</Label>
545553
<DurationPicker
546554
name={idempotencyKeyTTLSeconds.name}
547555
id={idempotencyKeyTTLSeconds.id}
@@ -552,7 +560,9 @@ function StandardTaskForm({
552560
</FormError>
553561
</InputGroup>
554562
<InputGroup>
555-
<Label htmlFor={concurrencyKey.id}>Concurrency key</Label>
563+
<Label htmlFor={concurrencyKey.id} variant="small">
564+
Concurrency key
565+
</Label>
556566
<Input
557567
{...conform.input(concurrencyKey, { type: "text" })}
558568
variant="small"
@@ -566,7 +576,9 @@ function StandardTaskForm({
566576
<FormError id={concurrencyKey.errorId}>{concurrencyKey.error}</FormError>
567577
</InputGroup>
568578
<InputGroup>
569-
<Label htmlFor={machine.id}>Machine</Label>
579+
<Label htmlFor={machine.id} variant="small">
580+
Machine
581+
</Label>
570582
<Select
571583
{...conform.select(machine)}
572584
variant="tertiary/small"
@@ -590,7 +602,9 @@ function StandardTaskForm({
590602
<FormError id={machine.errorId}>{machine.error}</FormError>
591603
</InputGroup>
592604
<InputGroup>
593-
<Label htmlFor={version.id}>Version</Label>
605+
<Label htmlFor={version.id} variant="small">
606+
Version
607+
</Label>
594608
<Select
595609
{...conform.select(version)}
596610
defaultValue="latest"
@@ -765,7 +779,9 @@ function ScheduledTaskForm({
765779
<div className="grow overflow-y-scroll p-3">
766780
<Fieldset>
767781
<InputGroup>
768-
<Label htmlFor={timestamp.id}>Timestamp UTC</Label>
782+
<Label htmlFor={timestamp.id} variant="small">
783+
Timestamp UTC
784+
</Label>
769785
<input
770786
type="hidden"
771787
{...conform.input(timestamp, { type: "hidden" })}
@@ -786,7 +802,9 @@ function ScheduledTaskForm({
786802
<FormError id={timestamp.errorId}>{timestamp.error}</FormError>
787803
</InputGroup>
788804
<InputGroup>
789-
<Label htmlFor={lastTimestamp.id}>Last timestamp UTC</Label>
805+
<Label htmlFor={lastTimestamp.id} variant="small">
806+
Last timestamp UTC
807+
</Label>
790808
<input
791809
type="hidden"
792810
{...conform.input(lastTimestamp, { type: "hidden" })}
@@ -809,7 +827,9 @@ function ScheduledTaskForm({
809827
<FormError id={lastTimestamp.errorId}>{lastTimestamp.error}</FormError>
810828
</InputGroup>
811829
<InputGroup>
812-
<Label htmlFor={timezone.id}>Timezone</Label>
830+
<Label htmlFor={timezone.id} variant="small">
831+
Timezone
832+
</Label>
813833
<Select
814834
{...conform.select(timezone)}
815835
placeholder="Select a timezone"
@@ -833,7 +853,9 @@ function ScheduledTaskForm({
833853
<FormError id={timezone.errorId}>{timezone.error}</FormError>
834854
</InputGroup>
835855
<InputGroup>
836-
<Label htmlFor={externalId.id}>External ID</Label>
856+
<Label htmlFor={externalId.id} variant="small">
857+
External ID
858+
</Label>
837859
<Input
838860
{...conform.input(externalId, { type: "text" })}
839861
placeholder="Optionally specify your own ID, e.g. user id"
@@ -850,7 +872,9 @@ function ScheduledTaskForm({
850872
</InputGroup>
851873
<div className="w-full border-b border-grid-bright"></div>
852874
<InputGroup>
853-
<Label>TTL</Label>
875+
<Label htmlFor={ttlSeconds.id} variant="small">
876+
TTL
877+
</Label>
854878
<DurationPicker
855879
name={ttlSeconds.name}
856880
id={ttlSeconds.id}
@@ -861,7 +885,9 @@ function ScheduledTaskForm({
861885
<FormError id={ttlSeconds.errorId}>{ttlSeconds.error}</FormError>
862886
</InputGroup>
863887
<InputGroup>
864-
<Label htmlFor={queue.id}>Queue</Label>
888+
<Label htmlFor={queue.id} variant="small">
889+
Queue
890+
</Label>
865891
{allowArbitraryQueues ? (
866892
<Input
867893
{...conform.input(queue, { type: "text" })}
@@ -911,7 +937,9 @@ function ScheduledTaskForm({
911937
<FormError id={queue.errorId}>{queue.error}</FormError>
912938
</InputGroup>
913939
<InputGroup>
914-
<Label htmlFor={tags.id}>Tags</Label>
940+
<Label htmlFor={tags.id} variant="small">
941+
Tags
942+
</Label>
915943
<RunTagInput
916944
name={tags.name}
917945
id={tags.id}
@@ -923,7 +951,9 @@ function ScheduledTaskForm({
923951
<FormError id={tags.errorId}>{tags.error}</FormError>
924952
</InputGroup>
925953
<InputGroup>
926-
<Label htmlFor={maxAttempts.id}>Max attempts</Label>
954+
<Label htmlFor={maxAttempts.id} variant="small">
955+
Max attempts
956+
</Label>
927957
<Input
928958
{...conform.input(maxAttempts, { type: "number" })}
929959
className="[&::-webkit-inner-spin-button]:appearance-none"
@@ -949,7 +979,9 @@ function ScheduledTaskForm({
949979
<FormError id={maxAttempts.errorId}>{maxAttempts.error}</FormError>
950980
</InputGroup>
951981
<InputGroup>
952-
<Label>Max duration</Label>
982+
<Label htmlFor={maxDurationSeconds.id} variant="small">
983+
Max duration
984+
</Label>
953985
<DurationPicker
954986
name={maxDurationSeconds.name}
955987
id={maxDurationSeconds.id}
@@ -959,7 +991,9 @@ function ScheduledTaskForm({
959991
<FormError id={maxDurationSeconds.errorId}>{maxDurationSeconds.error}</FormError>
960992
</InputGroup>
961993
<InputGroup>
962-
<Label htmlFor={idempotencyKey.id}>Idempotency key</Label>
994+
<Label htmlFor={idempotencyKey.id} variant="small">
995+
Idempotency key
996+
</Label>
963997
<Input {...conform.input(idempotencyKey, { type: "text" })} variant="small" />
964998
<FormError id={idempotencyKey.errorId}>{idempotencyKey.error}</FormError>
965999
<Hint>
@@ -968,15 +1002,19 @@ function ScheduledTaskForm({
9681002
</Hint>
9691003
</InputGroup>
9701004
<InputGroup>
971-
<Label>Idempotency key TTL</Label>
1005+
<Label htmlFor={idempotencyKeyTTLSeconds.id} variant="small">
1006+
Idempotency key TTL
1007+
</Label>
9721008
<DurationPicker name={idempotencyKeyTTLSeconds.name} id={idempotencyKeyTTLSeconds.id} />
9731009
<Hint>By default, idempotency keys expire after 30 days.</Hint>
9741010
<FormError id={idempotencyKeyTTLSeconds.errorId}>
9751011
{idempotencyKeyTTLSeconds.error}
9761012
</FormError>
9771013
</InputGroup>
9781014
<InputGroup>
979-
<Label htmlFor={concurrencyKey.id}>Concurrency key</Label>
1015+
<Label htmlFor={concurrencyKey.id} variant="small">
1016+
Concurrency key
1017+
</Label>
9801018
<Input
9811019
{...conform.input(concurrencyKey, { type: "text" })}
9821020
variant="small"
@@ -990,7 +1028,9 @@ function ScheduledTaskForm({
9901028
<FormError id={concurrencyKey.errorId}>{concurrencyKey.error}</FormError>
9911029
</InputGroup>
9921030
<InputGroup>
993-
<Label htmlFor={machine.id}>Machine</Label>
1031+
<Label htmlFor={machine.id} variant="small">
1032+
Machine
1033+
</Label>
9941034
<Select
9951035
{...conform.select(machine)}
9961036
variant="tertiary/small"
@@ -1014,7 +1054,9 @@ function ScheduledTaskForm({
10141054
<FormError id={machine.errorId}>{machine.error}</FormError>
10151055
</InputGroup>
10161056
<InputGroup>
1017-
<Label htmlFor={version.id}>Version</Label>
1057+
<Label htmlFor={version.id} variant="small">
1058+
Version
1059+
</Label>
10181060
<Select
10191061
{...conform.select(version)}
10201062
defaultValue="latest"

0 commit comments

Comments
 (0)