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

Update UI to Match Figma Specs: Labels, Buttons, Gaps (#6415)

Browse Source 
@Bonapara 
Done with issue #5910 

![Screenshot from 2024-07-25
22-37-03](https://github.com/user-attachments/assets/6c241f55-81e5-4d3f-b718-b823bc313d67)

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2024-07-28 14:35:10 +05:30
committed by GitHub
parent 9d51af3b41
commit 75e0e1434a
2 changed files with 59 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx
View File

@ -1,16 +1,15 @@
import React from 'react';
import styled from '@emotion/styled';
import React from 'react';
const StyledGroup = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.light};
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
padding-bottom: ${({ theme }) => theme.spacing(2)};
padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(1)};
padding-top: ${({ theme }) => theme.spacing(2)};
text-transform: uppercase;
user-select: none;
`;

87
packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
View File

@ -3,7 +3,7 @@ import { isNonEmptyString } from '@sniptt/guards';
import { useMemo, useRef } from 'react';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { Key } from 'ts-key-enum';
import { Avatar, IconNotes, IconSparkles } from 'twenty-ui';
import { Avatar, IconNotes, IconSparkles, IconX } from 'twenty-ui';
import { useOpenCopilotRightDrawer } from '@/activities/copilot/right-drawer/hooks/useOpenCopilotRightDrawer';
import { copilotQueryState } from '@/activities/copilot/right-drawer/states/copilotQueryState';
@ -33,10 +33,11 @@ import { commandMenuCommandsState } from '../states/commandMenuCommandsState';
import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
import { Command, CommandType } from '../types/Command';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { CommandGroup } from './CommandGroup';
import { CommandMenuItem } from './CommandMenuItem';
export const StyledDialog = styled.div`
const StyledCommandMenu = styled.div`
background: ${({ theme }) => theme.background.secondary};
border-left: 1px solid ${({ theme }) => theme.border.color.medium};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
@ -51,48 +52,63 @@ export const StyledDialog = styled.div`
z-index: 1000;
`;
export const StyledInput = styled.input`
background: ${({ theme }) => theme.background.secondary};
const StyledInputContainer = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.background.transparent.lighter};
border: none;
border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: 0;
color: ${({ theme }) => theme.font.color.primary};
display: flex;
font-size: ${({ theme }) => theme.font.size.lg};
height: 56px;
margin: 0;
outline: none;
position: relative;
padding: 0 ${({ theme }) => theme.spacing(3)};
`;
const StyledInput = styled.input`
border: none;
border-radius: 0;
background-color: transparent;
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.md};
margin: 0;
outline: none;
height: 24px;
padding: ${({ theme }) => theme.spacing(4)};
width: ${({ theme }) => `calc(100% - ${theme.spacing(10)})`};
padding: 0;
width: ${({ theme }) => `calc(100% - ${theme.spacing(8)})`};
&::placeholder {
color: ${({ theme }) => theme.font.color.light};
font-weight: ${({ theme }) => theme.font.weight.medium};
}
`;
const StyledCancelText = styled.span`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
margin-right: 12px;
margin-top: 6px;
position: absolute;
right: 0;
top: 0;
const StyledCloseButtonContainer = styled.div`
align-items: center;
display: flex;
height: 32px;
justify-content: center;
`;
export const StyledList = styled.div`
const StyledList = styled.div`
background: ${({ theme }) => theme.background.secondary};
overscroll-behavior: contain;
transition: 100ms ease;
transition-property: height;
`;
export const StyledInnerList = styled.div`
padding-left: ${({ theme }) => theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(1)};
width: calc(100% - ${({ theme }) => theme.spacing(2)});
const StyledInnerList = styled.div`
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
padding-top: ${({ theme }) => theme.spacing(1)};
width: calc(100% - ${({ theme }) => theme.spacing(4)});
`;
export const StyledEmpty = styled.div`
const StyledEmpty = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.light};
display: flex;
@ -280,14 +296,25 @@ export const CommandMenu = () => {
return (
<>
{isCommandMenuOpened && (
<StyledDialog ref={commandMenuRef}>
<StyledInput
autoFocus
value={commandMenuSearch}
placeholder="Search"
onChange={handleSearchChange}
/>
{!isMobile && <StyledCancelText>Esc to cancel</StyledCancelText>}
<StyledCommandMenu ref={commandMenuRef}>
<StyledInputContainer>
<StyledInput
autoFocus
value={commandMenuSearch}
placeholder="Search"
onChange={handleSearchChange}
/>
{!isMobile && (
<StyledCloseButtonContainer>
<LightIconButton
accent={'tertiary'}
size={'medium'}
Icon={IconX}
onClick={closeCommandMenu}
/>
</StyledCloseButtonContainer>
)}
</StyledInputContainer>
<StyledList>
<ScrollWrapper>
<StyledInnerList>
@ -427,7 +454,7 @@ export const CommandMenu = () => {
</StyledInnerList>
</ScrollWrapper>
</StyledList>
</StyledDialog>
</StyledCommandMenu>
)}
</>
);