From fbf6efab6f5181cac74d617396514349ef124ca0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 11:42:12 +0100
Subject: [PATCH 01/27] Merge Post & PostContainer classes

---
 src/theme/components/Post.tsx | 48 ++++++++++++-----------------------
 1 file changed, 16 insertions(+), 32 deletions(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index bf2a1f687..2bc67d4ed 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Heading, Text } from 'rebass/styled-components';
 import styled from 'styled-components';
 import { PostDescription } from '../types';
@@ -30,36 +30,6 @@ export const Post = ({
   date,
   time,
 }: PostProps): JSX.Element => (
-  <PostContainer url={url} title={title}>
-    <EllipsisHeading m={3} color="text" fontSize={3}>
-      {title}
-    </EllipsisHeading>
-    {cover && <CoverImage src={cover} alt={title} />}
-    <Text m={3} color="text">
-      {text}
-    </Text>
-    <CardFooter bg="primary" color="background" position="bottom-right" round>
-      <span>{`${date} - `}</span>
-      <TimeReadSpan>{`${Math.ceil(time)} min read`}</TimeReadSpan>
-    </CardFooter>
-  </PostContainer>
-);
-
-const TimeReadSpan = styled.span`
-  text-transform: none;
-`;
-
-type PostContainerProps = {
-  url: string;
-  title: string;
-  children: ReactNode;
-};
-
-const PostContainer = ({
-  url,
-  title,
-  children,
-}: PostContainerProps): JSX.Element => (
   <a
     href={url}
     target="__blank"
@@ -67,11 +37,25 @@ const PostContainer = ({
     style={{ textDecoration: 'none' }}
   >
     <Card p={0} pb={4}>
-      {children}
+      <EllipsisHeading m={3} color="text" fontSize={3}>
+        {title}
+      </EllipsisHeading>
+      {cover && <CoverImage src={cover} alt={title} />}
+      <Text m={3} color="text">
+        {text}
+      </Text>
+      <CardFooter bg="primary" color="background" position="bottom-right" round>
+        <span>{`${date} - `}</span>
+        <TimeReadSpan>{`${Math.ceil(time)} min read`}</TimeReadSpan>
+      </CardFooter>
     </Card>
   </a>
 );
 
+const TimeReadSpan = styled.span`
+  text-transform: none;
+`;
+
 const CoverImage = styled.img`
   width: 100%;
   height: 200px;

From d7139fba64197c664e470d1549f1364ea8c0c1da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 11:43:56 +0100
Subject: [PATCH 02/27] Move PostContainer from Blog to Post

---
 src/pages/blog.tsx            |  5 +++--
 src/theme/components/Post.tsx | 20 +++++++++++++++++++-
 src/theme/sections/Blog.tsx   | 21 +++------------------
 src/theme/sections/News.tsx   | 13 ++-----------
 4 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
index fae6329a4..98ca9dedc 100644
--- a/src/pages/blog.tsx
+++ b/src/pages/blog.tsx
@@ -21,7 +21,8 @@ import Section from '../theme/components/Section';
 import { PAGE, SECTION } from '../theme/utils/constants';
 import { Heading } from 'rebass/styled-components';
 import Triangle from '../theme/components/Triangle';
-import { PostContainer } from '../theme/sections/Blog';
+import { PostContainer } from '../theme/components/Post';
+import { postsContent } from '../content/PostsContent';
 
 const BlogPage = (): JSX.Element => (
   <Layout title={PAGE.blog}>
@@ -37,7 +38,7 @@ const BlogPage = (): JSX.Element => (
       >
         {SECTION.blog}
       </Heading>
-      <PostContainer />
+      <PostContainer posts={postsContent.posts} />
     </Section.Container>
     <Footer />
   </Layout>
diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 2bc67d4ed..099326883 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -17,8 +17,10 @@ import React from 'react';
 import { Heading, Text } from 'rebass/styled-components';
 import styled from 'styled-components';
 import { PostDescription } from '../types';
-import { Card } from './Card';
+import { Card, CardContainer } from './Card';
 import CardFooter from './CardFooter';
+import { Fade } from 'react-awesome-reveal';
+import { cardMinWidth } from '../sections/Blog';
 
 type PostProps = PostDescription;
 
@@ -69,3 +71,19 @@ const EllipsisHeading = styled(Heading)`
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 `;
+
+type PostContainerProps = {
+  posts: PostDescription[];
+};
+
+export const PostContainer = ({ posts }: PostContainerProps): JSX.Element => {
+  return (
+    <CardContainer minWidth={cardMinWidth}>
+      <Fade direction="down" triggerOnce cascade damping={0.5}>
+        {posts.map(p => (
+          <Post {...p} key={p.url} />
+        ))}
+      </Fade>
+    </CardContainer>
+  );
+};
diff --git a/src/theme/sections/Blog.tsx b/src/theme/sections/Blog.tsx
index 0ceac3d07..214143215 100644
--- a/src/theme/sections/Blog.tsx
+++ b/src/theme/sections/Blog.tsx
@@ -14,36 +14,21 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Fade } from 'react-awesome-reveal';
 import Section from '../components/Section';
-import { CardContainer } from '../components/Card';
 import Triangle from '../components/Triangle';
-import { Post } from '../components/Post';
 import { SECTION } from '../utils/constants';
 import { postsContent } from '../../content/PostsContent';
+import { PostContainer } from '../components/Post';
 
 export const cardMinWidth = '350px';
 
 const Blog = (): JSX.Element => (
   <Section.Container id={SECTION.blog} Background={Background}>
     <Section.Header name={SECTION.blog} />
-    <PostContainer />
+    <PostContainer posts={postsContent.posts} />
   </Section.Container>
 );
 
-const PostContainer = (): JSX.Element => {
-  const { posts } = postsContent;
-  return (
-    <CardContainer minWidth={cardMinWidth}>
-      <Fade direction="down" triggerOnce cascade damping={0.5}>
-        {posts.map(p => (
-          <Post {...p} key={p.url} />
-        ))}
-      </Fade>
-    </CardContainer>
-  );
-};
-
 const Background = (): JSX.Element => (
   <>
     <Triangle
@@ -69,4 +54,4 @@ const Background = (): JSX.Element => (
   </>
 );
 
-export { Blog, PostContainer };
+export { Blog };
diff --git a/src/theme/sections/News.tsx b/src/theme/sections/News.tsx
index d2d0def23..1240c1c11 100644
--- a/src/theme/sections/News.tsx
+++ b/src/theme/sections/News.tsx
@@ -14,14 +14,11 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Fade } from 'react-awesome-reveal';
 import Section from '../components/Section';
-import { CardContainer } from '../components/Card';
 import Triangle from '../components/Triangle';
-import { Post } from '../components/Post';
+import { PostContainer } from '../components/Post';
 import { SECTION } from '../utils/constants';
 import { newsContent } from '../../content/NewsContent';
-import { cardMinWidth } from './Blog';
 
 const News = (): JSX.Element => {
   const { news } = newsContent;
@@ -29,13 +26,7 @@ const News = (): JSX.Element => {
   return (
     <Section.Container id={SECTION.news} Background={Background}>
       <Section.Header name={SECTION.news} />
-      <CardContainer minWidth={cardMinWidth}>
-        <Fade direction="down" triggerOnce cascade damping={0.5}>
-          {news.map(p => (
-            <Post {...p} key={p.url} />
-          ))}
-        </Fade>
-      </CardContainer>
+      <PostContainer posts={news} />
     </Section.Container>
   );
 };

From bc1a31ff905237efe6bbd8362d80b11235f2b968 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 11:46:44 +0100
Subject: [PATCH 03/27] add mechanism to not display all the cards in the home
 page

---
 src/theme/components/Post.tsx | 8 ++++++--
 src/theme/sections/Blog.tsx   | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 099326883..e2ccac360 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -74,13 +74,17 @@ const EllipsisHeading = styled(Heading)`
 
 type PostContainerProps = {
   posts: PostDescription[];
+  displayAll?: boolean;
 };
 
-export const PostContainer = ({ posts }: PostContainerProps): JSX.Element => {
+export const PostContainer = ({
+  posts,
+  displayAll,
+}: PostContainerProps): JSX.Element => {
   return (
     <CardContainer minWidth={cardMinWidth}>
       <Fade direction="down" triggerOnce cascade damping={0.5}>
-        {posts.map(p => (
+        {(displayAll ? posts : posts.slice(0, 6)).map(p => (
           <Post {...p} key={p.url} />
         ))}
       </Fade>
diff --git a/src/theme/sections/Blog.tsx b/src/theme/sections/Blog.tsx
index 214143215..b5546d6a9 100644
--- a/src/theme/sections/Blog.tsx
+++ b/src/theme/sections/Blog.tsx
@@ -25,7 +25,7 @@ export const cardMinWidth = '350px';
 const Blog = (): JSX.Element => (
   <Section.Container id={SECTION.blog} Background={Background}>
     <Section.Header name={SECTION.blog} />
-    <PostContainer posts={postsContent.posts} />
+    <PostContainer posts={postsContent.posts} displayAll={false} />
   </Section.Container>
 );
 

From 86b757ebd3a1832fca7fcd4a14a7b22444f48ffc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 12:20:27 +0100
Subject: [PATCH 04/27] Add a button without style

---
 src/theme/components/Post.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index e2ccac360..fea7bd448 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Heading, Text } from 'rebass/styled-components';
+import { Button, Flex, Heading, Text } from 'rebass/styled-components';
 import styled from 'styled-components';
 import { PostDescription } from '../types';
 import { Card, CardContainer } from './Card';
 import CardFooter from './CardFooter';
 import { Fade } from 'react-awesome-reveal';
 import { cardMinWidth } from '../sections/Blog';
+import { Link as RebassLink } from 'rebass';
 
 type PostProps = PostDescription;
 
@@ -87,6 +88,20 @@ export const PostContainer = ({
         {(displayAll ? posts : posts.slice(0, 6)).map(p => (
           <Post {...p} key={p.url} />
         ))}
+        {!displayAll && (
+          <Flex width="100%" justifyContent="end">
+            <Button variant="secondary">
+              <RebassLink
+                href="https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html"
+                target="_blank"
+                color="inherit"
+                style={{ textDecorationLine: 'inherit' }}
+              >
+                More
+              </RebassLink>
+            </Button>
+          </Flex>
+        )}
       </Fade>
     </CardContainer>
   );

From 8c40a9e92eb1a34a3ca34d6abb5350d02d082e1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 12:47:11 +0100
Subject: [PATCH 05/27] Put the button after the card container

---
 src/theme/components/Post.tsx | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index fea7bd448..be27ca2b5 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Button, Flex, Heading, Text } from 'rebass/styled-components';
 import styled from 'styled-components';
 import { PostDescription } from '../types';
@@ -83,13 +83,17 @@ export const PostContainer = ({
   displayAll,
 }: PostContainerProps): JSX.Element => {
   return (
-    <CardContainer minWidth={cardMinWidth}>
-      <Fade direction="down" triggerOnce cascade damping={0.5}>
-        {(displayAll ? posts : posts.slice(0, 6)).map(p => (
-          <Post {...p} key={p.url} />
-        ))}
-        {!displayAll && (
-          <Flex width="100%" justifyContent="end">
+    <>
+      <CardContainer minWidth={cardMinWidth}>
+        <DownFade>
+          {(displayAll ? posts : posts.slice(0, 6)).map(p => (
+            <Post {...p} key={p.url} />
+          ))}
+        </DownFade>
+      </CardContainer>
+      {displayAll === false && (
+        <Flex justifyContent="end" mt="3">
+          <DownFade>
             <Button variant="secondary">
               <RebassLink
                 href="https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html"
@@ -100,9 +104,15 @@ export const PostContainer = ({
                 More
               </RebassLink>
             </Button>
-          </Flex>
-        )}
-      </Fade>
-    </CardContainer>
+          </DownFade>
+        </Flex>
+      )}
+    </>
   );
 };
+
+const DownFade = ({ children }: { children: ReactNode }): JSX.Element => (
+  <Fade direction="down" triggerOnce cascade damping={0.5}>
+    {children}
+  </Fade>
+);

From 52d911c32f4e2f87dfe65675673e2d72ad787043 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 12:49:13 +0100
Subject: [PATCH 06/27] Move constant

---
 src/theme/components/Post.tsx | 3 ++-
 src/theme/sections/Blog.tsx   | 2 --
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index be27ca2b5..91fdc3289 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -20,9 +20,10 @@ import { PostDescription } from '../types';
 import { Card, CardContainer } from './Card';
 import CardFooter from './CardFooter';
 import { Fade } from 'react-awesome-reveal';
-import { cardMinWidth } from '../sections/Blog';
 import { Link as RebassLink } from 'rebass';
 
+const cardMinWidth = '350px';
+
 type PostProps = PostDescription;
 
 export const Post = ({
diff --git a/src/theme/sections/Blog.tsx b/src/theme/sections/Blog.tsx
index b5546d6a9..1e5a70061 100644
--- a/src/theme/sections/Blog.tsx
+++ b/src/theme/sections/Blog.tsx
@@ -20,8 +20,6 @@ import { SECTION } from '../utils/constants';
 import { postsContent } from '../../content/PostsContent';
 import { PostContainer } from '../components/Post';
 
-export const cardMinWidth = '350px';
-
 const Blog = (): JSX.Element => (
   <Section.Container id={SECTION.blog} Background={Background}>
     <Section.Header name={SECTION.blog} />

From 173ba589935c356415841eb75a7b6c2a53baec1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 16:04:11 +0100
Subject: [PATCH 07/27] 2 - Increase font size of the button

---
 src/theme/components/Post.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 91fdc3289..42be4b77b 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -93,7 +93,7 @@ export const PostContainer = ({
         </DownFade>
       </CardContainer>
       {displayAll === false && (
-        <Flex justifyContent="end" mt="3">
+        <Flex justifyContent="end" mt="3" fontSize={[2, 3]}>
           <DownFade>
             <Button variant="secondary">
               <RebassLink

From 74c765a2ab97ee7db23f3a28bfdb2c7a25374194 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 16:17:33 +0100
Subject: [PATCH 08/27] Fix the redirection of the More link

---
 src/theme/components/Post.tsx | 11 +++++------
 src/theme/sections/Blog.tsx   |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 42be4b77b..2f8d8f7a6 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -76,29 +76,28 @@ const EllipsisHeading = styled(Heading)`
 
 type PostContainerProps = {
   posts: PostDescription[];
-  displayAll?: boolean;
+  pageId?: string;
 };
 
 export const PostContainer = ({
   posts,
-  displayAll,
+  pageId,
 }: PostContainerProps): JSX.Element => {
   return (
     <>
       <CardContainer minWidth={cardMinWidth}>
         <DownFade>
-          {(displayAll ? posts : posts.slice(0, 6)).map(p => (
+          {(pageId ? posts.slice(0, 6) : posts).map(p => (
             <Post {...p} key={p.url} />
           ))}
         </DownFade>
       </CardContainer>
-      {displayAll === false && (
+      {pageId && (
         <Flex justifyContent="end" mt="3" fontSize={[2, 3]}>
           <DownFade>
             <Button variant="secondary">
               <RebassLink
-                href="https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html"
-                target="_blank"
+                href={`/${pageId}`}
                 color="inherit"
                 style={{ textDecorationLine: 'inherit' }}
               >
diff --git a/src/theme/sections/Blog.tsx b/src/theme/sections/Blog.tsx
index 1e5a70061..63365107e 100644
--- a/src/theme/sections/Blog.tsx
+++ b/src/theme/sections/Blog.tsx
@@ -23,7 +23,7 @@ import { PostContainer } from '../components/Post';
 const Blog = (): JSX.Element => (
   <Section.Container id={SECTION.blog} Background={Background}>
     <Section.Header name={SECTION.blog} />
-    <PostContainer posts={postsContent.posts} displayAll={false} />
+    <PostContainer posts={postsContent.posts} pageId="blog" />
   </Section.Container>
 );
 

From 135cf1486323a9164e4ed16bbe9f393a4c3a8b8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 16:36:17 +0100
Subject: [PATCH 09/27] 3 - Background white with red shadow

---
 src/theme/components/Post.tsx | 2 +-
 src/theme/rebass-preset.d.ts  | 4 +++-
 src/theme/theme.ts            | 9 ++++++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 2f8d8f7a6..b93bb180c 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -95,7 +95,7 @@ export const PostContainer = ({
       {pageId && (
         <Flex justifyContent="end" mt="3" fontSize={[2, 3]}>
           <DownFade>
-            <Button variant="secondary">
+            <Button variant="more">
               <RebassLink
                 href={`/${pageId}`}
                 color="inherit"
diff --git a/src/theme/rebass-preset.d.ts b/src/theme/rebass-preset.d.ts
index 1a102cec7..64730f0c5 100644
--- a/src/theme/rebass-preset.d.ts
+++ b/src/theme/rebass-preset.d.ts
@@ -137,6 +137,7 @@ declare module '@rebass/preset' {
     outline?: Button;
     secondary?: Button;
     empty?: Button;
+    more?: Button;
   }
 
   interface Button {
@@ -147,7 +148,8 @@ declare module '@rebass/preset' {
     bg?: string;
     border?: number;
     borderRadius?: string;
-    textDecorationLine?: string;
+    borderColor?: string;
+    textDecoration?: string;
     fontSize?: number;
     fontWeight?: string;
     boxShadow?: string;
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index c12251b3c..51568c978 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -33,11 +33,18 @@ export const theme: Theme = {
       bg: 'transparent',
     },
     secondary: {
-      textDecorationLine: 'none',
+      textDecoration: 'none',
       color: colors.background,
       bg: colors.secondary,
       fontWeight: '600',
     },
+    more: {
+      textDecoration: 'none',
+      color: colors.text,
+      bg: colors.background,
+      fontWeight: '600',
+      boxShadow: 'inset 0 0 4px red',
+    },
   },
   fonts: {
     body: 'Cabin, Open Sans, sans-serif',

From 850449b1262dbe02fc0e3ba7d94a2e7b7026f2d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 16:37:30 +0100
Subject: [PATCH 10/27] 4 - With shadow primary

---
 src/theme/theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 51568c978..610a2a487 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -43,7 +43,7 @@ export const theme: Theme = {
       color: colors.text,
       bg: colors.background,
       fontWeight: '600',
-      boxShadow: 'inset 0 0 4px red',
+      boxShadow: `inset 0 0 5px ${colors.primary}`,
     },
   },
   fonts: {

From 14d32cb53ea2964075499dc255f5118984a45b04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 16:40:04 +0100
Subject: [PATCH 11/27] 5 - grey shadow & red text

---
 src/theme/theme.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 610a2a487..ef0d7690e 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -40,10 +40,10 @@ export const theme: Theme = {
     },
     more: {
       textDecoration: 'none',
-      color: colors.text,
+      color: colors.secondary,
       bg: colors.background,
       fontWeight: '600',
-      boxShadow: `inset 0 0 5px ${colors.primary}`,
+      boxShadow: `inset 0 0 5px ${colors.muted}`,
     },
   },
   fonts: {

From 8bc1851682c32ea30eaf5d20eee8d56b7af34072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 16:41:08 +0100
Subject: [PATCH 12/27] 6 - Center button

---
 src/theme/components/Post.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index b93bb180c..4b8cd3622 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -93,7 +93,7 @@ export const PostContainer = ({
         </DownFade>
       </CardContainer>
       {pageId && (
-        <Flex justifyContent="end" mt="3" fontSize={[2, 3]}>
+        <Flex justifyContent="center" mt="3" fontSize={[2, 3]}>
           <DownFade>
             <Button variant="more">
               <RebassLink

From 1dc83d3e404b4db2cc05293b9c56db5c1972145a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 16:42:58 +0100
Subject: [PATCH 13/27] 7 - More space between the More button & the card
 container

---
 src/theme/components/Post.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 4b8cd3622..043e1d26f 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -93,7 +93,7 @@ export const PostContainer = ({
         </DownFade>
       </CardContainer>
       {pageId && (
-        <Flex justifyContent="center" mt="3" fontSize={[2, 3]}>
+        <Flex justifyContent="center" mt="4" fontSize={[2, 3]}>
           <DownFade>
             <Button variant="more">
               <RebassLink

From 02920830bdd15fc626213f03debdbe7fe3a962c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 16:44:13 +0100
Subject: [PATCH 14/27] 8 - Black shadow

---
 src/theme/theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index ef0d7690e..cc4fbe6b2 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -43,7 +43,7 @@ export const theme: Theme = {
       color: colors.secondary,
       bg: colors.background,
       fontWeight: '600',
-      boxShadow: `inset 0 0 5px ${colors.muted}`,
+      boxShadow: `inset 0 0 4px ${colors.text}`,
     },
   },
   fonts: {

From f97d1057c9302df71ee082a69475de51a96d09eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 17:27:29 +0100
Subject: [PATCH 15/27] 9 - Not shadow, same border as cards

---
 src/theme/rebass-preset.d.ts | 3 +--
 src/theme/theme.ts           | 3 ++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/theme/rebass-preset.d.ts b/src/theme/rebass-preset.d.ts
index 64730f0c5..8348c6207 100644
--- a/src/theme/rebass-preset.d.ts
+++ b/src/theme/rebass-preset.d.ts
@@ -146,9 +146,8 @@ declare module '@rebass/preset' {
     variant?: string;
     color?: string;
     bg?: string;
-    border?: number;
+    border?: number | string;
     borderRadius?: string;
-    borderColor?: string;
     textDecoration?: string;
     fontSize?: number;
     fontWeight?: string;
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index cc4fbe6b2..c1a0e6664 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -43,7 +43,8 @@ export const theme: Theme = {
       color: colors.secondary,
       bg: colors.background,
       fontWeight: '600',
-      boxShadow: `inset 0 0 4px ${colors.text}`,
+      border: '1px solid rgba(0,0,0,0.2)',
+      //  boxShadow: `inset 0 0 4px ${colors.text}`,
     },
   },
   fonts: {

From 3db704d9231c5c03aa3f4400e842929015b17ad9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 17:28:32 +0100
Subject: [PATCH 16/27] 10 - Border black

---
 src/theme/theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index c1a0e6664..4f78ca1bf 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -43,7 +43,7 @@ export const theme: Theme = {
       color: colors.secondary,
       bg: colors.background,
       fontWeight: '600',
-      border: '1px solid rgba(0,0,0,0.2)',
+      border: `1px solid ${colors.text}`,
       //  boxShadow: `inset 0 0 4px ${colors.text}`,
     },
   },

From f96fb832bb6790fa9b36a255761bba089b6bedd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 17:32:33 +0100
Subject: [PATCH 17/27] 11 - Border red + text blue + little shadow + margin
 bottom

---
 src/theme/components/Post.tsx | 2 +-
 src/theme/theme.ts            | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 043e1d26f..4e3110e75 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -93,7 +93,7 @@ export const PostContainer = ({
         </DownFade>
       </CardContainer>
       {pageId && (
-        <Flex justifyContent="center" mt="4" fontSize={[2, 3]}>
+        <Flex justifyContent="center" mt="4" mb="2" fontSize={[2, 3]}>
           <DownFade>
             <Button variant="more">
               <RebassLink
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 4f78ca1bf..4ef2415b8 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -40,11 +40,11 @@ export const theme: Theme = {
     },
     more: {
       textDecoration: 'none',
-      color: colors.secondary,
+      color: colors.primary,
       bg: colors.background,
       fontWeight: '600',
-      border: `1px solid ${colors.text}`,
-      //  boxShadow: `inset 0 0 4px ${colors.text}`,
+      border: `3px solid ${colors.secondary}`,
+      boxShadow: `inset 0 0 2px ${colors.muted}`,
     },
   },
   fonts: {

From 2c9e89d30ac05a319c20850ef78d8a4a67705f8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 17 Nov 2021 17:45:28 +0100
Subject: [PATCH 18/27] 12 - Change the button padding

---
 src/theme/components/Post.tsx | 8 ++++----
 src/theme/rebass-preset.d.ts  | 2 +-
 src/theme/theme.ts            | 1 +
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 4e3110e75..2979a5493 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -93,8 +93,8 @@ export const PostContainer = ({
         </DownFade>
       </CardContainer>
       {pageId && (
-        <Flex justifyContent="center" mt="4" mb="2" fontSize={[2, 3]}>
-          <DownFade>
+        <DownFade>
+          <Flex justifyContent="center" mt="4" mb="2" fontSize={[2, 3]}>
             <Button variant="more">
               <RebassLink
                 href={`/${pageId}`}
@@ -104,8 +104,8 @@ export const PostContainer = ({
                 More
               </RebassLink>
             </Button>
-          </DownFade>
-        </Flex>
+          </Flex>
+        </DownFade>
       )}
     </>
   );
diff --git a/src/theme/rebass-preset.d.ts b/src/theme/rebass-preset.d.ts
index 8348c6207..76f102a7f 100644
--- a/src/theme/rebass-preset.d.ts
+++ b/src/theme/rebass-preset.d.ts
@@ -141,7 +141,7 @@ declare module '@rebass/preset' {
   }
 
   interface Button {
-    p?: number;
+    p?: number | string;
     m?: number;
     variant?: string;
     color?: string;
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 4ef2415b8..42e7e9d8b 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -45,6 +45,7 @@ export const theme: Theme = {
       fontWeight: '600',
       border: `3px solid ${colors.secondary}`,
       boxShadow: `inset 0 0 2px ${colors.muted}`,
+      p: '8px 10%',
     },
   },
   fonts: {

From 2137116ae060dfb11ef2ee3c6732836b0ac88fae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Thu, 18 Nov 2021 17:20:55 +0100
Subject: [PATCH 19/27] Final rendering

---
 src/theme/components/Post.tsx | 33 ++++++++++++++++++++++-----------
 src/theme/theme.ts            |  9 ---------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 2979a5493..bf02b0c41 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 import React, { ReactNode } from 'react';
-import { Button, Flex, Heading, Text } from 'rebass/styled-components';
+import { Flex, Heading, Text } from 'rebass/styled-components';
 import styled from 'styled-components';
 import { PostDescription } from '../types';
 import { Card, CardContainer } from './Card';
 import CardFooter from './CardFooter';
 import { Fade } from 'react-awesome-reveal';
-import { Link as RebassLink } from 'rebass';
+import { Link } from 'rebass';
+import colors from '../colors.json';
 
 const cardMinWidth = '350px';
 
@@ -95,15 +96,9 @@ export const PostContainer = ({
       {pageId && (
         <DownFade>
           <Flex justifyContent="center" mt="4" mb="2" fontSize={[2, 3]}>
-            <Button variant="more">
-              <RebassLink
-                href={`/${pageId}`}
-                color="inherit"
-                style={{ textDecorationLine: 'inherit' }}
-              >
-                More
-              </RebassLink>
-            </Button>
+            <MoreButton>
+              <StyledLink href={`/${pageId}`}>More</StyledLink>
+            </MoreButton>
           </Flex>
         </DownFade>
       )}
@@ -116,3 +111,19 @@ const DownFade = ({ children }: { children: ReactNode }): JSX.Element => (
     {children}
   </Fade>
 );
+
+const StyledLink = styled(Link)``;
+const MoreButton = styled(Card)`
+  border-width: 2px;
+  padding: 0;
+  color: ${colors.text};
+  background: ${colors.background};
+
+  ${StyledLink} {
+    text-decoration: none;
+    display: block;
+    padding: 8px 70px;
+    font-weight: 600;
+    color: inherit;
+  }
+`;
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 42e7e9d8b..b3e03512b 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -38,15 +38,6 @@ export const theme: Theme = {
       bg: colors.secondary,
       fontWeight: '600',
     },
-    more: {
-      textDecoration: 'none',
-      color: colors.primary,
-      bg: colors.background,
-      fontWeight: '600',
-      border: `3px solid ${colors.secondary}`,
-      boxShadow: `inset 0 0 2px ${colors.muted}`,
-      p: '8px 10%',
-    },
   },
   fonts: {
     body: 'Cabin, Open Sans, sans-serif',

From 0d689a496714211d8093675cb059f12adda05dd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 19 Nov 2021 16:02:46 +0100
Subject: [PATCH 20/27] Simplify the style

---
 src/theme/components/Post.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index bf02b0c41..3c8b18bbd 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -97,7 +97,7 @@ export const PostContainer = ({
         <DownFade>
           <Flex justifyContent="center" mt="4" mb="2" fontSize={[2, 3]}>
             <MoreButton>
-              <StyledLink href={`/${pageId}`}>More</StyledLink>
+              <Link href={`/${pageId}`}>More</Link>
             </MoreButton>
           </Flex>
         </DownFade>
@@ -112,14 +112,11 @@ const DownFade = ({ children }: { children: ReactNode }): JSX.Element => (
   </Fade>
 );
 
-const StyledLink = styled(Link)``;
 const MoreButton = styled(Card)`
   border-width: 2px;
   padding: 0;
-  color: ${colors.text};
-  background: ${colors.background};
 
-  ${StyledLink} {
+  & > a {
     text-decoration: none;
     display: block;
     padding: 8px 70px;

From 93d641778253d0b7014b848ff97cd87d0dc70653 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 19 Nov 2021 16:06:13 +0100
Subject: [PATCH 21/27] Use polymorphic prop to avoid to have too many
 component in the DOM

---
 src/theme/components/Post.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 3c8b18bbd..5151809a7 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -20,8 +20,6 @@ import { PostDescription } from '../types';
 import { Card, CardContainer } from './Card';
 import CardFooter from './CardFooter';
 import { Fade } from 'react-awesome-reveal';
-import { Link } from 'rebass';
-import colors from '../colors.json';
 
 const cardMinWidth = '350px';
 
@@ -96,8 +94,8 @@ export const PostContainer = ({
       {pageId && (
         <DownFade>
           <Flex justifyContent="center" mt="4" mb="2" fontSize={[2, 3]}>
-            <MoreButton>
-              <Link href={`/${pageId}`}>More</Link>
+            <MoreButton as="a" href={`/${pageId}`}>
+              More
             </MoreButton>
           </Flex>
         </DownFade>
@@ -116,11 +114,9 @@ const MoreButton = styled(Card)`
   border-width: 2px;
   padding: 0;
 
-  & > a {
-    text-decoration: none;
-    display: block;
-    padding: 8px 70px;
-    font-weight: 600;
-    color: inherit;
-  }
+  text-decoration: none;
+  display: block;
+  padding: 8px 70px;
+  font-weight: 600;
+  color: inherit;
 `;

From 3ca9270ee847e45a2ebd207faa814f06c4110091 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 19 Nov 2021 17:04:25 +0100
Subject: [PATCH 22/27] Change type and 'as' type

---
 src/theme/components/Card.tsx |  2 +-
 src/theme/components/Post.tsx | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/theme/components/Card.tsx b/src/theme/components/Card.tsx
index d40508131..5c33add1e 100644
--- a/src/theme/components/Card.tsx
+++ b/src/theme/components/Card.tsx
@@ -39,7 +39,7 @@ export const Card = styled(CardRebass).attrs({
   bg: 'background',
   boxShadow: 0,
 })`
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: ${props => props.style?.borderWidth ?? '1px'} solid rgba(0, 0, 0, 0.2);
   position: relative;
   transition: all 0.25s;
   top: 0;
diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 5151809a7..7b2c6f217 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -94,9 +94,13 @@ export const PostContainer = ({
       {pageId && (
         <DownFade>
           <Flex justifyContent="center" mt="4" mb="2" fontSize={[2, 3]}>
-            <MoreButton as="a" href={`/${pageId}`}>
+            <Card
+              as={MoreButton}
+              href={`/${pageId}`}
+              style={{ borderWidth: '2px' }}
+            >
               More
-            </MoreButton>
+            </Card>
           </Flex>
         </DownFade>
       )}
@@ -110,10 +114,7 @@ const DownFade = ({ children }: { children: ReactNode }): JSX.Element => (
   </Fade>
 );
 
-const MoreButton = styled(Card)`
-  border-width: 2px;
-  padding: 0;
-
+const MoreButton = styled.a`
   text-decoration: none;
   display: block;
   padding: 8px 70px;

From 5af40581899660759cf3ceb6e3528eb3144f4f9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 19 Nov 2021 17:07:16 +0100
Subject: [PATCH 23/27] Use props to set padding in LinkInButton

---
 src/theme/components/Post.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 7b2c6f217..2e4765c64 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -95,9 +95,9 @@ export const PostContainer = ({
         <DownFade>
           <Flex justifyContent="center" mt="4" mb="2" fontSize={[2, 3]}>
             <Card
-              as={MoreButton}
+              as={LinkInButton}
               href={`/${pageId}`}
-              style={{ borderWidth: '2px' }}
+              style={{ borderWidth: '2px', padding: '8px 70px' }}
             >
               More
             </Card>
@@ -114,10 +114,10 @@ const DownFade = ({ children }: { children: ReactNode }): JSX.Element => (
   </Fade>
 );
 
-const MoreButton = styled.a`
+const LinkInButton = styled.a`
   text-decoration: none;
   display: block;
-  padding: 8px 70px;
+  padding: ${props => props.style?.padding ?? '8px 16px'};
   font-weight: 600;
   color: inherit;
 `;

From ee431fbf3c53e6ad84b9ea4bb329748468f585e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 19 Nov 2021 17:28:21 +0100
Subject: [PATCH 24/27] Remove unnecessary dynamic styles

---
 src/theme/components/Card.tsx | 2 +-
 src/theme/components/Post.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/theme/components/Card.tsx b/src/theme/components/Card.tsx
index 5c33add1e..d40508131 100644
--- a/src/theme/components/Card.tsx
+++ b/src/theme/components/Card.tsx
@@ -39,7 +39,7 @@ export const Card = styled(CardRebass).attrs({
   bg: 'background',
   boxShadow: 0,
 })`
-  border: ${props => props.style?.borderWidth ?? '1px'} solid rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.2);
   position: relative;
   transition: all 0.25s;
   top: 0;
diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 2e4765c64..bca399273 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -117,7 +117,7 @@ const DownFade = ({ children }: { children: ReactNode }): JSX.Element => (
 const LinkInButton = styled.a`
   text-decoration: none;
   display: block;
-  padding: ${props => props.style?.padding ?? '8px 16px'};
+  padding: '8px 16px';
   font-weight: 600;
   color: inherit;
 `;

From a4ad29efe82389bdbda4016666de0619a708f7c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 19 Nov 2021 17:32:29 +0100
Subject: [PATCH 25/27] Move LinkInButton in Link file

---
 src/theme/components/Footer.tsx     |  2 +-
 src/theme/components/Header.tsx     |  2 +-
 src/theme/components/Link.tsx       | 10 +++++++++-
 src/theme/components/PageHeader.tsx |  2 +-
 src/theme/components/Post.tsx       |  9 +--------
 src/theme/components/Section.tsx    |  2 +-
 6 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/theme/components/Footer.tsx b/src/theme/components/Footer.tsx
index 8e66fbbd8..6102461e4 100644
--- a/src/theme/components/Footer.tsx
+++ b/src/theme/components/Footer.tsx
@@ -18,7 +18,7 @@ import styled from 'styled-components';
 import { Box, Flex, Image, Text } from 'rebass/styled-components';
 import { Fade } from 'react-awesome-reveal';
 import SocialLink from './SocialLink';
-import Link from './Link';
+import { Link } from './Link';
 import { GATSBY_URL, MEDIA_QUERY_SMALL } from '../utils/constants';
 import { landing } from '../../content/LandingContent';
 import { header } from '../../content/HeaderContent';
diff --git a/src/theme/components/Header.tsx b/src/theme/components/Header.tsx
index 3020b66e6..6caf0ca5e 100644
--- a/src/theme/components/Header.tsx
+++ b/src/theme/components/Header.tsx
@@ -23,7 +23,7 @@ import {
   Button,
 } from 'rebass/styled-components';
 import styled from 'styled-components';
-import Link from './Link';
+import { Link } from './Link';
 import { capitalize } from '../utils/string';
 import { SECTION } from '../utils/constants';
 import { getSectionHref } from '../utils/helpers';
diff --git a/src/theme/components/Link.tsx b/src/theme/components/Link.tsx
index 867a881be..68ba0032a 100644
--- a/src/theme/components/Link.tsx
+++ b/src/theme/components/Link.tsx
@@ -54,4 +54,12 @@ const Link = styled.a<Props>`
   }
 `;
 
-export default Link;
+const LinkInButton = styled.a`
+  text-decoration: none;
+  display: block;
+  padding: '8px 16px';
+  font-weight: 600;
+  color: inherit;
+`;
+
+export { Link, LinkInButton };
diff --git a/src/theme/components/PageHeader.tsx b/src/theme/components/PageHeader.tsx
index 096283c53..e3e07ce60 100644
--- a/src/theme/components/PageHeader.tsx
+++ b/src/theme/components/PageHeader.tsx
@@ -25,7 +25,7 @@ import {
 import styled from 'styled-components';
 import { header } from '../../content/HeaderContent';
 import { PAGE } from '../utils/constants';
-import Link from './Link';
+import { Link } from './Link';
 import { capitalize } from '../utils/string';
 
 const PageHeader = (): JSX.Element => {
diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index bca399273..293084436 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -20,6 +20,7 @@ import { PostDescription } from '../types';
 import { Card, CardContainer } from './Card';
 import CardFooter from './CardFooter';
 import { Fade } from 'react-awesome-reveal';
+import { LinkInButton } from './Link';
 
 const cardMinWidth = '350px';
 
@@ -113,11 +114,3 @@ const DownFade = ({ children }: { children: ReactNode }): JSX.Element => (
     {children}
   </Fade>
 );
-
-const LinkInButton = styled.a`
-  text-decoration: none;
-  display: block;
-  padding: '8px 16px';
-  font-weight: 600;
-  color: inherit;
-`;
diff --git a/src/theme/components/Section.tsx b/src/theme/components/Section.tsx
index 2fe59773e..c3a281d44 100644
--- a/src/theme/components/Section.tsx
+++ b/src/theme/components/Section.tsx
@@ -17,7 +17,7 @@ import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { Heading } from 'rebass/styled-components';
 import { Slide } from 'react-awesome-reveal';
-import Link from './Link';
+import { Link } from './Link';
 import { MEDIA_QUERY_SMALL, SECTION } from '../utils/constants';
 import { getSectionHref } from '../utils/helpers';
 

From d066228d78fd9ea5f15629026830ec766e774279 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Mon, 22 Nov 2021 09:50:13 +0100
Subject: [PATCH 26/27] Remove unnecessary added type

---
 src/theme/rebass-preset.d.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/theme/rebass-preset.d.ts b/src/theme/rebass-preset.d.ts
index 76f102a7f..387458c96 100644
--- a/src/theme/rebass-preset.d.ts
+++ b/src/theme/rebass-preset.d.ts
@@ -137,7 +137,6 @@ declare module '@rebass/preset' {
     outline?: Button;
     secondary?: Button;
     empty?: Button;
-    more?: Button;
   }
 
   interface Button {

From 6c49c18fa6a385557d7054148b73b4e450fa22f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Mon, 22 Nov 2021 10:21:40 +0100
Subject: [PATCH 27/27] Fix button background

---
 src/theme/components/Post.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/theme/components/Post.tsx b/src/theme/components/Post.tsx
index 293084436..3ad3c5748 100644
--- a/src/theme/components/Post.tsx
+++ b/src/theme/components/Post.tsx
@@ -21,6 +21,7 @@ import { Card, CardContainer } from './Card';
 import CardFooter from './CardFooter';
 import { Fade } from 'react-awesome-reveal';
 import { LinkInButton } from './Link';
+import colors from '../colors.json';
 
 const cardMinWidth = '350px';
 
@@ -98,7 +99,11 @@ export const PostContainer = ({
             <Card
               as={LinkInButton}
               href={`/${pageId}`}
-              style={{ borderWidth: '2px', padding: '8px 70px' }}
+              style={{
+                borderWidth: '2px',
+                padding: '8px 70px',
+                background: colors.background,
+              }}
             >
               More
             </Card>