noUnresolvedIssues.tsx 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import zeroInboxIssuesImg from 'sentry-images/spot/zero-inbox-issues.svg';
  4. import {space} from 'sentry/styles/space';
  5. function Message({title, subtitle}: {subtitle: React.ReactNode; title: React.ReactNode}) {
  6. return (
  7. <Fragment>
  8. <EmptyMessage>{title}</EmptyMessage>
  9. <p>{subtitle}</p>
  10. </Fragment>
  11. );
  12. }
  13. type Props = {
  14. subtitle: React.ReactNode;
  15. title: React.ReactNode;
  16. };
  17. function NoUnresolvedIssues({title, subtitle}: Props) {
  18. return (
  19. <Wrapper>
  20. <img src={zeroInboxIssuesImg} alt="No issues found spot illustration" />
  21. <Message title={title} subtitle={subtitle} />
  22. </Wrapper>
  23. );
  24. }
  25. const Wrapper = styled('div')`
  26. display: flex;
  27. padding: ${space(4)} ${space(4)};
  28. flex-direction: column;
  29. align-items: center;
  30. text-align: center;
  31. color: ${p => p.theme.subText};
  32. @media (max-width: ${p => p.theme.breakpoints.small}) {
  33. font-size: ${p => p.theme.fontSizeMedium};
  34. }
  35. `;
  36. const EmptyMessage = styled('div')`
  37. font-weight: ${p => p.theme.fontWeightBold};
  38. @media (min-width: ${p => p.theme.breakpoints.small}) {
  39. font-size: ${p => p.theme.fontSizeExtraLarge};
  40. }
  41. `;
  42. export default NoUnresolvedIssues;