feat(auth/logo): Add dynamic sizing and conditional twenty logo

[AMoreaux]

This Pull Request adds support for resizing the logo and optionally including the Twenty logo in the component.

• Added size and includeTwentyLogo props to the Logo component.
• Updated the styled components to handle dynamic sizing based on the new size prop.
• Added logic to conditionally render the Twenty logo based on the includeTwentyLogo prop.
• Incorporated the useTheme hook to access theme values directly within the component.

[greptile-apps]

PR Summary

Enhanced the Logo component with dynamic sizing and optional Twenty logo display, improving flexibility for authentication UI customization.

• Added size prop with theme-based default of theme.spacing(12) in /packages/twenty-front/src/modules/auth/components/Logo.tsx
• Implemented dynamic calculations for Twenty logo container dimensions (28/48 of main size) and positioning
• Added includeTwentyLogo boolean prop to control Twenty logo visibility
• Introduced TypeScript interfaces LogoProps and StyledMainLogoProps for better type safety
• Refactored fixed pixel values to use relative sizing based on the size prop

_{1 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile}

[FelixMalfait]

-7/12 ?

[AMoreaux]

The expression ${({ theme }) => -${theme.spacing(3)}} is equivalent to -12px.

Due to CSS limitations, I initially had to use a raw value like -12. However, with the latest commit, I found a workaround that allows us to avoid using absolute values while still utilizing theme.spacing(...).

Otherwise, it's a proportional calculation.

[FelixMalfait]

could you handle that through a default prop value? Something feels not very elegant here

[AMoreaux]

Following a discussion with Thomas, he requested that we swap the twenty logo with the other one.

To accommodate this, I updated the pull request to create a more flexible component by introducing primaryLogo and secondaryLogo properties.

Regarding the size, nothing changes if you retain the default value. However, if you opt for a different size, we need to adjust the logo positions accordingly. This is why you'll notice several proportional calculations.

[FelixMalfait]

I don't think I've ever seen us doing this. Why do we need it here? Seems like a pattern we want to be careful introducing, if we do it we probably have to do it everywhere

[AMoreaux]

It's beneficial to use this type because it ensures that a prop is a Spacing. This doesn't affect the current usage since Spacing is a string. Therefore, if you use a prop of type string, you can provide a Spacing. However, by opting to use a Spacing, as I did in the components, you ensure that the prop will be a spacing.
Additionally, in the Logo component, this is particularly useful because when using the CSS calc function, you need to define the unit in only one of the parameters.

For example:

  calc((${({ theme }) => theme.spacing(3)} * -1) * ${({ size }) => size} / 48);

This is valid because:

• theme.spacing(3) * -1 = -12px
• ${({ size }) => size} = 48
• 48 = 48

Only one parameter returns a unit, so CSS recognizes it as a px spacing.

With a string type instead of a Spacing type, developers might make mistakes, such as using 2rem. So this kind of improvement should increase the DX and the coherence of the global codebase.

[FelixMalfait]

this feels odd, not sure what issue it was trying to solve but we can probably do better no?

[AMoreaux]

It enables the inference of the type. When you use the function with a specified parameter, you can be confident that the return type will be determined. As a result, you won't need to add a condition to verify the return type. For example:

Before:

const myPath = '/img.png'
const myImage = getImageAbsoluteURI(myPath);
// myImage type is string | undefined si I will need to check the type

Now:

const myPath = '/img.png'
const myImage = getImageAbsoluteURI(myPath);
// myImage type is string.  

const myPath: string | null;
const myImage = getImageAbsoluteURI(myPath);
// myImage type is string | undefined because myPath could be null. So to use myImage I will need to add a condition.