Merge pull request #81 from jphacks/fix/yama/fix-something

各ページのCSSを調整
jphacks · Nov 16, 2024 · 4f1eab0 · 4f1eab0
2 parents 81a921c + 3ee6bb8
commit 4f1eab0
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 54 deletions.
diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx
@@ -152,10 +152,10 @@ export default function Home() {
 						}}
 					>
 						<div className="text-center mb-4">
-							<h2 className="text-lg font-semibold mb-2">今日のお題</h2>
+							<h2 className="text-lg text-[#333333] font-semibold mb-2">今日のお題</h2>
 							<p className="text-sm text-gray-600">撮影してスコアを競おう！</p>
 						</div>
-						<h1 className="text-3xl font-bold text-center mb-4">
+						<h1 className="text-4xl font-bold text-[#333333] text-center mb-4">
 							{todayAssignment?.english}
 						</h1>
 						<div className="flex justify-center w-full">
@@ -207,11 +207,8 @@ export default function Home() {
 				<Card className="flex flex-col items-center aspect-square w-full p-6 bg-white/80 backdrop-blur-sm">
 					<h2 className="text-lg font-semibold mb-4">過去のチャレンジ</h2>
 					{myScore.length === 0 ? (
-						<div className="text-gray-500 text-center py-8">
-							<p>まだチャレンジの記録がありません</p>
-							<p className="text-sm mt-2">
-								新しいチャレンジに挑戦してみましょう！
-							</p>
+						<div className="text-gray-500 text-center py-8 mt-12">
+							<p className="font-bold">まだチャレンジの記録がありません</p>
 							<p className="text-sm mt-2">
 								新しいチャレンジに挑戦してみましょう！
 							</p>

diff --git a/app/src/app/ranking/page.tsx b/app/src/app/ranking/page.tsx
@@ -15,7 +15,7 @@ export default function RankingPage() {
 	const [selectedTab, setSelectedTab] = useState<
 		"today" | "weekly" | "allTime"
 	>("today");
-	const [rankingType, setRankingType] = useState<"nomal" | "image">("nomal");
+	const [rankingType, setRankingType] = useState<"normal" | "image">("normal");
 	const [selectedTopic, setSelectedTopic] = useState(0);
 	const [topics, setTopics] = useState<todayAssignment[]>([]);
 	const [isPointDialogOpen, _] = usePointDialog();
@@ -51,15 +51,15 @@ export default function RankingPage() {
 	}
 	return (
 		<div className="min-h-screen bg-gradient-to-t from-gray-300 via-gray-200 to-gray-50 px-4">
-			{rankingType === "nomal" && (
+			{rankingType === "normal" && (
 				<>
 					<div className="w-full flex flex-col items-center justify-center sticky top-0 z-10 pt-4">
 						<TabNavigation
 							selectedTab={selectedTab}
 							setSelectedTab={setSelectedTab}
 						/>
 						{selectedTab === "today" && (
-							<div className="flex w-screen content-between p-4 justify-between">
+							<div className="flex gap-3 w-full content-between p-4 justify-between">
 								<TopicTabs
 									selectedTopic={selectedTopic}
 									setSelectedTopic={setSelectedTopic}
@@ -70,11 +70,13 @@ export default function RankingPage() {
 									onClick={() => {
 										setRankingType("image");
 									}}
-									className="bg-transparent text-[#333333] rounded-md right-0"
+									className="bg-transparent text-[#333333] rounded-lg py-2 px-4 shadow-md"
 								>
 									<div className="flex flex-col justify-center items-center">
 										<BsGrid1X2 size={"24"} />
-										<p>みんなの写真</p>
+										<p className="text-xs text-nowrap font-bold text-[#333333] mt-1">
+											みんなの写真
+										</p>
 									</div>
 								</button>
 							</div>

diff --git a/app/src/app/user/page.tsx b/app/src/app/user/page.tsx
@@ -173,7 +173,7 @@ const UserPage = () => {
 					similarityPoint={userStatus?.similarityPoint || 0}
 				/>
 			</button>
-			<Card className="flex flex-col items-center border-none p-8">
+			<Card className="w-[21rem] flex flex-col items-center border-none p-8">
 				<h2 className="text-2xl font-bold mb-4">過去のチャレンジ</h2>
 				<div className="w-full overflow-y-auto">
 					{myScore.length === 0 ? (

diff --git a/app/src/components/AssignmentBadge.tsx b/app/src/components/AssignmentBadge.tsx
@@ -26,10 +26,10 @@ export const AssignmentBadge = ({
 		setAssignment(selectAssignment);
 	};
 	return (
-		<div className="flex flex-col items-center justify-center text-center fixed top-0 left-0 w-full h-1/4">
-			<div className="py-2 px-4 bg-orange-500 text-white rounded-full">
+		<div className="flex flex-col items-center justify-center text-center fixed top-0 left-0 w-full h-1/6">
+			<div className="py-2 bg-orange-500 text-white rounded-xl">
 				<Select value={assignment.english} onValueChange={handleSelect}>
-					<SelectTrigger className="w-[180px]">
+					<SelectTrigger className="w-[180px] border-none focus:ring-0 focus:outline-none">
 						<SelectValue />
 					</SelectTrigger>
 					<SelectContent>

diff --git a/app/src/components/view/ranking/ImageList.tsx b/app/src/components/view/ranking/ImageList.tsx
@@ -6,11 +6,11 @@ import { VscListOrdered } from "react-icons/vsc";
 import { LoadingSpinner } from "../LoadingSpinner";
 
 type ImageListProps = {
-	setMode: (mode: "nomal" | "image") => void;
+	setMode: (mode: "normal" | "image") => void;
 };
 
 const MODE = {
-	NOMAL: "nomal",
+	NORMAL: "normal",
 	IMAGE: "image",
 } as const;
 
@@ -41,18 +41,18 @@ export const ImageList = ({ setMode }: ImageListProps) => {
 	}
 
 	return (
-		<div>
-			<div className="flex justify-end">
+		<div className="p-4">
+			<div className="flex justify-end mb-4">
 				<button
 					type="button"
 					onClick={() => {
-						setMode(MODE.NOMAL);
+						setMode(MODE.NORMAL);
 					}}
-					className="bg-transparent text-[#333333] rounded-md py-6 right-0"
+					className="bg-transparent text-[#333333] rounded-md py-2 px-4 shadow-md"
 				>
-					<div className="flex flex-col justify-center items-center w-20">
+					<div className="flex flex-col justify-center items-center">
 						<VscListOrdered size={"30"} />
-						<p>ランキング</p>
+						<p className="text-[#333333] text-sm font-bold">ランキング</p>
 					</div>
 				</button>
 			</div>
@@ -68,14 +68,21 @@ export const ImageList = ({ setMode }: ImageListProps) => {
 };
 
 const ImageBox = ({ score }: { score: ScoreDetail }) => {
+	const [imageUrl, setImageUrl] = useState(score.imageUrl);
+
+	const handleImageError = () => {
+		setImageUrl("https://placehold.jp/150x150.png");
+	};
+
 	return (
-		<Card key={score.id} className="p-1 w-full">
+		<Card key={score.id} className="p-1 w-full shadow-md">
 			<img
-				src={score.imageUrl}
+				src={imageUrl}
 				alt="画像"
-				className="w-full object-cover rounded-md relative"
+				className="w-full object-cover rounded-md"
+				onError={handleImageError}
 			/>
-			<p className="text-gray-500 relative bg-slate-200 rounded-md p-1">
+			<p className="text-gray-500 bg-slate-200 rounded-md p-1 mt-2">
 				{score.assignment}
 			</p>
 		</Card>

diff --git a/app/src/components/view/ranking/RankingListAll.tsx b/app/src/components/view/ranking/RankingListAll.tsx
@@ -3,14 +3,14 @@ import type { RankingScores } from "@/types";
 import { useEffect, useState } from "react";
 import { LoadingSpinner } from "../LoadingSpinner";
 
-export default function RankingListWeekly() {
+export default function RankingListAll() {
 	const [data, setData] = useState<RankingScores[]>([]);
 	const [isLoading, setIsLoading] = useState<boolean>(true);
 
 	useEffect(() => {
 		const fetchData = () => {
 			setIsLoading(true);
-			return fetch("/api/score/week")
+			return fetch("/api/score/all")
 				.then((response) => {
 					if (!response.ok) {
 						throw new Error("Failed to fetch data");

diff --git a/app/src/components/view/ranking/TopicTabs.tsx b/app/src/components/view/ranking/TopicTabs.tsx
@@ -3,34 +3,34 @@ import type { todayAssignment } from "@/types";
 import type React from "react";
 
 interface TopicTabsProps {
-	topics: todayAssignment[];
-	selectedTopic: number;
-	setSelectedTopic: (topic: number) => void;
+    topics: todayAssignment[];
+    selectedTopic: number;
+    setSelectedTopic: (topic: number) => void;
 }
 
 const TopicTabs: React.FC<TopicTabsProps> = ({
-	selectedTopic,
-	setSelectedTopic,
-	topics,
+    selectedTopic,
+    setSelectedTopic,
+    topics,
 }) => {
-	return (
-		<div className="flex overflow-x-auto space-x-4">
-			{topics.map((topic) => (
-				<Button
-					variant={"primary"}
-					key={topic.assignmentId}
-					onClick={() => setSelectedTopic(topic.assignmentId)}
-					className={`py-2 px-4 ${
-						selectedTopic === topic.assignmentId
-							? "bg-orange-200 text-[#333333]"
-							: "bg-gray-200"
-					} rounded-full`}
-				>
-					{topic.english}
-				</Button>
-			))}
-		</div>
-	);
+    return (
+        <div className="flex overflow-x-auto space-x-2 py-2">
+            {topics.map((topic) => (
+                <Button
+                    variant={"primary"}
+                    key={topic.assignmentId}
+                    onClick={() => setSelectedTopic(topic.assignmentId)}
+                    className={`py-2 px-4 ${
+                        selectedTopic === topic.assignmentId
+                            ? "bg-orange-200 text-[#333333]"
+                            : "bg-gray-200"
+                    } rounded-full shadow-md`}
+                >
+                    {topic.english}
+                </Button>
+            ))}
+        </div>
+    );
 };
 
 export default TopicTabs;