Release/2.64.3

packages/app/src/components/notification-banner.tsx

@@ -6,15 +6,13 @@ import { MaxWidth } from '~/components/max-width';
 import { useCollapsible } from '~/utils/use-collapsible';
 import { InlineText, BoldText } from './typography';
 import { colors } from '@corona-dashboard/common';
+import theme, { space } from '~/style/theme';
 
 interface NotificationBannerProps {
   title: string;
   description: string;
 }
-export function NotificationBanner({
-  title,
-  description,
-}: NotificationBannerProps) {
+export function NotificationBanner({ title, description }: NotificationBannerProps) {
   const [lastWord, ...splittedWords] = title.split(' ').reverse();
   const titleWithoutLastWord = splittedWords.reverse().join(' ');
 
@@ -24,17 +22,12 @@ export function NotificationBanner({
 
   return (
     <Box width="100%" backgroundColor={colors.gray2}>
-      <MaxWidth
-        px={{ _: 3, sm: 4 }}
-        py={3}
-        display="flex"
-        spacingHorizontal={3}
-      >
-        <Box display="flex" width="1.6rem" height="1.6rem">
-          <Warning />
-        </Box>
+      <MaxWidth paddingY={space[3]}>
+        <Box paddingX={{ _: space[3], sm: space[4] }} maxWidth={theme.sizes.maxWidthSiteWarning} display="flex" alignItems="flex-start" spacingHorizontal={3}>
+          <Box display="flex" minWidth="1.6rem" minHeight="1.6rem">
+            <Warning />
+          </Box>
 
-        <Box maxWidth="maxWidthText">
           {hasDescription ? (
             collapsible.button(
               <Box
@@ -48,10 +41,10 @@ export function NotificationBanner({
                   border: 0,
                   borderRadius: '5px',
                   backgroundColor: 'transparent',
-                  padding: 0,
-                  margin: 0,
+                  padding: space[0],
+                  margin: space[0],
                   textAlign: 'left',
-                  mt: 1,
+                  marginTop: space[1],
                 })}
               >
                 <BoldText>
@@ -71,8 +64,8 @@ export function NotificationBanner({
 
           {hasDescription &&
             collapsible.content(
-              <Box pb={2}>
-                <Spacer mt={3} />
+              <Box paddingBottom={space[2]}>
+                <Spacer marginTop={space[3]} />
                 <Markdown content={description} />
               </Box>
             )}

packages/app/src/domain/topical/components/topical-article-list.tsx

@@ -1,35 +1,18 @@
 import { ArticleSummary } from '~/components/article-teaser';
 import { Box } from '~/components/base';
-import { ContentTeaser } from '~/components/content-teaser';
 import { SiteText } from '~/locale';
+import { TopicalArticleTeaser } from './topical-article-teaser';
 
 interface TopicalArticlesListProps {
   articles: ArticleSummary[];
   text: SiteText['pages']['topical_page']['shared'];
 }
 
-export const TopicalArticlesList = ({
-  articles,
-  text,
-}: TopicalArticlesListProps) => {
+export const TopicalArticlesList = ({ articles }: TopicalArticlesListProps) => {
   return (
-    <Box
-      display="grid"
-      gridColumnGap={{ md: '48px' }}
-      gridTemplateColumns={{ sm: 'repeat(1, 1fr)', md: 'repeat(3, 1fr)' }}
-      spacing={{ _: 3, md: 0 }}
-    >
+    <Box display="grid" gridColumnGap={{ md: '48px' }} gridTemplateColumns={{ sm: 'repeat(1, 1fr)', md: 'repeat(3, 1fr)' }} spacing={{ _: 3, md: 0 }}>
       {articles.map((item) => (
-        <ContentTeaser
-          key={item.slug.current}
-          title={item.title}
-          slug={item.slug.current}
-          cover={item.cover}
-          category={item.category}
-          variant="small"
-          isArticle
-          text={text}
-        />
+        <TopicalArticleTeaser key={item.slug.current} title={item.title} slug={item.slug.current} cover={item.cover} category={item.category} />
       ))}
     </Box>
   );

packages/app/src/domain/topical/components/topical-article-teaser.tsx

@@ -0,0 +1,37 @@
+import { colors } from '@corona-dashboard/common';
+import { ArrowIconRight } from '~/components/arrow-icon';
+import { BackgroundImage } from '~/components/background-image';
+import { Box } from '~/components/base';
+import { HeadingLinkWithIcon } from '~/components/link-with-icon';
+import { Text } from '~/components/typography';
+import { space } from '~/style/theme';
+import { ImageBlock } from '~/types/cms';
+
+export interface TopicalArticleTeaserProps {
+  title: string;
+  slug: string;
+  cover: ImageBlock;
+  category: string;
+}
+
+export const TopicalArticleTeaser = ({ title, slug, cover, category }: TopicalArticleTeaserProps) => {
+  const imageWidth = 90;
+
+  return (
+    <Box display="flex" spacingHorizontal={3} width="100%" alignItems="center" paddingRight={space[3]}>
+      <Box maxWidth={imageWidth} width="100%">
+        <BackgroundImage image={cover} height="66px" sizes={[[imageWidth]]} />
+      </Box>
+
+      <Box maxWidth="25rem" spacing={2}>
+        <Text variant="overline2" color={colors.gray7}>
+          {category}
+        </Text>
+
+        <HeadingLinkWithIcon href={`/artikelen/${slug}`} icon={<ArrowIconRight />} iconPlacement="right" underline>
+          {title}
+        </HeadingLinkWithIcon>
+      </Box>
+    </Box>
+  );
+};

packages/app/src/style/theme.ts

@@ -97,6 +97,7 @@ export const shadows = {
 const sizes = {
   maxWidth: 1400,
   infoWidth: 1000,
+  maxWidthSiteWarning: 930,
   contentWidth: 700,
   maxWidthText: 600,
 } as const;