Răsfoiți Sursa

style(ui): enlarge row action icons and rebalance clients table widths

Bump row action icons to 18px across the clients, inbounds, groups and
nodes tables for better visibility.

In the clients table, cap the Client column at 220px and give Duration a
fixed width so the Traffic column becomes the flexible one that absorbs
the remaining horizontal space instead of Client growing oversized.
MHSanaei 1 zi în urmă
părinte
comite
6e20588236

+ 7 - 6
frontend/src/pages/clients/ClientsPage.tsx

@@ -605,19 +605,19 @@ export default function ClientsPage() {
       render: (_v, record) => (
       render: (_v, record) => (
         <Space size={4}>
         <Space size={4}>
           <Tooltip title={t('pages.clients.qrCode')}>
           <Tooltip title={t('pages.clients.qrCode')}>
-            <Button size="small" type="text" icon={<QrcodeOutlined />} onClick={() => onShowQr(record)} />
+            <Button size="small" type="text" style={{ fontSize: 18 }} icon={<QrcodeOutlined />} onClick={() => onShowQr(record)} />
           </Tooltip>
           </Tooltip>
           <Tooltip title={t('pages.clients.clientInfo')}>
           <Tooltip title={t('pages.clients.clientInfo')}>
-            <Button size="small" type="text" icon={<InfoCircleOutlined />} onClick={() => onShowInfo(record)} />
+            <Button size="small" type="text" style={{ fontSize: 18 }} icon={<InfoCircleOutlined />} onClick={() => onShowInfo(record)} />
           </Tooltip>
           </Tooltip>
           <Tooltip title={t('pages.inbounds.resetTraffic')}>
           <Tooltip title={t('pages.inbounds.resetTraffic')}>
-            <Button size="small" type="text" icon={<RetweetOutlined />} onClick={() => onResetTraffic(record)} />
+            <Button size="small" type="text" style={{ fontSize: 18 }} icon={<RetweetOutlined />} onClick={() => onResetTraffic(record)} />
           </Tooltip>
           </Tooltip>
           <Tooltip title={t('edit')}>
           <Tooltip title={t('edit')}>
-            <Button size="small" type="text" icon={<EditOutlined />} onClick={() => onEdit(record)} />
+            <Button size="small" type="text" style={{ fontSize: 18 }} icon={<EditOutlined />} onClick={() => onEdit(record)} />
           </Tooltip>
           </Tooltip>
           <Tooltip title={t('delete')}>
           <Tooltip title={t('delete')}>
-            <Button size="small" type="text" danger icon={<DeleteOutlined />} onClick={() => onDelete(record)} />
+            <Button size="small" type="text" danger style={{ fontSize: 18 }} icon={<DeleteOutlined />} onClick={() => onDelete(record)} />
           </Tooltip>
           </Tooltip>
         </Space>
         </Space>
       ),
       ),
@@ -663,6 +663,7 @@ export default function ClientsPage() {
     {
     {
       title: t('pages.clients.client'),
       title: t('pages.clients.client'),
       key: 'email',
       key: 'email',
+      width: 220,
       render: (_v, record) => (
       render: (_v, record) => (
         <div className="email-cell">
         <div className="email-cell">
           <span className="email">{record.email}</span>
           <span className="email">{record.email}</span>
@@ -742,7 +743,6 @@ export default function ClientsPage() {
     {
     {
       title: t('pages.clients.traffic'),
       title: t('pages.clients.traffic'),
       key: 'traffic',
       key: 'traffic',
-      width: 240,
       render: (_v, record) => (
       render: (_v, record) => (
         <ClientTrafficCell
         <ClientTrafficCell
           up={record.traffic?.up}
           up={record.traffic?.up}
@@ -762,6 +762,7 @@ export default function ClientsPage() {
     {
     {
       title: t('pages.clients.duration'),
       title: t('pages.clients.duration'),
       key: 'expiryTime',
       key: 'expiryTime',
+      width: 130,
       render: (_v, record) => (
       render: (_v, record) => (
         <Tooltip title={expiryLabel(record)}>
         <Tooltip title={expiryLabel(record)}>
           <Tag color={expiryColor(record)}>{record.expiryTime ? expiryRelative(record) : '∞'}</Tag>
           <Tag color={expiryColor(record)}>{record.expiryTime ? expiryRelative(record) : '∞'}</Tag>

+ 2 - 2
frontend/src/pages/groups/GroupsPage.tsx

@@ -407,10 +407,10 @@ export default function GroupsPage() {
       render: (_v, row) => (
       render: (_v, row) => (
         <Space size={4}>
         <Space size={4}>
           <Dropdown trigger={['click']} menu={{ items: rowActions(row) }}>
           <Dropdown trigger={['click']} menu={{ items: rowActions(row) }}>
-            <Button size="small" type="text" icon={<MoreOutlined />} />
+            <Button size="small" type="text" style={{ fontSize: 18 }} icon={<MoreOutlined />} />
           </Dropdown>
           </Dropdown>
           <Tooltip title={t('pages.groups.rename')}>
           <Tooltip title={t('pages.groups.rename')}>
-            <Button size="small" type="text" icon={<EditOutlined />} onClick={() => openRename(row)} />
+            <Button size="small" type="text" style={{ fontSize: 18 }} icon={<EditOutlined />} onClick={() => openRename(row)} />
           </Tooltip>
           </Tooltip>
         </Space>
         </Space>
       ),
       ),

+ 2 - 2
frontend/src/pages/inbounds/list/RowActions.tsx

@@ -69,7 +69,7 @@ export function RowActionsCell({ record, subEnable, hasClients, onClick }: RowAc
   const { t } = useTranslation();
   const { t } = useTranslation();
   return (
   return (
     <div className="action-buttons">
     <div className="action-buttons">
-      <Button type="text" size="small" icon={<EditOutlined />} onClick={() => onClick('edit')} />
+      <Button type="text" size="small" style={{ fontSize: 18 }} icon={<EditOutlined />} onClick={() => onClick('edit')} />
       <Dropdown
       <Dropdown
         trigger={['click']}
         trigger={['click']}
         menu={{
         menu={{
@@ -77,7 +77,7 @@ export function RowActionsCell({ record, subEnable, hasClients, onClick }: RowAc
           onClick: ({ key }) => onClick(key as RowAction),
           onClick: ({ key }) => onClick(key as RowAction),
         }}
         }}
       >
       >
-        <Button type="text" size="small" icon={<MoreOutlined />} />
+        <Button type="text" size="small" style={{ fontSize: 18 }} icon={<MoreOutlined />} />
       </Dropdown>
       </Dropdown>
     </div>
     </div>
   );
   );

+ 4 - 4
frontend/src/pages/nodes/NodeList.tsx

@@ -241,18 +241,18 @@ export default function NodeList({
       ) : (
       ) : (
         <Space>
         <Space>
           <Tooltip title={t('pages.nodes.probe')}>
           <Tooltip title={t('pages.nodes.probe')}>
-            <Button type="text" size="small" icon={<ThunderboltOutlined />} onClick={() => onProbe(record)} />
+            <Button type="text" size="small" style={{ fontSize: 18 }} icon={<ThunderboltOutlined />} onClick={() => onProbe(record)} />
           </Tooltip>
           </Tooltip>
           {isUpdateEligible(record) && (
           {isUpdateEligible(record) && (
             <Tooltip title={t('pages.nodes.updatePanel')}>
             <Tooltip title={t('pages.nodes.updatePanel')}>
-              <Button type="text" size="small" icon={<CloudDownloadOutlined />} onClick={() => onUpdateNode(record)} />
+              <Button type="text" size="small" style={{ fontSize: 18 }} icon={<CloudDownloadOutlined />} onClick={() => onUpdateNode(record)} />
             </Tooltip>
             </Tooltip>
           )}
           )}
           <Tooltip title={t('edit')}>
           <Tooltip title={t('edit')}>
-            <Button type="text" size="small" icon={<EditOutlined />} onClick={() => onEdit(record)} />
+            <Button type="text" size="small" style={{ fontSize: 18 }} icon={<EditOutlined />} onClick={() => onEdit(record)} />
           </Tooltip>
           </Tooltip>
           <Tooltip title={t('delete')}>
           <Tooltip title={t('delete')}>
-            <Button type="text" size="small" danger icon={<DeleteOutlined />} onClick={() => onDelete(record)} />
+            <Button type="text" size="small" danger style={{ fontSize: 18 }} icon={<DeleteOutlined />} onClick={() => onDelete(record)} />
           </Tooltip>
           </Tooltip>
         </Space>
         </Space>
       ),
       ),