Merge pull request #906 from Vidit-Kushwaha/fix/panel

fix: styling in panel component

Author: amitamrutiya

src/custom/Panel/Panel.tsx

@@ -1,18 +1,19 @@
 import { Resizable } from 're-resizable';
 import React from 'react';
 import Draggable from 'react-draggable';
-import { Box, BoxProps, IconButton, Tooltip } from '../../base';
-import { CloseIcon, CollapseAllIcon, ExpandAllIcon } from '../../icons';
-import { PanelDragHandleIcon } from '../../icons/PanelDragHandle';
-import { useTheme } from '../../theme';
+import { Box, BoxProps, Tooltip } from '../../base';
+import { CloseIcon, CollapseAllIcon, ExpandAllIcon, FullScreenIcon } from '../../icons';
+import { SistentThemeProviderWithoutBaseLine, useTheme } from '../../theme';
 import { ErrorBoundary } from '../ErrorBoundary';
 import {
+  CustomIconButton,
   DragHandle,
   DrawerHeader,
   HeaderActionsContainer,
   HeaderContainer,
   PanelBody,
   PanelContainer,
+  PanelTitle,
   ResizableContent
 } from './style';
 
@@ -30,6 +31,8 @@ export type PanelProps = {
     top?: string | number;
     bottom?: string | number;
   };
+  minimizePanel?: () => void;
+  title?: string;
 };
 
 const Panel_: React.FC<PanelProps> = ({
@@ -40,7 +43,9 @@ const Panel_: React.FC<PanelProps> = ({
   toggleExpandAll,
   handleClose,
   intitialPosition,
-  sx
+  sx,
+  minimizePanel,
+  title = 'Debug Panel'
 }) => {
   const theme = useTheme();
   if (!isOpen) return null;
@@ -70,22 +75,26 @@ const Panel_: React.FC<PanelProps> = ({
                   <Box display="flex" justifyContent="flex-end" padding="8px">
                     {toggleExpandAll && (
                       <Tooltip title={areAllExpanded ? 'Collapse All' : 'Expand All'}>
-                        <IconButton onClick={toggleExpandAll}>
+                        <CustomIconButton onClick={toggleExpandAll}>
                           {areAllExpanded ? <CollapseAllIcon /> : <ExpandAllIcon />}
-                        </IconButton>
+                        </CustomIconButton>
                       </Tooltip>
                     )}
                   </Box>
-                  <DragHandle>
-                    <PanelDragHandleIcon />
-                  </DragHandle>
+                  <DragHandle />
                   <HeaderContainer>
                     <HeaderActionsContainer
                       id={`${id}-panel-header-actions-container`}
                     ></HeaderActionsContainer>
-                    <IconButton onClick={handleClose}>
-                      <CloseIcon />
-                    </IconButton>
+                    <PanelTitle>{title}</PanelTitle>
+                    {minimizePanel && (
+                      <CustomIconButton onClick={minimizePanel}>
+                        <FullScreenIcon fill={theme.palette.common.white} />
+                      </CustomIconButton>
+                    )}
+                    <CustomIconButton onClick={handleClose}>
+                      <CloseIcon fill={theme.palette.common.white} />
+                    </CustomIconButton>
                   </HeaderContainer>
                 </DrawerHeader>
               </div>
@@ -99,5 +108,9 @@ const Panel_: React.FC<PanelProps> = ({
 };
 
 export const Panel: React.FC<PanelProps> = ({ ...props }) => {
-  return <Panel_ {...props} />;
+  return (
+    <SistentThemeProviderWithoutBaseLine>
+      <Panel_ {...props} />;
+    </SistentThemeProviderWithoutBaseLine>
+  );
 };

src/custom/Panel/style.tsx

@@ -1,6 +1,7 @@
 import { ListItemProps } from '@mui/material';
-import { Box, ListItem } from '../../base';
-import { styled } from '../../theme';
+import { Box, IconButton, ListItem } from '../../base';
+import { PanelDragHandleIcon } from '../../icons/PanelDragHandle';
+import { accentGrey, black, styled } from '../../theme';
 import { PanelProps } from './Panel';
 
 export const ListHeader = styled(ListItem)(({ theme }) => ({
@@ -67,7 +68,7 @@ export const DrawerHeader = styled('div')(({ theme }) => ({
 
 export const PanelBody = styled(Box)(({ theme }) => ({
   padding: theme.spacing(2),
-  backgroundColor: theme.palette.background.surfaces,
+  backgroundColor: accentGrey[10],
   overflow: 'auto',
   flex: 1,
   minHeight: 0
@@ -88,19 +89,20 @@ export const PanelContainer = styled(Box)<{ intitialPosition: PanelProps['intiti
     zIndex: 99999,
     position: 'absolute',
     backgroundColor: theme.palette.background.blur?.light,
-    boxShadow: '0 4px 16px #05003812',
+    boxShadow: `0 4px 16px ${black}`,
     maxHeight: '80%',
     display: 'flex',
     boxSizing: 'border-box',
     ...intitialPosition
   })
 );
 
-export const DragHandle = styled('div')({
+export const DragHandle = styled(PanelDragHandleIcon)(({ theme }) => ({
+  fill: theme.palette.common.white,
   position: 'absolute',
-  top: '-3rem',
+  top: '-0.3rem',
   left: '50%'
-});
+}));
 
 export const HeaderActionsContainer = styled('div')({
   display: 'flex',
@@ -115,3 +117,15 @@ export const HeaderContainer = styled('div')({
   alignItems: 'center',
   flex: '1'
 });
+
+export const CustomIconButton = styled(IconButton)(({ theme }) => ({
+  color: theme.palette.common.white
+}));
+
+export const PanelTitle = styled('div')(() => ({
+  position: 'absolute',
+  left: '0',
+  right: '0',
+  marginInline: 'auto',
+  width: 'fit-content'
+}));