styles

app/globals.css

@@ -96,4 +96,17 @@
 	.scroll-fade:hover::after {
 		background: none;
 	}
+	.image-shadow::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		border-radius: 0.5rem;
+		pointer-events: none;
+	}
 }

components/chat.tsx

@@ -54,17 +54,17 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
 				<div className="flex h-full">
 					<div className="w-1/2 relative border-r-2 border-gray-200">
 						<div className="relative aspect-[1/1] w-full px-12">
-							<Image
-								src={targetImage}
-								alt="target image"
-								layout="responsive"
-								objectFit="contain"
-								width={1000}
-								height={1000}
-								className="rounded-xl shadow-lg"
-							/>
+							<div className="flex items-center h-[600px] relative">
+								<Image
+									src={targetImage}
+									alt="target image"
+									layout="fill"
+									objectFit="contain"
+									className="rounded-xl bg-gray-200"
+								/>
+							</div>
 							<button
-								className="px-2 py-1 rounded-lg text-blue-500 border-2 border-blue-400 flex items-center mt-4"
+								className="px-2 py-1 rounded-lg text-gray-600 border-2 border-gray-600 flex items-center mt-4"
 								onClick={() => setTargetImage(null)}
 							>
 								<svg

components/empty-screen.tsx

@@ -37,10 +37,10 @@ export function EmptyScreen() {
 				<p>Lets start by choosing an image</p>
 				<div
 					{...getRootProps()}
-					className="dropzone border-2 border-dashed border-blue-300 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer"
+					className="dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer"
 				>
 					<input {...getInputProps()} />
-					<p className="text-blue-300 text-lg">
+					<p className="text-gray-400 text-lg">
 						Drag or drop image here, or click to select images
 					</p>
 				</div>