style: use Tailwind color tokens instead of hardcoded hex values (#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>
This commit is contained in:
Volnei Munhoz
co-authored by
Dylan Tarre
Claude Opus 4.5
Udit Takkar
Peer Richelsen
Anik Dhabal Babu
Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Dylan Tarre
Claude Opus 4.5
Udit Takkar
Peer Richelsen
Anik Dhabal Babu
Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
parent
ae6e0689f4
commit
2d19003e8a
@@ -522,7 +522,7 @@ export function LogInOverlay(props: LogInOverlayProps) {
|
||||
<h4 className="text-base font-semibold text-black dark:text-white">
|
||||
{t("sign_in_to_cal_com")}
|
||||
</h4>
|
||||
<p className="text-sm text-[#6B7280] dark:text-gray-300">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-300">
|
||||
{t("track_meetings_and_manage_schedule")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -617,8 +617,8 @@ export default function EventTypes() {
|
||||
<View>
|
||||
<AlertDialogText className="mb-2 text-sm font-medium">Title</AlertDialogText>
|
||||
<TextInput
|
||||
className={`rounded-md border bg-white px-3 py-2.5 text-base text-[#111827] ${
|
||||
titleError ? "border-red-500" : "border-[#D1D5DB]"
|
||||
className={`rounded-md border bg-white px-3 py-2.5 text-base text-gray-900 ${
|
||||
titleError ? "border-red-500" : "border-gray-300"
|
||||
}`}
|
||||
placeholder="Quick Chat"
|
||||
placeholderTextColor="#9CA3AF"
|
||||
@@ -668,10 +668,10 @@ export default function EventTypes() {
|
||||
>
|
||||
{/* Header */}
|
||||
<View className="px-8 pb-4 pt-6">
|
||||
<Text className="mb-2 text-2xl font-semibold text-[#111827]">
|
||||
<Text className="mb-2 text-2xl font-semibold text-gray-900">
|
||||
Add a new event type
|
||||
</Text>
|
||||
<Text className="text-sm text-[#6B7280]">
|
||||
<Text className="text-sm text-gray-500">
|
||||
Set up event types to offer different types of meetings.
|
||||
</Text>
|
||||
</View>
|
||||
@@ -680,9 +680,9 @@ export default function EventTypes() {
|
||||
<View className="px-8 pb-6">
|
||||
{/* Title */}
|
||||
<View className="mb-4">
|
||||
<Text className="mb-2 text-sm font-medium text-[#374151]">Title</Text>
|
||||
<Text className="mb-2 text-sm font-medium text-gray-700">Title</Text>
|
||||
<TextInput
|
||||
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"
|
||||
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"
|
||||
placeholder="Quick Chat"
|
||||
placeholderTextColor="#9CA3AF"
|
||||
value={newEventTitle}
|
||||
@@ -699,11 +699,11 @@ export default function EventTypes() {
|
||||
<View className="rounded-b-2xl border-t border-[#E5E7EB] bg-[#F9FAFB] px-8 py-4">
|
||||
<View className="flex-row justify-end gap-2 space-x-2">
|
||||
<TouchableOpacity
|
||||
className="rounded-xl border border-[#D1D5DB] bg-white px-4 py-2"
|
||||
className="rounded-xl border border-gray-300 bg-white px-4 py-2"
|
||||
onPress={handleCloseCreateModal}
|
||||
disabled={creating}
|
||||
>
|
||||
<Text className="text-base font-medium text-[#374151]">Close</Text>
|
||||
<Text className="text-base font-medium text-gray-700">Close</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
className={`rounded-xl bg-[#111827] px-4 py-2 ${creating ? "opacity-60" : ""}`}
|
||||
|
||||
@@ -791,7 +791,7 @@ export const BookingListScreen: React.FC<BookingListScreenProps> = ({
|
||||
<View>
|
||||
<UIText className="mb-2 text-sm font-medium">Reason for cancellation</UIText>
|
||||
<TextInput
|
||||
className="rounded-md border border-[#D1D5DB] bg-white px-3 py-2.5 text-base text-[#111827]"
|
||||
className="rounded-md border border-gray-300 bg-white px-3 py-2.5 text-base text-gray-900"
|
||||
placeholder="Why are you cancelling?"
|
||||
placeholderTextColor="#9CA3AF"
|
||||
value={cancelReason}
|
||||
|
||||
@@ -320,7 +320,7 @@ export function AdvancedTab(props: AdvancedTabProps) {
|
||||
className={`mr-3 h-5 w-5 items-center justify-center rounded border ${
|
||||
props.showAttendeeInfo
|
||||
? "border-[#111827] bg-[#111827]"
|
||||
: "border-[#D1D5DB] bg-white"
|
||||
: "border-gray-300 bg-white"
|
||||
}`}
|
||||
>
|
||||
{props.showAttendeeInfo && <Ionicons name="checkmark" size={14} color="#fff" />}
|
||||
@@ -338,7 +338,7 @@ export function AdvancedTab(props: AdvancedTabProps) {
|
||||
className={`mr-3 h-5 w-5 items-center justify-center rounded border ${
|
||||
props.showAvailabilityCount
|
||||
? "border-[#111827] bg-[#111827]"
|
||||
: "border-[#D1D5DB] bg-white"
|
||||
: "border-gray-300 bg-white"
|
||||
}`}
|
||||
>
|
||||
{props.showAvailabilityCount ? (
|
||||
|
||||
@@ -396,8 +396,8 @@ export function AvailabilityListScreen({
|
||||
<View>
|
||||
<AlertDialogText className="mb-2 text-sm font-medium">Name</AlertDialogText>
|
||||
<TextInput
|
||||
className={`rounded-md border bg-white px-3 py-2.5 text-base text-[#111827] ${
|
||||
nameError ? "border-red-500" : "border-[#D1D5DB]"
|
||||
className={`rounded-md border bg-white px-3 py-2.5 text-base text-gray-900 ${
|
||||
nameError ? "border-red-500" : "border-gray-300"
|
||||
}`}
|
||||
placeholder="Working Hours"
|
||||
placeholderTextColor="#9CA3AF"
|
||||
@@ -452,15 +452,15 @@ export function AvailabilityListScreen({
|
||||
>
|
||||
{/* Header */}
|
||||
<View className="px-8 pb-4 pt-6">
|
||||
<Text className="text-2xl font-semibold text-[#111827]">Add a new schedule</Text>
|
||||
<Text className="text-2xl font-semibold text-gray-900">Add a new schedule</Text>
|
||||
</View>
|
||||
|
||||
{/* Content */}
|
||||
<View className="px-8 pb-6">
|
||||
<View className="mb-1">
|
||||
<Text className="mb-2 text-sm font-medium text-[#374151]">Name</Text>
|
||||
<Text className="mb-2 text-sm font-medium text-gray-700">Name</Text>
|
||||
<TextInput
|
||||
className="rounded-md border border-[#D1D5DB] bg-white px-3 py-2.5 text-base text-[#111827]"
|
||||
className="rounded-md border border-gray-300 bg-white px-3 py-2.5 text-base text-gray-900"
|
||||
placeholder="Working Hours"
|
||||
placeholderTextColor="#9CA3AF"
|
||||
value={newScheduleName}
|
||||
@@ -477,14 +477,14 @@ export function AvailabilityListScreen({
|
||||
<View className="rounded-b-2xl border-t border-[#E5E7EB] bg-[#F9FAFB] px-8 py-4">
|
||||
<View className="flex-row justify-end gap-2 space-x-2">
|
||||
<AppPressable
|
||||
className="rounded-xl border border-[#D1D5DB] bg-white px-2 py-2 md:px-4"
|
||||
className="rounded-xl border border-gray-300 bg-white px-2 py-2 md:px-4"
|
||||
onPress={() => {
|
||||
onShowCreateModalChange(false);
|
||||
setNewScheduleName("");
|
||||
}}
|
||||
disabled={creating}
|
||||
>
|
||||
<Text className="text-base font-medium text-[#374151]">Close</Text>
|
||||
<Text className="text-base font-medium text-gray-700">Close</Text>
|
||||
</AppPressable>
|
||||
<AppPressable
|
||||
className={`rounded-xl bg-[#111827] px-2 py-2 md:px-4 ${
|
||||
|
||||
Reference in New Issue
Block a user