add chakra

package.json

@@ -9,8 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chakra-ui/react": "^1.8.9",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@multiversx/sdk-dapp": "^2.22.1",
     "@multiversx/sdk-wallet": "^4.2.0",
+    "framer-motion": "^6.5.1",
     "next": "13.5.4",
     "next-auth": "^4.23.2",
     "react": "^18",

src/config/chakraTheme.ts

@@ -0,0 +1,36 @@
+import { extendTheme, ThemeConfig  } from '@chakra-ui/react';
+
+export const theme = extendTheme({
+
+  config: {
+    initialColorMode: 'light', // or 'light'
+    useSystemColorMode: false,
+  },
+  styles: {
+    global: {
+      body: {
+        minHeight: '100vh',
+        overflowX: 'hidden',
+        height: '100%',
+      },
+      '*': {
+        '&::-webkit-scrollbar': {
+          width: 1.5,
+          borderRadius: 20,
+          backgroundColor: 'black'
+        },
+        '&::-webkit-scrollbar-thumb': {
+          backgroundColor: 'white',
+          borderRadius: 20,
+        },
+      },
+    },
+  },  
+  breakpoints: {
+    sm: '320px',
+    md: '768px',
+    lg: '960px',
+    xl: '1200px',
+    '2xl': '1560px',
+  },
+});

src/pages/_app.tsx

@@ -1,13 +1,18 @@
 import { SessionProvider } from "next-auth/react"
+import { ChakraProvider, CSSReset } from '@chakra-ui/react'
 import type { AppProps } from 'next/app'
+import { theme } from '../config/chakraTheme';
 
 export default function App({
   Component,
   pageProps: { session, ...pageProps },
 }: AppProps) {
   return (
     <SessionProvider session={session} refetchInterval={5 * 60}>
-      <Component {...pageProps} />
+      <ChakraProvider theme={theme}>
+        <CSSReset />
+        <Component {...pageProps} />
+      </ChakraProvider>
     </SessionProvider>
   )
 }

src/pages/index.tsx

@@ -1,22 +1,41 @@
 import { useSession, signIn, signOut } from "next-auth/react"
+import { Button, Box } from "@chakra-ui/react";
 
 export default function Home() {
-  
+
   const { data: session } = useSession()
   console.log(session);
 
   if (session) {
     return (
-      <>
+      <Box>
         Signed in as {session?.user?.email} <br />
-        <button onClick={() => signOut()}>Sign out</button>
-      </>
+        <Button
+          w={'fit'}
+          _hover={{
+            opacity: 1,
+            boxShadow: 'lg'
+          }}
+          onClick={() => signOut()}
+        >
+          Sign Out
+        </Button>
+      </Box>
     )
   }
   return (
-    <>
+    <Box>
       Not signed in <br />
-      <button onClick={() => signIn()}>Sign in</button>
-    </>
+      <Button
+        w={'fit'}
+        _hover={{
+          opacity: 1,
+          boxShadow: 'lg'
+        }}
+        onClick={() => signIn()}
+      >
+        Sign in
+      </Button>
+    </Box>
   )
 }