fix: theme loading on startup

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

Author: setchy

src/renderer/App.tsx

@@ -39,7 +39,7 @@ export const App = () => {
       <BaseStyles>
         <AppProvider>
           <Router>
-            <div className="flex h-full overflow-y-auto flex-col pl-12 bg-gitify-background">
+            <div className="flex h-screen overflow-y-auto flex-col pl-12 bg-gitify-background">
               <Loading />
               <Sidebar />
               <Routes>

src/renderer/components/primitives/Contents.test.tsx

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

src/renderer/components/primitives/Contents.tsx

@@ -0,0 +1,11 @@
+import type { FC, ReactNode } from 'react';
+
+interface IContents {
+  children: ReactNode;
+}
+
+export const Contents: FC<IContents> = (props: IContents) => {
+  return (
+    <div className="flex-grow overflow-x-auto px-8 pb-4">{props.children}</div>
+  );
+};

src/renderer/components/primitives/Footer.test.tsx

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import { Footer } from './Footer';
+
+describe('renderer/components/primitives/Footer.tsx', () => {
+  it('should render itself & its children - justify-between', () => {
+    const tree = render(<Footer justify="justify-between">Test</Footer>);
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render itself & its children - justify-end', () => {
+    const tree = render(<Footer justify="justify-end">Test</Footer>);
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/renderer/components/primitives/Footer.tsx

@@ -0,0 +1,20 @@
+import type { FC, ReactNode } from 'react';
+import { cn } from '../../utils/cn';
+
+interface IFooter {
+  children: ReactNode;
+  justify: 'justify-end' | 'justify-between';
+}
+
+export const Footer: FC<IFooter> = (props: IFooter) => {
+  return (
+    <div
+      className={cn(
+        'flex items-center px-3 py-1 text-sm bg-gitify-footer',
+        props.justify,
+      )}
+    >
+      {props.children}
+    </div>
+  );
+};

src/renderer/components/primitives/Page.test.tsx

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

src/renderer/components/primitives/Page.tsx

@@ -0,0 +1,14 @@
+import type { FC, ReactNode } from 'react';
+
+interface IPage {
+  children: ReactNode;
+  id: string;
+}
+
+export const Page: FC<IPage> = (props: IPage) => {
+  return (
+    <div className="flex h-screen flex-col" data-testid={props.id}>
+      {props.children}
+    </div>
+  );
+};