From d9650fd5cf9699e36dfd7feadf3e21b026897c50 Mon Sep 17 00:00:00 2001 From: Harshit Singh <73997189+harshit078@users.noreply.github.com> Date: Sat, 31 Aug 2024 18:29:11 +0530 Subject: [PATCH] fix: Updated Button states for pages and minor UI fix (#6812) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description #6811 - Deleted button lacked `accent danger` on options menu - Customize fields `onhover` lacked width to cover entire div tag - Deactivate button lacked variant ## After Screenshot 2024-08-31 at 1 43 29 AM Screenshot 2024-08-31 at 1 09 31 AM Screenshot 2024-08-31 at 1 07 49 AM --------- Co-authored-by: Charles Bochet --- .../components/RecordIndexOptionsDropdownContent.tsx | 1 + .../components/RecordTableHeaderPlusButtonContent.tsx | 1 + .../ui/navigation/link/components/UndecoratedLink.tsx | 6 +++++- .../menu-item/internals/components/StyledMenuItemBase.tsx | 2 +- .../src/pages/auth/__stories__/PasswordReset.stories.tsx | 6 ++++-- .../pages/settings/data-model/SettingsObjectFieldEdit.tsx | 1 + .../SettingsIntegrationEditDatabaseConnection.stories.tsx | 2 +- 7 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx index 9a5a050bc..ea4d0d93f 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx @@ -166,6 +166,7 @@ export const RecordIndexOptionsDropdownContent = ({ closeDropdown(); }} LeftIcon={IconTrash} + accent="danger" text={`Deleted ${objectNamePlural}`} /> diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx index 1766407a0..f258a9213 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx @@ -59,6 +59,7 @@ export const RecordTableHeaderPlusButtonContent = () => { )} { setNavigationMemorizedUrl(location.pathname + location.search); diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/UndecoratedLink.tsx b/packages/twenty-front/src/modules/ui/navigation/link/components/UndecoratedLink.tsx index 05d39492e..c5c6e2ed1 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/UndecoratedLink.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/link/components/UndecoratedLink.tsx @@ -2,8 +2,9 @@ import styled from '@emotion/styled'; import React from 'react'; import { Link } from 'react-router-dom'; -const StyledUndecoratedLink = styled(Link)` +const StyledUndecoratedLink = styled(Link)<{ fullWidth: boolean }>` text-decoration: none; + width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')}; `; type UndecoratedLinkProps = { @@ -11,6 +12,7 @@ type UndecoratedLinkProps = { children: React.ReactNode; replace?: boolean; onClick?: React.MouseEventHandler; + fullWidth?: boolean; }; export const UndecoratedLink = ({ @@ -18,12 +20,14 @@ export const UndecoratedLink = ({ to, replace = false, onClick, + fullWidth = false, }: UndecoratedLinkProps) => { return ( {children} diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx index 8ae22c23f..a7827f549 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx @@ -143,7 +143,7 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{ case 'not-allowed': return 'not-allowed'; default: - return 'default'; + return 'pointer'; } }}; `; diff --git a/packages/twenty-front/src/pages/auth/__stories__/PasswordReset.stories.tsx b/packages/twenty-front/src/pages/auth/__stories__/PasswordReset.stories.tsx index ea98157a1..79bf50e0a 100644 --- a/packages/twenty-front/src/pages/auth/__stories__/PasswordReset.stories.tsx +++ b/packages/twenty-front/src/pages/auth/__stories__/PasswordReset.stories.tsx @@ -1,7 +1,7 @@ import { getOperationName } from '@apollo/client/utilities'; import { Meta, StoryObj } from '@storybook/react'; import { within } from '@storybook/test'; -import { graphql, HttpResponse } from 'msw'; +import { HttpResponse, graphql } from 'msw'; import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser'; import { @@ -65,6 +65,8 @@ export const Default: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - await canvas.findByText('Reset Password'); + await canvas.findByText('Reset Password', undefined, { + timeout: 3000, + }); }, }; diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx index a05e522a3..8453e6837 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx @@ -235,6 +235,7 @@ export const SettingsObjectFieldEdit = () => { />