more cleanups

glific · Oct 26, 2023 · 3ea676c · 3ea676c
1 parent c074e1e
commit 3ea676c
Show file tree

Hide file tree

Showing 19 changed files with 48 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}