diff --git a/src/assets/images/icons/PreviewIcon.svg b/src/assets/images/icons/PreviewIcon.svg new file mode 100644 index 000000000..2658e478b --- /dev/null +++ b/src/assets/images/icons/PreviewIcon.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/assets/images/icons/PublishIcon.svg b/src/assets/images/icons/PublishIcon.svg new file mode 100644 index 000000000..4b29b0e53 --- /dev/null +++ b/src/assets/images/icons/PublishIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/src/assets/images/icons/SideDrawer/ConsultingIcon.tsx b/src/assets/images/icons/SideDrawer/ConsultingIcon.tsx new file mode 100644 index 000000000..835f0df43 --- /dev/null +++ b/src/assets/images/icons/SideDrawer/ConsultingIcon.tsx @@ -0,0 +1,9 @@ +const SvgComponent = ({ color }: { color: string }) => ( + + + +); +export default SvgComponent; diff --git a/src/assets/images/icons/SideDrawer/OrganizationIcon.tsx b/src/assets/images/icons/SideDrawer/OrganizationIcon.tsx new file mode 100644 index 000000000..46f1e9584 --- /dev/null +++ b/src/assets/images/icons/SideDrawer/OrganizationIcon.tsx @@ -0,0 +1,9 @@ +const SvgComponent = ({ color }: { color: string }) => ( + + + +); +export default SvgComponent; diff --git a/src/components/UI/Form/Checkbox/Checkbox.module.css b/src/components/UI/Form/Checkbox/Checkbox.module.css index 11c23971e..e0ecd1a8c 100644 --- a/src/components/UI/Form/Checkbox/Checkbox.module.css +++ b/src/components/UI/Form/Checkbox/Checkbox.module.css @@ -16,7 +16,6 @@ .Root { margin-right: 5px; margin-top: 19px; - height: 18px; } .Tooltip { diff --git a/src/components/UI/Form/Input/Input.module.css b/src/components/UI/Form/Input/Input.module.css index 35ca38508..99a51b937 100644 --- a/src/components/UI/Form/Input/Input.module.css +++ b/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; diff --git a/src/components/UI/Form/PhoneInput/PhoneInput.module.css b/src/components/UI/Form/PhoneInput/PhoneInput.module.css index e915098cd..e5be003e0 100644 --- a/src/components/UI/Form/PhoneInput/PhoneInput.module.css +++ b/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; } diff --git a/src/components/UI/Form/PhoneInput/PhoneInput.test.tsx b/src/components/UI/Form/PhoneInput/PhoneInput.test.tsx index f6ff95f75..a23181f2a 100644 --- a/src/components/UI/Form/PhoneInput/PhoneInput.test.tsx +++ b/src/components/UI/Form/PhoneInput/PhoneInput.test.tsx @@ -7,7 +7,11 @@ describe('', () => { 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 = () => ; diff --git a/src/components/UI/Form/PhoneInput/PhoneInput.tsx b/src/components/UI/Form/PhoneInput/PhoneInput.tsx index 5b5d9669f..b1943e8dc 100644 --- a/src/components/UI/Form/PhoneInput/PhoneInput.tsx +++ b/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 (
@@ -49,7 +51,7 @@ export const PhoneInput = ({ setFieldValue(field.name, event); }} /> - {errorText ? ( + {hasError ? ( {errorText} ) : null} diff --git a/src/components/UI/ListIcon/ListIcon.tsx b/src/components/UI/ListIcon/ListIcon.tsx index 3be04897b..80435f788 100644 --- a/src/components/UI/ListIcon/ListIcon.tsx +++ b/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 ( diff --git a/src/components/floweditor/FlowEditor.module.css b/src/components/floweditor/FlowEditor.module.css index c9795f85c..b0e05478d 100644 --- a/src/components/floweditor/FlowEditor.module.css +++ b/src/components/floweditor/FlowEditor.module.css @@ -14,8 +14,7 @@ } .Icon { - background-color: #eaedec !important; - margin-right: 10px !important; + margin-right: 8px; } .FlowContainer { diff --git a/src/components/floweditor/FlowEditor.tsx b/src/components/floweditor/FlowEditor.tsx index ad77c27a6..f53b87867 100644 --- a/src/components/floweditor/FlowEditor.tsx +++ b/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 = () => {
diff --git a/src/config/menu.ts b/src/config/menu.ts index 07d4ddad6..68866df08 100644 --- a/src/config/menu.ts +++ b/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', diff --git a/src/containers/Auth/Auth.module.css b/src/containers/Auth/Auth.module.css index bb3bc367b..3f8f3439c 100644 --- a/src/containers/Auth/Auth.module.css +++ b/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; +} diff --git a/src/containers/Auth/Auth.tsx b/src/containers/Auth/Auth.tsx index 12312d6fa..a4b8b3144 100644 --- a/src/containers/Auth/Auth.tsx +++ b/src/containers/Auth/Auth.tsx @@ -161,7 +161,7 @@ export const Auth = ({ const key = index; return (
- {field.label && ( + {field.label ? ( {field.label} + ) : ( +
)}
diff --git a/src/containers/Chat/ChatMessages/ChatInput/ChatInput.module.css b/src/containers/Chat/ChatMessages/ChatInput/ChatInput.module.css index b3cb28b21..d54aa14f1 100644 --- a/src/containers/Chat/ChatMessages/ChatInput/ChatInput.module.css +++ b/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; diff --git a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.module.css b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.module.css index fdd1671d3..25b74a913 100644 --- a/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.module.css +++ b/src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.module.css @@ -123,7 +123,6 @@ } .DateLeft { - margin-top: 16px !important; color: #191c1a !important; } diff --git a/src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.module.css b/src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.module.css index 2d523f56c..464e09c9f 100644 --- a/src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.module.css +++ b/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; +} diff --git a/src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.tsx b/src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.tsx index fbc6662e3..36783f5b8 100644 --- a/src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.tsx +++ b/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(FILTER_TEMPLATES, { variables: filterVariables(), }); @@ -118,14 +118,16 @@ export const ChatTemplates = ({ listItems = listItems.filter((n) => n); return listItems.length !== 0 ? ( - - - {listItems} - - +
+ + + {listItems} + + +
) : ( - - {`No ${text} for that search.`} + + {`No results found for the search.`} ); }; diff --git a/src/containers/Consulting/ConsultingList/ConsultingList.tsx b/src/containers/Consulting/ConsultingList/ConsultingList.tsx index 4eff38e01..51cd8356e 100644 --- a/src/containers/Consulting/ConsultingList/ConsultingList.tsx +++ b/src/containers/Consulting/ConsultingList/ConsultingList.tsx @@ -121,9 +121,9 @@ const ConsultingList = () => { return ( <> - {dialog} } title={t('Consulting')} listItem="consultingHours" listItemName="consultingHour" diff --git a/src/containers/Form/FormLayout.module.css b/src/containers/Form/FormLayout.module.css index 5365c888e..4cbc70cf7 100644 --- a/src/containers/Form/FormLayout.module.css +++ b/src/containers/Form/FormLayout.module.css @@ -157,3 +157,7 @@ .TitleText { margin-right: 8px; } + +.Spacing { + margin: 20px 0px !important; +} diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx index dbb7b5c91..533766fb6 100644 --- a/src/containers/Form/FormLayout.tsx +++ b/src/containers/Form/FormLayout.tsx @@ -563,10 +563,12 @@ export const FormLayout = ({ return ( - {field.label && ( + {field.label ? ( {field.label} + ) : ( +
)} diff --git a/src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx b/src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx index 0d793c1c8..4cb70f133 100644 --- a/src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx @@ -137,8 +137,6 @@ export const InteractiveMessageList = () => { placeholder="Select tag" options={tag ? tag.tags : []} optionLabel="label" - disabled={false} - hasCreateOption={false} multiple={false} onChange={(value: any) => { setSelectedTag(value); diff --git a/src/containers/List/List.test.tsx b/src/containers/List/List.test.tsx index 940ea27ab..7bc9e6652 100644 --- a/src/containers/List/List.test.tsx +++ b/src/containers/List/List.test.tsx @@ -152,7 +152,7 @@ test('list sorting', async () => { }); describe('DialogMessage tests', () => { - test('dialogMessage with custom component for delete', async () => { + test.only('dialogMessage with custom component for delete', async () => { const useCustomDialog = () => { const component = (
diff --git a/src/containers/Organization/Organization.module.css b/src/containers/Organization/Organization.module.css index c3a1ff7cd..47f115277 100644 --- a/src/containers/Organization/Organization.module.css +++ b/src/containers/Organization/Organization.module.css @@ -92,12 +92,6 @@ text-align: end; } -/* 5th div need more top bottom margin */ -.Form > div:nth-of-type(5) { - padding: 0; - margin: 20px 0px !important; -} - /* 5th div helperText need more font-size and top margin */ .Form > div:nth-of-type(5) > div > p[id='helper-text'] { font-size: 16px !important; diff --git a/src/containers/Template/List/HSMList/HSMList.tsx b/src/containers/Template/List/HSMList/HSMList.tsx index b642410db..6b2ddc22a 100644 --- a/src/containers/Template/List/HSMList/HSMList.tsx +++ b/src/containers/Template/List/HSMList/HSMList.tsx @@ -34,13 +34,11 @@ export const HSMList = () => { syncHsmTemplates(); }; - if (syncTemplateLoad) { - return ; - } const syncHSMButton = (