marginLeft: spacing()

in public/src/components/channelManagement/stickyTopBar/stickyTopBar.tsx [77:166]
86 lines of code
8 McCabe index (conditional complexity)

    marginLeft: spacing(2),
    padding: '0 8px',
    fontSize: '14px',
    fontWeight: 'normal',
    color: palette.grey[700],
    lineHeight: 1.5,
  },
}));

interface StickyTopBarProps {
  name: string;
  nickname?: string;
  channel?: string;
  campaignName?: string;
  isNew: boolean;
  status: Status;
  lockStatus: LockStatus;
  userHasTestLocked: boolean;
  userHasTestListLocked: boolean;
  existingNames: string[];
  existingNicknames: string[];
  testNamePrefix?: string;
  onTestLock: (testName: string, force: boolean) => void;
  onTestUnlock: (testName: string) => void;
  onTestSave: (testName: string) => void;
  onTestArchive: () => void;
  onTestCopy: (oldName: string, newName: string, newNickname: string) => void;
  onTestAudit: (testName: string, channel?: string) => void;
  onStatusChange: (status: Status) => void;
  settingsType: FrontendSettingsType;
  allowEditing: boolean;
}

const StickyTopBar: React.FC<StickyTopBarProps> = ({
  name,
  nickname,
  channel,
  isNew,
  status,
  lockStatus,
  userHasTestLocked,
  userHasTestListLocked,
  existingNames,
  existingNicknames,
  testNamePrefix,
  onTestLock,
  onTestUnlock,
  onTestSave,
  onTestArchive,
  onTestCopy,
  onTestAudit,
  onStatusChange,
  settingsType,
  allowEditing,
}: StickyTopBarProps) => {
  const classes = useStyles();
  const mainHeader = nickname ? nickname : name;
  const secondaryHeader = nickname ? name : null;

  return (
    <header className={classes.container}>
      <div className={classes.namesContainer}>
        <Typography variant="h2" className={classes.mainHeader}>
          {mainHeader}
        </Typography>
        <div className={classes.secondaryHeaderContainer}>
          <Typography className={classes.secondaryHeader}>{secondaryHeader}</Typography>
          <Button
            className={classes.link}
            variant="outlined"
            startIcon={<Link />}
            onClick={() => {
              navigator.clipboard.writeText(`${location.origin}/${settingsType}/${name}`);
            }}
          >
            Copy link
          </Button>
        </div>
      </div>

      <div className={classes.buttonsContainer}>
        <div className={classes.switchContainer}>
          <TestLiveSwitch
            isLive={status === 'Live'}
            onChange={(isLive: boolean) => onStatusChange(isLive ? 'Live' : 'Draft')}
            disabled={(userHasTestLocked && lockStatus.locked) || !allowEditing} // cannot change test status while still editing it
          />
        </div>
        <div className={classes.lockContainer}>
          {!userHasTestLocked && !lockStatus.locked && (