Create widget grip and update title color (#15280)

Changed grip size and stoped using IconButton

packages/twenty-front/src/modules/page-layout/widgets/components/WidgetGrip.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+import { IconGripVertical } from 'twenty-ui/display';
+
+const StyledGripContainer = styled.div`
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  user-select: none;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  box-sizing: border-box;
+
+  &:active {
+    cursor: grabbing;
+    background: ${({ theme }) => theme.background.tertiary};
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.background.tertiary};
+  }
+
+  svg {
+    width: ${({ theme }) => theme.icon.size.sm};
+    height: ${({ theme }) => theme.icon.size.sm};
+    color: ${({ theme }) => theme.font.color.extraLight};
+  }
+`;
+
+type WidgetGripProps = {
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+};
+
+export const WidgetGrip = ({ className, onClick }: WidgetGripProps) => {
+  return (
+    <StyledGripContainer className={className} onClick={onClick}>
+      <IconGripVertical />
+    </StyledGripContainer>
+  );
+};

packages/twenty-front/src/modules/page-layout/widgets/components/WidgetHeader.tsx

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
-import { IconGripVertical, IconX } from 'twenty-ui/display';
+import { IconX } from 'twenty-ui/display';
 import { IconButton } from 'twenty-ui/input';
 
+import { WidgetGrip } from './WidgetGrip';
+
 const StyledHeader = styled.div`
   align-items: center;
   display: flex;
@@ -10,19 +12,8 @@ const StyledHeader = styled.div`
   flex-shrink: 0;
 `;
 
-const StyledDragHandleButton = styled(IconButton)`
-  cursor: grab;
-  display: flex;
-  align-items: center;
-  user-select: none;
-
-  &:active {
-    cursor: grabbing;
-  }
-`;
-
 const StyledTitle = styled.span`
-  color: ${({ theme }) => theme.font.color.secondary};
+  color: ${({ theme }) => theme.font.color.primary};
   flex: 1;
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -44,13 +35,9 @@ export const WidgetHeader = ({
 }: WidgetHeaderProps) => {
   return (
     <StyledHeader>
-      {isInEditMode && (
-        <StyledDragHandleButton
-          Icon={IconGripVertical}
+      {!isEmpty && isInEditMode && (
+        <WidgetGrip
           className="drag-handle"
-          variant="tertiary"
-          size="small"
-          disabled={isEmpty}
           onClick={(e) => e.stopPropagation()}
         />
       )}