feat(ratecard-drawer): add confirmation popover for role deletion and improve button styling

worklenz-frontend/src/features/finance/ratecard-drawer/ratecard-drawer.tsx

@@ -1,4 +1,4 @@
-import { Drawer, Select, Typography, Flex, Button, Input, Table } from 'antd';
+import { Drawer, Select, Typography, Flex, Button, Input, Table, Popconfirm, Tooltip } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppSelector } from '../../../hooks/useAppSelector';
@@ -7,7 +7,8 @@ import { deleteRateCard, fetchRateCardById, fetchRateCards, toggleRatecardDrawer
 import { RatecardType, IJobType } from '@/types/project/ratecard.types';
 import { IJobTitlesViewModel } from '@/types/job.types';
 import { jobTitlesApiService } from '@/api/settings/job-titles/job-titles.api.service';
-import { DeleteOutlined } from '@ant-design/icons';
+import { DeleteOutlined, ExclamationCircleFilled } from '@ant-design/icons';
+import { colors } from '@/styles/colors';
 
 interface PaginationType {
   current: number;
@@ -280,11 +281,25 @@ const RatecardDrawer = ({
       title: t('actionsColumn') || 'Actions',
       dataIndex: 'actions',
       render: (_: any, __: any, index: number) => (
+        <Popconfirm
+          title={t('deleteConfirmationTitle')}
+          icon={<ExclamationCircleFilled style={{ color: colors.vibrantOrange }} />}
+          okText={t('deleteConfirmationOk')}
+          cancelText={t('deleteConfirmationCancel')}
+          onConfirm={async () => {
+            if (index) {
+              handleDeleteRole(index);
+            }
+          }}
+        >
+          <Tooltip title="Delete">
             <Button
               size="small"
               icon={<DeleteOutlined />}
-          onClick={() => handleDeleteRole(index)}
             />
+          </Tooltip>
+        </Popconfirm>
+
       ),
     },
   ];