Fix 0.32 bis (#8346)

Various UI fixes according to discussions with Design team

packages/twenty-front/src/index.css

@@ -9,6 +9,10 @@ html {
   font-size: 13px;
 }
 
+button {
+  font-size: 13px;
+}
+
 /* https://stackoverflow.com/questions/44543157/how-to-hide-the-google-invisible-recaptcha-badge */
 .grecaptcha-badge {
   visibility: hidden !important;

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx

@@ -20,8 +20,8 @@ import { toSpliced } from '~/utils/array/toSpliced';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 
 const StyledDropdownMenu = styled(DropdownMenu)`
-  left: -1px;
+  margin-left: -1px;
-  top: -1px;
+  margin-top: -1px;
 `;
 
 type MultiItemFieldInputProps<T> = {

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx

@@ -51,6 +51,7 @@ const StyledContainer = styled.div`
 
 const StyledContainerWithPadding = styled.div`
   height: calc(100% - 40px);
+  margin-left: ${({ theme }) => theme.spacing(2)};
   width: 100%;
 `;
 

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx

@@ -34,7 +34,13 @@ export const RecordTableCellEditMode = ({
 }: RecordTableCellEditModeProps) => {
   const { refs, floatingStyles } = useFloating({
     placement: 'top-start',
-    middleware: [flip(), offset(-32)],
+    middleware: [
+      flip(),
+      offset({
+        mainAxis: -32,
+        crossAxis: 0,
+      }),
+    ],
     whileElementsMounted: autoUpdate,
   });
 

packages/twenty-front/src/modules/support/components/SupportButton.tsx

@@ -1,8 +1,10 @@
 import styled from '@emotion/styled';
-import { Button, IconHelpCircle } from 'twenty-ui';
+import { Button, IconHelpCircle, LightIconButton } from 'twenty-ui';
 
 import { SupportButtonSkeletonLoader } from '@/support/components/SupportButtonSkeletonLoader';
 import { useSupportChat } from '@/support/hooks/useSupportChat';
+import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
+import { useRecoilValue } from 'recoil';
 
 const StyledButtonContainer = styled.div`
   display: flex;
@@ -11,11 +13,18 @@ const StyledButtonContainer = styled.div`
 export const SupportButton = () => {
   const { loading, isFrontChatLoaded } = useSupportChat();
 
+  const isNavigationDrawerExpanded = useRecoilValue(
+    isNavigationDrawerExpandedState,
+  );
   if (loading) {
     return <SupportButtonSkeletonLoader />;
   }
 
-  return isFrontChatLoaded ? (
+  if (!isFrontChatLoaded) {
+    return;
+  }
+
+  return isNavigationDrawerExpanded ? (
     <StyledButtonContainer>
       <Button
         variant="tertiary"
@@ -24,5 +33,7 @@ export const SupportButton = () => {
         Icon={IconHelpCircle}
       />
     </StyledButtonContainer>
-  ) : null;
+  ) : (
+    <LightIconButton Icon={IconHelpCircle} />
+  );
 };

packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx

@@ -8,6 +8,7 @@ import {
   IconChevronUp,
   IconComponent,
   IconX,
+  LightIconButton,
   MOBILE_VIEWPORT,
   OverflowingTextWithTooltip,
 } from 'twenty-ui';
@@ -119,10 +120,10 @@ export const PageHeader = ({
           </StyledTopBarButtonContainer>
         )}
         {hasClosePageButton && (
-          <IconButton
+          <LightIconButton
             Icon={IconX}
             size="small"
-            variant="tertiary"
+            accent="tertiary"
             onClick={() => onClosePage?.()}
           />
         )}

packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx

@@ -12,6 +12,7 @@ type TopBarProps = {
 const StyledContainer = styled.div`
   border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
   display: flex;
+  margin-left: ${({ theme }) => theme.spacing(2)};
 
   flex-direction: column;
 `;
@@ -27,7 +28,6 @@ const StyledTopBar = styled.div`
   height: 39px;
   justify-content: space-between;
   padding-right: ${({ theme }) => theme.spacing(2)};
-  padding-left: ${({ theme }) => theme.spacing(2)};
 
   z-index: 7;
 `;

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx

@@ -2,9 +2,9 @@ import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNaviga
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
 import {
-  IconButton,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse,
+  LightIconButton,
 } from 'twenty-ui';
 
 const StyledCollapseButton = styled.div`
@@ -13,10 +13,8 @@ const StyledCollapseButton = styled.div`
   color: ${({ theme }) => theme.font.color.light};
   cursor: pointer;
   display: flex;
-  height: ${({ theme }) => theme.spacing(4)};
   justify-content: center;
   user-select: none;
-  width: ${({ theme }) => theme.spacing(4)};
 `;
 
 type NavigationDrawerCollapseButtonProps = {
@@ -41,13 +39,13 @@ export const NavigationDrawerCollapseButton = ({
         )
       }
     >
-      <IconButton
+      <LightIconButton
         Icon={
           direction === 'left'
             ? IconLayoutSidebarLeftCollapse
             : IconLayoutSidebarRightCollapse
         }
-        variant="tertiary"
+        accent="tertiary"
         size="small"
       />
     </StyledCollapseButton>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx

@@ -7,10 +7,10 @@ import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/consta
 import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
+import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { isNonEmptyString } from '@sniptt/guards';
 import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton';
-import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx

@@ -1,7 +1,13 @@
 import styled from '@emotion/styled';
 import { DropResult } from '@hello-pangea/dnd';
 import { MouseEvent, useCallback } from 'react';
-import { IconLock, IconPencil, IconPlus, useIcons } from 'twenty-ui';
+import {
+  IconLock,
+  IconPencil,
+  IconPlus,
+  LightIconButtonAccent,
+  useIcons,
+} from 'twenty-ui';
 
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
@@ -109,6 +115,7 @@ export const ViewPickerListContent = () => {
                         Icon: IconPencil,
                         onClick: (event: MouseEvent<HTMLButtonElement>) =>
                           handleEditViewButtonClick(event, view.id),
+                        accent: 'tertiary' as LightIconButtonAccent,
                       },
                     ].filter(isDefined)}
                     isIconDisplayedOnHoverOnly={true}

packages/twenty-ui/src/input/button/components/IconButton.tsx

@@ -217,7 +217,7 @@ const StyledButton = styled.button<
         return '0';
     }
   }};
-  box-sizing: content-box;
+  box-sizing: border-box;
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   display: flex;
   flex-direction: row;

packages/twenty-ui/src/input/button/components/LightIconButton.tsx

@@ -105,7 +105,11 @@ export const LightIconButton = ({
       active={active}
       title={title}
     >
-      {Icon && <Icon size={theme.icon.size.sm} />}
+      {Icon && (
+        <Icon
+          size={size === 'medium' ? theme.icon.size.md : theme.icon.size.sm}
+        />
+      )}
     </StyledButton>
   );
 };