feat: migrate to primer design tokens

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/AllRead.tsx

@@ -5,10 +5,14 @@ import { Stack } from '@primer/react';
 import { AppContext } from '../context/App';
 import { Constants } from '../utils/constants';
 import { hasFiltersSet } from '../utils/filters';
-import { Centered } from './primitives/Centered';
+import { Centered } from './layout/Centered';
 import { EmojiText } from './primitives/EmojiText';
 
-export const AllRead: FC = () => {
+interface IAllRead {
+  fullHeight?: boolean;
+}
+
+export const AllRead: FC<IAllRead> = ({ fullHeight = true }: IAllRead) => {
   const { settings } = useContext(AppContext);
 
   const hasFilters = hasFiltersSet(settings);
@@ -22,7 +26,7 @@ export const AllRead: FC = () => {
   );
 
   return (
-    <Centered>
+    <Centered fullHeight={fullHeight}>
       <Stack direction="vertical" align="center">
         <div className="mt-2 mb-5 text-5xl">
           <EmojiText text={emoji} />

src/renderer/components/Oops.tsx

@@ -2,21 +2,22 @@ import { type FC, useMemo } from 'react';
 
 import { Stack } from '@primer/react';
 import type { GitifyError } from '../types';
-import { Centered } from './primitives/Centered';
+import { Centered } from './layout/Centered';
 import { EmojiText } from './primitives/EmojiText';
 
 interface IOops {
   error: GitifyError;
+  fullHeight?: boolean;
 }
 
-export const Oops: FC<IOops> = ({ error }: IOops) => {
+export const Oops: FC<IOops> = ({ error, fullHeight = true }: IOops) => {
   const emoji = useMemo(
     () => error.emojis[Math.floor(Math.random() * error.emojis.length)],
     [error],
   );
 
   return (
-    <Centered>
+    <Centered fullHeight={fullHeight}>
       <Stack direction="vertical" align="center">
         <div className="mt-2 text-5xl">
           <EmojiText text={emoji} />

src/renderer/components/__snapshots__/AllRead.test.tsx.snap

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import { Centered } from './Centered';
+
+describe('renderer/components/layout/Centered.tsx', () => {
+  it('should render itself & its children - full height true', () => {
+    const tree = render(<Centered fullHeight={true}>Test</Centered>);
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render itself & its children - full height false', () => {
+    const tree = render(<Centered fullHeight={false}>Test</Centered>);
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/renderer/components/__snapshots__/Oops.test.tsx.snap

@@ -0,0 +1,24 @@
+import { Stack } from '@primer/react';
+import type { FC, ReactNode } from 'react';
+
+interface ICentered {
+  children: ReactNode;
+  fullHeight?: boolean;
+}
+
+export const Centered: FC<ICentered> = ({
+  fullHeight = true,
+  ...props
+}: ICentered) => {
+  return (
+    <Stack
+      direction={'vertical'}
+      align={'center'}
+      justify={'center'}
+      padding={'spacious'}
+      className={fullHeight && 'min-h-screen'}
+    >
+      {props.children}
+    </Stack>
+  );
+};

src/renderer/components/layout/Centered.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { Contents } from './Contents';
 
-describe('renderer/components/primitives/Contents.tsx', () => {
+describe('renderer/components/layout/Contents.tsx', () => {
   it('should render itself & its children', () => {
     const tree = render(<Contents>Test</Contents>);
 

src/renderer/components/layout/Centered.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { Page } from './Page';
 
-describe('renderer/components/primitives/Page.tsx', () => {
+describe('renderer/components/layout/Page.tsx', () => {
   it('should render itself & its children', () => {
     const tree = render(<Page id="test">Test</Page>);