chore: Update call widget handle colors (RocketChat#37271)

Author: gabriellsh

packages/ui-voip/src/v2/__snapshots__/MediaCallWidget.spec.tsx.snap

@@ -12,11 +12,11 @@ exports[`renders IncomingCall without crashing 1`] = `
       class="rcx-css-1ltrbpz"
     >
       <div
-        class="rcx-box rcx-box--full rcx-css-k50kn1 rcx-css-19jf8qg"
+        class="rcx-box rcx-box--full rcx-css-lyi0e7 rcx-css-11m6c1h"
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-stacked-meatballs rcx-icon rcx-css-dpa92h"
+          class="rcx-box rcx-box--full rcx-icon--name-stacked-meatballs rcx-icon rcx-css-4pvxx3"
         >
           
         </i>
@@ -150,11 +150,11 @@ exports[`renders IncomingCallTransfer without crashing 1`] = `
       class="rcx-css-1ltrbpz"
     >
       <div
-        class="rcx-box rcx-box--full rcx-css-k50kn1 rcx-css-19jf8qg"
+        class="rcx-box rcx-box--full rcx-css-lyi0e7 rcx-css-11m6c1h"
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-stacked-meatballs rcx-icon rcx-css-dpa92h"
+          class="rcx-box rcx-box--full rcx-icon--name-stacked-meatballs rcx-icon rcx-css-4pvxx3"
         >
           
         </i>
@@ -325,11 +325,11 @@ exports[`renders NewCall without crashing 1`] = `
       class="rcx-css-1ltrbpz"
     >
       <div
-        class="rcx-box rcx-box--full rcx-css-k50kn1 rcx-css-19jf8qg"
+        class="rcx-box rcx-box--full rcx-css-lyi0e7 rcx-css-11m6c1h"
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-stacked-meatballs rcx-icon rcx-css-dpa92h"
+          class="rcx-box rcx-box--full rcx-icon--name-stacked-meatballs rcx-icon rcx-css-4pvxx3"
         >
           
         </i>
@@ -502,11 +502,11 @@ exports[`renders OngoingCall without crashing 1`] = `
       class="rcx-css-1ltrbpz"
     >
       <div
-        class="rcx-box rcx-box--full rcx-css-k50kn1 rcx-css-19jf8qg"
+        class="rcx-box rcx-box--full rcx-css-lyi0e7 rcx-css-11m6c1h"
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-stacked-meatballs rcx-icon rcx-css-dpa92h"
+          class="rcx-box rcx-box--full rcx-icon--name-stacked-meatballs rcx-icon rcx-css-4pvxx3"
         >
           
         </i>
@@ -682,11 +682,11 @@ exports[`renders OutgoingCall without crashing 1`] = `
       class="rcx-css-1ltrbpz"
     >
       <div
-        class="rcx-box rcx-box--full rcx-css-k50kn1 rcx-css-19jf8qg"
+        class="rcx-box rcx-box--full rcx-css-lyi0e7 rcx-css-11m6c1h"
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-stacked-meatballs rcx-icon rcx-css-dpa92h"
+          class="rcx-box rcx-box--full rcx-icon--name-stacked-meatballs rcx-icon rcx-css-4pvxx3"
         >
           
         </i>
@@ -803,11 +803,11 @@ exports[`renders OutgoingCallTransfer without crashing 1`] = `
       class="rcx-css-1ltrbpz"
     >
       <div
-        class="rcx-box rcx-box--full rcx-css-k50kn1 rcx-css-19jf8qg"
+        class="rcx-box rcx-box--full rcx-css-lyi0e7 rcx-css-11m6c1h"
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-stacked-meatballs rcx-icon rcx-css-dpa92h"
+          class="rcx-box rcx-box--full rcx-icon--name-stacked-meatballs rcx-icon rcx-css-4pvxx3"
         >
           
         </i>

packages/ui-voip/src/v2/components/Widget/WidgetHandle.tsx

@@ -1,12 +1,19 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Icon } from '@rocket.chat/fuselage';
+import { Box, Icon, Palette } from '@rocket.chat/fuselage';
 import { ComponentProps } from 'react';
 
 import { useDraggableWidget } from './WidgetDraggableContext';
 
 const dragHandle = css`
 	cursor: grab;
 
+	background-color: ${Palette.surface['surface-tint'].toString()};
+	color: ${Palette.text['font-default'].toString()};
+
+	&:hover {
+		background-color: ${Palette.surface['surface-neutral'].toString()};
+		color: ${Palette.text['font-info'].toString()};
+	}
 	&:active {
 		cursor: grabbing;
 	}
@@ -15,17 +22,8 @@ const dragHandle = css`
 const WidgetHandle = (props: ComponentProps<typeof Box>) => {
 	const { handleRef } = useDraggableWidget();
 	return (
-		<Box
-			height={20}
-			bg='surface-tint'
-			display='flex'
-			flexDirection='row'
-			justifyContent='center'
-			className={dragHandle}
-			ref={handleRef}
-			{...props}
-		>
-			<Icon color='info' name='stacked-meatballs' size='x20' />
+		<Box height={20} display='flex' flexDirection='row' justifyContent='center' className={dragHandle} ref={handleRef} {...props}>
+			<Icon name='stacked-meatballs' size='x20' />
 		</Box>
 	);
 };