Fix 0.32 bis (#8346)

Various UI fixes according to discussions with Design team
2024-11-22 11:43:34 +03:00 · 2024-11-05 18:14:44 +01:00 · 2024-11-05 18:14:44 +01:00 · 88ba057b2c
commit 88ba057b2c
parent 3793f6c451
12 changed files with 50 additions and 18 deletions
--- a/packages/twenty-front/src/index.css
+++ b/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;
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
+++ b/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;
-  top: -1px;
+  margin-left: -1px;
+  margin-top: -1px;
 `;

 type MultiItemFieldInputProps<T> = {
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
+++ b/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%;
 `;

--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
+++ b/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,
  });

--- a/packages/twenty-front/src/modules/support/components/SupportButton.tsx
+++ b/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} />
+  );
 };
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
+++ b/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?.()}
          />
        )}
--- a/packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx
+++ b/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;
 `;
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx
+++ b/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>
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
+++ b/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;
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
+++ b/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}
--- a/packages/twenty-ui/src/input/button/components/IconButton.tsx
+++ b/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;
--- a/packages/twenty-ui/src/input/button/components/LightIconButton.tsx
+++ b/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>
  );
 };