admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Advanced toggle alignment (#10844)

Browse Source 
This PR address advanced toggle alignment, especially the left yellow
dot placement.
In other advanced settings navigation drawer, the dot appears -20px to
left, while this was not the case for advanced toggle's dot.
Matched the height and paddings to that of NavigationDrawerItem.

@Bonapara FYI

before:
<img width="399" alt="Screenshot 2025-03-13 at 15 49 21"
src="https://github.com/user-attachments/assets/6dd60b3a-1b2e-43a0-ad28-dc44437460ab"
/>

after:
<img width="401" alt="Screenshot 2025-03-13 at 15 47 43"
src="https://github.com/user-attachments/assets/86e51b07-e84a-413a-8a49-1820c165dc68"
/>

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2025-03-14 22:58:14 +05:30
committed by GitHub
parent c833b1c449
commit f44f42e9a0
7 changed files with 35 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
View File

@ -4,25 +4,27 @@ import { IconPoint } from '@ui/display';
import { Toggle } from '@ui/input';
import { MAIN_COLORS } from '@ui/theme';
import { useId } from 'react';
const StyledContainer = styled.div`
align-items: center;
display: flex;
width: 100%;
gap: ${({ theme }) => theme.spacing(2)};
position: relative;
height: ${({ theme }) => theme.spacing(5)};
padding: ${({ theme }) => theme.spacing(1)};
`;
const StyledText = styled.div`
color: ${({ theme }) => theme.font.color.secondary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
padding: ${({ theme }) => theme.spacing(1)};
`;
const StyledIconContainer = styled.div`
height: 16px;
align-items: center;
display: flex;
left: ${({ theme }) => theme.spacing(-5)};
position: absolute;
left: ${({ theme }) => theme.spacing(-3)};
`;
const StyledToggleContainer = styled.label`
@ -33,10 +35,6 @@ const StyledToggleContainer = styled.label`
width: 100%;
`;
const StyledIconPoint = styled(IconPoint)`
margin-right: 0;
`;
type AdvancedSettingsToggleProps = {
isAdvancedModeEnabled: boolean;
setIsAdvancedModeEnabled: (enabled: boolean) => void;
@ -55,7 +53,7 @@ export const AdvancedSettingsToggle = ({
return (
<StyledContainer>
<StyledIconContainer>
<StyledIconPoint
<IconPoint
size={12}
color={MAIN_COLORS.yellow}
fill={MAIN_COLORS.yellow}