translateDesign変更 (#299)

web/app/routes/$userName+/page+/$slug+/components/sourceTextAndTranslationSection/SourceTextAndTranslationSection.tsx

@@ -20,7 +20,7 @@ export function SourceTextAndTranslationSection({
 }) {
 	return (
 		<>
-			<span className={`inline-block text-slate-500 ${sourceTextClassName}`}>
+			<span className={`inline-block text-gray-500 ${sourceTextClassName}`}>
 				{isPublished === false && <Lock className="h-6 w-6 mr-1 inline" />}
 				{elements}
 			</span>

web/app/routes/$userName+/page+/$slug+/components/translateButton/TranslateButton.tsx

@@ -29,7 +29,7 @@ export function TranslateButton({
 
 	return (
 		<>
-			<div className="mb-5  rounded-xl px-4 py-4 bg-gray-100 dark:bg-gray-900 shadow-inner">
+			<div className="mb-5  rounded-xl px-4 py-4 bg-gray-100 dark:bg-gray-900 shadow-md dark:shadow-gray-800">
 				<div className="flex flex-col space-y-2">
 					<div className="flex items-center space-x-1 h-10">
 						<TargetLanguageSelector targetLanguage={targetLanguage} />

web/app/routes/_index/index.tsx

@@ -93,7 +93,7 @@ export default function Index() {
 					<h1 className="text-7xl font-bold mb-20 text-center">
 						<SourceTextAndTranslationSection
 							sourceTextWithTranslations={heroTitle}
-							sourceTextClassName="bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent mb-2"
+							sourceTextClassName="bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text !text-transparent mb-2"
 							elements={heroTitle.sourceText.text}
 							sourceLanguage={sourceLanguage}
 							targetLanguage={targetLanguage}

web/app/tailwind.css

@@ -7,7 +7,7 @@
 
 @layer base {
 	:root {
-		--background: 0 0% 100%;
+		--background: 0 0% 98%;
 		--foreground: 222.2 84% 4.9%;
 
 		--card: 0 0% 100%;
@@ -39,32 +39,32 @@
 	}
 
 	.dark {
-		--background: 222.2 84% 4.9%;
+		--background: 240 10% 4%;
 		--foreground: 210 40% 98%;
 
-		--card: 222.2 84% 4.9%;
+		--card: 240 10% 5%;
 		--card-foreground: 210 40% 98%;
 
-		--popover: 222.2 84% 4.9%;
+		--popover: 240 10% 5%;
 		--popover-foreground: 210 40% 98%;
 
 		--primary: 210 40% 98%;
 		--primary-foreground: 222.2 47.4% 11.2%;
 
-		--secondary: 217.2 32.6% 17.5%;
+		--secondary: 240 10% 10%;
 		--secondary-foreground: 210 40% 98%;
 
-		--muted: 217.2 32.6% 17.5%;
+		--muted: 240 10% 10%;
 		--muted-foreground: 215 20.2% 65.1%;
 
-		--accent: 217.2 32.6% 17.5%;
+		--accent: 240 10% 10%;
 		--accent-foreground: 210 40% 98%;
 
 		--destructive: 0 62.8% 30.6%;
 		--destructive-foreground: 210 40% 98%;
 
-		--border: 217.2 32.6% 17.5%;
-		--input: 217.2 32.6% 17.5%;
+		--border: 240 10% 15%;
+		--input: 240 10% 15%;
 		--ring: 212.7 26.8% 83.9%;
 	}
 }

web/package.json

@@ -5,7 +5,7 @@
 	"scripts": {
 		"build": "remix vite:build",
 		"install-and-build": "bun install && bun run build",
-		"dev": "remix vite:dev",
+		"dev": "remix vite:dev --host 0.0.0.0",
 		"start": "NODE_OPTIONS='--import ./instrumentation.server.mjs' remix-serve ./build/server/index.js",
 		"typecheck": "tsc --noEmit",
 		"check": "bunx @biomejs/biome check --write .",