Fix settings navigation advanced design (#7472)

This PR moved the settings navigation to the left and bottom
https://github.com/twentyhq/twenty/pull/7130

Updating the logic to:
-remove logic that move the existing
-add the setting icon to absolute

<img width="264" alt="Capture d’écran 2024-10-07 à 18 04 05"
src="https://github.com/user-attachments/assets/b848a5dd-50e9-48c2-bb50-1dcffa9481ac">
<img width="264" alt="Capture d’écran 2024-10-07 à 18 04 11"
src="https://github.com/user-attachments/assets/3812929c-dce0-410b-8caa-3ea1210af958">
This commit is contained in:
Thomas Trompette
2024-10-07 18:19:00 +02:00
committed by GitHub
parent 8b716f98f7
commit fbb5b3dfd4
6 changed files with 36 additions and 40 deletions

View File

@ -9,6 +9,7 @@ const StyledContainer = styled.div`
display: flex;
width: 100%;
gap: ${({ theme }) => theme.spacing(2)};
position: relative;
`;
const StyledText = styled.span`
@ -20,8 +21,9 @@ const StyledText = styled.span`
const StyledIconContainer = styled.div`
border-right: 1px solid ${MAIN_COLORS.yellow};
display: flex;
height: 16px;
position: absolute;
left: ${({ theme }) => theme.spacing(-5)};
`;
const StyledToggleContainer = styled.div`
@ -50,7 +52,7 @@ export const AdvancedSettingsToggle = () => {
<StyledIconTool size={12} color={MAIN_COLORS.yellow} />
</StyledIconContainer>
<StyledToggleContainer>
<StyledText>Advanced</StyledText>
<StyledText>Advanced:</StyledText>
<Toggle
onChange={onChange}
color={MAIN_COLORS.yellow}