fix: Align announcements' bullet points on left side

cozy · Oct 29, 2024 · 9c7c57b · 9c7c57b
1 parent dea5415
commit 9c7c57b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/components/Announcements/AnnouncementsDialogContent.tsx b/src/components/Announcements/AnnouncementsDialogContent.tsx
@@ -1,4 +1,5 @@
 import React, { FC } from 'react'
+import cx from 'classnames'
 
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import Typography from 'cozy-ui/transpiled/react/Typography'
@@ -9,6 +10,9 @@ import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { Announcement } from './types'
 import { useAnnouncementsImage } from 'hooks/useAnnouncementsImage'
 
+// @ts-expect-error stylus files are not typed
+import styles from './styles.styl'
+
 interface AnnouncementsDialogContentProps {
   announcement: Announcement
   onSkip: () => void
@@ -66,7 +70,13 @@ const AnnouncementsDialogContent: FC<AnnouncementsDialogContentProps> = ({
           t('AnnouncementsDialogContent.dateFormat')
         )}
       </Typography>
-      <div className="u-ta-center u-maw-100">
+      <div
+        className={cx(
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+          styles['announcement_content'],
+          'u-ta-center u-maw-100'
+        )}
+      >
         <Markdown content={announcement.attributes.content} />
       </div>
       {announcement.attributes.main_action ? (

diff --git a/src/components/Announcements/styles.styl b/src/components/Announcements/styles.styl
@@ -0,0 +1,3 @@
+.announcement_content
+  ul
+    text-align left