All files / src/shared/SidePanel GiveSidePanel.style.tsx

100% Statements 6/6
84.61% Branches 11/13
100% Functions 4/4
100% Lines 6/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51                  143x   6119x   1494x                 143x   1529x                     231x                              
import { Box, styled } from "@mui/material";
import { CustomTheme } from "@theme/v2/palette.interface";
 
export interface PanelContainerProps {
  isSinglePanelOnly?: boolean;
  isMobileView: boolean;
  containerWidth: number;
}
 
export const FirstPanelContainer = styled(Box, {
  shouldForwardProp: (prop) =>
    prop !== "isMobileView" && prop !== "containerWidth",
})<PanelContainerProps>(
  ({ isMobileView, containerWidth }: PanelContainerProps) => ({
    flex: 1,
    ...(!isMobileView && {
      minWidth: containerWidth,
      maxWidth: containerWidth,
    }),
  }),
);
 
export const SecondPanelContainer = styled(Box, {
  shouldForwardProp: (prop) =>
    prop !== "isSinglePanelOnly" &&
    prop !== "isMobileView" &&
    prop !== "containerWidth",
})<PanelContainerProps>(
  ({
    theme,
    isSinglePanelOnly,
    isMobileView,
    containerWidth,
  }: {
    theme: CustomTheme;
  } & PanelContainerProps) => ({
    height: "100%",
    width: isMobileView ? "100%" : containerWidth,
    maxWidth: isMobileView ? "100%" : containerWidth,
    backgroundColor: theme.palette.surface?.secondary,
    ...(!isSinglePanelOnly && {
      borderLeft: `1px solid ${theme.palette.border?.primary}`,
      boxShadow: theme.customs?.shadows.left,
    }),
    position: "absolute",
    right: 0,
    top: 0,
    zIndex: 1000,
  }),
);