modified UI and activity log in website (#4935)

-Small fixes in UI 
-Added extra columns in contributor activity log when necessary (ex: few
contributions):

**Before:** 

<img width="809" alt="Screenshot 2024-04-11 at 20 37 40"
src="https://github.com/twentyhq/twenty/assets/102751374/d58cebe5-4128-43bb-a649-3c9ac0276c53">

**After:** 

<img width="897" alt="Screenshot 2024-04-11 at 20 37 53"
src="https://github.com/twentyhq/twenty/assets/102751374/7e112f8f-b257-4397-96fa-79e605daab37">

---------

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>

packages/twenty-website/src/app/_components/contributors/ActivityLog.tsx

@@ -5,6 +5,7 @@ import { TimeRange } from '@nivo/calendar';
 
 import { CardContainer } from '@/app/_components/contributors/CardContainer';
 import { Title } from '@/app/_components/contributors/Title';
+import { getActivityEndDate } from '@/app/contributors/utils/get-activity-end-date';
 
 const CalendarContentContainer = styled.div`
   @media (max-width: 890px) {
@@ -23,6 +24,8 @@ export const ActivityLog = ({
   if (!data.length) {
     return null;
   }
+  const endDate = getActivityEndDate(data);
+
   return (
     <CardContainer>
       <Title>Activity</Title>
@@ -31,6 +34,7 @@ export const ActivityLog = ({
           height={150}
           width={725}
           data={data}
+          to={endDate}
           emptyColor="#F4EFFF"
           colors={['#E9DFFF', '#B28FFE', '#915FFD']}
           weekdayTicks={[]}

packages/twenty-website/src/app/_components/ui/layout/Breadcrumbs.tsx

@@ -21,6 +21,7 @@ const InternalLinkItem = styled(Link)`
   color: #b3b3b3;
   &:hover {
     color: ${Theme.text.color.quarternary};
+    text-decoration: underline;
   }
 `;
 

packages/twenty-website/src/app/_components/ui/layout/FooterDesktop.tsx

@@ -77,6 +77,8 @@ export const FooterDesktop = () => {
       <div
         style={{
           width: '100%',
+          maxWidth: '1200px',
+          margin: '0 auto',
           display: 'flex',
           flexDirection: 'row',
           justifyContent: 'space-between',
@@ -121,6 +123,8 @@ export const FooterDesktop = () => {
       <div
         style={{
           width: '100%',
+          maxWidth: '1200px',
+          margin: '0 auto',
           display: 'flex',
           flexDirection: 'row',
           justifyContent: 'space-between',

packages/twenty-website/src/app/contributors/utils/get-activity-end-date.tsx

@@ -0,0 +1,22 @@
+const TOTAL_DAYS_TO_FULL_WIDTH = 232;
+
+export const getActivityEndDate = (
+  activityDates: { value: number; day: string }[],
+) => {
+  const startDate = new Date(activityDates[0].day);
+  const endDate = new Date(activityDates[activityDates.length - 1].day);
+
+  const differenceInMilliseconds = endDate.getTime() - startDate.getTime();
+
+  const numberOfDays = Math.floor(
+    differenceInMilliseconds / (1000 * 60 * 60 * 24),
+  );
+
+  const daysToAdd = TOTAL_DAYS_TO_FULL_WIDTH - numberOfDays;
+
+  if (daysToAdd > 0) {
+    endDate.setDate(endDate.getDate() + daysToAdd);
+  }
+
+  return endDate;
+};