Website UI design (#4829)

**Fixed different issues** :
 
- Multiple CSS fixes: font-size, colors, margins, z-index ...
- Fixed hover on contributor avatars
- Added link to contributors in footer
- Made the year in the footer dynamic (2023 --> 2024)
- Added name of contributor in "Thank you" section of Contributor page
- Added footer in small screens
- Made Activity Log Responsive 
- Fixed bug in "saving issues to DB", title was null everywhere. I
needed to implement an "upsert" behaviour to update the existing
database on init

**To be noted :** 

There is the following bug on production happening on mobile when you
refresh a second time :

<img width="1440" alt="Screenshot 2024-04-05 at 01 30 58"
src="https://github.com/twentyhq/twenty/assets/102751374/b935b07a-63dc-463d-8dcb-070ad4ef6db0">


It seems to be related to the following issue on mdx :
[https://github.com/hashicorp/next-mdx-remote/issues/350](https://github.com/hashicorp/next-mdx-remote/issues/350)

I added the following code that fixed this bug for me in development
(this needs to be tested in production) :

```
const serialized = await serialize(content, {
    mdxOptions: {
      development: process.env.NODE_ENV === 'development',
    }
  })
```

---------

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>
This commit is contained in:
Ady Beraud
2024-04-05 08:41:08 +02:00
committed by GitHub
parent e8c58ae541
commit b82519301c
25 changed files with 140 additions and 53 deletions

View File

@ -19,7 +19,7 @@ const FooterContainer = styled.div`
color: rgb(129, 129, 129);
gap: 32px;
@media (max-width: 809px) {
display: none;
padding: 36px 24px;
}
`;
@ -28,6 +28,9 @@ const LeftSideFooter = styled.div`
display: flex;
flex-direction: column;
gap: 16px;
@media (max-width: 809px) {
display: none;
}
`;
const RightSideFooter = styled.div`
@ -35,6 +38,10 @@ const RightSideFooter = styled.div`
justify-content: space-between;
gap: 48px;
height: 146px;
@media (max-width: 809px) {
flex-direction: column;
height: fit-content;
}
`;
const RightSideFooterColumn = styled.div`
@ -96,6 +103,9 @@ export const FooterDesktop = () => {
</RightSideFooterColumn>
<RightSideFooterColumn>
<RightSideFooterColumnTitle>Other</RightSideFooterColumnTitle>
<RightSideFooterLink href="/contributors">
Contributors
</RightSideFooterLink>
<RightSideFooterLink href="/oss-friends">
OSS Friends
</RightSideFooterLink>
@ -120,7 +130,7 @@ export const FooterDesktop = () => {
>
<div>
<span style={{ fontFamily: 'Inter, sans-serif' }}>©</span>
2023 Twenty PBC
{new Date().getFullYear()} Twenty PBC
</div>
<div
style={{