Merge pull request #22 from omerbenda/fix/resize-handle-style

Fix/resize handle style

Author: omerbenda

src/common/components/themed-resize-handle.tsx

@@ -1,5 +1,4 @@
 import { Box, useTheme } from '@mui/material';
-import { GoGrabber } from 'react-icons/go';
 import {
   PanelResizeHandle,
   PanelResizeHandleProps,
@@ -23,12 +22,16 @@ const ThemedResizeHandle = ({
         justifyContent="center"
         alignItems="center"
         bgcolor={theme.palette.divider}
-        width={direction === 'vertical' ? '16px' : '100%'}
-        height={direction === 'vertical' ? '100%' : '16px'}
+        width={direction === 'vertical' ? '12px' : '100%'}
+        height={direction === 'vertical' ? '100%' : '12px'}
       >
-        <GoGrabber
-          size={16}
-          style={{ rotate: direction === 'horizontal' ? '90deg' : undefined }}
+        <Box
+          width={direction === 'vertical' ? '4px' : '5%'}
+          height={direction === 'vertical' ? '5%' : '4px'}
+          minWidth={direction === 'vertical' ? '4px' : '64px'}
+          minHeight={direction === 'vertical' ? '64px' : '4px'}
+          bgcolor={theme.palette.grey[500]}
+          borderRadius={'9999px'}
         />
       </Box>
     </PanelResizeHandle>

src/pages/main-page/components/http-display/components/http-request-form/http-request-form.tsx

@@ -36,6 +36,7 @@ const HTTPRequestForm = ({
       sx={{
         display: 'flex',
         flexDirection: 'column',
+        borderRadius: 0,
         height: '100%',
         gap: 2,
         padding: 2,

src/pages/main-page/components/http-display/components/http-response/http-response.tsx

@@ -36,6 +36,7 @@ const HTTPResponse = ({ response }: HTTPResponseProps) => {
       sx={{
         display: 'flex',
         flexDirection: 'column',
+        borderRadius: 0,
         overflow: 'hidden',
         height: '100%',
         padding: 2,

src/pages/main-page/components/ws-display/components/ws-connect-form/ws-connection-form.tsx

@@ -29,6 +29,7 @@ const WSConnectForm = ({
       sx={{
         display: 'flex',
         flexDirection: 'column',
+        borderRadius: 0,
         height: '100%',
         gap: 2,
         padding: 2,

src/pages/main-page/components/ws-display/components/ws-connection/ws-connection.tsx

@@ -49,6 +49,7 @@ const WSConnection = ({ connection }: WSConnectionProps) => {
         display: 'flex',
         flexDirection: 'column',
         overflow: 'hidden',
+        borderRadius: 0,
         width: '100%',
         height: '100%',
       }}

src/pages/main-page/main-page.tsx

@@ -97,7 +97,11 @@ const MainPage = () => {
     <Box width="100%" height="100%">
       <PanelGroup direction="horizontal" style={{ width: '100%' }}>
         <Panel defaultSize={25}>
-          <Paper variant="elevation" elevation={1} sx={{ height: '100%' }}>
+          <Paper
+            variant="elevation"
+            elevation={1}
+            sx={{ borderRadius: 0, height: '100%' }}
+          >
             <Sidebar
               recordHistory={recordHistory}
               savedRecords={savedRecords}