Skip to content

Commit 2d19003

Browse files
volneidylantarreclaudeUdit-takkarPeerRich
authored
style: use Tailwind color tokens instead of hardcoded hex values (calcom#26557)
Replace hardcoded hex colors with their exact Tailwind equivalents: - text-[#111827] → text-gray-900 - text-[#6B7280] → text-gray-500 - text-[#374151] → text-gray-700 - border-[#D1D5DB] → border-gray-300 This improves consistency with the rest of the codebase which already uses these tokens (e.g., text-gray-500 is used 107 times). Files changed: - apps/web/modules/videos/views/videos-single-view.tsx - companion/app/(tabs)/(event-types)/index.tsx - companion/components/booking-list-screen/BookingListScreen.tsx - companion/components/event-type-detail/tabs/AdvancedTab.tsx - companion/components/screens/AvailabilityListScreen.tsx - companion/components/screens/BookingDetailScreen.android.tsx 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Dylan Tarre <timecreepsby@gmail.com> Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com> Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
1 parent ae6e068 commit 2d19003

5 files changed

Lines changed: 19 additions & 19 deletions

File tree

‎apps/web/modules/videos/views/videos-single-view.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -522,7 +522,7 @@ export function LogInOverlay(props: LogInOverlayProps) {
522522
<h4 className="text-base font-semibold text-black dark:text-white">
523523
{t("sign_in_to_cal_com")}
524524
</h4>
525-
<p className="text-sm text-[#6B7280] dark:text-gray-300">
525+
<p className="text-sm text-gray-500 dark:text-gray-300">
526526
{t("track_meetings_and_manage_schedule")}
527527
</p>
528528
</div>

‎companion/app/(tabs)/(event-types)/index.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -617,8 +617,8 @@ export default function EventTypes() {
617617
<View>
618618
<AlertDialogText className="mb-2 text-sm font-medium">Title</AlertDialogText>
619619
<TextInput
620-
className={`rounded-md border bg-white px-3 py-2.5 text-base text-[#111827] ${
621-
titleError ? "border-red-500" : "border-[#D1D5DB]"
620+
className={`rounded-md border bg-white px-3 py-2.5 text-base text-gray-900 ${
621+
titleError ? "border-red-500" : "border-gray-300"
622622
}`}
623623
placeholder="Quick Chat"
624624
placeholderTextColor="#9CA3AF"
@@ -668,10 +668,10 @@ export default function EventTypes() {
668668
>
669669
{/* Header */}
670670
<View className="px-8 pb-4 pt-6">
671-
<Text className="mb-2 text-2xl font-semibold text-[#111827]">
671+
<Text className="mb-2 text-2xl font-semibold text-gray-900">
672672
Add a new event type
673673
</Text>
674-
<Text className="text-sm text-[#6B7280]">
674+
<Text className="text-sm text-gray-500">
675675
Set up event types to offer different types of meetings.
676676
</Text>
677677
</View>
@@ -680,9 +680,9 @@ export default function EventTypes() {
680680
<View className="px-8 pb-6">
681681
{/* Title */}
682682
<View className="mb-4">
683-
<Text className="mb-2 text-sm font-medium text-[#374151]">Title</Text>
683+
<Text className="mb-2 text-sm font-medium text-gray-700">Title</Text>
684684
<TextInput
685-
className="rounded-md border border-[#D1D5DB] bg-white px-3 py-2.5 text-base text-[#111827] focus:border-black focus:ring-2 focus:ring-black"
685+
className="rounded-md border border-gray-300 bg-white px-3 py-2.5 text-base text-gray-900 focus:border-black focus:ring-2 focus:ring-black"
686686
placeholder="Quick Chat"
687687
placeholderTextColor="#9CA3AF"
688688
value={newEventTitle}
@@ -699,11 +699,11 @@ export default function EventTypes() {
699699
<View className="rounded-b-2xl border-t border-[#E5E7EB] bg-[#F9FAFB] px-8 py-4">
700700
<View className="flex-row justify-end gap-2 space-x-2">
701701
<TouchableOpacity
702-
className="rounded-xl border border-[#D1D5DB] bg-white px-4 py-2"
702+
className="rounded-xl border border-gray-300 bg-white px-4 py-2"
703703
onPress={handleCloseCreateModal}
704704
disabled={creating}
705705
>
706-
<Text className="text-base font-medium text-[#374151]">Close</Text>
706+
<Text className="text-base font-medium text-gray-700">Close</Text>
707707
</TouchableOpacity>
708708
<TouchableOpacity
709709
className={`rounded-xl bg-[#111827] px-4 py-2 ${creating ? "opacity-60" : ""}`}

‎companion/components/booking-list-screen/BookingListScreen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -791,7 +791,7 @@ export const BookingListScreen: React.FC<BookingListScreenProps> = ({
791791
<View>
792792
<UIText className="mb-2 text-sm font-medium">Reason for cancellation</UIText>
793793
<TextInput
794-
className="rounded-md border border-[#D1D5DB] bg-white px-3 py-2.5 text-base text-[#111827]"
794+
className="rounded-md border border-gray-300 bg-white px-3 py-2.5 text-base text-gray-900"
795795
placeholder="Why are you cancelling?"
796796
placeholderTextColor="#9CA3AF"
797797
value={cancelReason}

‎companion/components/event-type-detail/tabs/AdvancedTab.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ export function AdvancedTab(props: AdvancedTabProps) {
320320
className={`mr-3 h-5 w-5 items-center justify-center rounded border ${
321321
props.showAttendeeInfo
322322
? "border-[#111827] bg-[#111827]"
323-
: "border-[#D1D5DB] bg-white"
323+
: "border-gray-300 bg-white"
324324
}`}
325325
>
326326
{props.showAttendeeInfo && <Ionicons name="checkmark" size={14} color="#fff" />}
@@ -338,7 +338,7 @@ export function AdvancedTab(props: AdvancedTabProps) {
338338
className={`mr-3 h-5 w-5 items-center justify-center rounded border ${
339339
props.showAvailabilityCount
340340
? "border-[#111827] bg-[#111827]"
341-
: "border-[#D1D5DB] bg-white"
341+
: "border-gray-300 bg-white"
342342
}`}
343343
>
344344
{props.showAvailabilityCount ? (

‎companion/components/screens/AvailabilityListScreen.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -396,8 +396,8 @@ export function AvailabilityListScreen({
396396
<View>
397397
<AlertDialogText className="mb-2 text-sm font-medium">Name</AlertDialogText>
398398
<TextInput
399-
className={`rounded-md border bg-white px-3 py-2.5 text-base text-[#111827] ${
400-
nameError ? "border-red-500" : "border-[#D1D5DB]"
399+
className={`rounded-md border bg-white px-3 py-2.5 text-base text-gray-900 ${
400+
nameError ? "border-red-500" : "border-gray-300"
401401
}`}
402402
placeholder="Working Hours"
403403
placeholderTextColor="#9CA3AF"
@@ -452,15 +452,15 @@ export function AvailabilityListScreen({
452452
>
453453
{/* Header */}
454454
<View className="px-8 pb-4 pt-6">
455-
<Text className="text-2xl font-semibold text-[#111827]">Add a new schedule</Text>
455+
<Text className="text-2xl font-semibold text-gray-900">Add a new schedule</Text>
456456
</View>
457457

458458
{/* Content */}
459459
<View className="px-8 pb-6">
460460
<View className="mb-1">
461-
<Text className="mb-2 text-sm font-medium text-[#374151]">Name</Text>
461+
<Text className="mb-2 text-sm font-medium text-gray-700">Name</Text>
462462
<TextInput
463-
className="rounded-md border border-[#D1D5DB] bg-white px-3 py-2.5 text-base text-[#111827]"
463+
className="rounded-md border border-gray-300 bg-white px-3 py-2.5 text-base text-gray-900"
464464
placeholder="Working Hours"
465465
placeholderTextColor="#9CA3AF"
466466
value={newScheduleName}
@@ -477,14 +477,14 @@ export function AvailabilityListScreen({
477477
<View className="rounded-b-2xl border-t border-[#E5E7EB] bg-[#F9FAFB] px-8 py-4">
478478
<View className="flex-row justify-end gap-2 space-x-2">
479479
<AppPressable
480-
className="rounded-xl border border-[#D1D5DB] bg-white px-2 py-2 md:px-4"
480+
className="rounded-xl border border-gray-300 bg-white px-2 py-2 md:px-4"
481481
onPress={() => {
482482
onShowCreateModalChange(false);
483483
setNewScheduleName("");
484484
}}
485485
disabled={creating}
486486
>
487-
<Text className="text-base font-medium text-[#374151]">Close</Text>
487+
<Text className="text-base font-medium text-gray-700">Close</Text>
488488
</AppPressable>
489489
<AppPressable
490490
className={`rounded-xl bg-[#111827] px-2 py-2 md:px-4 ${

0 commit comments

Comments
 (0)