未割当ポイントのカラー変更

jphacks · Nov 16, 2024 · fa5662c · fa5662c
1 parent afe8d02
commit fa5662c
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/app/src/components/view/user/StatusChangeDialog.tsx b/app/src/components/view/user/StatusChangeDialog.tsx
@@ -98,7 +98,10 @@ export const StatusChangeDialog: React.FC<ChangeStatusProps> = ({ data }) => {
 					<div className="space-y-4 sm:space-y-6 px-10">
 						<div className="space-y-2">
 							<div className="flex justify-between">
-								<label htmlFor="speed" className="text-[#333333] text-sm font-bold">
+								<label
+									htmlFor="speed"
+									className="text-[#333333] text-sm font-bold"
+								>
 									スピード
 								</label>
 								<span className="text-sm text-muted-foreground">
@@ -121,7 +124,10 @@ export const StatusChangeDialog: React.FC<ChangeStatusProps> = ({ data }) => {
 						</div>
 						<div className="space-y-2 mt-8">
 							<div className="flex justify-between items-center">
-								<label htmlFor="similarity" className="text-[#333333] text-sm font-bold">
+								<label
+									htmlFor="similarity"
+									className="text-[#333333] text-sm font-bold"
+								>
 									正確性
 								</label>
 								<span className="text-sm text-muted-foreground">
@@ -146,7 +152,13 @@ export const StatusChangeDialog: React.FC<ChangeStatusProps> = ({ data }) => {
 					</div>
 					<div className="flex justify-start text-sm">
 						<span>未割り当てポイント：</span>
-						<span className="font-medium ml-1 text-green-600">{remainingPoint}</span>
+						<span
+							className={`font-medium ml-1 ${
+								remainingPoint < 0 ? "text-red-600" : "text-green-600"
+							}`}
+						>
+							{remainingPoint}
+						</span>
 					</div>
 					<DialogFooter className="flex flex-row justify-end space-x-2">
 						<Button variant="outline" onClick={() => setIsOpen(false)}>