more cleanups

src/assets/images/icons/SideDrawer/ConsultingIcon.tsx

@@ -0,0 +1,9 @@
+const SvgComponent = ({ color }: { color: string }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={15} height={17} fill="none">
+    <path
+      fill={color}
+      d="M7.5 17v-1.619h5.833v-.81H10V8.095h3.333v-.81c0-1.564-.57-2.9-1.708-4.006-1.139-1.107-2.514-1.66-4.125-1.66-1.611 0-2.986.553-4.125 1.66C2.236 4.385 1.667 5.72 1.667 7.286v.81H5v6.475H1.667c-.459 0-.851-.158-1.177-.475A1.537 1.537 0 0 1 0 12.952V7.286c0-.999.198-1.94.594-2.823a7.435 7.435 0 0 1 1.614-2.318A7.676 7.676 0 0 1 4.594.577 7.387 7.387 0 0 1 7.5 0c1.028 0 1.997.192 2.906.577.91.384 1.705.907 2.386 1.568a7.435 7.435 0 0 1 1.614 2.318c.396.883.594 1.824.594 2.823v8.095c0 .445-.163.826-.49 1.143a1.629 1.629 0 0 1-1.177.476H7.5Zm-5.833-4.048h1.666V9.714H1.667v3.238Zm10 0h1.666V9.714h-1.666v3.238Z"
+    />
+  </svg>
+);
+export default SvgComponent;

src/assets/images/icons/SideDrawer/OrganizationIcon.tsx

@@ -0,0 +1,9 @@
+const SvgComponent = ({ color }: { color: string }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={15} fill="none">
+    <path
+      fill={color}
+      d="M0 15V0h8v3.333h8V15H0Zm1.6-1.667h4.8v-1.666H1.6v1.666ZM1.6 10h4.8V8.333H1.6V10Zm0-3.333h4.8V5H1.6v1.667Zm0-3.334h4.8V1.667H1.6v1.666Zm6.4 10h6.4V5H8v8.333Zm1.6-5V6.667h3.2v1.666H9.6Zm0 3.334V10h3.2v1.667H9.6Z"
+    />
+  </svg>
+);
+export default SvgComponent;

src/components/UI/Form/Checkbox/Checkbox.module.css

@@ -16,7 +16,6 @@
 .Root {
   margin-right: 5px;
   margin-top: 19px;
-  height: 18px;
 }
 
 .Tooltip {

src/components/UI/Form/Input/Input.module.css

@@ -62,7 +62,7 @@
 }
 
 .DangerText {
-  margin-left: 0px;
+  margin-left: 14px;
   font-size: 12px;
   margin-top: 4px;
   line-height: 18px;

src/components/UI/Form/PhoneInput/PhoneInput.module.css

@@ -1,7 +1,7 @@
 .PhoneNumber {
   width: 334px !important;
-  padding-top: 18.5px !important;
-  padding-bottom: 18.5px !important;
+  padding-top: 13px !important;
+  padding-bottom: 13px !important;
   padding-left: 48px !important;
   padding-right: 14px !important;
   /* border-color: rgba(0, 0, 0, 0.23) !important; */
@@ -12,7 +12,7 @@
 }
 
 .PhoneNumber:focus {
-  border-color: rgba(0, 0, 0, 0.23) !important;
+  border-color: #119656 !important;
   /* border-color: inherit !important; */
   box-shadow: none !important;
 }

src/components/UI/Form/PhoneInput/PhoneInput.test.tsx

@@ -7,7 +7,11 @@ describe('<PhoneInput />', () => {
     helperText: 'Your helper text',
     field: { name: 'example', value: '' },
     placeholder: 'Your phone number',
-    form: { errors: { example: 'Please provide a valid number' }, setFieldValue: null },
+    form: {
+      touched: { example: true },
+      errors: { example: 'Please provide a valid number' },
+      setFieldValue: null,
+    },
   };
   const phoneInput = () => <PhoneInput {...props} />;
 

src/components/UI/Form/PhoneInput/PhoneInput.tsx

@@ -15,12 +15,12 @@ export interface InputProps {
   helperText: string;
   field: any;
   placeholder: string;
-  form: { errors: any; setFieldValue: any };
+  form: { touched: any; errors: any; setFieldValue: any };
 }
 
 export const PhoneInput = ({
   enableSearch = true,
-  form: { errors, setFieldValue },
+  form: { touched, errors, setFieldValue },
   field,
   inputProps = {
     name: field.name,
@@ -30,6 +30,8 @@ export const PhoneInput = ({
   placeholder,
 }: InputProps) => {
   const errorText = getIn(errors, field.name);
+  const touchedVal = getIn(touched, field.name);
+  const hasError = touchedVal && errorText !== undefined;
 
   return (
     <div className={styles.Input} data-testid="phoneInput">
@@ -49,7 +51,7 @@ export const PhoneInput = ({
             setFieldValue(field.name, event);
           }}
         />
-        {errorText ? (
+        {hasError ? (
           <FormHelperText classes={{ root: styles.FormHelperText }}>{errorText}</FormHelperText>
         ) : null}
       </FormControl>

src/components/UI/ListIcon/ListIcon.tsx

@@ -22,6 +22,8 @@ import ProfileIcon from 'assets/images/icons/SideDrawer/ProfileIcon';
 import AcoountIcon from 'assets/images/icons/SideDrawer/AccountIcon';
 import SettingsIcon from 'assets/images/icons/SideDrawer/SettingsIcon';
 import LogoutIcon from 'assets/images/icons/SideDrawer/LogoutIcon';
+import OrganizationIcon from 'assets/images/icons/SideDrawer/OrganizationIcon';
+import ConsultingIcon from 'assets/images/icons/SideDrawer/ConsultingIcon';
 
 export interface ListIconProps {
   icon: string | undefined;
@@ -57,6 +59,8 @@ export const ListIcon = ({ icon = '', selected = false, count }: ListIconProps)
     account: AcoountIcon,
     settings: SettingsIcon,
     logout: LogoutIcon,
+    organization: OrganizationIcon,
+    consulting: ConsultingIcon,
   };
 
   return (

src/components/floweditor/FlowEditor.module.css

@@ -14,8 +14,7 @@
 }
 
 .Icon {
-  background-color: #eaedec !important;
-  margin-right: 10px !important;
+  margin-right: 8px;
 }
 
 .FlowContainer {

src/components/floweditor/FlowEditor.tsx

@@ -4,6 +4,8 @@ import { Navigate, useNavigate, useParams } from 'react-router-dom';
 import { Menu, MenuItem, Typography } from '@mui/material';
 import BackIconFlow from 'assets/images/icons/BackIconFlow.svg?react';
 import WarningIcon from 'assets/images/icons/Warning.svg?react';
+import PreviewIcon from 'assets/images/icons/PreviewIcon.svg?react';
+import PublishIcon from 'assets/images/icons/PublishIcon.svg?react';
 import { Button } from 'components/UI/Form/Button/Button';
 import { APP_NAME } from 'config/index';
 import { Simulator } from 'components/simulator/Simulator';
@@ -329,11 +331,10 @@ export const FlowEditor = () => {
 
         <div className={styles.Actions}>
           <Button
-            id="demo-customized-button"
             aria-controls={open ? 'demo-customized-menu' : undefined}
             aria-haspopup="true"
             aria-expanded={open ? 'true' : undefined}
-            variant="contained"
+            variant="outlined"
             data-testid="moreButton"
             disableElevation
             onClick={handleClick}
@@ -378,18 +379,18 @@ export const FlowEditor = () => {
             variant="outlined"
             color="primary"
             data-testid="previewButton"
-            className={styles.ContainedButton}
             onClick={() => setShowSimulator(!showSimulator)}
           >
+            <PreviewIcon className={styles.Icon} />
             Preview
           </Button>
           <Button
             variant="contained"
             color="primary"
             data-testid="button"
-            className={styles.ContainedButton}
             onClick={() => setPublishDialog(true)}
           >
+            <PublishIcon className={styles.Icon} />
             Publish
           </Button>
         </div>

src/config/menu.ts

@@ -174,6 +174,20 @@ const menus = (): Menu[] => [
         icon: 'speed-send',
         roles: ['Manager', 'Admin'],
       },
+      {
+        title: 'Organizations',
+        path: '/organizations',
+        icon: 'organization',
+        type: 'management',
+        roles: ['Glific_admin'],
+      },
+      {
+        title: 'Consulting',
+        path: '/consulting-hours',
+        type: 'management',
+        icon: 'consulting',
+        roles: ['Glific_admin'],
+      },
     ],
   },
 
@@ -215,35 +229,6 @@ const menus = (): Menu[] => [
       },
     ],
   },
-  {
-    title: 'Admin',
-    path: '/organizations',
-    icon: 'manage',
-    type: 'sideDrawer',
-    roles: ['Glific_admin'],
-    subMenu: [
-      {
-        title: 'Organizations',
-        path: '/organizations',
-        type: 'management',
-        roles: ['Glific_admin'],
-      },
-      {
-        title: 'Consulting',
-        path: '/consulting-hours',
-        type: 'management',
-        roles: ['Glific_admin'],
-      },
-      {
-        title: 'Contacts',
-        path: '/contact-management',
-        type: 'management',
-        icon: 'contact',
-        roles: ['Glific_admin'],
-      },
-    ],
-  },
-
   {
     title: 'Analytics',
     path: '/analytics',

src/containers/Auth/Auth.module.css

@@ -214,6 +214,7 @@
   font-size: 16px;
   color: #93a29b;
   font-weight: 500;
+  margin-top: 10px;
   margin-left: 10px;
   padding-bottom: 10px;
 }
@@ -272,3 +273,7 @@
   line-height: 18px;
   color: #555555;
 }
+
+.Spacing {
+  margin: 15px 0px;
+}

src/containers/Auth/Auth.tsx

@@ -161,14 +161,16 @@ export const Auth = ({
                   const key = index;
                   return (
                     <div key={key}>
-                      {field.label && (
+                      {field.label ? (
                         <Typography
                           data-testid="formLabel"
                           variant="h5"
                           className={styles.FieldLabel}
                         >
                           {field.label}
                         </Typography>
+                      ) : (
+                        <div className={styles.Spacing} />
                       )}
                       <Field {...fieldInfo} />
                     </div>

src/containers/Chat/ChatMessages/ChatInput/ChatInput.module.css

@@ -83,6 +83,7 @@
 }
 
 .SendsContainer {
+  z-index: 100;
   display: flex;
   margin-bottom: 8px;
   flex-flow: row nowrap;
@@ -141,7 +142,6 @@
 .Popup {
   width: 100%;
   height: auto;
-  min-height: 160px;
   max-height: 600px;
   position: relative;
   border-radius: 24px;

src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.module.css

@@ -123,7 +123,6 @@
 }
 
 .DateLeft {
-  margin-top: 16px !important;
   color: #191c1a !important;
 }
 

src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.module.css

@@ -10,7 +10,7 @@
   bottom: 0px;
   overflow-y: scroll;
   padding: 0 !important;
-  border-radius: 24px 24px 0px 0px !important;
+  border-radius: 12px 12px 0px 0px !important;
 }
 
 .Text {
@@ -53,3 +53,11 @@
   text-align: right;
   width: 30px;
 }
+
+.NoResult {
+  margin-top: 10px;
+}
+
+.TemplateList {
+  padding-top: 10px;
+}

src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.tsx

@@ -25,7 +25,7 @@ export const ChatTemplates = ({
 }: ChatTemplatesProps) => {
   const { t } = useTranslation();
 
-  const filterVariables = () => setVariables({ term: searchVal });
+  const filterVariables = () => setVariables({ term: searchVal }, 50);
   const { loading, error, data } = useQuery<any>(FILTER_TEMPLATES, {
     variables: filterVariables(),
   });
@@ -118,14 +118,16 @@ export const ChatTemplates = ({
     listItems = listItems.filter((n) => n);
 
     return listItems.length !== 0 ? (
-      <List className={styles.ShortcutList}>
-        <Paper elevation={0} className={styles.Paper}>
-          {listItems}
-        </Paper>
-      </List>
+      <div className={styles.TemplateList}>
+        <List className={styles.ShortcutList}>
+          <Paper elevation={0} className={styles.Paper}>
+            {listItems}
+          </Paper>
+        </List>
+      </div>
     ) : (
-      <Typography data-testid="no-results" align="center" variant="h6">
-        {`No ${text} for that search.`}
+      <Typography className={styles.NoResult} data-testid="no-results" align="center" variant="h6">
+        {`No results found for the search.`}
       </Typography>
     );
   };

src/containers/Consulting/ConsultingList/ConsultingList.tsx

@@ -121,9 +121,9 @@ const ConsultingList = () => {
 
   return (
     <>
-      <ExportConsulting setFilters={setFilters} />
       {dialog}
       <List
+        descriptionBox={<ExportConsulting setFilters={setFilters} />}
         title={t('Consulting')}
         listItem="consultingHours"
         listItemName="consultingHour"

src/containers/Form/FormLayout.module.css

@@ -157,3 +157,7 @@
 .TitleText {
   margin-right: 8px;
 }
+
+.Spacing {
+  margin: 20px 0px !important;
+}

src/containers/Form/FormLayout.tsx

@@ -563,10 +563,12 @@ export const FormLayout = ({
 
             return (
               <Fragment key={key}>
-                {field.label && (
+                {field.label ? (
                   <Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
                     {field.label}
                   </Typography>
+                ) : (
+                  <div className={styles.Spacing} />
                 )}
                 <Field key={key} {...field} onSubmit={submitForm} />
               </Fragment>