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

Various design fixes on side panel (#11165)

Browse Source 
- Fix background color
- Fix Menu Item height
- Fix Input design
- Fix show page summary card design
This commit is contained in:
Raphaël Bosi
2025-03-25 16:21:10 +01:00
committed by GitHub
parent 45b8a330c6
commit b24046b1bb
8 changed files with 86 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
View File

@ -36,7 +36,7 @@ import { useIsMobile } from 'twenty-ui';
import { FeatureFlagKey } from '~/generated-metadata/graphql';
const StyledCommandMenu = styled(motion.div)`
background: ${({ theme }) => theme.background.secondary};
background: ${({ theme }) => theme.background.primary};
border-left: 1px solid ${({ theme }) => theme.border.color.medium};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
font-family: ${({ theme }) => theme.font.family};

132
packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx
View File

@ -14,8 +14,8 @@ import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import styled from '@emotion/styled';
import { useSetRecoilState } from 'recoil';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { MOBILE_VIEWPORT } from 'twenty-ui';
const MOBILE_NAVIGATION_BAR_HEIGHT = 64;
@ -27,13 +27,6 @@ export type CommandMenuListProps = {
noResults?: boolean;
};
const StyledList = styled.div`
background: ${({ theme }) => theme.background.secondary};
overscroll-behavior: contain;
transition: 100ms ease;
transition-property: height;
`;
const StyledInnerList = styled.div`
max-height: calc(
100dvh - ${COMMAND_MENU_SEARCH_BAR_HEIGHT}px -
@ -86,72 +79,69 @@ export const CommandMenuList = ({
<CommandMenuDefaultSelectionEffect
selectableItemIds={selectableItemIds}
/>
<StyledList>
<ScrollWrapper
contextProviderName="commandMenu"
componentInstanceId={`scroll-wrapper-command-menu`}
>
<StyledInnerList>
<SelectableList
selectableListId="command-menu-list"
hotkeyScope={AppHotkeyScope.CommandMenuOpen}
selectableItemIdArray={selectableItemIds}
onEnter={(itemId) => {
if (itemId === RESET_CONTEXT_TO_SELECTION) {
resetPreviousCommandMenuContext();
return;
}
<ScrollWrapper
contextProviderName="commandMenu"
componentInstanceId={`scroll-wrapper-command-menu`}
>
<StyledInnerList>
<SelectableList
selectableListId="command-menu-list"
hotkeyScope={AppHotkeyScope.CommandMenuOpen}
selectableItemIdArray={selectableItemIds}
onEnter={(itemId) => {
if (itemId === RESET_CONTEXT_TO_SELECTION) {
resetPreviousCommandMenuContext();
return;
}
const command = commands.find((item) => item.id === itemId);
const command = commands.find((item) => item.id === itemId);
if (isDefined(command)) {
const { to, onCommandClick, shouldCloseCommandMenuOnClick } =
command;
if (isDefined(command)) {
const { to, onCommandClick, shouldCloseCommandMenuOnClick } =
command;
onItemClick({
shouldCloseCommandMenuOnClick,
onClick: onCommandClick,
to,
});
}
}}
onSelect={() => {
setHasUserSelectedCommand(true);
}}
>
{children}
{commandGroups.map(({ heading, items }) =>
items?.length ? (
<CommandGroup heading={heading} key={heading}>
{items.map((item) => {
return (
<SelectableItem itemId={item.id} key={item.id}>
<CommandMenuItem
key={item.id}
id={item.id}
Icon={item.Icon}
label={item.label}
description={item.description}
to={item.to}
onClick={item.onCommandClick}
hotKeys={item.hotKeys}
shouldCloseCommandMenuOnClick={
item.shouldCloseCommandMenuOnClick
}
/>
</SelectableItem>
);
})}
</CommandGroup>
) : null,
)}
{noResults && !loading && (
<StyledEmpty>No results found</StyledEmpty>
)}
</SelectableList>
</StyledInnerList>
</ScrollWrapper>
</StyledList>
onItemClick({
shouldCloseCommandMenuOnClick,
onClick: onCommandClick,
to,
});
}
}}
onSelect={() => {
setHasUserSelectedCommand(true);
}}
>
{children}
{commandGroups.map(({ heading, items }) =>
items?.length ? (
<CommandGroup heading={heading} key={heading}>
{items.map((item) => {
return (
<SelectableItem itemId={item.id} key={item.id}>
<CommandMenuItem
id={item.id}
Icon={item.Icon}
label={item.label}
description={item.description}
to={item.to}
onClick={item.onCommandClick}
hotKeys={item.hotKeys}
shouldCloseCommandMenuOnClick={
item.shouldCloseCommandMenuOnClick
}
/>
</SelectableItem>
);
})}
</CommandGroup>
) : null,
)}
{noResults && !loading && (
<StyledEmpty>No results found</StyledEmpty>
)}
</SelectableList>
</StyledInnerList>
</ScrollWrapper>
</>
);
};