From 26ef21340af2030e0b4be0b63176af4c31fc8396 Mon Sep 17 00:00:00 2001
From: VWSCoronaDashboard27 <VWSCoronaDashboard27@users.noreply.github.com>
Date: Wed, 23 Nov 2022 14:41:50 +0100
Subject: [PATCH 1/5] feat: applied a new button design

---
 .../app/src/components/article-detail.tsx     | 72 +++++++------------
 1 file changed, 27 insertions(+), 45 deletions(-)

diff --git a/packages/app/src/components/article-detail.tsx b/packages/app/src/components/article-detail.tsx
index 06f13790e3..b67fc3ca48 100644
--- a/packages/app/src/components/article-detail.tsx
+++ b/packages/app/src/components/article-detail.tsx
@@ -15,6 +15,8 @@ import { RichContent } from './cms/rich-content';
 import { LinkWithIcon } from './link-with-icon';
 import { PublicationDate } from './publication-date';
 import { useBreakpoints } from '~/utils/use-breakpoints';
+import { colors } from '@corona-dashboard/common';
+import { space } from '~/style/theme';
 interface ArticleDetailProps {
   article: Article;
   text: SiteText['pages']['topical_page']['shared'];
@@ -50,29 +52,17 @@ export function ArticleDetail({ article, text }: ArticleDetailProps) {
           <RichContent blocks={article.intro} contentWrapper={ContentBlock} />
         </Box>
 
-        <ContentImage
-          node={article.cover}
-          contentWrapper={ContentBlock}
-          sizes={imageSizes}
-        />
+        <ContentImage node={article.cover} contentWrapper={ContentBlock} sizes={imageSizes} />
       </ContentBlock>
       {!breakpoints.xs
         ? article.imageMobile && (
             <Box mt={4}>
-              <ContentImage
-                node={article.imageMobile}
-                contentWrapper={ContentBlock}
-                sizes={imageSizes}
-              />
+              <ContentImage node={article.imageMobile} contentWrapper={ContentBlock} sizes={imageSizes} />
             </Box>
           )
         : article.imageDesktop && (
             <Box mt={4}>
-              <ContentImage
-                node={article.imageDesktop}
-                contentWrapper={ContentBlock}
-                sizes={imageSizes}
-              />
+              <ContentImage node={article.imageDesktop} contentWrapper={ContentBlock} sizes={imageSizes} />
             </Box>
           )}
       {!!article.content?.length && (
@@ -93,9 +83,7 @@ export function ArticleDetail({ article, text }: ArticleDetailProps) {
       {article.categories && (
         <ContentBlock>
           <Box pb={2} pt={4}>
-            <InlineText color="gray7">
-              {text.secties.artikelen.tags}
-            </InlineText>
+            <InlineText color="gray7">{text.secties.artikelen.tags}</InlineText>
           </Box>
           <Box
             as="ul"
@@ -117,13 +105,7 @@ export function ArticleDetail({ article, text }: ArticleDetailProps) {
                   }}
                   passHref={true}
                 >
-                  <TagAnchor>
-                    {
-                      text.secties.artikelen.categorie_filters[
-                        item as ArticleCategoryType
-                      ]
-                    }
-                  </TagAnchor>
+                  <TagAnchor>{text.secties.artikelen.categorie_filters[item as ArticleCategoryType]}</TagAnchor>
                 </Link>
               </li>
             ))}
@@ -134,25 +116,25 @@ export function ArticleDetail({ article, text }: ArticleDetailProps) {
   );
 }
 
-const TagAnchor = styled.a(
-  css({
-    display: 'block',
-    border: '2px solid transparent',
-    mb: 3,
-    px: 3,
-    py: 2,
-    backgroundColor: 'blue3',
-    color: 'blue8',
-    textDecoration: 'none',
-    transition: '0.1s border-color',
+const TagAnchor = styled.a`
+  display: block;
+  border: 2px solid ${colors.gray4};
+  border-radius: 5px;
+  color: ${colors.black};
+  margin-bottom: ${space[3]};
+  padding: ${space[2]} ${space[3]};
 
-    '&:hover': {
-      borderColor: 'blue8',
-    },
+  &:hover {
+    border: 2px solid ${colors.blue8};
+    background: ${colors.blue8};
+    color: ${colors.white};
+    text-shadow: 0.5px 0px 0px #fff, -0.5px 0px 0px #fff;
+  }
 
-    '&:focus': {
-      outline: '2px dotted',
-      outlineColor: 'blue8',
-    },
-  })
-);
+  &:focus {
+    border: 2px solid ${colors.blue8};
+    background: ${colors.blue8};
+    color: ${colors.white};
+    text-shadow: 0.5px 0px 0px #fff, -0.5px 0px 0px #fff;
+  }
+`;

From 35d8ab7b4e1b72899ab0d2f1d82cf8ead32b3ec1 Mon Sep 17 00:00:00 2001
From: VWSCoronaDashboard27 <VWSCoronaDashboard27@users.noreply.github.com>
Date: Fri, 25 Nov 2022 09:08:49 +0100
Subject: [PATCH 2/5] fix: resolved conversation

---
 packages/app/src/components/article-detail.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/components/article-detail.tsx b/packages/app/src/components/article-detail.tsx
index b67fc3ca48..ac0c44cfc5 100644
--- a/packages/app/src/components/article-detail.tsx
+++ b/packages/app/src/components/article-detail.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { ArrowIconLeft } from '~/components/arrow-icon';
 import { Box } from '~/components/base';
 import { ContentBlock } from '~/components/cms/content-block';
-import { Heading, InlineText } from '~/components/typography';
+import { Heading, InlineText, Anchor } from '~/components/typography';
 import { ArticleCategoryType } from '~/domain/topical/common/categories';
 import { useIntl } from '~/intl';
 import { SiteText } from '~/locale';
@@ -105,7 +105,7 @@ export function ArticleDetail({ article, text }: ArticleDetailProps) {
                   }}
                   passHref={true}
                 >
-                  <TagAnchor>{text.secties.artikelen.categorie_filters[item as ArticleCategoryType]}</TagAnchor>
+                  <StyledTagAnchor>{text.secties.artikelen.categorie_filters[item as ArticleCategoryType]}</StyledTagAnchor>
                 </Link>
               </li>
             ))}
@@ -116,25 +116,25 @@ export function ArticleDetail({ article, text }: ArticleDetailProps) {
   );
 }
 
-const TagAnchor = styled.a`
-  display: block;
-  border: 2px solid ${colors.gray4};
+const StyledTagAnchor = styled(Anchor)`
   border-radius: 5px;
+  border: 2px solid ${colors.gray4};
   color: ${colors.black};
+  display: block;
   margin-bottom: ${space[3]};
   padding: ${space[2]} ${space[3]};
 
   &:hover {
-    border: 2px solid ${colors.blue8};
     background: ${colors.blue8};
+    border: 2px solid ${colors.blue8};
     color: ${colors.white};
-    text-shadow: 0.5px 0px 0px #fff, -0.5px 0px 0px #fff;
+    text-shadow: 0.5px 0px 0px ${colors.white}, -0.5px 0px 0px ${colors.white};
   }
 
   &:focus {
-    border: 2px solid ${colors.blue8};
     background: ${colors.blue8};
+    border: 2px solid ${colors.blue8};
     color: ${colors.white};
-    text-shadow: 0.5px 0px 0px #fff, -0.5px 0px 0px #fff;
+    text-shadow: 0.5px 0px 0px ${colors.white}, -0.5px 0px 0px ${colors.white};
   }
 `;

From 00d2927f889186a9ebc6ff16bd076d0aacf9ef55 Mon Sep 17 00:00:00 2001
From: VWSCoronaDashboard27 <VWSCoronaDashboard27@users.noreply.github.com>
Date: Tue, 29 Nov 2022 13:48:20 +0100
Subject: [PATCH 3/5] fix: resolved conversation

---
 packages/app/src/components/article-detail.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/components/article-detail.tsx b/packages/app/src/components/article-detail.tsx
index ac0c44cfc5..a8ea18002d 100644
--- a/packages/app/src/components/article-detail.tsx
+++ b/packages/app/src/components/article-detail.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { ArrowIconLeft } from '~/components/arrow-icon';
 import { Box } from '~/components/base';
 import { ContentBlock } from '~/components/cms/content-block';
-import { Heading, InlineText, Anchor } from '~/components/typography';
+import { Heading, InlineText, AnchorProps } from '~/components/typography';
 import { ArticleCategoryType } from '~/domain/topical/common/categories';
 import { useIntl } from '~/intl';
 import { SiteText } from '~/locale';
@@ -116,7 +116,7 @@ export function ArticleDetail({ article, text }: ArticleDetailProps) {
   );
 }
 
-const StyledTagAnchor = styled(Anchor)`
+const StyledTagAnchor = styled.a<AnchorProps>`
   border-radius: 5px;
   border: 2px solid ${colors.gray4};
   color: ${colors.black};
@@ -131,10 +131,7 @@ const StyledTagAnchor = styled(Anchor)`
     text-shadow: 0.5px 0px 0px ${colors.white}, -0.5px 0px 0px ${colors.white};
   }
 
-  &:focus {
-    background: ${colors.blue8};
-    border: 2px solid ${colors.blue8};
-    color: ${colors.white};
-    text-shadow: 0.5px 0px 0px ${colors.white}, -0.5px 0px 0px ${colors.white};
+  &:hover:focus-visible {
+    outline: 2px dotted ${colors.magenta3};
   }
 `;

From b3d1e47fddd6bfca9ee94143829d4920f5351acb Mon Sep 17 00:00:00 2001
From: VWSCoronaDashboard27 <VWSCoronaDashboard27@users.noreply.github.com>
Date: Wed, 30 Nov 2022 10:35:01 +0100
Subject: [PATCH 4/5] fix: fixing styling of the button outline

---
 packages/app/src/components/article-detail.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/article-detail.tsx b/packages/app/src/components/article-detail.tsx
index a8ea18002d..255c7acbca 100644
--- a/packages/app/src/components/article-detail.tsx
+++ b/packages/app/src/components/article-detail.tsx
@@ -123,6 +123,7 @@ const StyledTagAnchor = styled.a<AnchorProps>`
   display: block;
   margin-bottom: ${space[3]};
   padding: ${space[2]} ${space[3]};
+  outline-color: ${colors.blue8}!important;
 
   &:hover {
     background: ${colors.blue8};
@@ -132,6 +133,6 @@ const StyledTagAnchor = styled.a<AnchorProps>`
   }
 
   &:hover:focus-visible {
-    outline: 2px dotted ${colors.magenta3};
+    outline: 2px dotted ${colors.magenta3}!important;
   }
 `;

From 83ac4b0c30970f37ac0669ee694c06ba111d4c69 Mon Sep 17 00:00:00 2001
From: VWSCoronaDashboard27 <VWSCoronaDashboard27@users.noreply.github.com>
Date: Wed, 30 Nov 2022 11:12:31 +0100
Subject: [PATCH 5/5] fix: fixing styling of the button outline

---
 packages/app/src/components/article-detail.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/components/article-detail.tsx b/packages/app/src/components/article-detail.tsx
index 255c7acbca..9ceda5a756 100644
--- a/packages/app/src/components/article-detail.tsx
+++ b/packages/app/src/components/article-detail.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { ArrowIconLeft } from '~/components/arrow-icon';
 import { Box } from '~/components/base';
 import { ContentBlock } from '~/components/cms/content-block';
-import { Heading, InlineText, AnchorProps } from '~/components/typography';
+import { Heading, InlineText, Anchor } from '~/components/typography';
 import { ArticleCategoryType } from '~/domain/topical/common/categories';
 import { useIntl } from '~/intl';
 import { SiteText } from '~/locale';
@@ -116,23 +116,26 @@ export function ArticleDetail({ article, text }: ArticleDetailProps) {
   );
 }
 
-const StyledTagAnchor = styled.a<AnchorProps>`
+const StyledTagAnchor = styled(Anchor)`
   border-radius: 5px;
   border: 2px solid ${colors.gray4};
   color: ${colors.black};
   display: block;
   margin-bottom: ${space[3]};
   padding: ${space[2]} ${space[3]};
-  outline-color: ${colors.blue8}!important;
+
+  &:focus:focus-visible {
+    outline: 2px dotted ${colors.blue8};
+  }
 
   &:hover {
     background: ${colors.blue8};
     border: 2px solid ${colors.blue8};
     color: ${colors.white};
     text-shadow: 0.5px 0px 0px ${colors.white}, -0.5px 0px 0px ${colors.white};
-  }
 
-  &:hover:focus-visible {
-    outline: 2px dotted ${colors.magenta3}!important;
+    &:focus-visible {
+      outline: 2px dotted ${colors.magenta3};
+    }
   }
 `;