update icon history

frontend/dashboard/src/pages/Corporates/Benefit/List.tsx

@@ -27,6 +27,7 @@ import {
   Menu,
   ButtonGroup,
   Grid,
+  Tooltip,
 } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
@@ -378,7 +379,7 @@ export default function PlanList() {
               </Button>
             )}
           </TableCell>
-          <TableCell align="center">
+          <TableCell align="right">
             <Button
               variant="outlined"
               color="success"
@@ -392,11 +393,13 @@ export default function PlanList() {
             >
               {openEdit ? 'Save' : 'Edit'}
             </Button>
+          </TableCell>
+          <TableCell>
+            <Tooltip title="History">
               <Link to={`/corporate/${corporate_id}/benefits/${row.id}/history`}>
-              <Button variant="outlined" color="primary" size="small" style={{marginLeft: "10px"}} startIcon={<HistoryIcon />}>
-                History
-              </Button>
-            </Link>
+                <HistoryIcon />
+              </Link>
+            </Tooltip>
           </TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
@@ -824,7 +827,7 @@ export default function PlanList() {
                 <TableCell style={headStyle} align="center">
                   Status
                 </TableCell>
-                <TableCell style={headStyle} align="center">
+                <TableCell style={headStyle} colSpan={2} align="center">
                   Action
                 </TableCell>
               </TableRow>

frontend/dashboard/src/pages/Corporates/Index.tsx

@@ -341,9 +341,7 @@ export default function Corporates() {
                 </Button>
               </Link>
               <Link to={`/corporate/${row.id}/corporate-history`}>
-              <Button variant="outlined" color="primary" size="small" startIcon={<HistoryIcon />}>
-                History
-              </Button>
+              <HistoryIcon />
               </Link>
             </Stack>
           </TableCell>

frontend/dashboard/src/pages/Corporates/Member/List.tsx

@@ -27,6 +27,7 @@ import {
   Menu,
   ButtonGroup,
   Grid,
+  Tooltip,
 } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
@@ -444,11 +445,11 @@ export default function CorporatePlanList() {
             )}
           </TableCell>
           <TableCell align="right">
-            <Link to={`/corporate/${corporate_id}/members/${row.id}/history`}>
-              <Button variant="outlined" color="primary" size="small" style={{marginLeft: "10px"}} startIcon={<HistoryIcon />}>
-                History
-              </Button>
-            </Link>
+            <Tooltip title="History">
+              <Link to={`/corporate/${corporate_id}/members/${row.id}/history`}>
+                <HistoryIcon />
+              </Link>
+            </Tooltip>
           </TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}

frontend/dashboard/src/pages/Corporates/Plan/List.tsx

@@ -27,6 +27,7 @@ import {
   Menu,
   ButtonGroup,
   Grid,
+  Tooltip,
 } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
@@ -363,11 +364,11 @@ export default function CorporatePlanList() {
             )}
           </TableCell>
           <TableCell align="center">
+          <Tooltip title="History">
             <Link to={`/corporate/${corporate_id}/plans/${row.id}/history`}>
-              <Button variant="outlined" color="primary" size="small" style={{marginLeft: "10px"}} startIcon={<HistoryIcon />}>
-                History
-              </Button>
+              <HistoryIcon />
             </Link>
+          </Tooltip>
           </TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}

frontend/dashboard/src/pages/Corporates/Services/List.tsx

@@ -29,6 +29,7 @@ import {
   ButtonGroup,
   Checkbox,
   FormControlLabel,
+  Tooltip,
 } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
@@ -232,17 +233,19 @@ export default function List() {
               </Button>
             )}
           </TableCell>
-          <TableCell align="right" width='25%'>
+          <TableCell align="right" width='10%'>
             <Link to={`/corporate/${corporate_id}/services/${row.service_code}`}>
               <Button variant="outlined" color="primary" size="small">
                 Config
               </Button>
             </Link>
-            <Link to={`/corporate/${corporate_id}/services/${row.id}/history`}>
-              <Button variant="outlined" color="primary" size="small" style={{marginLeft: "10px"}} startIcon={<HistoryIcon />}>
-                History
-              </Button>
-            </Link>
+            </TableCell>
+            <TableCell width='1%'>
+            <Tooltip title="History">
+              <Link to={`/corporate/${corporate_id}/services/${row.id}/history`} >
+                <HistoryIcon/>
+              </Link>
+            </Tooltip>
           </TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
@@ -715,7 +718,7 @@ export default function List() {
                 <TableCell style={headStyle} align="right" width={30}>
                   Status
                 </TableCell>
-                <TableCell style={headStyle} align="right" width={30}>
+                <TableCell style={headStyle} align="center" width={30} colSpan={2}>
                   Action
                 </TableCell>
               </TableRow>