fix: fix error message styles (#45)

eslint · Sep 20, 2024 · 4601b21 · 4601b21
1 parent 1c9c90a
commit 4601b21
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -58,7 +58,7 @@ function App() {
 								}}
 							/>
 							<div className="bg-foreground/5 overflow-auto h-[70dvh] sm:h-full relative flex flex-col">
-								<div className="flex sm:items-center flex-col sm:flex-row justify-between p-4 gap-2 z-10">
+								<div className="flex sm:items-center flex-col sm:flex-row justify-between p-4 gap-2 z-10 border-b">
 									<ToolSelector />
 									<div className="flex items-center gap-1">
 										{activeTool.options.map(

diff --git a/src/components/error-boundary.tsx b/src/components/error-boundary.tsx
@@ -43,8 +43,10 @@ export const withErrorBoundary = (Children: FC) => {
 
 export const ErrorState = ({ message }: { message: string }) => {
 	return (
-		<div className="bg-red-50 -mt-[72px] pt-[72px] h-full">
-			<div className="p-4 text-red-700">{message}</div>
+		<div className="bg-red-50 dark:bg-gray-800 pl-1.5 pt-1.5 h-full">
+			<div className="p-4 text-red-600 dark:text-red-400">
+				Error: {message}
+			</div>
 		</div>
 	);
 };
diff --git a/src/components/path/index.tsx b/src/components/path/index.tsx
@@ -62,8 +62,10 @@ export const CodePath: FC = () => {
 
 	if (error) {
 		return (
-			<div className="bg-red-50 -mt-[72px] pt-[72px] h-full">
-				<div className="p-4 text-red-700">{error}</div>
+			<div className="bg-red-50 dark:bg-gray-900 pl-1.5 pt-1.5 h-full">
+				<div className="p-4 text-red-600 dark:text-red-400">
+					Error: {error}
+				</div>
 			</div>
 		);
 	}