feat: migrate to primer design tokens

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

Author: setchy

src/renderer/components/AllRead.tsx

@@ -1,12 +1,9 @@
 import { type FC, useContext, useMemo } from 'react';
 
-import { Stack } from '@primer/react';
-
 import { AppContext } from '../context/App';
 import { Constants } from '../utils/constants';
 import { hasFiltersSet } from '../utils/filters';
-import { Centered } from './layout/Centered';
-import { EmojiText } from './primitives/EmojiText';
+import { EmojiSplash } from './layout/EmojiSplash';
 
 interface IAllRead {
   fullHeight?: boolean;
@@ -25,21 +22,9 @@ export const AllRead: FC<IAllRead> = ({ fullHeight = true }: IAllRead) => {
     [],
   );
 
-  return (
-    <Centered fullHeight={fullHeight}>
-      <Stack direction="vertical" align="center">
-        <div className="mt-2 mb-5 text-5xl">
-          <EmojiText text={emoji} />
-        </div>
+  const heading = `No new ${hasFilters ? 'filtered ' : ''} notifications`;
 
-        {hasFilters ? (
-          <div className="mb-2 text-xl font-semibold">
-            No new filtered notifications
-          </div>
-        ) : (
-          <div className="mb-2 text-xl font-semibold">No new notifications</div>
-        )}
-      </Stack>
-    </Centered>
+  return (
+    <EmojiSplash emoji={emoji} heading={heading} fullHeight={fullHeight} />
   );
 };

src/renderer/components/Oops.tsx

@@ -1,9 +1,7 @@
 import { type FC, useMemo } from 'react';
 
-import { Stack } from '@primer/react';
 import type { GitifyError } from '../types';
-import { Centered } from './layout/Centered';
-import { EmojiText } from './primitives/EmojiText';
+import { EmojiSplash } from './layout/EmojiSplash';
 
 interface IOops {
   error: GitifyError;
@@ -17,22 +15,11 @@ export const Oops: FC<IOops> = ({ error, fullHeight = true }: IOops) => {
   );
 
   return (
-    <Centered fullHeight={fullHeight}>
-      <Stack direction="vertical" align="center">
-        <div className="mt-2 text-5xl">
-          <EmojiText text={emoji} />
-        </div>
-
-        <div className="mb-2 text-xl font-semibold">{error.title}</div>
-        {error.descriptions.map((description, i) => {
-          return (
-            // biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean
-            <div className="mb-2 text-center" key={`error_description_${i}`}>
-              {description}
-            </div>
-          );
-        })}
-      </Stack>
-    </Centered>
+    <EmojiSplash
+      emoji={emoji}
+      heading={error.title}
+      subHeadings={error.descriptions}
+      fullHeight={fullHeight}
+    />
   );
 };

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

@@ -12,10 +12,10 @@ export const Centered: FC<ICentered> = ({
 }: ICentered) => {
   return (
     <Stack
-      direction={'vertical'}
-      align={'center'}
-      justify={'center'}
-      padding={'spacious'}
+      direction="vertical"
+      align="center"
+      justify="center"
+      padding="spacious"
       className={fullHeight && 'min-h-screen'}
     >
       {props.children}

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

@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+import { EmojiSplash } from './EmojiSplash';
+
+describe('renderer/components/layout/EmojiSplash.tsx', () => {
+  it('should render itself & its children - heading only', () => {
+    const tree = render(<EmojiSplash emoji="🍺" heading="Test Heading" />);
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render itself & its children - heading and sub-heading', () => {
+    const tree = render(
+      <EmojiSplash
+        emoji="🍺"
+        heading="Test Heading"
+        subHeadings={['Test Sub-Heading']}
+      />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+});