From bcd9466e3626f006ad354f32da22f4e743771064 Mon Sep 17 00:00:00 2001
From: alifhaider <alifhaider57@gmail.com>
Date: Tue, 17 Dec 2024 14:25:50 +0600
Subject: [PATCH] color fixes

---
 app/components/navbar.tsx                     |  4 +-
 app/components/user-card.tsx                  |  4 +-
 app/routes/_index.tsx                         |  6 +-
 app/routes/doctor.dashboard.appointments.tsx  |  4 +-
 app/routes/doctor.dashboard.overview.tsx      |  4 +-
 app/routes/profile.$username.tsx              | 61 ++++++++++---------
 ...ofile.($username).schedule.$scheduleId.tsx | 16 ++---
 7 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx
index 2892b49..0991ed6 100644
--- a/app/components/navbar.tsx
+++ b/app/components/navbar.tsx
@@ -34,7 +34,7 @@ export default function Navbar({
   )
   const [, setTheme] = useTheme()
   return (
-    <nav className="to red-500 ... sticky inset-0 z-50 mx-auto flex h-[73px] items-center justify-between border-b bg-background bg-gradient-to-r from-cyan-300 to-blue-300 px-4 py-4 opacity-75 lg:px-12">
+    <nav className="sticky inset-0 z-50 mx-auto flex h-[73px] items-center justify-between border-b bg-background px-4 py-4 lg:px-12">
       <div className="flex w-full items-center justify-between">
         <a href="/" className="font-bold">
           Care<span className="text-lime-500">Hub</span>
@@ -101,7 +101,7 @@ export default function Navbar({
             </DropdownMenuTrigger>
             <DropdownMenuContent
               align="start"
-              className="space-y-1 bg-cyan-300 py-2 text-sm"
+              className="space-y-1 py-2 text-sm"
             >
               {username ? (
                 <>
diff --git a/app/components/user-card.tsx b/app/components/user-card.tsx
index a5a9cea..1c94539 100644
--- a/app/components/user-card.tsx
+++ b/app/components/user-card.tsx
@@ -1,5 +1,5 @@
 import { Link } from '@remix-run/react'
-import { Star, PercentSquareIcon } from 'lucide-react'
+import { Star } from 'lucide-react'
 import { Button } from './ui/button'
 
 type UserCardProps = {
@@ -26,7 +26,7 @@ export default function UserCard({
 }: UserCardProps) {
   return (
     <li className="h-full">
-      <div className="flex h-full flex-col justify-between rounded-lg border bg-background bg-blue-400 py-4 hover:shadow-lg">
+      <div className="flex h-full flex-col justify-between rounded-lg border bg-background py-4 hover:shadow-lg">
         <div className="relative mx-auto h-20 w-20 rounded-sm bg-secondary">
           <img
             src={doctor?.image ?? '/avatar.png'}
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index f5bea4f..016faa4 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -52,7 +52,7 @@ export default function Index() {
   return (
     <>
       <Spacer variant="lg" />
-      <section className="mx-auto flex flex-col gap-10 md:container md:flex-row ">
+      <section className="mx-auto flex flex-col gap-10 md:container md:flex-row">
         <div className="space-y-4">
           <h1 className="text-4xl font-extrabold md:text-6xl">
             Find and Book Your Doctor&apos;s Appointment
@@ -70,12 +70,12 @@ export default function Index() {
           </p>
         </div>
         <img
-          className="h-80 w-full max-w-5xl rounded-2xl bg-primary-foreground"
+          className="h-80 w-full max-w-5xl rounded-2xl"
           src="https://i.ibb.co.com/jG6D6bY/Screenshot-92.png"
           alt="Doctor Appointment"
         />
       </section>
-      <section className="mt-20 bg-primary-foreground py-20 bg-gradient-to-r bg-cyan-300">
+      <section className="mt-20 bg-primary-foreground py-20">
         <div className="container">
           <SectionTitle>Search for Top-Rated Doctors</SectionTitle>
           <p className="mt-6 w-3/4">
diff --git a/app/routes/doctor.dashboard.appointments.tsx b/app/routes/doctor.dashboard.appointments.tsx
index 1f33d3b..20f2f9f 100644
--- a/app/routes/doctor.dashboard.appointments.tsx
+++ b/app/routes/doctor.dashboard.appointments.tsx
@@ -7,7 +7,7 @@ import { Label } from '~/components/ui/label'
 
 export default function DoctorAppointmentsPage() {
   return (
-    <div className="space-y-6 ">
+    <div className="space-y-6">
       <Card>
         <CardHeader>
           <CardTitle>Appointment Calendar</CardTitle>
@@ -19,7 +19,7 @@ export default function DoctorAppointmentsPage() {
       <div className="grid gap-4 md:grid-cols-2">
         <Card>
           <CardHeader>
-            <CardTitle>Today's Appointments</CardTitle>
+            <CardTitle>Today&apos;s Appointments</CardTitle>
           </CardHeader>
           <CardContent>
             <ul className="space-y-4">
diff --git a/app/routes/doctor.dashboard.overview.tsx b/app/routes/doctor.dashboard.overview.tsx
index f6630d0..3487f98 100644
--- a/app/routes/doctor.dashboard.overview.tsx
+++ b/app/routes/doctor.dashboard.overview.tsx
@@ -23,7 +23,7 @@ export default function DoctorDashboardOverview() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">
-              Today's Appointments
+              Today&apos;s Appointments
             </CardTitle>
             <Calendar className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
@@ -51,7 +51,7 @@ export default function DoctorDashboardOverview() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">
-              This Month's Earnings
+              This Month&apos;s Earnings
             </CardTitle>
             <DollarSign className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
diff --git a/app/routes/profile.$username.tsx b/app/routes/profile.$username.tsx
index 4148979..8014b51 100644
--- a/app/routes/profile.$username.tsx
+++ b/app/routes/profile.$username.tsx
@@ -25,10 +25,10 @@ import {
 import React from 'react'
 import { DayProps } from 'react-day-picker'
 import { jsonWithError, jsonWithSuccess } from 'remix-toast'
-import { ErrorList, Field, TextareaField } from '~/components/forms'
+import { ErrorList, TextareaField } from '~/components/forms'
 import { Spacer } from '~/components/spacer'
 import { PageTitle, SectionTitle } from '~/components/typography'
-import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar'
+import { Avatar } from '~/components/ui/avatar'
 import { Badge } from '~/components/ui/badge'
 import { Button } from '~/components/ui/button'
 import { Calendar, CustomCell } from '~/components/ui/calendar'
@@ -153,6 +153,32 @@ type Booking = {
   }
 }
 
+type ReviewProps = {
+  doctorId: string
+  userId: string
+  totalReviews: number | undefined
+  overallRating: string | undefined
+  reviews:
+    | {
+        user: {
+          username: string
+          fullName: string | null
+        }
+        id: string
+        createdAt: string
+        rating: number
+        comment: string
+      }[]
+    | undefined
+}
+
+type ScheduleProps = {
+  schedules: TSchedule[] | undefined
+  isOwner: boolean
+  isDoctor: boolean
+  username: string
+}
+
 export async function loader({ request, params }: LoaderFunctionArgs) {
   const url = new URL(request.url)
   const page = url.searchParams.get('page')
@@ -497,13 +523,6 @@ export function ErrorBoundary() {
   )
 }
 
-type ScheduleProps = {
-  schedules: TSchedule[] | undefined
-  isOwner: boolean
-  isDoctor: boolean
-  username: string
-}
-
 const Schedules = ({
   schedules,
   isDoctor,
@@ -549,25 +568,6 @@ const Schedules = ({
   )
 }
 
-type ReviewProps = {
-  doctorId: string
-  userId: string
-  totalReviews: number | undefined
-  overallRating: string | undefined
-  reviews:
-    | {
-        user: {
-          username: string
-          fullName: string | null
-        }
-        id: string
-        createdAt: string
-        rating: number
-        comment: string
-      }[]
-    | undefined
-}
-
 const Reviews = ({
   reviews,
   doctorId,
@@ -575,7 +575,6 @@ const Reviews = ({
   totalReviews,
   overallRating,
 }: ReviewProps) => {
-  if (!reviews) return null
   const actionData = useActionData<typeof action>()
 
   const [form, fields] = useForm({
@@ -585,6 +584,7 @@ const Reviews = ({
     },
     shouldRevalidate: 'onSubmit',
   })
+  if (!reviews) return null
 
   return (
     <section>
@@ -827,7 +827,8 @@ const ScheduleItem = ({
   const isDeleting = deleteFetcher.formData?.get('scheduleId') === schedule.id
   return (
     <li
-      className={`flex items-center rounded-md border transition-all ${isDeleting ? 'opacity-25' : 'opacity-100'}`}
+      hidden={isDeleting}
+      className="flex items-center rounded-md border transition-all"
     >
       <div className="h-full w-full px-4 py-6">
         <div className="flex items-center justify-between">
diff --git a/app/routes/profile.($username).schedule.$scheduleId.tsx b/app/routes/profile.($username).schedule.$scheduleId.tsx
index 74b6355..eaf230a 100644
--- a/app/routes/profile.($username).schedule.$scheduleId.tsx
+++ b/app/routes/profile.($username).schedule.$scheduleId.tsx
@@ -29,11 +29,11 @@ import { formatTime } from '~/utils/schedule'
 import { Spacer } from '~/components/spacer'
 
 const BookingFormSchema = z.object({
-  doctorId: z.string(),
-  userId: z.string(),
-  scheduleId: z.string(),
-  name: z.string(),
-  phone: z.string(),
+  doctorId: z.string({ message: 'Doctor ID is required' }),
+  userId: z.string({ message: 'User ID is required' }),
+  scheduleId: z.string({ message: 'Schedule ID is required' }),
+  name: z.string({ message: 'Name is required' }),
+  phone: z.string({ message: 'Phone is required' }),
   note: z.string().optional(),
 })
 
@@ -44,7 +44,7 @@ export const meta: MetaFunction = () => {
   ]
 }
 
-export async function action({ request, params }: ActionFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
   await requireUser(request)
   const formData = await request.formData()
   const submission = parseWithZod(formData, {
@@ -202,7 +202,9 @@ export default function Booking() {
             <div className="space-y-4">
               <p className="py-2 text-sm">
                 Please add{' '}
-                <strong className="underline">your or the patient's</strong>{' '}
+                <strong className="underline">
+                  your or the patient&apos;s
+                </strong>{' '}
                 information below
               </p>