Style login page

package.json

@@ -32,7 +32,8 @@
     "prisma": "^5.15.0",
     "react": "^18.2.0",
     "react-calendar": "^5.0.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
     "@snaplet/copycat": "^5.0.0",

src/components/SignInButton.tsx

@@ -1,11 +1,23 @@
 // importing from next-auth/react instead of our root's auth.ts because of Client & Server component issues.
 // https://authjs.dev/getting-started/session-management/login
 import { signIn } from 'next-auth/react';
+import { Button } from '@chakra-ui/react';
+import { FcGoogle } from 'react-icons/fc';
 
 export function SignInButton() {
   return (
-    <button onClick={() => signIn('google', { callbackUrl: `/homepage` })}>
-      Sign In Google
-    </button>
+    <Button
+      variant="outline"
+      borderColor="blue.400"
+      colorScheme="gray"
+      width="275px"
+      height="45px"
+      color="black"
+      fontWeight="bold"
+      leftIcon={<FcGoogle fontSize="18px" />}
+      onClick={() => signIn('google', { callbackUrl: `/homepage` })}
+    >
+      Sign in with Google
+    </Button>
   );
 }

src/components/SistemaLogoColour.tsx

@@ -0,0 +1,7 @@
+import { Image } from '@chakra-ui/react';
+
+export function SistemaLogoColour() {
+  return (
+    <Image src="/images/sistema_logo_colour.png" alt="Sistema Logo Colour" />
+  );
+}

src/pages/index.tsx

@@ -1,18 +1,24 @@
 import { SignInButton } from '../components/SignInButton';
-import { SignOutButton } from '../components/SignOutButton';
-import { useSession } from 'next-auth/react';
+import { SistemaLogoColour } from '../components/SistemaLogoColour';
+import { Box, Flex, Text } from '@chakra-ui/react';
 
 export default function Index() {
-  const session = useSession();
   return (
-    <>
+    <Flex
+      direction="column" // stack items vertically
+      align="center" // center items horizontally
+      justify="center" // center items vertically
+      height="100vh" // make flex container take full viewport height
+    >
+      <Box width="280px" height="auto" mb="5">
+        <SistemaLogoColour />
+      </Box>
+
+      <Text color="text" fontSize="small" mb="3">
+        Only sign in with a Sistema email.
+      </Text>
+
       <SignInButton />
-      <br />
-      <SignOutButton />
-      <br />
-      <pre className="py-6 px-4 whitespace-pre-wrap break-all">
-        {JSON.stringify(session, null, 2)}
-      </pre>
-    </>
+    </Flex>
   );
 }