IO-3166-Global-Notifications-Part-2 - Checkpoint - job watchers styling

client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx

@@ -4,6 +4,7 @@ import { Avatar, Button, Divider, List, Popover, Select, Tooltip, Typography } f
 import { useTranslation } from "react-i18next";
 import EmployeeSearchSelectComponent from "../../components/employee-search-select/employee-search-select.component.jsx";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component.jsx";
+import { BiSolidTrash } from "react-icons/bi";
 
 const { Text } = Typography;
 
@@ -42,7 +43,8 @@ export default function JobWatcherToggleComponent({
           <Button
             type="default"
             danger
-            size="small"
+            size="medium"
+            icon={<BiSolidTrash />}
             onClick={() => handleRemoveWatcher(watcher.user_email)}
             disabled={adding || removing} // Optional: Disable button during mutations
           >
@@ -61,20 +63,28 @@ export default function JobWatcherToggleComponent({
 
   const popoverContent = (
     <div style={{ width: 600 }}>
-      <Button
-        block
-        type={isWatching ? "primary" : "default"}
-        icon={isWatching ? <EyeOutlined /> : <EyeFilled />}
-        onClick={handleToggleSelf}
-        loading={adding || removing}
-      >
-        {isWatching ? t("notifications.tooltips.unwatch") : t("notifications.tooltips.watch")}
-      </Button>
-      <Divider />
-
-      <Text type="secondary" style={{ marginBottom: 8, display: "block" }}>
-        {t("notifications.labels.watching-issue")}
-      </Text>
+      <List>
+        <List.Item
+          actions={[
+            <Button
+              type={isWatching ? "primary" : "default"}
+              danger={!isWatching}
+              icon={isWatching ? <EyeOutlined /> : <EyeFilled />}
+              size="medium"
+              onClick={handleToggleSelf}
+              loading={adding || removing}
+            >
+              {isWatching ? t("notifications.labels.unwatch") : t("notifications.labels.watch")}
+            </Button>
+          ]}
+        >
+          <List.Item.Meta>
+            <Text type="secondary" style={{ marginBottom: 8, display: "block" }}>
+              {t("notifications.labels.watching-issue")}
+            </Text>
+          </List.Item.Meta>
+        </List.Item>
+      </List>
       {watcherLoading ? (
         <LoadingSpinner />
       ) : jobWatchers && jobWatchers.length > 0 ? (
@@ -82,8 +92,8 @@ export default function JobWatcherToggleComponent({
       ) : (
         <Text type="secondary">{t("notifications.labels.no-watchers")}</Text>
       )}
-      <Divider />
 
+      <Divider />
       <Text type="secondary">{t("notifications.labels.add-watchers")}</Text>
       <EmployeeSearchSelectComponent
         style={{ minWidth: "100%" }}
@@ -128,7 +138,7 @@ export default function JobWatcherToggleComponent({
 
   return (
     <Popover content={popoverContent} trigger="click" open={open} onOpenChange={setOpen}>
-      <Tooltip title={isWatching ? t("notifications.tooltips.unwatch") : t("notifications.tooltips.watch")}>
+      <Tooltip title={t("notifications.tooltips.job-watchers")}>
         <Button
           shape="circle"
           type={isWatching ? "primary" : "default"}

client/src/components/job-watcher-toggle/job-watcher-toggle.container.jsx

@@ -211,6 +211,7 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
       handleRemoveWatcher={handleRemoveWatcher}
       handleWatcherSelect={handleWatcherSelect}
       handleTeamSelect={handleTeamSelect}
+      currentUser={currentUser}
     />
   );
 }

client/src/translations/en_us/common.json

@@ -3785,17 +3785,18 @@
         "ro-number": "RO #{{ro_number}}",
         "no-watchers": "No Watchers",
         "notification-settings-success": "Notification Settings saved successfully.",
-        "notification-settings-failure": "Error saving Notification Settings. {{error}}"
+        "notification-settings-failure": "Error saving Notification Settings. {{error}}",
+        "watch": "Watch",
+        "unwatch": "Unwatch"
       },
       "actions": {
-        "remove": "remove"
+        "remove": "Remove"
       },
       "aria": {
         "toggle": "Toggle Watching Job"
       },
       "tooltips": {
-        "watch": "Watch Job",
-        "unwatch": "Unwatch Job"
+        "job-watchers": "Job Watchers"
       },
       "scenarios": {
         "job-assigned-to-me": "Job Assigned to Me",

client/src/translations/es/common.json

@@ -3785,7 +3785,9 @@
         "ro-number": "",
         "no-watchers": "",
         "notification-settings-success": "",
-        "notification-settings-failure": ""
+        "notification-settings-failure": "",
+        "watch": "",
+        "unwatch": ""
       },
       "actions": {
         "remove": ""
@@ -3794,8 +3796,7 @@
         "toggle": ""
       },
       "tooltips": {
-        "watch": "",
-        "unwatch": ""
+        "job-watchers": ""
       },
       "scenarios": {
         "job-assigned-to-me": "",

client/src/translations/fr/common.json

@@ -3785,7 +3785,9 @@
         "ro-number": "",
         "no-watchers": "",
         "notification-settings-success": "",
-        "notification-settings-failure": ""
+        "notification-settings-failure": "",
+        "watch": "",
+        "unwatch": ""
       },
       "actions": {
         "remove": ""
@@ -3794,8 +3796,7 @@
         "toggle": ""
       },
       "tooltips": {
-        "watch": "",
-        "unwatch": ""
+        "job-watchers": ""
       },
       "scenarios": {
         "job-assigned-to-me": "",