Skip to content

Commit cea939a

Browse files
richiemcilroyrichiemcilroy
committed
Update captions tab to use new gray and blue color classes
1 parent 8da8c9d commit cea939a

1 file changed

Lines changed: 30 additions & 28 deletions

File tree

‎apps/desktop/src/routes/editor/CaptionsTab.tsx‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ function RgbInput(props: { value: string; onChange: (value: string) => void }) {
126126
}}
127127
/>
128128
<TextInput
129-
class="w-[5rem] p-[0.375rem] border text-gray-400 rounded-[0.5rem] bg-gray-50"
129+
class="w-[5rem] p-[0.375rem] border border-gray-3 text-gray-12 rounded-[0.5rem] bg-gray-2"
130130
value={text()}
131131
onFocus={() => {
132132
prevColor = props.value;
@@ -434,7 +434,7 @@ export function CaptionsTab() {
434434
<div class="space-y-6 transition-all duration-200">
435435
<div class="space-y-4">
436436
<div class="space-y-2">
437-
<label class="text-xs text-gray-500">Transcription Model</label>
437+
<label class="text-xs text-gray-11">Transcription Model</label>
438438
<div class="grid grid-cols-2 gap-3">
439439
<For each={MODEL_OPTIONS}>
440440
{(model) => {
@@ -447,26 +447,28 @@ export function CaptionsTab() {
447447
class={cx(
448448
"flex flex-col text-left p-3 rounded-lg border transition-all relative",
449449
isSelected()
450-
? "border-blue-500 bg-blue-50/50 ring-1 ring-blue-500"
451-
: "border-gray-200 hover:border-gray-300 bg-white",
450+
? "border-blue-8 bg-blue-3/40"
451+
: "border-gray-3 hover:border-gray-5 bg-gray-2",
452452
)}
453453
onClick={() => {
454454
setSelectedModel(model.name);
455455
}}
456456
>
457457
<div class="flex items-center justify-between w-full mb-1">
458-
<span class="font-medium text-sm">{model.label}</span>
458+
<span class="font-medium text-sm text-gray-12">
459+
{model.label}
460+
</span>
459461
<Show when={isDownloaded()}>
460-
<div class="text-green-500" title="Downloaded">
462+
<div class="text-green-9" title="Downloaded">
461463
<IconLucideCheck class="size-4" />
462464
</div>
463465
</Show>
464466
</div>
465-
<span class="text-xs text-gray-500 mb-2">
467+
<span class="text-xs text-gray-11 mb-2">
466468
{model.description}
467469
</span>
468470
<div class="flex items-center justify-between mt-auto">
469-
<span class="text-[10px] px-1.5 py-0.5 bg-gray-100 rounded text-gray-500">
471+
<span class="text-[10px] px-1.5 py-0.5 bg-gray-3 rounded text-gray-11">
470472
{model.size}
471473
</span>
472474
</div>
@@ -499,7 +501,7 @@ export function CaptionsTab() {
499501
</MenuItem>
500502
)}
501503
>
502-
<KSelect.Trigger class="flex flex-row items-center h-9 px-3 gap-2 border rounded-lg border-gray-200 w-full text-gray-700 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors">
504+
<KSelect.Trigger class="flex flex-row items-center h-9 px-3 gap-2 border rounded-lg border-gray-3 bg-gray-2 w-full text-gray-12 text-sm hover:border-gray-4 hover:bg-gray-3 focus:border-blue-9 focus:ring-1 focus:ring-blue-9 transition-colors">
503505
<KSelect.Value<string> class="flex-1 text-left truncate">
504506
{(state) => {
505507
const language = LANGUAGE_OPTIONS.find(
@@ -557,9 +559,9 @@ export function CaptionsTab() {
557559
</Show>
558560
</Button>
559561
<Show when={isDownloading()}>
560-
<div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden">
562+
<div class="w-full bg-gray-3 rounded-full h-1.5 overflow-hidden">
561563
<div
562-
class="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
564+
class="bg-blue-9 h-1.5 rounded-full transition-all duration-300"
563565
style={{ width: `${downloadProgress()}%` }}
564566
/>
565567
</div>
@@ -593,7 +595,7 @@ export function CaptionsTab() {
593595
<Field name="Font Settings" icon={<IconCapMessageBubble />}>
594596
<div class="space-y-3">
595597
<div class="flex flex-col gap-2">
596-
<span class="text-gray-500 text-sm">Font Family</span>
598+
<span class="text-gray-11 text-sm">Font Family</span>
597599
<KSelect<string>
598600
options={fontOptions.map((f) => f.value)}
599601
value={getSetting("font")}
@@ -617,7 +619,7 @@ export function CaptionsTab() {
617619
</MenuItem>
618620
)}
619621
>
620-
<KSelect.Trigger class="w-full flex items-center justify-between rounded-lg shadow px-3 py-2 bg-white border border-gray-300">
622+
<KSelect.Trigger class="w-full flex items-center justify-between rounded-lg px-3 py-2 bg-gray-2 border border-gray-3 text-gray-12 hover:border-gray-4 hover:bg-gray-3 focus:border-blue-9 focus:ring-1 focus:ring-blue-9 transition-colors">
621623
<KSelect.Value<string>>
622624
{(state) =>
623625
fontOptions.find(
@@ -644,7 +646,7 @@ export function CaptionsTab() {
644646
</div>
645647

646648
<div class="flex flex-col gap-2">
647-
<span class="text-gray-500 text-sm">Size</span>
649+
<span class="text-gray-11 text-sm">Size</span>
648650
<Slider
649651
value={[getSetting("size")]}
650652
onChange={(v) => updateCaptionSetting("size", v[0])}
@@ -656,7 +658,7 @@ export function CaptionsTab() {
656658
</div>
657659

658660
<div class="flex flex-col gap-2">
659-
<span class="text-gray-500 text-sm">Font Color</span>
661+
<span class="text-gray-11 text-sm">Font Color</span>
660662
<RgbInput
661663
value={getSetting("color")}
662664
onChange={(value) => updateCaptionSetting("color", value)}
@@ -668,7 +670,7 @@ export function CaptionsTab() {
668670
<Field name="Background Settings" icon={<IconCapMessageBubble />}>
669671
<div class="space-y-3">
670672
<div class="flex flex-col gap-2">
671-
<span class="text-gray-500 text-sm">Background Color</span>
673+
<span class="text-gray-11 text-sm">Background Color</span>
672674
<RgbInput
673675
value={getSetting("backgroundColor")}
674676
onChange={(value) =>
@@ -678,7 +680,7 @@ export function CaptionsTab() {
678680
</div>
679681

680682
<div class="flex flex-col gap-2">
681-
<span class="text-gray-500 text-sm">Background Opacity</span>
683+
<span class="text-gray-11 text-sm">Background Opacity</span>
682684
<Slider
683685
value={[getSetting("backgroundOpacity")]}
684686
onChange={(v) =>
@@ -717,7 +719,7 @@ export function CaptionsTab() {
717719
</MenuItem>
718720
)}
719721
>
720-
<KSelect.Trigger class="w-full flex items-center justify-between rounded-lg shadow px-3 py-2 bg-white border border-gray-300">
722+
<KSelect.Trigger class="w-full flex items-center justify-between rounded-lg px-3 py-2 bg-gray-2 border border-gray-3 text-gray-12 hover:border-gray-4 hover:bg-gray-3 focus:border-blue-9 focus:ring-1 focus:ring-blue-9 transition-colors">
721723
<KSelect.Value<string>>
722724
{(state) => (
723725
<span>
@@ -749,7 +751,7 @@ export function CaptionsTab() {
749751
<Field name="Animation" icon={<IconCapMessageBubble />}>
750752
<div class="space-y-3">
751753
<div class="flex flex-col gap-2">
752-
<span class="text-gray-500 text-sm">Highlight Color</span>
754+
<span class="text-gray-11 text-sm">Highlight Color</span>
753755
<RgbInput
754756
value={getSetting("highlightColor")}
755757
onChange={(value) =>
@@ -758,7 +760,7 @@ export function CaptionsTab() {
758760
/>
759761
</div>
760762
<div class="flex flex-col gap-2">
761-
<span class="text-gray-500 text-sm">Fade Duration</span>
763+
<span class="text-gray-11 text-sm">Fade Duration</span>
762764
<Slider
763765
value={[getSetting("fadeDuration") * 100]}
764766
onChange={(v) =>
@@ -769,7 +771,7 @@ export function CaptionsTab() {
769771
step={1}
770772
disabled={!hasCaptions()}
771773
/>
772-
<span class="text-xs text-gray-400 text-right">
774+
<span class="text-xs text-gray-11 text-right">
773775
{(getSetting("fadeDuration") * 1000).toFixed(0)}ms
774776
</span>
775777
</div>
@@ -792,7 +794,7 @@ export function CaptionsTab() {
792794

793795
<Show when={getSetting("outline")}>
794796
<div class="flex flex-col gap-2">
795-
<span class="text-gray-500 text-sm">Outline Color</span>
797+
<span class="text-gray-11 text-sm">Outline Color</span>
796798
<RgbInput
797799
value={getSetting("outlineColor")}
798800
onChange={(value) =>
@@ -832,11 +834,11 @@ export function CaptionsTab() {
832834
<div class="max-h-[300px] overflow-y-auto space-y-3 pr-2">
833835
<For each={project.captions?.segments}>
834836
{(segment) => (
835-
<div class="bg-gray-50 dark:bg-gray-100 border border-gray-200 rounded-lg p-4 space-y-4">
837+
<div class="bg-gray-2 border border-gray-3 rounded-lg p-4 space-y-4">
836838
<div class="flex flex-col space-y-4">
837839
<div class="flex space-x-4">
838840
<div class="flex-1">
839-
<label class="text-xs text-gray-400 dark:text-gray-500">
841+
<label class="text-xs text-gray-11">
840842
Start Time
841843
</label>
842844
<Input
@@ -853,7 +855,7 @@ export function CaptionsTab() {
853855
/>
854856
</div>
855857
<div class="flex-1">
856-
<label class="text-xs text-gray-400 dark:text-gray-500">
858+
<label class="text-xs text-gray-11">
857859
End Time
858860
</label>
859861
<Input
@@ -872,10 +874,10 @@ export function CaptionsTab() {
872874
</div>
873875

874876
<div class="space-y-2">
875-
<label class="text-xs text-gray-400 dark:text-gray-500">
877+
<label class="text-xs text-gray-11">
876878
Caption Text
877879
</label>
878-
<div class="w-full px-3 py-2 bg-white dark:bg-gray-50 border border-gray-200 rounded-lg text-sm focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 transition-colors">
880+
<div class="w-full px-3 py-2 bg-gray-2 border border-gray-3 rounded-lg text-sm focus-within:border-blue-9 focus-within:ring-1 focus-within:ring-blue-9 transition-colors">
879881
<textarea
880882
class="w-full resize-none outline-none bg-transparent text-[--text-primary]"
881883
value={segment.text}
@@ -894,7 +896,7 @@ export function CaptionsTab() {
894896
variant="destructive"
895897
size="sm"
896898
onClick={() => deleteSegment(segment.id)}
897-
class="text-gray-50 dark:text-gray-500 inline-flex items-center gap-1.5"
899+
class="text-gray-11 inline-flex items-center gap-1.5"
898900
>
899901
<IconDelete />
900902
Delete

0 commit comments

Comments
 (0)