3669 disable radio buttons in settingsaccountsinboxsettingsvisibilitysection (#3678)

* update visibility and disable radio button

* add soon pill

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { SoonPill } from 'tsup.ui.index';
 
 import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
@@ -22,6 +23,7 @@ const StyledCardContent = styled(CardContent)`
   align-items: center;
   display: flex;
   gap: ${({ theme }) => theme.spacing(4)};
+  opacity: 0.56;
 `;
 
 const StyledCardMedia = styled(SettingsAccountsInboxSettingsCardMedia)`
@@ -59,6 +61,16 @@ const StyledRadio = styled(Radio)`
   margin-left: auto;
 `;
 
+const StyledSoonPill = styled(SoonPill)`
+  position: absolute;
+  right: 0;
+  top: 0;
+`;
+
+const StyledSection = styled(Section)`
+  position: relative;
+`;
+
 const inboxSettingsVisibilityOptions = [
   {
     title: 'Everything',
@@ -96,11 +108,12 @@ export const SettingsAccountsInboxSettingsVisibilitySection = ({
   onChange,
   value = InboxSettingsVisibilityValue.Everything,
 }: SettingsAccountsInboxSettingsVisibilitySectionProps) => (
-  <Section>
+  <StyledSection>
     <H2Title
       title="Email visibility"
       description="Define what will be visible to other users in your workspace"
     />
+    <StyledSoonPill />
     <Card>
       {inboxSettingsVisibilityOptions.map(
         (
@@ -124,10 +137,11 @@ export const SettingsAccountsInboxSettingsVisibilitySection = ({
               value={optionValue}
               onCheckedChange={() => onChange(optionValue)}
               checked={value === optionValue}
+              disabled={true}
             />
           </StyledCardContent>
         ),
       )}
     </Card>
-  </Section>
+  </StyledSection>
 );