Refactor: Replace inline styles with Tailwind CSS classes in Play components

Author: tknkaa

src/pages/Play/components/DiscardArea.tsx

@@ -13,22 +13,8 @@ function DiscardArea(props: DiscardAreaProps) {
 		};
 	});
 	return (
-		<div
-			style={{
-				height: "90%",
-				borderRadius: "1rem",
-				boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.2)",
-			}}
-		>
-			<div
-				style={{
-					paddingTop: "1rem",
-					justifyContent: "center",
-					display: "grid",
-					gridTemplateColumns: "repeat(6, 50px)",
-					listStyle: "none",
-				}}
-			>
+		<div className="h-[90%] rounded-[1rem] shadow-md">
+			<div className="pt-4 justify-center grid grid-cols-[repeat(6,50px)] list-none">
 				{sutehaiWithID.map((hai) => (
 					<li key={hai.id}>
 						<img

src/pages/Play/components/DisplaySwitch.tsx

@@ -8,13 +8,7 @@ export default function DisplaySwitch(props: DisplaySwitchProps) {
 	return (
 		<div style={{ height: "10%" }}>
 			{props.display === "sutehai" ? (
-				<div
-					style={{
-						display: "flex",
-						justifyContent: "center",
-						gap: "40px",
-					}}
-				>
+				<div className="flex justify-center gap-10">
 					<Button
 						variant="contained"
 						onClick={() => props.setDisplay("sutehai")}
@@ -29,13 +23,7 @@ export default function DisplaySwitch(props: DisplaySwitchProps) {
 					</Button>
 				</div>
 			) : (
-				<div
-					style={{
-						display: "flex",
-						justifyContent: "center",
-						gap: "40px",
-					}}
-				>
+				<div className="flex justify-center gap-10">
 					<Button
 						variant="outlined"
 						onClick={() => props.setDisplay("sutehai")}

src/pages/Play/components/HandStatus.tsx

@@ -5,9 +5,9 @@ type HandStatusProps = {
 
 function HandStatus(props: HandStatusProps) {
 	return (
-		<div className="h-full flex flex-col gap-4 rounded-[1rem] shadow-md">
+		<div className="h-full flex flex-col rounded-[1rem] shadow-md">
 			<div className="pt-4 font-medium pl-4 text-2xl text-left">向聴数</div>
-			<div className="font-medium pl-6 text-left text-xl leading-normal">
+			<div className="font-medium pt-4 pl-6 text-left text-xl leading-normal">
 				{props.mentsuSyanten === 0 ? (
 					<>メンツ手: テンパイ</>
 				) : (

src/pages/Play/components/ValidTiles.tsx

@@ -11,11 +11,11 @@ export default function ValidTiles(props: ValidTilesProps) {
 	const shortenedInfo = extractValidTile(validTileInfo);
 	const keys = [...shortenedInfo.keys()];
 	return (
-		<div className="rounded-[1rem] shadow-md h-[90%] overflow-hidden">
+		<div className="rounded-[1rem] shadow-md h-[90%]">
 			{keys.map((key) => (
 				<div key={key}>
 					<p className="text-xl font-medium pt-4">{key} </p>
-					<ul className="flex list-none">
+					<ul className="flex justify-center list-none">
 						{shortenedInfo.get(key)?.map((hai) => (
 							<li key={`${hai.kind} - ${hai.value}`}>
 								<img

src/pages/Play/components/WaitingTiles.tsx

@@ -16,9 +16,11 @@ function WaitingTiles(props: WaitingTilesProps) {
 	});
 	return (
 		<div className="h-full rounded-[1rem] shadow-md">
-			<div className="pt-2 pl-4 text-2xl text-left font-medium">待ち</div>
+			<div className="pt-4 pl-4 text-2xl text-left font-medium">待ち</div>
 			{machihai.length === 0 ? (
-				<div className="pl-6 text-xl font-medium">なし</div>
+				<div className="font-medium pt-4 pl-6 text-left text-xl leading-normal">
+					なし
+				</div>
 			) : (
 				<div className="list-none flex pl-5 pt-2">
 					{machihaiWithId.map((hai) => (

src/pages/Play/components/WaitingTilesSkeleton.tsx

@@ -3,7 +3,7 @@ import { Skeleton } from "@mui/material";
 export default function WaitingTilesSkeleton() {
 	return (
 		<div className="h-full rounded-[1rem] shadow-md">
-			<div className="pt-2 pl-4 text-2xl text-left font-medium">待ち</div>
+			<div className="pt-4 pl-4 text-2xl text-left font-medium">待ち</div>
 			<div className="pt-4 font-medium pl-6 text-left text-xl leading-normal w-[80%]">
 				<Skeleton variant="text" />
 			</div>