From 6de9d972ec921834dc7a7b83722c09c8b7e9cdf2 Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Mon, 5 Feb 2024 11:27:05 +0100
Subject: [PATCH] Change calendar transparency  (#3732)

fix
---
 .../components/SettingsAccountsSettingsSection.tsx        | 8 ++++++--
 .../settings/components/SettingsNavigationCard.tsx        | 6 ++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx
index 3c5337e65..0bd6a76e2 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx
+++ b/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>
   );
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
index 001ed5f8f..3167f4257 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
+++ b/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>