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
@ -1,10 +1,20 @@
|
||||
'use client';
|
||||
|
||||
import { ResponsiveTimeRange } from '@nivo/calendar';
|
||||
import styled from '@emotion/styled';
|
||||
import { TimeRange } from '@nivo/calendar';
|
||||
|
||||
import { CardContainer } from '@/app/_components/contributors/CardContainer';
|
||||
import { Title } from '@/app/_components/contributors/Title';
|
||||
|
||||
const CalendarContentContainer = styled.div`
|
||||
@media (max-width: 890px) {
|
||||
overflow-x: auto;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const ActivityLog = ({
|
||||
data,
|
||||
}: {
|
||||
@ -16,17 +26,20 @@ export const ActivityLog = ({
|
||||
return (
|
||||
<CardContainer>
|
||||
<Title>Activity</Title>
|
||||
<div style={{ width: '100%', height: '214px' }}>
|
||||
<ResponsiveTimeRange
|
||||
<CalendarContentContainer>
|
||||
<TimeRange
|
||||
height={150}
|
||||
width={725}
|
||||
data={data}
|
||||
emptyColor="#F4EFFF"
|
||||
colors={['#E9DFFF', '#B28FFE', '#915FFD']}
|
||||
dayBorderWidth={2}
|
||||
dayBorderColor="#ffffff"
|
||||
weekdayTicks={[]}
|
||||
weekdayLegendOffset={0}
|
||||
dayBorderWidth={0}
|
||||
dayRadius={4}
|
||||
daySpacing={2}
|
||||
daySpacing={4}
|
||||
/>
|
||||
</div>
|
||||
</CalendarContentContainer>
|
||||
</CardContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@ -52,6 +52,8 @@ const AvatarItem = styled.div`
|
||||
transition:
|
||||
opacity 0.3s ease,
|
||||
visibility 0.3s;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
&:hover .username {
|
||||
|
||||
@ -11,7 +11,6 @@ export const CardContainer = styled.div`
|
||||
background-color: #fafafa;
|
||||
|
||||
@media (max-width: 810px) {
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -9,11 +9,11 @@ const Container = styled.div`
|
||||
width: 100%;
|
||||
max-width: 898px;
|
||||
padding: 40px;
|
||||
|
||||
gap: 40px;
|
||||
@media (max-width: 809px) {
|
||||
width: 100%;
|
||||
padding: 40px 24px 40px 24px;
|
||||
gap: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -4,13 +4,19 @@ import styled from '@emotion/styled';
|
||||
|
||||
const Title = styled.h2`
|
||||
font-size: 56px;
|
||||
font-weight: 600;
|
||||
font-weight: bold;
|
||||
color: #b3b3b3;
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 32px;
|
||||
margin-top: 64px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
@media (max-width: 810px) {
|
||||
font-size: 28px;
|
||||
font-size: 32px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -18,7 +24,8 @@ export const Header = () => {
|
||||
return (
|
||||
<>
|
||||
<Title>
|
||||
Our amazing <br /> <span style={{ color: 'black' }}>Contributors</span>
|
||||
Our amazing <br />
|
||||
<span style={{ color: '#141414' }}>Contributors</span>
|
||||
</Title>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -10,6 +10,10 @@ const ProfileContainer = styled.div`
|
||||
gap: 32px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
@media (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
`;
|
||||
|
||||
const Avatar = styled.div`
|
||||
@ -33,6 +37,10 @@ const Details = styled.div`
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
@media (max-width: 810px) {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
@ -42,7 +50,7 @@ const Details = styled.div`
|
||||
gap: 12px;
|
||||
|
||||
@media (max-width: 810px) {
|
||||
font-size: 24px;
|
||||
font-size: 32px;
|
||||
line-height: 28.8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { CardContainer } from '@/app/_components/contributors/CardContainer';
|
||||
import { Theme } from '@/app/_components/ui/theme/theme';
|
||||
|
||||
const Container = styled(CardContainer)`
|
||||
flex-direction: row;
|
||||
@ -21,8 +22,8 @@ const Container = styled(CardContainer)`
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
color: #b3b3b3;
|
||||
margin: 0;
|
||||
color: ${Theme.text.color.quarternary};
|
||||
margin: 8px;
|
||||
|
||||
@media (max-width: 810px) {
|
||||
font-size: 20px;
|
||||
@ -32,7 +33,7 @@ const Container = styled(CardContainer)`
|
||||
.value {
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
color: #474747;
|
||||
color: ${Theme.text.color.secondary};
|
||||
|
||||
@media (max-width: 810px) {
|
||||
font-size: 32px;
|
||||
@ -72,7 +73,7 @@ export const ProfileInfo = ({
|
||||
</div>
|
||||
<div className="separator"></div>
|
||||
<div className="item">
|
||||
<p className="title">Rank</p>
|
||||
<p className="title">Ranking</p>
|
||||
<span className="value">{rank}%</span>
|
||||
</div>
|
||||
<div className="separator"></div>
|
||||
|
||||
@ -3,6 +3,7 @@ import styled from '@emotion/styled';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
import { PullRequestIcon } from '@/app/_components/ui/icons/SvgIcons';
|
||||
import { Theme } from '@/app/_components/ui/theme/theme';
|
||||
import { formatIntoRelativeDate } from '@/shared-utils/formatIntoRelativeDate';
|
||||
|
||||
const StyledTooltip = styled(Tooltip)``;
|
||||
@ -15,7 +16,7 @@ const Item = styled.div`
|
||||
const StyledTitle = styled.a`
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #474747;
|
||||
color: ${Theme.text.color.secondary};
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
|
||||
@ -27,6 +28,7 @@ const StyledTitle = styled.a`
|
||||
const StyledPrLink = styled.a`
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: ${Theme.text.color.quarternary} !important;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
@ -38,7 +40,8 @@ const StyledDescription = styled.div`
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
color: #b3b3b3;
|
||||
color: ${Theme.text.color.quarternary};
|
||||
margin-top: 4px;
|
||||
|
||||
@media (max-width: 810px) {
|
||||
font-size: 18px;
|
||||
|
||||
@ -10,6 +10,7 @@ const List = styled.div`
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
`;
|
||||
interface PullRequestsProps {
|
||||
list: {
|
||||
|
||||
@ -6,7 +6,6 @@ import { CardContainer } from '@/app/_components/contributors/CardContainer';
|
||||
import { HeartIcon } from '@/app/_components/ui/icons/SvgIcons';
|
||||
|
||||
const StyledTitle = styled.div`
|
||||
display: flex;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
gap: 8px;
|
||||
@ -18,20 +17,21 @@ const StyledTitle = styled.div`
|
||||
|
||||
const StyledHeartIcon = styled(HeartIcon)`
|
||||
@media (max-width: 810px) {
|
||||
display: inline-block !important;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
}
|
||||
`;
|
||||
|
||||
interface ThankYouProps {
|
||||
authorId: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
export const ThankYou = ({ authorId }: ThankYouProps) => {
|
||||
export const ThankYou = ({ username }: ThankYouProps) => {
|
||||
return (
|
||||
<CardContainer>
|
||||
<StyledTitle>
|
||||
Thank you @{authorId} <StyledHeartIcon color="#333333" size="18px" />
|
||||
Thank you @{username} <StyledHeartIcon color="#333333" size="18px" />
|
||||
</StyledTitle>
|
||||
</CardContainer>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user