Fix Dark Mode Colors (#1099)

- fix dark mode colors

front/src/modules/activities/components/TaskRow.tsx

@@ -35,6 +35,7 @@ const StyledTaskBody = styled.div`
 `;
 
 const StyledTaskTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
   font-weight: ${({ theme }) => theme.font.weight.medium};
   padding: 0 ${({ theme }) => theme.spacing(2)};
 `;

front/src/modules/activities/timeline/components/TimelineActivityCardFooter.tsx

@@ -13,6 +13,7 @@ type OwnProps = {
 const StyledContainer = styled.div`
   align-items: center;
   border-top: 1px solid ${({ theme }) => theme.border.color.medium};
+  color: ${({ theme }) => theme.font.color.primary};
   display: flex;
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(2)};

front/src/modules/ui/input/date/components/DateInputEdit.tsx

@@ -10,6 +10,7 @@ export type StyledCalendarContainerProps = {
 };
 
 const StyledInputContainer = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
   display: flex;
 
   padding: ${({ theme }) => theme.spacing(2)};

front/src/modules/ui/input/date/components/DatePicker.tsx

@@ -48,6 +48,7 @@ const StyledContainer = styled.div`
 
   & .react-datepicker__header__dropdown {
     display: flex;
+    color: ${({ theme }) => theme.font.color.primary};
     margin-left: ${({ theme }) => theme.spacing(1)};
     margin-bottom: ${({ theme }) => theme.spacing(1)};
   }

front/src/modules/ui/modal/components/ConfirmationModal.tsx

@@ -6,7 +6,11 @@ import debounce from 'lodash.debounce';
 import { Button, ButtonVariant } from '@/ui/button/components/Button';
 import { TextInput } from '@/ui/input/text/components/TextInput';
 import { Modal } from '@/ui/modal/components/Modal';
-import { Section, SectionAlignment } from '@/ui/section/components/Section';
+import {
+  Section,
+  SectionAlignment,
+  SectionFontColor,
+} from '@/ui/section/components/Section';
 import { H1Title, H1TitleFontColor } from '@/ui/typography/components/H1Title';
 
 interface ConfirmationModalProps {
@@ -73,7 +77,12 @@ export function ConfirmationModal({
           }}
         >
           <H1Title title={title} fontColor={H1TitleFontColor.Primary} />
-          <Section alignment={SectionAlignment.Center}>{subtitle}</Section>
+          <Section
+            alignment={SectionAlignment.Center}
+            fontColor={SectionFontColor.Primary}
+          >
+            {subtitle}
+          </Section>
           {confirmationValue && (
             <Section>
               <TextInput

front/src/modules/ui/section/components/Section.tsx

@@ -5,6 +5,7 @@ type OwnProps = {
   children: ReactNode;
   alignment?: SectionAlignment;
   fullWidth?: boolean;
+  fontColor?: SectionFontColor;
 };
 
 export enum SectionAlignment {
@@ -12,10 +13,18 @@ export enum SectionAlignment {
   Center = 'center',
 }
 
+export enum SectionFontColor {
+  Primary = 'primary',
+  Secondary = 'secondary',
+  Tertiary = 'tertiary',
+}
+
 const StyledSection = styled.div<{
   alignment: SectionAlignment;
   fullWidth: boolean;
+  fontColor: SectionFontColor;
 }>`
+  color: ${({ theme, fontColor }) => theme.font.color[fontColor]};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
   margin-top: ${({ theme }) => theme.spacing(4)};
   text-align: ${({ alignment }) => alignment};
@@ -26,9 +35,14 @@ export function Section({
   children,
   alignment = SectionAlignment.Left,
   fullWidth = true,
+  fontColor = SectionFontColor.Primary,
 }: OwnProps) {
   return (
-    <StyledSection alignment={alignment} fullWidth={fullWidth}>
+    <StyledSection
+      alignment={alignment}
+      fullWidth={fullWidth}
+      fontColor={fontColor}
+    >
       {children}
     </StyledSection>
   );