message campaign redesign (#22508)

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22508?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupForwardingCell.tsx

@@ -1,23 +0,0 @@
-import { styled } from '@linaria/react';
-
-import { type MessageChannel } from '@/accounts/types/MessageChannel';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-
-const StyledForwardingCell = styled.div`
-  color: ${themeCssVariables.font.color.tertiary};
-  font-family: monospace;
-  font-size: ${themeCssVariables.font.size.sm};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-type SettingsWorkspaceEmailGroupForwardingCellProps = {
-  item: MessageChannel;
-};
-
-export const SettingsWorkspaceEmailGroupForwardingCell = ({
-  item,
-}: SettingsWorkspaceEmailGroupForwardingCellProps) => (
-  <StyledForwardingCell>{item.handle}</StyledForwardingCell>
-);

packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupSection.tsx

@@ -4,9 +4,10 @@ import { type MessageChannel } from '@/accounts/types/MessageChannel';
 import { useMyMessageChannels } from '@/settings/accounts/hooks/useMyMessageChannels';
 import { SettingsTableListSection } from '@/settings/components/SettingsTableListSection';
 import { SettingsWorkspaceEmailChannelDomainStatusCell } from '@/settings/workspace/components/SettingsWorkspaceEmailChannelDomainStatusCell';
-import { SettingsWorkspaceEmailGroupForwardingCell } from '@/settings/workspace/components/SettingsWorkspaceEmailGroupForwardingCell';
 import { SettingsWorkspaceEmailGroupSourceCell } from '@/settings/workspace/components/SettingsWorkspaceEmailGroupSourceCell';
 import { MessageChannelType, SettingsPath } from 'twenty-shared/types';
+import { Pill } from 'twenty-ui/data-display';
+import { IconLock } from 'twenty-ui/icon';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 
 export const SettingsWorkspaceEmailGroupSection = () => {
@@ -20,22 +21,20 @@ export const SettingsWorkspaceEmailGroupSection = () => {
 
   return (
     <SettingsTableListSection<MessageChannel>
-      title={t`Email Channels`}
-      description={t`Shared addresses your workspace uses to send and receive email.`}
+      title={t`Channels`}
+      description={t`Addresses your workspace uses to send and receive email from shared inboxes`}
+      headerAdornment={<Pill Icon={IconLock} label={t`Organization`} />}
       items={emailGroupChannels}
       columns={[
-        { label: t`Source`, Cell: SettingsWorkspaceEmailGroupSourceCell },
-        {
-          label: t`Forwarding address`,
-          Cell: SettingsWorkspaceEmailGroupForwardingCell,
-        },
+        { label: t`Email`, Cell: SettingsWorkspaceEmailGroupSourceCell },
         {
           label: t`Domain`,
           align: 'right',
           Cell: SettingsWorkspaceEmailChannelDomainStatusCell,
         },
       ]}
-      gridAutoColumns="1fr 1fr 1fr"
+      gridAutoColumns="1fr 1fr"
+      showRowChevron
       onRowClick={(channel) =>
         navigateSettings(SettingsPath.EmailGroupChannelDetail, {
           messageChannelId: channel.id,

packages/twenty-front/src/modules/settings/workspace/components/SettingsWorkspaceEmailGroupSourceCell.tsx

@@ -1,7 +1,6 @@
 import { styled } from '@linaria/react';
 
 import { type MessageChannel } from '@/accounts/types/MessageChannel';
-import { IconMail } from 'twenty-ui/icon';
 import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
@@ -10,7 +9,6 @@ const StyledNameCell = styled.div`
   color: ${themeCssVariables.font.color.primary};
   display: flex;
   font-weight: ${themeCssVariables.font.weight.medium};
-  gap: ${themeCssVariables.spacing[2]};
   min-width: 0;
 `;
 
@@ -25,7 +23,6 @@ export const SettingsWorkspaceEmailGroupSourceCell = ({
 
   return (
     <StyledNameCell>
-      <IconMail size={16} />
       <OverflowingTextWithTooltip text={sourceHandle ?? '—'} />
     </StyledNameCell>
   );