[#1068] improve channels UI

frontend/ui/src/pages/Channels/ChannelsSources/ChannelDetails.module.scss → frontend/ui/src/pages/Channels/ChannelsSources/ChannelDetails/index.module.scss

@@ -1,20 +1,15 @@
 @import '../../../assets/scss/fonts';
 @import '../../../assets/scss/colors';
 
-.flexWrap {
-  display: flex;
-  flex-grow: 1;
-}
-
 .channelCard {
   display: flex;
   box-sizing: border-box;
   height: 100px;
   width: 300px;
   border: 1px solid var(--color-light-gray);
   border-radius: 8px;
-  background-color: #ffffff;
-  margin-top: 22px;
+  background-color: white;
+  margin-top: 24px;
 }
 
 .channelLogo {
@@ -23,8 +18,8 @@
   width: 40px;
   margin: 16px 8px 42px 16px;
   svg {
-    width: 30px;
-    height: 30px;
+    width: 40px;
+    height: 40px;
   }
 }
 
@@ -37,7 +32,7 @@
   font-weight: bold;
   letter-spacing: 0;
   line-height: 24px;
-  margin: 16px 20px 2px 2px;
+  margin: 16px 20px 2px 0;
 }
 
 .channelText {
@@ -51,10 +46,6 @@
 }
 
 .channelButton {
-  display: flex;
-  padding-top: 8px;
-  width: 40px;
-  height: 40px;
   margin: 20px 0px 8px 0px;
 }
 
@@ -74,18 +65,20 @@
 
 .channelButtonIcon {
   @include font-m;
-  margin-right: 16px;
-  width: 24px;
-  height: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 30px;
+  height: 30px;
+  margin-right: 16px;
+  padding: 0px;
+  border-radius: 50%;
   color: var(--color-text-gray);
   cursor: pointer;
 
-  padding: 0px;
-
   svg {
+    height: 30px;
+    width: 30px;
     margin: 0;
     path {
       fill: var(--color-text-gray);

frontend/ui/src/pages/Channels/ChannelsSources/ChannelDetails.tsx → frontend/ui/src/pages/Channels/ChannelsSources/ChannelDetails/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './ChannelDetails.module.scss';
+import styles from './index.module.scss';
 
 type ChannelDetailsProps = {
   image: JSX.Element;

frontend/ui/src/pages/Channels/ChannelsSources/ChannelsConnected.module.scss → frontend/ui/src/pages/Channels/ChannelsSources/ChannelsConnected/index.module.scss

@@ -17,8 +17,9 @@
 .connectedChannelBox {
   display: flex;
   box-sizing: border-box;
+  width: 550px;
   min-height: 100px;
-  min-width: 450px;
+  overflow: hidden;
   border: 1px solid var(--color-light-gray);
   border-radius: 8px;
   background-color: #ffffff;
@@ -29,69 +30,66 @@
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
-  min-width: 398px;
+  justify-content: space-evenly;
+  white-space: nowrap;
+  min-width: 400px;
   min-height: 94px;
+  padding: 8px;
+}
+
+.extraPhoneInfo {
+  overflow: hidden;
+  max-width: 142px;
+  text-overflow: ellipsis;
 }
 
 .extraChannel {
   display: flex;
   min-width: 88px;
   min-height: 20px;
-  border: none;
-  padding: 0;
-  outline: none;
+  padding: 0 24px 0 24px;
   cursor: pointer;
-  background: white;
-  color: var(--color-airy-blue);
-  text-decoration: underline;
-  margin: 2px -1px 0px 0px;
+  button {
+    outline: none;
+  }
 }
 
 .connectedChannelData {
   display: flex;
-  align-items: flex-start;
-  margin: 6px 0px 0px 6px;
+  align-items: center;
+  margin: 4px;
 }
 
 .channelListEntry {
   display: inline-flex;
 }
 
 .placeholderLogo {
-  display: inline-flex;
-  height: 20px;
-  width: 20px;
-  margin: 14px 2px 0px 6px;
+  height: 24px;
+  width: 24px;
   svg {
-    height: 18px;
-    width: 18px;
+    height: 24px;
+    width: 24px;
   }
 }
 
 .facebookImage {
-  display: inline-flex;
-  height: 16px;
-  width: 16px;
+  height: 20px;
+  width: 20px;
   border-radius: 50%;
-  margin: 14px 6px 0px 8px;
 }
 
 .connectedChannelName {
   min-width: 168px;
   height: 24px;
-  margin-right: 7px;
-  padding-top: 10px;
-}
-
-.channelId {
-  padding-top: 10px;
+  margin: 0 4px 0 4px;
+  max-width: 200px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .channelButton {
-  display: flex;
-  width: 40px;
-  height: 40px;
-  padding-top: 8px;
   margin: 20px 0px 8px 0px;
 }
 
@@ -110,17 +108,20 @@
 
 .channelButtonIcon {
   @include font-m;
-  margin: 0px 16px 24px 0px;
-  width: 24px;
-  height: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 30px;
+  height: 30px;
+  margin-right: 16px;
+  padding: 0px;
+  border-radius: 50%;
   color: var(--color-text-gray);
   cursor: pointer;
-  padding: 0;
 
   svg {
+    height: 30px;
+    width: 30px;
     margin: 0;
     path {
       fill: var(--color-text-gray);

frontend/ui/src/pages/Channels/ChannelsSources/ChannelsConnected/index.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {Channel} from 'httpclient';
+import {LinkButton} from '@airyhq/components';
+import styles from './index.module.scss';
+
+type connectedChannelsProps = {
+  source: string;
+  channels: Channel[];
+  connected: string;
+  placeholderImage?: JSX.Element;
+  isConnected: string;
+  addAChannel: JSX.Element;
+};
+
+const ChannelsConnected = (props: connectedChannelsProps) => {
+  const {source, channels} = props;
+
+  const isPhoneNumberSource = () => {
+    return source === 'twilio.sms' || source === 'twilio.whatsapp';
+  };
+
+  const channelsToShow = isPhoneNumberSource() ? 2 : 4;
+  const hasExtraChannels = channels.length > channelsToShow;
+
+  return (
+    <>
+      {channels && channels.length > 0 && (
+        <>
+          <div className={styles.connectedContainer}>
+            <div className={styles.connectedSum}>
+              <p>
+                {channels.length} {props.connected}
+              </p>
+            </div>
+            <div className={styles.connectedChannelBox}>
+              <div className={styles.connectedChannel}>
+                {channels.slice(0, channelsToShow).map((channel: Channel) => {
+                  return (
+                    <li key={channel.sourceChannelId} className={styles.channelListEntry}>
+                      <div className={styles.connectedChannelData}>
+                        {source === 'facebook' && channel.metadata.imageUrl ? (
+                          <img
+                            src={channel.metadata.imageUrl}
+                            alt={channel.metadata.name}
+                            className={styles.facebookImage}
+                          />
+                        ) : (
+                          <div className={styles.placeholderLogo}>{props.placeholderImage} </div>
+                        )}
+                        <div className={styles.connectedChannelName}>{channel.metadata.name}</div>
+                        {isPhoneNumberSource() && (
+                          <div className={styles.extraPhoneInfo}>{channel.sourceChannelId}</div>
+                        )}
+                      </div>
+                    </li>
+                  );
+                })}
+              </div>
+              <div className={styles.extraChannel}>
+                {hasExtraChannels && (
+                  <LinkButton>
+                    +{channels.length - channelsToShow} {props.isConnected}
+                  </LinkButton>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className={styles.channelButton}>
+            <button type="button" className={styles.addChannelButton}>
+              <div className={styles.channelButtonIcon} title="Add a channel">
+                {props.addAChannel}
+              </div>
+            </button>
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+export default ChannelsConnected;