Fix grip size on widgets (#15460)

Fix grip size on widgets

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>

packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardHeader.tsx

@@ -19,7 +19,6 @@ export type WidgetCardHeaderProps = {
 const StyledWidgetCardHeader = styled.div`
   align-items: center;
   display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
   height: ${({ theme }) => theme.spacing(6)};
   flex-shrink: 0;
 `;

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

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconGripVertical } from 'twenty-ui/display';
 
@@ -20,12 +21,6 @@ const StyledGripContainer = styled.div`
   &: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 = {
@@ -34,9 +29,14 @@ type WidgetGripProps = {
 };
 
 export const WidgetGrip = ({ className, onClick }: WidgetGripProps) => {
+  const theme = useTheme();
+
   return (
     <StyledGripContainer className={className} onClick={onClick}>
-      <IconGripVertical />
+      <IconGripVertical
+        size={theme.icon.size.sm}
+        color={theme.font.color.extraLight}
+      />
     </StyledGripContainer>
   );
 };