Fix noninteractive toggle (#8383)

- Use a label to make the whole card interactive
- Disallow the Toggle component to shrink; it used to on mobile devices

A focus indicator is missing for the Toggle component. We'll have to add
one.

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

@@ -5,7 +5,7 @@ import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
-import { Card, H2Title, Toggle } from 'twenty-ui';
+import { Card, H2Title } from 'twenty-ui';
 import { CalendarChannelVisibility } from '~/generated-metadata/graphql';
 
 const StyledDetailsContainer = styled.div`
@@ -21,10 +21,6 @@ type SettingsAccountsCalendarChannelDetailsProps = {
   >;
 };
 
-const StyledToggle = styled(Toggle)`
-  margin-left: auto;
-`;
-
 export const SettingsAccountsCalendarChannelDetails = ({
   calendarChannel,
 }: SettingsAccountsCalendarChannelDetailsProps) => {
@@ -71,16 +67,13 @@ export const SettingsAccountsCalendarChannelDetails = ({
           <SettingsOptionCardContent
             title="Auto-creation"
             description="Automatically create contacts for people."
-            onClick={() =>
+            checked={calendarChannel.isContactAutoCreationEnabled}
+            onChange={() => {
               handleContactAutoCreationToggle(
                 !calendarChannel.isContactAutoCreationEnabled,
-              )
-            }
-          >
-            <StyledToggle
-              value={calendarChannel.isContactAutoCreationEnabled}
-            />
-          </SettingsOptionCardContent>
+              );
+            }}
+          />
         </Card>
       </Section>
     </StyledDetailsContainer>

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

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Card, H2Title, Section, Toggle } from 'twenty-ui';
+import { Card, H2Title, Section } from 'twenty-ui';
 
 import {
   MessageChannel,
@@ -30,10 +30,6 @@ const StyledDetailsContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(6)};
 `;
 
-const StyledToggle = styled(Toggle)`
-  margin-left: auto;
-`;
-
 export const SettingsAccountsMessageChannelDetails = ({
   messageChannel,
 }: SettingsAccountsMessageChannelDetailsProps) => {
@@ -107,25 +103,23 @@ export const SettingsAccountsMessageChannelDetails = ({
             title="Exclude non-professional emails"
             description="Don’t create contacts from/to Gmail, Outlook emails"
             divider
-            onClick={() =>
+            checked={messageChannel.excludeNonProfessionalEmails}
+            onChange={() => {
               handleIsNonProfessionalEmailExcludedToggle(
                 !messageChannel.excludeNonProfessionalEmails,
-              )
-            }
-          >
-            <StyledToggle value={messageChannel.excludeNonProfessionalEmails} />
-          </SettingsOptionCardContent>
+              );
+            }}
+          />
           <SettingsOptionCardContent
             title="Exclude group emails"
             description="Don’t sync emails from team@ support@ noreply@..."
-            onClick={() =>
+            checked={messageChannel.excludeGroupEmails}
+            onChange={() =>
               handleIsGroupEmailExcludedToggle(
                 !messageChannel.excludeGroupEmails,
               )
             }
-          >
-            <StyledToggle value={messageChannel.excludeGroupEmails} />
-          </SettingsOptionCardContent>
+          />
         </Card>
       </Section>
     </StyledDetailsContainer>