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

@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 <[email protected]>
twentyhq · Jul 28, 2024 · 75e0e14 · 75e0e14
1 parent 9d51af3
commit 75e0e14
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 33 deletions.
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx
@@ -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;
 `;
 

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
@@ -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>
       )}
     </>
   );