improve tobuylist UI

frontend/src/pages/TaskListPage.tsx

@@ -135,7 +135,7 @@ const TaskListPage: React.FC = () => {
   const handleBuy = async (tobuyId: number) => {
     try {
       const today = new Date().toISOString().substring(0, 10);
-      const parsedPrice = parseInt(newPrice, 10); 
+      const parsedPrice = parseInt(newPrice, 10);
       console.log("newPrice")
       console.log(newPrice)
       console.log("parsedPrice")
@@ -200,18 +200,20 @@ const TaskListPage: React.FC = () => {
               */}
               {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
               <ListItemText
-                primary={`${tobuy.stuffName} × ${tobuy.amount}`}
-                //secondary={tobuy.amount}
-                sx={{
-                  textDecoration: false ? 'line-through' : 'none',
-                }}
+                primary={tobuy.stuffName}
               />
-              {/* 買い物リスト：食材情報記入ボタン */}
+                {/* 買い物リスト：食材情報記入ボタン */}
               <ListItemSecondaryAction>
-                <Tooltip title="食材情報追加">
+                <Typography variant="body1" component="span" sx={{ marginRight: '1em' }}>
+                  {`× ${tobuy.amount}`}
+                </Typography>
+                <Tooltip title="購入情報を記入">
+                  {/* デフォルトの marginRightの設定（マイナス）を上書き */}
                   <IconButton
+                    color="primary"
+                    sx={{ marginRight: 0}}
                     edge="end"
-                    aria-label="食材情報追加"
+                    aria-label="購入情報を記入"
                     onClick={() => {
                       setOpenInfoDialog(true)
                       setSelectedTask(tobuy.tobuyId)
@@ -378,7 +380,7 @@ const TaskListPage: React.FC = () => {
                 const value = e.target.value;
                 if (/^\d*$/.test(value)) {
                   setNewPrice(value)
-                } ;
+                };
               }}
             />
             {/* 購入日入力フィールド */}