improvement: Update button sizes to be responsive and adjust input im…

src/features/user/edit/index.tsx

@@ -109,13 +109,19 @@ export function UserEdit() {
           </VStack>
           <Flex mt="8" justify="flex-end">
             <HStack spacing="4">
-              <Button as="a" size="lg" fontSize="sm" colorScheme="whiteAlpha" onClick={() => router.push("/dashboard")}>
+              <Button
+                as="a"
+                size={["md", "lg"]}
+                fontSize="sm"
+                colorScheme="whiteAlpha"
+                onClick={() => router.push("/dashboard")}
+              >
                 Cancelar
               </Button>
               <Button
                 type="submit"
                 isLoading={isSubmitting}
-                size="lg"
+                size={["md", "lg"]}
                 fontSize="sm"
                 colorScheme="green"
                 isDisabled={!user?.email}

src/pages/auth/forgot-password.tsx

@@ -10,7 +10,7 @@ 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 { Input } from "@/shared/components/Form/Input";
 
 const forgotPasswordFormSchema = z.object({
   email: z.string().email("E-mail inválido.").nonempty("Campo obrigatório.")
@@ -144,7 +144,7 @@ export default function ForgotPassword() {
             mt="6"
             colorScheme="green"
             fontWeight="bold"
-            size="lg"
+            size={["md", "lg"]}
             isLoading={isSubmitting}
             loadingText="Enviando..."
           >

src/pages/auth/reset-password.tsx

@@ -9,7 +9,7 @@ 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 { Input } from "@/shared/components/Form/Input";
 
 const resetPasswordFormSchema = z
   .object({
@@ -146,7 +146,7 @@ export default function ResetPassword() {
             mt="6"
             colorScheme="green"
             fontWeight="bold"
-            size="lg"
+            size={["md", "lg"]}
             isLoading={isSubmitting}
             loadingText="Enviando..."
           >

src/pages/auth/signin.tsx

@@ -8,7 +8,7 @@ import { useContext, useRef, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { Box, Button, Flex, Stack, Text, Link as ChakraLink } from "@chakra-ui/react";
 
-import { Input } from "@/components/Form/Input";
+import { Input } from "@/shared/components/Form/Input";
 import { Toast } from "@/components/Toast";
 import { AuthContext } from "@/contexts/AuthContext";
 import { LogoSkateHub } from "@/components/LogoSkateHub";
@@ -159,7 +159,14 @@ export default function SignIn() {
               )}
             </Flex>
           </Stack>
-          <Button type="submit" mt="6" colorScheme="green" fontWeight="bold" size="lg" isLoading={isSubmitting}>
+          <Button
+            type="submit"
+            mt="6"
+            colorScheme="green"
+            fontWeight="bold"
+            size={["md", "lg"]}
+            isLoading={isSubmitting}
+          >
             Entrar
           </Button>
           <ChakraLink

src/pages/auth/signup.tsx

@@ -11,7 +11,7 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import { Button, Flex, Text, Stack, Box, Divider } from "@chakra-ui/react";
 
 import { API } from "@/utils/constant";
-import { Input } from "@/components/Form/Input";
+import { Input } from "@/shared/components/Form/Input";
 import { Toast } from "@/components/Toast";
 
 const signUpSchema = z
@@ -237,7 +237,7 @@ export default function SignUp() {
             mt="6"
             colorScheme="green"
             fontWeight="bold"
-            size="lg"
+            size={["md", "lg"]}
             isLoading={isSubmitting}
             loadingText="Cadastrando..."
           >

src/pages/index.tsx

@@ -49,7 +49,7 @@ export default function Home() {
                   mt="3"
                   colorScheme="green"
                   fontWeight="bold"
-                  size="lg"
+                  size={["md", "lg"]}
                   w="100%"
                   onClick={() => router.push("/auth/signin")}
                 >
@@ -60,7 +60,7 @@ export default function Home() {
                   mt="3"
                   colorScheme="pink"
                   fontWeight="bold"
-                  size="lg"
+                  size={["md", "lg"]}
                   w="100%"
                   onClick={() => router.push("/auth/signup")}
                 >

src/shared/components/Form/Input.tsx

@@ -34,12 +34,12 @@ const InputBase: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
           bgColor="gray.900"
           variant="filled"
           _hover={{ bgColor: "gray.900" }}
-          size="lg"
+          size={["md", "lg"]}
           ref={ref}
           {...rest}
         />
       ) : (
-        <InputGroup size="lg">
+        <InputGroup size={["md", "lg"]}>
           <InputLeftAddon bgColor="gray.500" borderColor="gray.500" textColor="gray.900">
             {InputLeftAddonText}
           </InputLeftAddon>
@@ -50,7 +50,7 @@ const InputBase: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
             bgColor="gray.900"
             variant="filled"
             _hover={{ bgColor: "gray.900" }}
-            size="lg"
+            size={["md", "lg"]}
             ref={ref}
             {...rest}
           />