Improve Timeline design

[Bonapara]

Desired Behavior

• 1. Content should be extended by default (Today only field edits are open by default, not email and calendar events)
• 2. There should be a line in the middle of the gray timeline when it's opened:

[greptile-apps]

Implementation Steps

1. Update Padding:

   • Modify the padding in TimelineItemsContainer.tsx:

     const StyledTimelineContainer = styled.div`
       align-items: center;
       align-self: stretch;
       display: flex;
       flex: 1 0 0;
       flex-direction: column;
       gap: ${({ theme }) => theme.spacing(1)};
       justify-content: flex-start;
       padding: 24px;
       width: calc(100% - 48px);
     `;

2. Extend Content by Default:

   • Ensure the StyledScrollWrapper in TimelineItemsContainer.tsx extends content:

     const StyledScrollWrapper = styled(ScrollWrapper)`
       flex: 1 0 auto;
     `;

3. Add Middle Line:

   • Add a middle line in TimelineActivity.tsx:

     const StyledVerticalLine = styled.div`
       align-self: stretch;
       background: ${({ theme }) => theme.border.color.medium};
       flex-shrink: 0;
       width: 2px;
       margin: 0 auto;
     `;

   • Ensure the line is rendered in the TimelineActivity component:

     {!isLastActivity && (
       <StyledTimelineItemContainer isGap>
         <StyledVerticalLineContainer>
           <StyledVerticalLine />
         </StyledVerticalLineContainer>
       </StyledTimelineItemContainer>
     )}

References

/packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx
/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx
/packages/twenty-front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx
/packages/twenty-front/src/modules/activities/timeline

Ask Greptile

[Bonapara]

/oss.gg 150

[oss-gg]

Thanks for opening an issue! It's live on oss.gg!

[Jemeni11]

/assign

[oss-gg]

Assigned to @Jemeni11! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[Jemeni11]

Hi @Bonapara. I encountered a problem while setting up locally.

https://twenty.com/developers/local-setup#step-3:-set-up-a-postgresql-database

I'm currently on this step and I ran into this error:

I assumed it was solvable by using sudo but I still got an error:

So, I decided to skip this step.

I made it to this step before running into another error
https://twenty.com/developers/local-setup#step-6:-running-the-project

I’m not sure how to resolve this issue. Could you help?

[Bonapara]

You can ask on our #Help Discord @Jemeni11
Thanks!

[Supratim69]

Can I pick this up?

[Bonapara]

Sure @Jemeni11, thanks for contributing!

[Jemeni11]

Hi @Bonapara I'm not sure if I'll be able to work on this yet. I haven't finished fixing up local setup error. That's why I unassigned myself. The discord was helpful, thanks for recommending it.

[Jemeni11]

Hi @Bonapara , I will be unable to work on this. My system can't handle this.

[AshishViradiya153]

/assign

[oss-gg]

You already have an open issue assigned to you here. Once that's closed or unassigned, only then we recommend you to take up more.

[Harsh-Mathur-1503]

/assign

[oss-gg]

Assigned to @Harsh-Mathur-1503! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[ManpreetKhinda]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[oss-gg]

@Harsh-Mathur-1503, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[oss-gg]

@Harsh-Mathur-1503, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[oss-gg]

@Harsh-Mathur-1503, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[attarzai]

/assign

[oss-gg]

Assigned to @attarzai! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[farbodsaraf]

Hi @Bonapara, If it's helpful then I'm happy to chat about getting the Twenty HQ product added to OpenUnited.com and helping to connect these lingering issues with contributors to solve them (they do so in order to build a public portfolio of their work etc). We make work incentivised, discoverable, and accessible, not just for engineers but for cross-functional contributors too so even a designer can contribute to the issue like above. Feel free to reach out to chat: https://www.linkedin.com/in/farbodsaraf/