jpcmf · jpcmf · Nov 13, 2024 · Nov 13, 2024 · Nov 13, 2024
diff --git a/public/skatehub.png b/public/skatehub.png
diff --git a/src/lib/fonts.ts b/src/lib/fonts.ts
@@ -1,11 +1,18 @@
-import { Roboto } from "next/font/google";
+import { Roboto, Raleway } from "next/font/google";
 
 const roboto = Roboto({
   subsets: ["latin"],
   variable: "--font-roboto",
   weight: "400"
 });
 
+const raleway = Raleway({
+  subsets: ["latin"],
+  variable: "--font-raleway",
+  weight: ["400", "500", "600", "700"]
+});
+
 export const fonts = {
-  roboto
+  roboto,
+  raleway
 };
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -13,6 +13,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         {`
           :root {
             --font-roboto: ${fonts.roboto.style.fontFamily};
+            --font-raleway: ${fonts.raleway.style.fontFamily};
           }
         `}
       </style>

diff --git a/src/pages/auth/confirmation.tsx b/src/pages/auth/confirmation.tsx
@@ -62,7 +62,7 @@ export default function Confirmation() {
       }
     }
     sendConfirmationEmail();
-  }, []);
+  }, [addToast, route]);
 
   return (
     <>

diff --git a/src/pages/auth/forgot-password.tsx b/src/pages/auth/forgot-password.tsx
@@ -1,5 +1,6 @@
 import Head from "next/head";
 import Link from "next/link";
+import Image from "next/image";
 import { z } from "zod";
 import { useRouter } from "next/router";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -10,7 +11,6 @@ import { Box, Button, Divider, Flex, Stack, Text } from "@chakra-ui/react";
 import { API } from "@/utils/constant";
 import { Toast } from "@/components/Toast";
 import { Input } from "@/components/Form/Input";
-import { LogoSkateHub } from "@/components/LogoSkateHub";
 
 const forgotPasswordFormSchema = z.object({
   email: z.string().email("E-mail inválido.").nonempty("Campo obrigatório.")
@@ -110,11 +110,13 @@ export default function ForgotPassword() {
           onSubmit={handleSubmit(handleForgotPassword)}
         >
           <Stack spacing={4}>
-            <Flex justifyContent="space-between" alignItems="center">
+            <Flex alignItems="center">
               <Link href="/">
-                <LogoSkateHub width={148} />
+                <Image src="/skatehub.png" alt="SkateHub" width={42} height={42} style={{ marginRight: "16px" }} />
               </Link>
-              <h1 style={{ fontSize: "18px", fontWeight: 600 }}>Recuperar senha</h1>
+              <Text as="h1" fontSize="2xl" fontWeight="semibold">
+                Recuperar senha
+              </Text>
             </Flex>
             <Divider borderColor="gray.900" />
 
@@ -132,12 +134,20 @@ export default function ForgotPassword() {
               <Box border="1px solid" bg="blackAlpha.50" borderColor="gray.900" borderRadius="md" p="4">
                 <Text fontSize="smaller" align="left" display="flex">
                   <RiAlertLine size={16} style={{ marginRight: "0.5rem", flexShrink: "0" }} />
-                  Não se preocupe! Enviaremos um link para você criar uma nova senha.
+                  Enviaremos um link para você criar uma nova senha.
                 </Text>
               </Box>
             </Flex>
           </Stack>
-          <Button type="submit" mt="6" colorScheme="green" size="lg" isLoading={isSubmitting} loadingText="Enviando...">
+          <Button
+            type="submit"
+            mt="6"
+            colorScheme="green"
+            fontWeight="bold"
+            size="lg"
+            isLoading={isSubmitting}
+            loadingText="Enviando..."
+          >
             Enviar link
           </Button>
         </Flex>

diff --git a/src/pages/auth/reset-password.tsx b/src/pages/auth/reset-password.tsx
@@ -1,15 +1,15 @@
 import Head from "next/head";
+import Link from "next/link";
+import Image from "next/image";
 import { z } from "zod";
 import { useRouter } from "next/router";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Divider, Flex, Stack } from "@chakra-ui/react";
 import { SubmitHandler, useForm } from "react-hook-form";
+import { Button, Divider, Flex, Stack, Text } from "@chakra-ui/react";
 
 import { API } from "@/utils/constant";
 import { Toast } from "@/components/Toast";
 import { Input } from "@/components/Form/Input";
-import { LogoSkateHub } from "@/components/LogoSkateHub";
-import Link from "next/link";
 
 const resetPasswordFormSchema = z
   .object({
@@ -102,19 +102,21 @@ export default function ResetPassword() {
         <Flex
           as="form"
           w="100%"
-          maxWidth={425}
+          maxWidth={480}
           bg="gray.800"
           p="8"
           borderRadius={8}
           flexDir="column"
           onSubmit={handleSubmit(onSubmit)}
         >
           <Stack spacing={4}>
-            <Flex justifyContent="space-between" alignItems="center">
-              <h1 style={{ fontSize: "24px", fontWeight: 600 }}>Resetar senha</h1>
+            <Flex alignItems="center">
               <Link href="/">
-                <LogoSkateHub width={148} />
+                <Image src="/skatehub.png" alt="SkateHub" width={42} height={42} style={{ marginRight: "16px" }} />
               </Link>
+              <Text as="h1" fontSize="2xl" fontWeight="semibold">
+                Resetar senha
+              </Text>
             </Flex>
             <Divider borderColor="gray.900" />
 
@@ -139,7 +141,15 @@ export default function ResetPassword() {
               />
             </Flex>
           </Stack>
-          <Button type="submit" mt="6" colorScheme="green" size="lg" isLoading={isSubmitting} loadingText="Enviando...">
+          <Button
+            type="submit"
+            mt="6"
+            colorScheme="green"
+            fontWeight="bold"
+            size="lg"
+            isLoading={isSubmitting}
+            loadingText="Enviando..."
+          >
             Confirmar
           </Button>
         </Flex>

diff --git a/src/pages/auth/signin.tsx b/src/pages/auth/signin.tsx
@@ -107,24 +107,24 @@ export default function SignIn() {
               </Link>
             </Flex>
             <Flex flexDir="column">
-              <Box border="1px solid" bg="gray.900" borderColor="gray.900" borderRadius="md" p="4">
+              <Input id="email" type="email" label="E-mail" {...register("email")} error={errors.email} />
+            </Flex>
+            <Flex flexDir="column">
+              <Input id="password" type="password" label="Senha" {...register("password")} error={errors.password} />
+            </Flex>
+            <Flex flexDir="column">
+              <Box border="1px solid" bg="blackAlpha.50" borderColor="gray.900" borderRadius="md" p="4">
                 <Text fontSize="smaller" align="left">
-                  Por favor, insira seu e-mail e senha cadastrado abaixo. Se precisar de ajuda, entre em{" "}
-                  <Text as="a" href="#" textDecoration="underline" color="gray.600">
+                  Se precisar de ajuda, entre em{" "}
+                  <Text as="a" href="#" textDecoration="underline" fontWeight="medium" color="gray.600">
                     contato conosco
                   </Text>
                   .
                 </Text>
               </Box>
             </Flex>
-            <Flex flexDir="column">
-              <Input id="email" type="email" label="E-mail" {...register("email")} error={errors.email} />
-            </Flex>
-            <Flex flexDir="column">
-              <Input id="password" type="password" label="Senha" {...register("password")} error={errors.password} />
-            </Flex>
           </Stack>
-          <Button type="submit" mt="6" colorScheme="green" size="lg" isLoading={isSubmitting}>
+          <Button type="submit" mt="6" colorScheme="green" fontWeight="bold" size="lg" isLoading={isSubmitting}>
             Entrar
           </Button>
           <ChakraLink
@@ -133,6 +133,7 @@ export default function SignIn() {
             mt="4"
             textAlign="center"
             textDecoration="underline"
+            fontWeight="medium"
           >
             Esqueci minha senha
           </ChakraLink>

diff --git a/src/pages/auth/signup.tsx b/src/pages/auth/signup.tsx
@@ -1,5 +1,6 @@
 import Head from "next/head";
 import Link from "next/link";
+import Image from "next/image";
 import { z } from "zod";
 import { useRouter } from "next/router";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -10,7 +11,6 @@ import { Button, Flex, Text, Stack, Box, Divider } from "@chakra-ui/react";
 import { API } from "@/utils/constant";
 import { Input } from "@/components/Form/Input";
 import { Toast } from "@/components/Toast";
-import { LogoSkateHub } from "@/components/LogoSkateHub";
 
 export default function SignUp() {
   const route = useRouter();
@@ -120,11 +120,13 @@ export default function SignUp() {
           onSubmit={handleSubmit(onFinish)}
         >
           <Stack spacing={4}>
-            <Flex justifyContent="space-between" alignItems="center">
-              <h1 style={{ fontSize: "24px", fontWeight: 600 }}>Cadastro</h1>
+            <Flex alignItems="center">
               <Link href="/">
-                <LogoSkateHub width={148} />
+                <Image src="/skatehub.png" alt="SkateHub" width={42} height={42} style={{ marginRight: "16px" }} />
               </Link>
+              <Text as="h1" fontSize="2xl" fontWeight="semibold">
+                Criar uma conta
+              </Text>
             </Flex>
             <Divider borderColor="gray.900" />
 
@@ -174,22 +176,21 @@ export default function SignUp() {
                 error={errors.confirmPassword}
               />
             </Flex>
+            <Flex flexDir="column">
+              <Box border="1px solid" bg="blackAlpha.50" borderColor="gray.900" borderRadius="md" p="4">
+                <Text fontSize="smaller" align="left" display="flex">
+                  <RiAlertLine size={16} style={{ marginRight: "0.5rem", flexShrink: "0" }} />
+                  Verifique sua caixa de entrada para o e-mail de confirmação.
+                  {/* Assim que seu cadastro for aprovado, você receberá um e-mail de confirmação para realizar o login na plataforma e preencher seu cadastro completo. */}
+                </Text>
+              </Box>
+            </Flex>
           </Stack>
-
-          <Flex flexDir="column" mt="6">
-            <Box border="1px solid" bg="blackAlpha.50" borderColor="gray.900" borderRadius="md" p="4">
-              <Text fontSize="smaller" mt="4" align="left" display="flex">
-                <RiAlertLine size={16} style={{ marginRight: "0.5rem", flexShrink: "0" }} />
-                Verifique sua caixa de entrada para o e-mail de confirmação. Assim que seu cadastro for aprovado, você
-                receberá um e-mail de confirmação para realizar o login na plataforma e preencher seu cadastro completo.
-              </Text>
-            </Box>
-          </Flex>
-
           <Button
             type="submit"
             mt="6"
             colorScheme="green"
+            fontWeight="bold"
             size="lg"
             isLoading={isSubmitting}
             loadingText="Cadastrando..."

diff --git a/src/pages/general.tsx b/src/pages/general.tsx
@@ -0,0 +1,7 @@
+export default function General() {
+  return (
+    <div>
+      <h1>General Page</h1>
+    </div>
+  );
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -36,18 +36,19 @@ export default function Home() {
                 <Flex hideFrom="md" marginBottom="10">
                   <LogoSkateHub />
                 </Flex>
-                <Text fontWeight="bold" fontSize="2xl" align="center" color="gray.300">
-                  Junte-se à comunidade e faça parte da evolução do esporte.
+                <Text fontWeight="bold" fontSize="3xl" align="center" color="gray.300">
+                  Junte-se à comunidade! Faça parte da evolução do esporte.
                 </Text>
-                <Text as="small" fontWeight="normal" align="center" color="gray.500">
-                  Faça login ou cadastre-se para começar a explorar todas as funcionalidades!
+                <Text mt="4" fontSize="lg" fontWeight="medium" align="center" color="gray.500">
+                  Faça login ou cadastre-se para começar a explorar todas as funcionalidades.
                 </Text>
               </Flex>
               <Flex alignItems="center" justifyContent="center" flexDirection="row" gap="3" w="100%">
                 <Button
                   type="button"
                   mt="3"
                   colorScheme="green"
+                  fontWeight="bold"
                   size="lg"
                   w="100%"
                   onClick={() => router.push("/auth/signin")}
@@ -58,6 +59,7 @@ export default function Home() {
                   type="button"
                   mt="3"
                   colorScheme="pink"
+                  fontWeight="bold"
                   size="lg"
                   w="100%"
                   onClick={() => router.push("/auth/signup")}
@@ -74,6 +76,7 @@ export default function Home() {
                 align="center"
                 textDecoration="underline"
                 fontSize="smaller"
+                fontWeight="medium"
                 maxWidth="200px"
                 w="100%"
                 textAlign="right"
@@ -90,6 +93,7 @@ export default function Home() {
                 align="center"
                 textDecoration="underline"
                 fontSize="smaller"
+                fontWeight="medium"
                 maxWidth="200px"
                 w="100%"
                 textAlign="left"

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -14,8 +14,8 @@ export const theme = extendTheme({
     }
   },
   fonts: {
-    heading: "var(--font-roboto)",
-    body: "var(--font-roboto)"
+    heading: "var(--font-raleway)",
+    body: "var(--font-raleway)"
   },
   styles: {
     global: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ function MyApp({ Component, pageProps }: AppProps) { @@
             {`
               :root {
                 --font-roboto: ${fonts.roboto.style.fontFamily};
+                --font-raleway: ${fonts.raleway.style.fontFamily};
               }
             `}
           </style>
@@ Expand Down @@