From 3ea676c87727e4652d0d63d305492f0675862f9e Mon Sep 17 00:00:00 2001
From: mdshamoon <mohdshamoon841@gmail.com>
Date: Thu, 26 Oct 2023 15:24:37 +0530
Subject: [PATCH] more cleanups

---
 .../Form/AutoComplete/AutoComplete.module.css |  2 +-
 .../UI/Form/AutoComplete/AutoComplete.tsx     |  1 -
 src/components/UI/Form/Input/Input.module.css |  1 +
 .../SearchDialogBox.module.css                |  1 +
 .../UI/SearchDialogBox/SearchDialogBox.tsx    |  2 --
 src/components/simulator/Simulator.module.css |  1 +
 src/config/theme.tsx                          |  4 +---
 .../ChatMessages/ContactBar/ContactBar.tsx    |  2 +-
 .../ListReplyTemplate.module.css              | 23 +++++++++++++++----
 .../ListReplyTemplate/ListReplyTemplate.tsx   | 16 ++++++++-----
 .../QuickReplyTemplate.module.css             |  4 ++--
 src/containers/Form/FormLayout.module.css     |  4 ++++
 src/containers/Form/FormLayout.tsx            |  4 ++--
 .../InteractiveOptions/ListReplyTemplate.tsx  |  5 ----
 .../QuickReplyTemplate.module.css             |  1 +
 .../SheetIntegration/SheetIntegration.tsx     |  2 ++
 src/containers/Tag/Tag.tsx                    |  1 +
 src/containers/Template/Form/Template.tsx     |  3 ++-
 .../TemplateOptions/TemplateOptions.tsx       |  1 -
 19 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/src/components/UI/Form/AutoComplete/AutoComplete.module.css b/src/components/UI/Form/AutoComplete/AutoComplete.module.css
index 8de9e4d43..6d4f25280 100644
--- a/src/components/UI/Form/AutoComplete/AutoComplete.module.css
+++ b/src/components/UI/Form/AutoComplete/AutoComplete.module.css
@@ -86,5 +86,5 @@
 }
 
 .DefaultInputRoot {
-  padding: 4.5px 4px 7.5px 5px !important;
+  padding: 4.5px 4px 7.5px 16px !important;
 }
diff --git a/src/components/UI/Form/AutoComplete/AutoComplete.tsx b/src/components/UI/Form/AutoComplete/AutoComplete.tsx
index 216b0780f..8853022ad 100644
--- a/src/components/UI/Form/AutoComplete/AutoComplete.tsx
+++ b/src/components/UI/Form/AutoComplete/AutoComplete.tsx
@@ -181,7 +181,6 @@ export const AutoComplete = ({
           data-testid="autocomplete-element"
           options={hasCreateOption ? [...renderedOption, createOption] : renderedOption}
           freeSolo={freeSolo}
-          disablePortal
           autoSelect={autoSelect}
           disableClearable={disableClearable}
           getOptionLabel={(option: any) =>
diff --git a/src/components/UI/Form/Input/Input.module.css b/src/components/UI/Form/Input/Input.module.css
index ecad58f8c..35ca38508 100644
--- a/src/components/UI/Form/Input/Input.module.css
+++ b/src/components/UI/Form/Input/Input.module.css
@@ -30,6 +30,7 @@
 
 .OutlineInput > div:first-child {
   width: inherit;
+  padding: 8px 16px;
   height: 100px;
   overflow: auto;
   overflow-x: hidden;
diff --git a/src/components/UI/SearchDialogBox/SearchDialogBox.module.css b/src/components/UI/SearchDialogBox/SearchDialogBox.module.css
index ae4466f1f..733503e0d 100644
--- a/src/components/UI/SearchDialogBox/SearchDialogBox.module.css
+++ b/src/components/UI/SearchDialogBox/SearchDialogBox.module.css
@@ -33,5 +33,6 @@
 .Description {
   font-size: 16px;
   color: #93a29b;
+  margin-top: 8px;
   margin-bottom: 8px;
 }
diff --git a/src/components/UI/SearchDialogBox/SearchDialogBox.tsx b/src/components/UI/SearchDialogBox/SearchDialogBox.tsx
index e3f5d9ff8..d537d3a97 100644
--- a/src/components/UI/SearchDialogBox/SearchDialogBox.tsx
+++ b/src/components/UI/SearchDialogBox/SearchDialogBox.tsx
@@ -39,7 +39,6 @@ export const SearchDialogBox = (props: SearchDialogBoxProps) => {
     handleCancel,
     onChange,
     disableClearable,
-    searchLabel = 'Search',
     renderTags = true,
     textFieldPlaceholder = '',
     multiple = true,
@@ -105,7 +104,6 @@ export const SearchDialogBox = (props: SearchDialogBoxProps) => {
             }}
             form={{ setFieldValue: changeValue }}
             textFieldProps={{
-              label: searchLabel,
               variant: 'outlined',
               placeholder: textFieldPlaceholder,
             }}
diff --git a/src/components/simulator/Simulator.module.css b/src/components/simulator/Simulator.module.css
index 28a6b65f4..8cd54bfb7 100644
--- a/src/components/simulator/Simulator.module.css
+++ b/src/components/simulator/Simulator.module.css
@@ -335,6 +335,7 @@
   left: 0;
   width: 100%;
   height: 100%;
+  border-radius: 25px;
   background-color: rgba(0, 0, 0, 0.5);
   content: '';
 }
diff --git a/src/config/theme.tsx b/src/config/theme.tsx
index 5f702f267..cb5f7ac83 100644
--- a/src/config/theme.tsx
+++ b/src/config/theme.tsx
@@ -66,9 +66,6 @@ const theme = createTheme({
       styleOverrides: {
         outlinedPrimary: {
           border: '2px solid',
-          '&:hover': {
-            border: '2px solid',
-          },
         },
       },
     },
@@ -89,6 +86,7 @@ const theme = createTheme({
         root: {
           paddingTop: '6px !important',
           paddingBottom: '6px !important',
+          paddingLeft: '0px !important',
         },
         input: {
           padding: '6px 16px',
diff --git a/src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx b/src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx
index 3f34e9370..28496bfed 100644
--- a/src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx
+++ b/src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx
@@ -281,7 +281,7 @@ export const ContactBar = ({
         optionLabel="name"
         multiple={false}
         buttonOk="Start"
-        searchLabel={t('Select flow')}
+        textFieldPlaceholder={t('Select flow')}
         description={t('The contact will be responded as per the messages planned in the flow.')}
       />
     );
diff --git a/src/containers/Chat/ChatMessages/ListReplyTemplate/ListReplyTemplate.module.css b/src/containers/Chat/ChatMessages/ListReplyTemplate/ListReplyTemplate.module.css
index 33c5a9bbe..248e9235f 100644
--- a/src/containers/Chat/ChatMessages/ListReplyTemplate/ListReplyTemplate.module.css
+++ b/src/containers/Chat/ChatMessages/ListReplyTemplate/ListReplyTemplate.module.css
@@ -6,8 +6,8 @@
 
 .GlobalButton {
   width: 100%;
-  background-color: #eaedec !important;
-  margin: 6px 0px !important;
+  color: #1690cf;
+  background-color: white !important;
 }
 
 .SimulatorButton {
@@ -16,7 +16,7 @@
 }
 
 .List {
-  height: calc(100% - 60px);
+  height: calc(100% - 70px);
   overflow-y: auto;
 }
 .ListItemChat {
@@ -67,7 +67,7 @@
   width: 100%;
   padding: 8px;
   height: 360px;
-  border-radius: 12px 12px 0px 0px;
+  border-radius: 12px 12px 25px 25px;
 }
 
 .DrawerHeading {
@@ -88,6 +88,7 @@
 
 .SendButton {
   padding: 4px 0px;
+
 }
 
 .SendButton > button {
@@ -161,9 +162,21 @@
   font-size: 14px;
   font-weight: 400;
   padding: 4px 8px;
-  background-color: #edf6f2;
 }
 
 .Options > button:hover {
   background-color: #edf6f2;
 }
+
+.ListItemText {
+  width: 100%;
+  color: #000;
+  text-align: left;
+}
+
+.ListItemRadio {
+  width: 100%;
+}
+.ListItemTextTitle {
+  font-weight: 500;
+}
diff --git a/src/containers/Chat/ChatMessages/ListReplyTemplate/ListReplyTemplate.tsx b/src/containers/Chat/ChatMessages/ListReplyTemplate/ListReplyTemplate.tsx
index adb50e4e4..5dfd7aa5a 100644
--- a/src/containers/Chat/ChatMessages/ListReplyTemplate/ListReplyTemplate.tsx
+++ b/src/containers/Chat/ChatMessages/ListReplyTemplate/ListReplyTemplate.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, Radio } from '@mui/material';
+import { Button, Divider, Radio } from '@mui/material';
 import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
 import MenuIcon from '@mui/icons-material/Menu';
 import ClearIcon from '@mui/icons-material/Clear';
@@ -126,9 +126,12 @@ export const SimulatorTemplate = ({
   showHeader = true,
   bspMessageId,
 }: SimulatorTemplateProps) => (
-  <div className={styles.SimulatorContent}>
-    {showHeader && <p className={styles.ListHeader}>{title}</p>}
-    <ChatMessageType type="TEXT" body={body} isSimulatedMessage />
+  <div>
+    <div className={styles.SimulatorContent}>
+      {showHeader && <p className={styles.ListHeader}>{title}</p>}
+      <ChatMessageType type="TEXT" body={body} isSimulatedMessage />
+    </div>
+    <Divider />
     <Button
       disabled={disabled}
       startIcon={<FormatListBulletedIcon />}
@@ -190,12 +193,13 @@ export const ListReplyTemplateDrawer = ({
                       className={styles.ListItem}
                       onClick={() => setCheckedItem(payloadObject)}
                     >
-                      <div>
-                        <div>{option.title}</div>
+                      <div className={styles.ListItemText}>
+                        <div className={styles.ListItemTextTitle}>{option.title}</div>
                         <div>{option.description}</div>
                       </div>
                       <div>
                         <Radio
+                          className={styles.ListItemRadio}
                           value={option.title}
                           name="radio-list-item"
                           size="small"
diff --git a/src/containers/Chat/ChatMessages/QuickReplyTemplate/QuickReplyTemplate.module.css b/src/containers/Chat/ChatMessages/QuickReplyTemplate/QuickReplyTemplate.module.css
index e92a62335..109bca3a8 100644
--- a/src/containers/Chat/ChatMessages/QuickReplyTemplate/QuickReplyTemplate.module.css
+++ b/src/containers/Chat/ChatMessages/QuickReplyTemplate/QuickReplyTemplate.module.css
@@ -5,13 +5,13 @@
 }
 
 .ButtonItem {
-  margin: 4px 0px;
+  margin: 3px 0px;
 }
 
 .ButtonItem > button {
   width: 100%;
   border-radius: 12px;
-  padding: 8px;
+  padding: 3px;
   font-size: 16px;
   box-shadow: none;
   text-transform: none !important;
diff --git a/src/containers/Form/FormLayout.module.css b/src/containers/Form/FormLayout.module.css
index 1e6049a05..5365c888e 100644
--- a/src/containers/Form/FormLayout.module.css
+++ b/src/containers/Form/FormLayout.module.css
@@ -153,3 +153,7 @@
   color: #191c1a;
   font-size: 12px;
 }
+
+.TitleText {
+  margin-right: 8px;
+}
diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx
index 07ae94e64..dbb7b5c91 100644
--- a/src/containers/Form/FormLayout.tsx
+++ b/src/containers/Form/FormLayout.tsx
@@ -29,7 +29,7 @@ export const Heading = ({ title = '', formTitle, helpData }: any) => {
     <div className={styles.Header}>
       <div>
         <div className={styles.Title}>
-          {formTitle}
+          <div className={styles.TitleText}> {formTitle}</div>
           <HelpIcon helpData={helpData} />
         </div>
         <div
@@ -660,7 +660,7 @@ export const FormLayout = ({
     formTitle = `Add a new ${listItemName}`; // case when adding a new item
   }
 
-  let heading = <Heading icon={icon} formTitle={formTitle} />;
+  let heading = <Heading icon={icon} formTitle={formTitle} title={listItemName} />;
 
   const backLink = backLinkButton ? (
     <div className={styles.BackLink}>
diff --git a/src/containers/InteractiveMessage/InteractiveOptions/ListReplyTemplate.tsx b/src/containers/InteractiveMessage/InteractiveOptions/ListReplyTemplate.tsx
index 09af574b0..0c997e2c7 100644
--- a/src/containers/InteractiveMessage/InteractiveOptions/ListReplyTemplate.tsx
+++ b/src/containers/InteractiveMessage/InteractiveOptions/ListReplyTemplate.tsx
@@ -56,8 +56,6 @@ export const ListReplyTemplate = ({
     return !!error;
   })();
 
-  const sectionLabel = `Enter list ${index + 1} title*`;
-
   const { templateButtons } = values;
   const { options } = templateButtons[index];
 
@@ -114,7 +112,6 @@ export const ListReplyTemplate = ({
         {translation && <div className={styles.Translation}>{translation.title}</div>}
         <FormControl fullWidth error={isListTitleError} className={styles.FormControl}>
           <TextField
-            label={sectionLabel}
             placeholder={`List ${index + 1} title (Max 24 char.)`}
             variant="outlined"
             onChange={(e: any) => handleInputChange(e, 'title')}
@@ -151,7 +148,6 @@ export const ListReplyTemplate = ({
                           <TextField
                             placeholder={`Title ${itemIndex + 1} (Max 24 char.)`}
                             variant="outlined"
-                            label={`Enter list item ${itemIndex + 1} title*`}
                             onChange={(e: any) => handleInputChange(e, 'title', itemIndex, true)}
                             className={styles.TextField}
                             error={isError('title', itemIndex)}
@@ -191,7 +187,6 @@ export const ListReplyTemplate = ({
                           <TextField
                             placeholder={`Description ${itemIndex + 1} (Max 60 char.)`}
                             variant="outlined"
-                            label={`Enter list item ${itemIndex + 1} description`}
                             onChange={(e: any) =>
                               handleInputChange(e, 'description', itemIndex, true)
                             }
diff --git a/src/containers/InteractiveMessage/InteractiveOptions/QuickReplyTemplate.module.css b/src/containers/InteractiveMessage/InteractiveOptions/QuickReplyTemplate.module.css
index 90d949985..64c553c03 100644
--- a/src/containers/InteractiveMessage/InteractiveOptions/QuickReplyTemplate.module.css
+++ b/src/containers/InteractiveMessage/InteractiveOptions/QuickReplyTemplate.module.css
@@ -55,6 +55,7 @@
 }
 
 .AddIcon {
+  cursor: pointer;
   height: 24px;
   width: 24px;
 }
diff --git a/src/containers/SheetIntegration/SheetIntegration.tsx b/src/containers/SheetIntegration/SheetIntegration.tsx
index 1d491e738..eaa8b6bbb 100644
--- a/src/containers/SheetIntegration/SheetIntegration.tsx
+++ b/src/containers/SheetIntegration/SheetIntegration.tsx
@@ -66,6 +66,7 @@ export const SheetIntegration = () => {
       component: Input,
       name: 'url',
       type: 'text',
+      label: t('Sheet URL'),
       placeholder: t('Sheet URL'),
       helperText: (
         <a href={SAMPLE_SHEET_LINK} target="_blank" rel="noreferrer" className={styles.HelperText}>
@@ -77,6 +78,7 @@ export const SheetIntegration = () => {
       component: Input,
       name: 'label',
       type: 'text',
+      label: t('Sheet name'),
       placeholder: t('Sheet name'),
     },
     {
diff --git a/src/containers/Tag/Tag.tsx b/src/containers/Tag/Tag.tsx
index e3bdfbdf3..9b1428aa8 100644
--- a/src/containers/Tag/Tag.tsx
+++ b/src/containers/Tag/Tag.tsx
@@ -43,6 +43,7 @@ export const Tag = () => {
       name: 'label',
       type: 'text',
       placeholder: t('Name'),
+      label: t('Name'),
     },
   ];
 
diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx
index b55129c30..47deab9cd 100644
--- a/src/containers/Template/Form/Template.tsx
+++ b/src/containers/Template/Form/Template.tsx
@@ -573,6 +573,7 @@ const Template = ({
         };
 
   const formFields = [
+    formIsActive,
     languageComponent,
     {
       component: Input,
@@ -587,7 +588,7 @@ const Template = ({
         onBlur: (event: any) => setLabel(event.target.value),
       },
     },
-    formIsActive,
+
     {
       component: EmojiInput,
       name: 'body',
diff --git a/src/containers/TemplateOptions/TemplateOptions.tsx b/src/containers/TemplateOptions/TemplateOptions.tsx
index e792bd5d8..62869e88d 100644
--- a/src/containers/TemplateOptions/TemplateOptions.tsx
+++ b/src/containers/TemplateOptions/TemplateOptions.tsx
@@ -213,7 +213,6 @@ export const TemplateOptions = ({
                 defaultValue={value}
                 title={title}
                 placeholder={`Quick reply ${index + 1} title`}
-                label={`Quick reply ${index + 1} title`}
                 variant="outlined"
                 onBlur={(e: any) => onInputChange(e, row, index, 'value')}
                 className={styles.TextField}