SeedCompany · andrewmurraydavid · Sep 14, 2022 · Sep 14, 2022 · Sep 15, 2022 · Sep 15, 2022
@@ -3,35 +3,37 @@ import {
   AvatarProps as MuiAvatarProps,
   Skeleton,
 } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import { extendSx } from '~/common';
 
 export interface AvatarProps extends MuiAvatarProps {
   loading?: boolean;
 }
 
-const useStyles = makeStyles()(() => ({
-  loading: {
-    backgroundColor: 'transparent',
-  },
-  skeleton: {
-    width: '100%',
-    height: '100%',
-  },
-}));
-
 export const Avatar = ({ loading, ...props }: AvatarProps) => {
-  const { alt, src, srcSet, sizes, children, ...rest } = props;
-  const { classes } = useStyles();
+  const { alt, src, srcSet, sizes, children, sx, ...rest } = props;
   return (
     <MuiAvatar
       {...(loading ? rest : props)}
-      classes={{
-        ...props.classes,
-        colorDefault: loading ? classes.loading : props.classes?.colorDefault,
-      }}
+      sx={[
+        {
+          backgroundColor: 'transparent',
+        },
+        !loading && {
+          color: 'info.main',
+          bgcolor: 'grey.200',
+        },
+        ...extendSx(sx),
+      ]}
+      classes={props.classes}
     >
       {loading ? (
-        <Skeleton variant="rectangular" className={classes.skeleton} />
+        <Skeleton
+          variant="rectangular"
+          sx={{
+            width: '100%',
+            height: '100%',
+          }}
+        />
       ) : (
         children
       )}

@@ -1,8 +1,7 @@
 import { Chip, ChipProps, Skeleton } from '@mui/material';
 import { ReactElement } from 'react';
-import { makeStyles } from 'tss-react/mui';
 import { Except, SetRequired } from 'type-fest';
-import { SecuredProp } from '~/common';
+import { extendSx, SecuredProp } from '~/common';
 import { Redacted } from '../Redacted';
 
 export interface BooleanPropertyProps extends SetRequired<ChipProps, 'label'> {
@@ -11,24 +10,26 @@ export interface BooleanPropertyProps extends SetRequired<ChipProps, 'label'> {
   wrap?: (node: ReactElement) => ReactElement;
 }
 
-const useStyles = makeStyles()(({ palette, shape }) => ({
-  root: {
-    background: palette.info.main,
-    color: palette.info.contrastText,
-    borderRadius: shape.borderRadius,
-    height: 26,
-  },
-}));
-
 export const BooleanProperty = ({
   redacted,
   data,
   wrap,
   ...rest
 }: BooleanPropertyProps) => {
-  const { classes } = useStyles();
-
-  const chip = <Chip {...rest} className={classes.root} />;
+  const chip = (
+    <Chip
+      {...rest}
+      sx={[
+        {
+          background: 'info.main',
+          color: 'info.contrastText',
+          borderRadius: 1,
+          height: 26,
+        },
+        ...extendSx(rest.sx),
+      ]}
+    />
+  );
 
   const out = !data ? (
     <Skeleton>{chip}</Skeleton>

@@ -3,9 +3,10 @@ import { To } from 'history';
 import { isString } from 'lodash';
 import { forwardRef, ReactNode } from 'react';
 import { useMatch } from 'react-router-dom';
+import { StyleProps } from '~/common';
 import { Link, LinkProps } from '../Routing';
 
-export interface BreadcrumbProps {
+export interface BreadcrumbProps extends StyleProps {
   to?: To;
   LinkProps?: Partial<LinkProps>;
   children?: ReactNode;

@@ -1,59 +1,19 @@
-import { Badge, Grid, TooltipProps, Typography } from '@mui/material';
+import { Badge, Grid, Theme, TooltipProps, Typography } from '@mui/material';
 import { startCase } from 'lodash';
 import { cloneElement, isValidElement, ReactElement, ReactNode } from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { mapFromList, UseStyles } from '~/common';
+import { mapFromList, StyleProps } from '~/common';
 import { BadgeWithTooltip } from '../BadgeWithTooltip';
 import { PaperTooltip } from '../PaperTooltip';
 import { DiffMode } from './ChangesetDiffContext';
 import { ChangesetIcon } from './ChangesetIcon';
 import { modeToPalette } from './theme';
 
-const useStyles = makeStyles<
-  ChangesetBadgeOwnProps,
-  'added' | 'changed' | 'removed' | 'outline'
->()(({ palette }, _params, classes) => ({
-  root: {
-    display: 'flex',
-  },
-  badge: {
-    padding: 0,
-    cursor: 'help',
-    ...mapFromList(['added', 'changed', 'removed'] as const, (mode) => {
-      const paletteKey = modeToPalette[mode];
-      const css = {
-        color: palette[paletteKey].contrastText,
-        background: palette[paletteKey].main,
-      };
-      return [`&.${classes[mode]}`, css];
-    }),
-  },
-  icon: {
-    fontSize: 12,
-  },
-  children: {
-    [`&.${classes.added}.${classes.outline}`]: {
-      border: `2px solid ${palette[modeToPalette.added].main}`,
-    },
-    [`&.${classes.changed}.${classes.outline}`]: {
-      border: `2px solid ${palette[modeToPalette.changed].main}`,
-    },
-    [`&.${classes.removed}`]: {
-      [`&.${classes.outline}`]: {
-        border: `2px solid ${palette[modeToPalette.removed].main}`,
-      },
-      boxShadow: 'none',
-      backgroundColor: 'inherit',
-      '& > *': {
-        filter: 'grayscale(1)',
-      },
-    },
-  },
-  added: {},
-  changed: {},
-  removed: {},
-  outline: {},
-}));
+const classes = {
+  added: 'changeset-badge-added',
+  changed: 'changeset-badge-changed',
+  removed: 'changeset-badge-removed',
+  outline: 'changeset-badge-outline',
+};
 
 interface ChangesetBadgeOwnProps {
   children: ReactNode;
@@ -63,16 +23,26 @@ interface ChangesetBadgeOwnProps {
   TooltipProps?: Omit<TooltipProps, 'title' | 'children'>;
 }
 
+const generatedModeStyles = (theme: Theme) => ({
+  ...mapFromList(['added', 'changed', 'removed'] as const, (mode) => {
+    const paletteKey = modeToPalette[mode];
+    const css = {
+      color: theme.palette[paletteKey].contrastText,
+      background: theme.palette[paletteKey].main,
+      padding: 0,
+      cursor: 'help',
+    };
+    return [`& .${classes[mode]} ~ .MuiBadge-badge`, css];
+  }),
+});
+
 export interface ChangesetBadgeProps
   extends ChangesetBadgeOwnProps,
-    UseStyles<typeof useStyles> {}
+    StyleProps {}
 
 export const ChangesetBadge = (props: ChangesetBadgeProps) => {
   const { mode, disableOutline, children, moreInfo, TooltipProps } = props;
   const outline = !disableOutline;
-  const { classes, cx } = useStyles(props, {
-    props: { classes: props.classes },
-  });
 
   if (!mode) {
     return <>{children}</>;
@@ -98,35 +68,67 @@ export const ChangesetBadge = (props: ChangesetBadgeProps) => {
           {content}
         </PaperTooltip>
       )}
-      badgeContent={
-        <ChangesetIcon mode={mode} color="inherit" className={classes.icon} />
-      }
+      badgeContent={<ChangesetIcon mode={mode} sx={{ fontSize: 12 }} />}
       classes={{
-        root: classes.root,
-        badge: cx({
-          [classes.badge]: true,
-          [classes.added]: mode === 'added',
-          [classes.changed]: mode === 'changed',
-          [classes.removed]: mode === 'removed',
-          [classes.outline]: outline,
-        }),
+        [classes.added]: mode === 'added',
+        [classes.changed]: mode === 'changed',
+        [classes.removed]: mode === 'removed',
+        [classes.outline]: outline,
       }}
+      sx={[
+        {
+          '&.MuiBadge-root': {
+            display: 'flex',
+          },
+          '& .MuiPaper-root': {
+            width: 1,
+          },
+        },
+        generatedModeStyles,
+      ]}
     >
       {isValidElement(children)
-        ? cloneElement(children, {
-            ...children.props,
-            className: cx(
-              {
-                [classes.children]: true,
-                [classes.added]: mode === 'added',
-                [classes.changed]: mode === 'changed',
-                [classes.removed]: mode === 'removed',
-                [classes.outline]: outline,
-              },
-              children.props?.className
-            ),
-          })
+        ? customeCloneElement(children, mode, outline)
         : children}
     </Badge>
   );
 };
+
+const customeCloneElement = (
+  children: ReactElement,
+  mode: string,
+  outline: boolean
+) => {
+  const cloned = cloneElement(children, {
+    ...children.props,
+    className:
+      `${children.props?.className ? children.props?.className : ''} ` +
+      `${mode === 'added' ? classes.added : ''} ` +
+      `${mode === 'changed' ? classes.changed : ''} ` +
+      `${mode === 'removed' ? classes.removed : ''} ` +
+      `${outline ? classes.outline : ''}`,
+
+    sx: [
+      (theme: Theme) => ({
+        [`&.${classes.added}.${classes.outline}`]: {
+          border: `2px solid ${theme.palette[modeToPalette.added].main}`,
+        },
+        [`&.${classes.changed}.${classes.outline}`]: {
+          border: `2px solid ${theme.palette[modeToPalette.changed].main}`,
+        },
+        [`&.${classes.removed}`]: {
+          [`&.${classes.outline}`]: {
+            border: `2px solid ${theme.palette[modeToPalette.removed].main}`,
+          },
+          boxShadow: 'none',
+          backgroundColor: 'inherit',
+          '& > *': {
+            filter: 'grayscale(1)',
+          },
+        },
+      }),
+    ],
+  });
+
+  return cloned;
+};
@@ -4,33 +4,24 @@ import {
   Edit as EditIcon,
 } from '@mui/icons-material';
 import { Alert, AlertTitle, Tooltip } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import { extendSx, StyleProps } from '~/common';
 import { IconButton } from '../IconButton';
 
-const useStyles = makeStyles()(({ spacing, breakpoints }) => ({
-  root: {
-    maxWidth: breakpoints.values.md,
-    margin: spacing(0, 2),
-  },
-}));
-
-interface Props {
+interface Props extends StyleProps {
   changesetId: string | null;
   onEdit?: () => void;
   onClose?: () => void;
 }
 
 export const ChangesetBanner = (props: Props) => {
-  const { classes } = useStyles();
-
   if (!props.changesetId) {
     return null;
   }
   return (
     <Alert
       severity="info"
       icon={<ChangeIcon fontSize="inherit" />}
-      className={classes.root}
+      sx={[{ maxWidth: 'md', mx: 2 }, ...extendSx(props.sx)]}
       action={
         <>
           {props.onEdit && (