From 3eb3f6ee66c0760e000c8b45efe00adfdb0fe75f Mon Sep 17 00:00:00 2001
From: Efe <dogukankrskl@gmail.com>
Date: Tue, 18 Nov 2025 12:24:27 +0100
Subject: [PATCH] fix: notification adapter modal improvements (#230)

* fix: fix notification modal
---
 ui/src/views/jobs/mutation/JobMutation.jsx    | 12 ++++++++--
 .../NotificationAdapterMutator.jsx            | 23 +++++++++++--------
 .../components/provider/ProviderMutator.jsx   |  7 +++++-
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/ui/src/views/jobs/mutation/JobMutation.jsx b/ui/src/views/jobs/mutation/JobMutation.jsx
index a008076..faff37f 100644
--- a/ui/src/views/jobs/mutation/JobMutation.jsx
+++ b/ui/src/views/jobs/mutation/JobMutation.jsx
@@ -11,7 +11,15 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Divider, Input, Switch, Button, TagInput, Toast, Select } from '@douyinfe/semi-ui';
 import './JobMutation.less';
 import { SegmentPart } from '../../../components/segment/SegmentPart';
-import { IconBell, IconBriefcase, IconPaperclip, IconPlayCircle, IconPlusCircle, IconUser } from '@douyinfe/semi-icons';
+import {
+  IconBell,
+  IconBriefcase,
+  IconPaperclip,
+  IconPlayCircle,
+  IconPlusCircle,
+  IconUser,
+  IconClear,
+} from '@douyinfe/semi-icons';
 
 export default function JobMutator() {
   const jobs = useSelector((state) => state.jobs.jobs);
@@ -160,7 +168,7 @@ export default function JobMutator() {
         </SegmentPart>
         <Divider margin="1rem" />
         <SegmentPart
-          Icon={IconBell}
+          Icon={IconClear}
           name="Blacklist"
           helpText="If a listing contains one of these words, it will be filtered out. Type in a word, then hit enter."
         >
diff --git a/ui/src/views/jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx b/ui/src/views/jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx
index 3da6c05..d6ccec9 100644
--- a/ui/src/views/jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx
+++ b/ui/src/views/jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx
@@ -7,6 +7,7 @@ import { useSelector } from '../../../../../services/state/store';
 import { Banner, Button, Form, Modal, Select, Switch } from '@douyinfe/semi-ui';
 
 import './NotificationAdapterMutator.less';
+import { useScreenWidth } from '../../../../../hooks/screenWidth.js';
 
 const sortAdapter = (a, b) => {
   if (a.name < b.name) {
@@ -70,6 +71,9 @@ export default function NotificationAdapterMutator({
   const [validationMessage, setValidationMessage] = useState(null);
   const [successMessage, setSuccessMessage] = useState(null);
 
+  const width = useScreenWidth();
+  const isMobile = width <= 850;
+
   const onSubmit = (doStore) => {
     if (doStore) {
       const validationResults = validate(selectedAdapter);
@@ -170,18 +174,19 @@ export default function NotificationAdapterMutator({
     <Modal
       title="Adding a new Notification Adapter"
       visible={visible}
-      style={{ width: '95%' }}
+      style={{ width: isMobile ? '95%' : '50rem' }}
+      onCancel={() => onSubmit(false)}
       footer={
         <div>
-          <Button type="secondary" disabled={selectedAdapter == null} style={{ float: 'left' }} onClick={() => onTry()}>
+          <Button type="secondary" disabled={selectedAdapter == null} style={{ float: 'left' }} onClick={onTry}>
             Try
           </Button>
-          <Button type="danger" onClick={() => onSubmit(true)}>
-            Save
-          </Button>
-          <Button type="primary" onClick={() => onSubmit(false)}>
+          <Button theme="light" type="tertiary" onClick={() => onSubmit(false)}>
             Cancel
           </Button>
+          <Button theme="solid" type="primary" onClick={() => onSubmit(true)}>
+            Save
+          </Button>
         </div>
       }
     >
@@ -207,9 +212,9 @@ export default function NotificationAdapterMutator({
       )}
 
       <p>
-        When Fredy found new listings, we like to report them to you. To do so, notification adapter can be configured.{' '}
-        <br />
-        There are multiple ways how Fredy can send new listings to you. Chose your weapon...
+        When Fredy finds new listings, we like to report them to you. To do so, the notification adapter can be
+        configured. <br />
+        There are multiple ways Fredy can send new listings to you. Choose your weapon...
       </p>
 
       <Select
diff --git a/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx b/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx
index 710b216..14d41f6 100644
--- a/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx
+++ b/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx
@@ -5,6 +5,7 @@ import { transform } from '../../../../../services/transformer/providerTransform
 import { useSelector } from '../../../../../services/state/store';
 import { IconLikeHeart } from '@douyinfe/semi-icons';
 import './ProviderMutator.less';
+import { useScreenWidth } from '../../../../../hooks/screenWidth.js';
 
 const sortProvider = (a, b) => {
   if (a.key < b.key) {
@@ -21,6 +22,10 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false,
   const [selectedProvider, setSelectedProvider] = useState(null);
   const [providerUrl, setProviderUrl] = useState(null);
   const [validationMessage, setValidationMessage] = useState(null);
+
+  const width = useScreenWidth();
+  const isMobile = width <= 850;
+
   const validate = () => {
     if (selectedProvider == null || selectedProvider.length === 0 || providerUrl == null || providerUrl.length === 0) {
       return 'Please select a provider and copy the browser url into the textfield after configuring your search parameter.';
@@ -67,7 +72,7 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false,
       visible={visible}
       onOk={() => onSubmit(true)}
       onCancel={() => onSubmit(false)}
-      style={{ width: '50rem' }}
+      style={{ width: isMobile ? '95%' : '50rem' }}
       okText="Save"
     >
       {validationMessage != null && (