From b42a892c7b5e1ef5d28f5f85d0f663d5c635e632 Mon Sep 17 00:00:00 2001
From: Ady Beraud <102751374+ady-beraud@users.noreply.github.com>
Date: Fri, 12 Apr 2024 10:15:23 +0200
Subject: [PATCH] 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>
---
 .../_components/contributors/ActivityLog.tsx  |  4 ++++
 .../app/_components/ui/layout/Breadcrumbs.tsx |  1 +
 .../_components/ui/layout/FooterDesktop.tsx   |  4 ++++
 .../utils/get-activity-end-date.tsx           | 22 +++++++++++++++++++
 4 files changed, 31 insertions(+)
 create mode 100644 packages/twenty-website/src/app/contributors/utils/get-activity-end-date.tsx

diff --git a/packages/twenty-website/src/app/_components/contributors/ActivityLog.tsx b/packages/twenty-website/src/app/_components/contributors/ActivityLog.tsx
index 18323a6b7..34c7b739f 100644
--- a/packages/twenty-website/src/app/_components/contributors/ActivityLog.tsx
+++ b/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={[]}
diff --git a/packages/twenty-website/src/app/_components/ui/layout/Breadcrumbs.tsx b/packages/twenty-website/src/app/_components/ui/layout/Breadcrumbs.tsx
index 88a4a6310..c3df927a5 100644
--- a/packages/twenty-website/src/app/_components/ui/layout/Breadcrumbs.tsx
+++ b/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;
   }
 `;
 
diff --git a/packages/twenty-website/src/app/_components/ui/layout/FooterDesktop.tsx b/packages/twenty-website/src/app/_components/ui/layout/FooterDesktop.tsx
index 73e092aa9..7b92e25a5 100644
--- a/packages/twenty-website/src/app/_components/ui/layout/FooterDesktop.tsx
+++ b/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',
diff --git a/packages/twenty-website/src/app/contributors/utils/get-activity-end-date.tsx b/packages/twenty-website/src/app/contributors/utils/get-activity-end-date.tsx
new file mode 100644
index 000000000..101d9b041
--- /dev/null
+++ b/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;
+};