From e66f4a5cc1f26feeed96cacaccd2510b0171ed01 Mon Sep 17 00:00:00 2001 From: Aitor Algorta Date: Mon, 15 Mar 2021 16:26:26 +0100 Subject: [PATCH 1/4] fixed issues with filter --- frontend/ui/src/components/IconChannelFilter/index.tsx | 2 ++ .../pages/Channels/Twilio/SmsWhatsappForm.module.scss | 2 +- .../ui/src/pages/Channels/Twilio/SmsWhatsappForm.tsx | 6 +++--- .../pages/Inbox/ConversationsFilter/Popup.module.scss | 6 ++++++ .../ui/src/pages/Inbox/ConversationsFilter/Popup.tsx | 10 ++++++++-- 5 files changed, 20 insertions(+), 6 deletions(-) diff --git a/frontend/ui/src/components/IconChannelFilter/index.tsx b/frontend/ui/src/components/IconChannelFilter/index.tsx index 2c8ebe0a5c..62f7969ac4 100644 --- a/frontend/ui/src/components/IconChannelFilter/index.tsx +++ b/frontend/ui/src/components/IconChannelFilter/index.tsx @@ -6,12 +6,14 @@ import {ReactComponent as GoogleIcon} from 'assets/images/icons/google_avatar.sv import {ReactComponent as WhatsappIcon} from 'assets/images/icons/whatsapp_avatar.svg'; import {ReactComponent as SmsIcon} from 'assets/images/icons/sms_avatar.svg'; import {ReactComponent as FacebookIcon} from 'assets/images/icons/messenger_avatar.svg'; +import {ReactComponent as ChatPluginSource} from 'assets/images/icons/airy_avatar.svg'; const sourceIconsMap = { google: GoogleIcon, facebook: FacebookIcon, 'twilio.sms': SmsIcon, 'twilio.whatsapp': WhatsappIcon, + chatplugin: ChatPluginSource, }; export const IconChannelFilter = ({channel}: {channel: Channel}) => { diff --git a/frontend/ui/src/pages/Channels/Twilio/SmsWhatsappForm.module.scss b/frontend/ui/src/pages/Channels/Twilio/SmsWhatsappForm.module.scss index 7dfbd70817..aa4b50fe50 100644 --- a/frontend/ui/src/pages/Channels/Twilio/SmsWhatsappForm.module.scss +++ b/frontend/ui/src/pages/Channels/Twilio/SmsWhatsappForm.module.scss @@ -71,7 +71,7 @@ margin: 24px 0px 58px 0px; } -input { +.inputField { @include font-base; background-color: transparent; width: 100%; diff --git a/frontend/ui/src/pages/Channels/Twilio/SmsWhatsappForm.tsx b/frontend/ui/src/pages/Channels/Twilio/SmsWhatsappForm.tsx index 835b923c41..454eba7064 100644 --- a/frontend/ui/src/pages/Channels/Twilio/SmsWhatsappForm.tsx +++ b/frontend/ui/src/pages/Channels/Twilio/SmsWhatsappForm.tsx @@ -35,7 +35,7 @@ const SmsWhatsappForm = (props: SmsWhatsappFormProps) => { placeholder={props.placeholder} value={props.twilioNumberInput} required={true} - height={32} + height={40} autoFocus={true} onChange={props.handleNumberInput} fontClass="font-s" @@ -48,7 +48,7 @@ const SmsWhatsappForm = (props: SmsWhatsappFormProps) => { placeholder={props.urlPlaceholder} value={props.twilioUrlInput} required={false} - height={32} + height={40} onChange={props.handleUrlInput} fontClass="font-s" /> @@ -60,7 +60,7 @@ const SmsWhatsappForm = (props: SmsWhatsappFormProps) => { placeholder={props.namePlaceholder} value={props.twilioNameInput} required={false} - height={32} + height={40} onChange={props.handleNameInput} fontClass="font-s" /> diff --git a/frontend/ui/src/pages/Inbox/ConversationsFilter/Popup.module.scss b/frontend/ui/src/pages/Inbox/ConversationsFilter/Popup.module.scss index 3309185c1f..390087b8c6 100644 --- a/frontend/ui/src/pages/Inbox/ConversationsFilter/Popup.module.scss +++ b/frontend/ui/src/pages/Inbox/ConversationsFilter/Popup.module.scss @@ -175,6 +175,12 @@ } } +.metadataImage { + width: 24px; + height: 24px; + border-radius: 50%; +} + .checkmarkIcon { flex: none; border-radius: 50%; diff --git a/frontend/ui/src/pages/Inbox/ConversationsFilter/Popup.tsx b/frontend/ui/src/pages/Inbox/ConversationsFilter/Popup.tsx index 1f052e8cae..6f3ddf2dda 100644 --- a/frontend/ui/src/pages/Inbox/ConversationsFilter/Popup.tsx +++ b/frontend/ui/src/pages/Inbox/ConversationsFilter/Popup.tsx @@ -170,11 +170,17 @@ const PopUpFilter = (props: PopUpFilterProps) => { ) : (
- {channel.metadata?.imageUrl ? : } + {channel.metadata?.imageUrl ? ( + + ) : channel.source ? ( + + ) : ( + + )}
)} -
{channel.metadata?.name}
+
{channel.sourceChannelId}
))} From 8536927ae9f34c6b9468786bc761430306fe6e5d Mon Sep 17 00:00:00 2001 From: Aitor Algorta Date: Mon, 15 Mar 2021 16:30:57 +0100 Subject: [PATCH 2/4] added consistency in IconChannelFilter --- frontend/ui/src/components/IconChannelFilter/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/ui/src/components/IconChannelFilter/index.tsx b/frontend/ui/src/components/IconChannelFilter/index.tsx index 62f7969ac4..830637a546 100644 --- a/frontend/ui/src/components/IconChannelFilter/index.tsx +++ b/frontend/ui/src/components/IconChannelFilter/index.tsx @@ -9,11 +9,11 @@ import {ReactComponent as FacebookIcon} from 'assets/images/icons/messenger_avat import {ReactComponent as ChatPluginSource} from 'assets/images/icons/airy_avatar.svg'; const sourceIconsMap = { - google: GoogleIcon, - facebook: FacebookIcon, + 'google': GoogleIcon, + 'facebook': FacebookIcon, 'twilio.sms': SmsIcon, 'twilio.whatsapp': WhatsappIcon, - chatplugin: ChatPluginSource, + 'chatplugin': ChatPluginSource, }; export const IconChannelFilter = ({channel}: {channel: Channel}) => { From f0487b28ac094586de04c96b870d3aa1bd02aa41 Mon Sep 17 00:00:00 2001 From: Aitor Algorta Date: Mon, 15 Mar 2021 16:33:27 +0100 Subject: [PATCH 3/4] better naming for svg --- frontend/ui/src/components/IconChannelFilter/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/ui/src/components/IconChannelFilter/index.tsx b/frontend/ui/src/components/IconChannelFilter/index.tsx index 830637a546..4a0596aec0 100644 --- a/frontend/ui/src/components/IconChannelFilter/index.tsx +++ b/frontend/ui/src/components/IconChannelFilter/index.tsx @@ -6,14 +6,14 @@ import {ReactComponent as GoogleIcon} from 'assets/images/icons/google_avatar.sv import {ReactComponent as WhatsappIcon} from 'assets/images/icons/whatsapp_avatar.svg'; import {ReactComponent as SmsIcon} from 'assets/images/icons/sms_avatar.svg'; import {ReactComponent as FacebookIcon} from 'assets/images/icons/messenger_avatar.svg'; -import {ReactComponent as ChatPluginSource} from 'assets/images/icons/airy_avatar.svg'; +import {ReactComponent as AiryAvatar} from 'assets/images/icons/airy_avatar.svg'; const sourceIconsMap = { 'google': GoogleIcon, 'facebook': FacebookIcon, 'twilio.sms': SmsIcon, 'twilio.whatsapp': WhatsappIcon, - 'chatplugin': ChatPluginSource, + 'chatplugin': AiryAvatar, }; export const IconChannelFilter = ({channel}: {channel: Channel}) => { From 4e11208eb1bb50a6bdd931649d774ee4edba42b5 Mon Sep 17 00:00:00 2001 From: Aitor Algorta Date: Mon, 15 Mar 2021 16:40:38 +0100 Subject: [PATCH 4/4] linting --- frontend/ui/src/components/IconChannelFilter/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/ui/src/components/IconChannelFilter/index.tsx b/frontend/ui/src/components/IconChannelFilter/index.tsx index 4a0596aec0..1502137121 100644 --- a/frontend/ui/src/components/IconChannelFilter/index.tsx +++ b/frontend/ui/src/components/IconChannelFilter/index.tsx @@ -9,11 +9,11 @@ import {ReactComponent as FacebookIcon} from 'assets/images/icons/messenger_avat import {ReactComponent as AiryAvatar} from 'assets/images/icons/airy_avatar.svg'; const sourceIconsMap = { - 'google': GoogleIcon, - 'facebook': FacebookIcon, + google: GoogleIcon, + facebook: FacebookIcon, 'twilio.sms': SmsIcon, 'twilio.whatsapp': WhatsappIcon, - 'chatplugin': AiryAvatar, + chatplugin: AiryAvatar, }; export const IconChannelFilter = ({channel}: {channel: Channel}) => {