refactor: rewrite login forms with primer

package.json

@@ -171,7 +171,6 @@
     "nprogress": "0.2.0",
     "postcss": "8.5.1",
     "postcss-loader": "8.1.1",
-    "react-final-form": "6.5.9",
     "rimraf": "6.0.1",
     "semver": "7.6.3",
     "styled-components": "6.1.14",

src/renderer/components/layout/Centered.tsx

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

src/renderer/components/layout/Contents.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/layout/Page.test.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/layout/Page.tsx

@@ -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>
   );
 };