Change calendar transparency (#3732)

fix

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

@@ -12,6 +12,10 @@ const StyledCardsContainer = styled.div`
   margin-top: ${({ theme }) => theme.spacing(6)};
 `;
 
+const StyledSettingsNavigationCard = styled(SettingsNavigationCard)`
+  color: ${({ theme }) => theme.font.color.extraLight};
+`;
+
 export const SettingsAccountsSettingsSection = () => {
   const navigate = useNavigate();
 
@@ -29,14 +33,14 @@ export const SettingsAccountsSettingsSection = () => {
         >
           Set email visibility, manage your blocklist and more.
         </SettingsNavigationCard>
-        <SettingsNavigationCard
+        <StyledSettingsNavigationCard
           Icon={IconCalendarEvent}
           title="Calendar"
           disabled
           hasSoonPill
         >
           Configure and customize your calendar preferences.
-        </SettingsNavigationCard>
+        </StyledSettingsNavigationCard>
       </StyledCardsContainer>
     </Section>
   );

packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx

@@ -15,6 +15,7 @@ type SettingsNavigationCardProps = {
   Icon: IconComponent;
   onClick?: () => void;
   title: string;
+  className?: string;
 };
 
 const StyledCard = styled(Card)<{
@@ -63,15 +64,16 @@ export const SettingsNavigationCard = ({
   Icon,
   onClick,
   title,
+  className,
 }: SettingsNavigationCardProps) => {
   const theme = useTheme();
 
   return (
-    <StyledCard disabled={disabled} onClick={onClick}>
+    <StyledCard disabled={disabled} onClick={onClick} className={className}>
       <StyledCardContent>
         <StyledHeader>
           <Icon size={theme.icon.size.lg} stroke={theme.icon.stroke.sm} />
-          <StyledTitle>
+          <StyledTitle className={className}>
             {title}
             {hasSoonPill && <SoonPill />}
           </StyledTitle>