refactor: migrate to text inputs to primer

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

Author: setchy

src/renderer/components/fields/FieldInput.test.tsx

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

src/renderer/components/fields/FieldInput.tsx

@@ -2,22 +2,8 @@ import { render } from '@testing-library/react';
 import { Page } from './Page';
 
 describe('renderer/components/layout/Page.tsx', () => {
-  it('should render itself & its children - full', () => {
-    const tree = render(
-      <Page id="test" type="h-full">
-        Test
-      </Page>,
-    );
-
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('should render itself & its children - screen', () => {
-    const tree = render(
-      <Page id="test" type="h-screen">
-        Test
-      </Page>,
-    );
+  it('should render itself & its children', () => {
+    const tree = render(<Page id="test">Test</Page>);
 
     expect(tree).toMatchSnapshot();
   });

src/renderer/components/fields/__snapshots__/FieldInput.test.tsx.snap

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