Refactor ResizablePanelHandle using styled components

Author: dantovska

redisinsight/ui/src/components/base/layout/resize/handle/ResizablePanelHandle.tsx

@@ -1,38 +1,26 @@
 import React from 'react'
 import {
-  PanelResizeHandle,
-  PanelResizeHandleProps,
-} from 'react-resizable-panels'
-import classNames from 'classnames'
-
-import styles from './styles.module.scss'
-
-interface ResizablePanelHandleProps extends PanelResizeHandleProps {
-  direction?: 'horizontal' | 'vertical'
-}
+  HandleContainer,
+  Line,
+  ResizablePanelHandleProps,
+  StyledPanelResizeHandle,
+} from './resizable-panel-handle.styles'
 
 const ResizablePanelHandle = ({
   className,
   direction = 'vertical',
   ...rest
 }: ResizablePanelHandleProps) => (
-  <PanelResizeHandle
-    className={classNames(
-      className,
-      direction === 'vertical' ? styles.vertical : styles.horizontal,
-    )}
+  <StyledPanelResizeHandle
+    $direction={direction}
+    className={className}
     {...rest}
   >
-    <div
-      className={classNames(
-        styles.handle,
-        direction === 'vertical' ? styles.vertical : '',
-      )}
-    >
-      <div className={styles.line} />
-      <div className={styles.line} />
-    </div>
-  </PanelResizeHandle>
+    <HandleContainer $direction={direction}>
+      <Line />
+      <Line />
+    </HandleContainer>
+  </StyledPanelResizeHandle>
 )
 
 export default ResizablePanelHandle

redisinsight/ui/src/components/base/layout/resize/handle/resizable-panel-handle.styles.ts

@@ -0,0 +1,55 @@
+import {
+  PanelResizeHandle,
+  PanelResizeHandleProps,
+} from 'react-resizable-panels'
+import styled, { css } from 'styled-components'
+
+export interface ResizablePanelHandleProps extends PanelResizeHandleProps {
+  direction?: 'horizontal' | 'vertical'
+}
+
+export const StyledPanelResizeHandle = styled(PanelResizeHandle)<{
+  $direction: 'horizontal' | 'vertical'
+}>`
+  ${({ $direction }) =>
+    $direction === 'vertical'
+      ? css`
+          width: 16px;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        `
+      : css`
+          height: 16px;
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+        `}
+`
+
+export const HandleContainer = styled.div<{
+  $direction: 'horizontal' | 'vertical'
+  children?: React.ReactNode
+}>`
+  width: 16px;
+  height: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+
+  ${({ $direction }) =>
+    $direction === 'vertical' &&
+    css`
+      transform: rotate(90deg);
+    `}
+`
+
+export const Line = styled.div`
+  width: 12px;
+  height: 1px;
+  background-color: #343741;
+`