Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed left padding for switcher icon on the table checkboxes #4351 #4963

Merged
merged 4 commits into from
May 14, 2024
Merged

Fixed left padding for switcher icon on the table checkboxes #4351 #4963

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8697036
fixed spacing issue in TopBar - Issue Number: 4351
rathodvinod5 Apr 15, 2024
942f750
Revert "fixed spacing issue in TopBar - Issue Number: 4351"
FelixMalfait May 14, 2024
db4f84c
Merge branch 'main' into task/switcher-icon-padding-4351
FelixMalfait May 14, 2024
1a8a5a7
Remove left padding
FelixMalfait May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 12 additions & 3 deletions packages/twenty-front/src/modules/ui/layout/top-bar/TopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,18 @@ type TopBarProps = {
rightComponent?: ReactNode;
bottomComponent?: ReactNode;
displayBottomBorder?: boolean;
removeSpacing?: boolean;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rathodvinod5 Have you identified places where we want to keep the left padding?
We should enforce consistent layout accross the app and we should find a good design rule. If the API has too man parameters that are not justified, it will be harder to maintain

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, currently there are only 2 places from where the component being called.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we remove the padding everywhere? does it make sense?

};

const StyledContainer = styled.div`
display: flex;
flex-direction: column;
`;

const StyledTopBar = styled.div<{ displayBottomBorder: boolean }>`
const StyledTopBar = styled.div<{
displayBottomBorder: boolean;
removeSpacing: boolean;
}>`
align-items: center;
border-bottom: ${({ displayBottomBorder, theme }) =>
displayBottomBorder ? `1px solid ${theme.border.color.light}` : 'none'};
Expand All @@ -25,7 +29,8 @@ const StyledTopBar = styled.div<{ displayBottomBorder: boolean }>`
font-weight: ${({ theme }) => theme.font.weight.medium};
height: 39px;
justify-content: space-between;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-left: ${({ removeSpacing, theme }) =>
removeSpacing ? '0px' : theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
z-index: 7;
`;
Expand All @@ -46,9 +51,13 @@ export const TopBar = ({
rightComponent,
bottomComponent,
displayBottomBorder = true,
removeSpacing = false,
}: TopBarProps) => (
<StyledContainer className={className}>
<StyledTopBar displayBottomBorder={displayBottomBorder}>
<StyledTopBar
displayBottomBorder={displayBottomBorder}
removeSpacing={removeSpacing}
>
<StyledLeftSection>{leftComponent}</StyledLeftSection>
<StyledRightSection>{rightComponent}</StyledRightSection>
</StyledTopBar>
Expand Down
1 change: 1 addition & 0 deletions packages/twenty-front/src/modules/views/components/ViewBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ export const ViewBar = ({
}
/>
}
removeSpacing={true}
/>
</ViewScope>
);
Expand Down