fix: Updated Button states for pages and minor UI fix (#6812)

## 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

<img width="305" alt="Screenshot 2024-08-31 at 1 43 29 AM"
src="https://github.com/user-attachments/assets/82852227-e7d2-4327-a8cc-8f9f0e84f488">

<img width="229" alt="Screenshot 2024-08-31 at 1 09 31 AM"
src="https://github.com/user-attachments/assets/4783dd5a-a8ab-41b5-83d5-95425b6bebc4">
<img width="163" alt="Screenshot 2024-08-31 at 1 07 49 AM"
src="https://github.com/user-attachments/assets/33ec9928-6463-4797-bfc4-b40a927ec8ec">

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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}`}
           />
         </DropdownMenuItemsContainer>

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx

@@ -59,6 +59,7 @@ export const RecordTableHeaderPlusButtonContent = () => {
       )}
       <DropdownMenuItemsContainer>
         <UndecoratedLink
+          fullWidth
           to={`/settings/objects/${getObjectSlug(objectMetadataItem)}`}
           onClick={() => {
             setNavigationMemorizedUrl(location.pathname + location.search);

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<HTMLAnchorElement>;
+  fullWidth?: boolean;
 };
 
 export const UndecoratedLink = ({
@@ -18,12 +20,14 @@ export const UndecoratedLink = ({
   to,
   replace = false,
   onClick,
+  fullWidth = false,
 }: UndecoratedLinkProps) => {
   return (
     <StyledUndecoratedLink
       to={to as string}
       replace={replace}
       onClick={onClick}
+      fullWidth={fullWidth}
     >
       {children}
     </StyledUndecoratedLink>

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';
     }
   }};
 `;

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,
+    });
   },
 };

packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx

@@ -235,6 +235,7 @@ export const SettingsObjectFieldEdit = () => {
                 />
                 <Button
                   Icon={IconArchive}
+                  variant="secondary"
                   title="Deactivate"
                   size="small"
                   onClick={handleDeactivate}

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationEditDatabaseConnection.stories.tsx

@@ -35,6 +35,6 @@ export const Default: Story = {
     const canvas = within(canvasElement);
     sleep(100);
 
-    await canvas.findByText('Edit Connection');
+    await canvas.findByText('Edit Connection', undefined, { timeout: 3000 });
   },
 };