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

Fix advanced settings tool icon alignment (#8935)

Browse Source 
Followup of @bosiraphael's design

<img width="333" alt="Screenshot 2024-12-06 at 17 25 45"
src="https://github.com/user-attachments/assets/b744a7a6-99cb-4d4c-b9da-df0661536208">
<img width="614" alt="Screenshot 2024-12-06 at 17 26 19"
src="https://github.com/user-attachments/assets/e9f31fed-66b2-4ed7-a5cd-97a9bc526752">

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
This commit is contained in:
Félix Malfait
2024-12-06 18:07:37 +01:00
committed by GitHub
parent 9bbb963a08
commit b2be2fb398
7 changed files with 108 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx
View File

@ -3,7 +3,7 @@ import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/st
import styled from '@emotion/styled';
import { AnimatePresence, motion } from 'framer-motion';
import { useRecoilValue } from 'recoil';
import { IconTool, MAIN_COLORS } from 'twenty-ui';
import { IconPoint, MAIN_COLORS } from 'twenty-ui';
const StyledAdvancedWrapper = styled.div`
position: relative;
@ -11,10 +11,9 @@ const StyledAdvancedWrapper = styled.div`
`;
const StyledIconContainer = styled.div`
border-right: 1px solid ${MAIN_COLORS.yellow};
display: flex;
height: 100%;
left: ${({ theme }) => theme.spacing(-6)};
left: ${({ theme }) => theme.spacing(-4)};
position: absolute;
top: 0;
`;
@ -22,8 +21,8 @@ const StyledIconContainer = styled.div`
const StyledContent = styled.div`
width: 100%;
`;
const StyledIconTool = styled(IconTool)`
margin-right: ${({ theme }) => theme.spacing(0.5)};
const StyledIconPoint = styled(IconPoint)`
margin-right: 0;
`;
type AdvancedSettingsWrapperProps = {
@ -56,7 +55,11 @@ export const AdvancedSettingsWrapper = ({
<StyledAdvancedWrapper>
{!hideIcon && (
<StyledIconContainer>
<StyledIconTool size={12} color={MAIN_COLORS.yellow} />
<StyledIconPoint
size={12}
color={MAIN_COLORS.yellow}
fill={MAIN_COLORS.yellow}
/>
</StyledIconContainer>
)}
<StyledContent>{children}</StyledContent>

50
packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
View File

@ -12,10 +12,10 @@ import {
IconHierarchy2,
IconKey,
IconMail,
IconPoint,
IconRocket,
IconServer,
IconSettings,
IconTool,
IconUserCircle,
IconUsers,
MAIN_COLORS,
@ -51,18 +51,19 @@ type SettingsNavigationItem = {
};
const StyledIconContainer = styled.div`
border-right: 1px solid ${MAIN_COLORS.yellow};
position: absolute;
left: ${({ theme }) => theme.spacing(-5)};
height: 100%;
display: flex;
align-items: center;
`;
const StyledContainer = styled.div`
position: relative;
`;
const StyledIconTool = styled(IconTool)`
margin-right: ${({ theme }) => theme.spacing(0.5)};
const StyledIconPoint = styled(IconPoint)`
margin-right: 0;
`;
export const SettingsNavigationDrawerItems = () => {
@ -190,7 +191,11 @@ export const SettingsNavigationDrawerItems = () => {
{isAdvancedModeEnabled && (
<StyledContainer>
<StyledIconContainer>
<StyledIconTool size={12} color={MAIN_COLORS.yellow} />
<StyledIconPoint
size={12}
color={MAIN_COLORS.yellow}
fill={MAIN_COLORS.yellow}
/>
</StyledIconContainer>
<SettingsNavigationDrawerItem
label="Security"
@ -210,26 +215,41 @@ export const SettingsNavigationDrawerItems = () => {
exit="exit"
variants={motionAnimationVariants}
>
<StyledContainer>
<StyledIconContainer>
<StyledIconTool size={12} color={MAIN_COLORS.yellow} />
</StyledIconContainer>
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Developers" />
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Developers" />
<StyledContainer>
<StyledIconContainer>
<StyledIconPoint
size={12}
color={MAIN_COLORS.yellow}
fill={MAIN_COLORS.yellow}
/>
</StyledIconContainer>
<SettingsNavigationDrawerItem
label="API & Webhooks"
path={SettingsPath.Developers}
Icon={IconCode}
/>
{isFunctionSettingsEnabled && (
</StyledContainer>
{isFunctionSettingsEnabled && (
<StyledContainer>
<StyledIconContainer>
<StyledIconPoint
size={12}
color={MAIN_COLORS.yellow}
fill={MAIN_COLORS.yellow}
/>
</StyledIconContainer>
<SettingsNavigationDrawerItem
label="Functions"
path={SettingsPath.ServerlessFunctions}
Icon={IconFunction}
/>
)}
</NavigationDrawerSection>
</StyledContainer>
</StyledContainer>
)}
</NavigationDrawerSection>
</motion.div>
)}
</AnimatePresence>