Improvement/interface 2

src/components/CardUser/index.tsx

@@ -1,6 +1,7 @@
 import { useContext } from "react";
 import { FaGlobe, FaInstagram } from "react-icons/fa";
 import { TbMapPinHeart, TbMessage, TbUserPlus } from "react-icons/tb";
+import Link from "next/link";
 
 import {
   Avatar as ChakraAvatar,
@@ -13,46 +14,43 @@ import {
   useColorModeValue,
   VStack
 } from "@chakra-ui/react";
-import Avatar from "boring-avatars";
 
 import { AuthContext } from "@/contexts/AuthContext";
 import type { UserBasics } from "@/types/usersBasics.type";
+import { openInstagram, openWebsite } from "@/utils/socialMedia";
 
 export function UserCard({ user }: { user: UserBasics }) {
   const { isAuthenticated } = useContext(AuthContext);
 
-  const bgColor = useColorModeValue("gray.800", "gray.800");
-  const textColor = useColorModeValue("gray.300", "gray.300");
-  const iconColor = useColorModeValue("gray.400", "gray.400");
+  const bgColor = useColorModeValue("blackAlpha.100", "gray.800");
+  const textColor = useColorModeValue("gray.600", "gray.300");
+  const iconColor = useColorModeValue("gray.800", "gray.400");
+  const nameTextColor = useColorModeValue("gray.800", "gray.100");
+  const categoryTextColor = useColorModeValue("gray.400", "gray.600");
 
   const handleContact = () => {
     alert("Contact functionality - implement your preferred method!");
   };
 
-  const openInstagram = () => {
-    if (!user.instagram_url) return;
-    window.open(`https://instagram.com/${user.instagram_url.replace("@", "")}`, "_blank");
-  };
-
-  const openWebsite = () => {
-    if (!user.website_url) return;
-    window.open(`https://${user.website_url}`, "_blank");
-  };
-
   return (
     <Box bg={bgColor} borderRadius="xl" p={4} maxW="sm" w="full" textAlign="center">
       <VStack spacing={4}>
-        {user?.avatar ? (
-          <ChakraAvatar size="xl" src={user.avatar.formats.thumbnail.url} name={user.name} />
-        ) : (
-          <Avatar name={user.name} size={96} />
-        )}
+        <Link href={`/user/${user.id}`} prefetch={true}>
+          <ChakraAvatar
+            size="xl"
+            bgColor={user?.avatar ? "gray.800" : "gray.700"}
+            src={user?.avatar ? user.avatar.formats.thumbnail.url : "https://robohash.org/" + user?.name}
+            border="2px solid transparent"
+            _hover={{ cursor: "pointer", border: "2px solid", borderColor: "green.400" }}
+            p={0.5}
+          />
+        </Link>
         <VStack spacing={1}>
-          <Text fontSize="xl" fontWeight="semibold" color="gray.100">
+          <Text fontSize="xl" color={nameTextColor}>
             {user.name}
           </Text>
           <Box display="flex" alignItems="center" justifyContent="center" gap={1}>
-            <Text fontSize="md" color="gray.600">
+            <Text fontSize="md" color={categoryTextColor}>
               {user.category?.name ? user.category.name : "Skater"}
             </Text>
           </Box>
@@ -72,7 +70,7 @@ export function UserCard({ user }: { user: UserBasics }) {
         </HStack>
 
         <HStack spacing={4} h="5">
-          <VStack spacing={1} cursor="pointer" onClick={openInstagram}>
+          <VStack spacing={1} cursor="pointer" onClick={() => openInstagram(user.instagram_url)}>
             {user.instagram_url && (
               <Icon
                 as={FaInstagram}
@@ -85,7 +83,7 @@ export function UserCard({ user }: { user: UserBasics }) {
           </VStack>
 
           {user.website_url && (
-            <VStack spacing={1} cursor="pointer" onClick={openWebsite}>
+            <VStack spacing={1} cursor="pointer" onClick={() => openWebsite(user.website_url)}>
               <Icon
                 as={FaGlobe}
                 boxSize={5}

src/components/Footer/index.tsx

@@ -2,13 +2,29 @@ import React from "react";
 import { FaHeart, FaReact } from "react-icons/fa";
 import { SiChakraui, SiNextdotjs } from "react-icons/si";
 
-import { Box, Button, Container, Flex, Heading, HStack, Icon, Link, SimpleGrid, Text, VStack } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Heading,
+  HStack,
+  Icon,
+  Link,
+  SimpleGrid,
+  Text,
+  useColorModeValue,
+  VStack
+} from "@chakra-ui/react";
 
 import { LogoSkateHub } from "../LogoSkateHub";
 
 export function Footer() {
+  const bgColor = useColorModeValue("blackAlpha.100", "gray.800");
+  const bgButtonColor = useColorModeValue("red.500", "red.600");
+  const textButtonColor = useColorModeValue("white", "gray.100");
   return (
-    <Box as="footer" bg="gray.800" pt={12} pb={6}>
+    <Box as="footer" bg={bgColor} pt={12} pb={6}>
       <Container maxW="max-content" px={6}>
         <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={8} mb={8}>
           <VStack align="flex-start" spacing={3}>
@@ -67,7 +83,7 @@ export function Footer() {
               </Link>
               .
             </Text>
-            <Button leftIcon={<FaHeart />} colorScheme="red" size="sm" fontWeight="semibold">
+            <Button leftIcon={<FaHeart />} bg={bgButtonColor} color={textButtonColor} size="sm" fontWeight="semibold">
               Quero contribuir
             </Button>
           </VStack>

src/components/Form/Input.tsx

@@ -1,45 +1,45 @@
-import { forwardRef, ForwardRefRenderFunction } from "react";
-import { FieldError } from "react-hook-form";
+// import { forwardRef, ForwardRefRenderFunction } from "react";
+// import { FieldError } from "react-hook-form";
 
-import {
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input as ChakraInput,
-  InputProps as ChakraInputProps
-} from "@chakra-ui/react";
+// import {
+//   FormControl,
+//   FormErrorMessage,
+//   FormLabel,
+//   Input as ChakraInput,
+//   InputProps as ChakraInputProps
+// } from "@chakra-ui/react";
 
-interface InputProps extends ChakraInputProps {
-  label?: string;
-  error?: FieldError;
-}
+// interface InputProps extends ChakraInputProps {
+//   label?: string;
+//   error?: FieldError;
+// }
 
-const InputBase: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
-  { name, label, error = null, ...rest },
-  ref
-) => {
-  return (
-    <FormControl isInvalid={!!error}>
-      {!!label && <FormLabel htmlFor={name}>{label}</FormLabel>}
-      <ChakraInput
-        name={name}
-        id={name}
-        focusBorderColor="blue.500"
-        bgColor="gray.900"
-        variant="filled"
-        _hover={{ bgColor: "gray.900" }}
-        size="lg"
-        ref={ref}
-        {...rest}
-      />
+// const InputBase: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
+//   { name, label, error = null, ...rest },
+//   ref
+// ) => {
+//   return (
+//     <FormControl isInvalid={!!error}>
+//       {!!label && <FormLabel htmlFor={name}>{label}</FormLabel>}
+//       <ChakraInput
+//         name={name}
+//         id={name}
+//         focusBorderColor="blue.500"
+//         bgColor="gray.900"
+//         variant="filled"
+//         _hover={{ bgColor: "gray.900" }}
+//         size="lg"
+//         ref={ref}
+//         {...rest}
+//       />
 
-      {!!error && (
-        <FormErrorMessage as="small" color="red.500" ml="1" mt="2" display="block" fontSize="smaller" fontWeight="300">
-          {error?.message}
-        </FormErrorMessage>
-      )}
-    </FormControl>
-  );
-};
+//       {!!error && (
+//         <FormErrorMessage as="small" color="red.500" ml="1" mt="2" display="block" fontSize="smaller" fontWeight="300">
+//           {error?.message}
+//         </FormErrorMessage>
+//       )}
+//     </FormControl>
+//   );
+// };
 
-export const Input = forwardRef(InputBase);
+// export const Input2 = forwardRef(InputBase);

src/components/Header/Profile.tsx

@@ -1,5 +1,6 @@
 import { useContext } from "react";
 import { RiLogoutCircleLine } from "react-icons/ri";
+import { TbMoon, TbSun } from "react-icons/tb";
 import { useRouter } from "next/router";
 
 import {
@@ -12,7 +13,8 @@ import {
   MenuGroup,
   MenuItem,
   MenuList,
-  Text
+  Text,
+  useColorMode
 } from "@chakra-ui/react";
 
 import { AuthContext } from "@/contexts/AuthContext";
@@ -23,6 +25,7 @@ interface ProfileProps {
 
 export function Profile({ showProfileData = true }: ProfileProps) {
   const router = useRouter();
+  const { colorMode, toggleColorMode } = useColorMode();
   const { user, signOut } = useContext(AuthContext);
 
   return (
@@ -36,11 +39,17 @@ export function Profile({ showProfileData = true }: ProfileProps) {
         </Box>
       )}
       <Menu>
-        <MenuButton>
+        <MenuButton
+          border={"2px solid"}
+          borderColor="transparent"
+          _hover={{ cursor: "pointer", border: "2px solid", borderColor: "green.400" }}
+          borderRadius="full"
+        >
           <Avatar
             size="md"
             bgColor="green.300"
             src={user?.avatar ? user?.avatar.url : "https://robohash.org/" + user?.email}
+            m={0.5}
           />
         </MenuButton>
 
@@ -51,19 +60,29 @@ export function Profile({ showProfileData = true }: ProfileProps) {
               bg="gray.900"
               _hover={{ color: "white" }}
               onClick={() => router.push("/user/edit")}
+              px={4}
             >
               Editar
             </MenuItem>
-            <MenuItem color="gray.600" bg="gray.900" _hover={{ color: "white" }}>
-              {user?.about}
+            <MenuDivider borderColor="gray.700" />
+            <MenuItem
+              icon={colorMode === "light" ? <TbMoon size={16} /> : <TbSun size={16} />}
+              onClick={toggleColorMode}
+              color="gray.600"
+              bg="gray.900"
+              _hover={{ color: "white" }}
+              py={0}
+            >
+              {colorMode === "light" ? "Ativar modo escuro" : "Ativar modo claro"}
             </MenuItem>
-            <MenuDivider />
+            <MenuDivider borderColor="gray.700" />
             <MenuItem
               icon={<RiLogoutCircleLine size={16} />}
               onClick={signOut}
               color="gray.600"
               bg="gray.900"
               _hover={{ color: "white" }}
+              py={0}
             >
               Logout
             </MenuItem>

src/components/Header/index.tsx

@@ -1,10 +1,8 @@
 import { useContext } from "react";
 import { RiMenuLine } from "react-icons/ri";
-import { TbSkateboard } from "react-icons/tb";
-import Link from "next/link";
 import { useRouter } from "next/router";
 
-import { Button, Flex, Icon, IconButton, useBreakpointValue } from "@chakra-ui/react";
+import { Button, Flex, Icon, IconButton, useBreakpointValue, useColorModeValue } from "@chakra-ui/react";
 
 import { AuthContext } from "@/contexts/AuthContext";
 import { useSidebarDrawer } from "@/contexts/SidebarDrawerContext";
@@ -19,6 +17,7 @@ export function Header() {
   const { onOpen } = useSidebarDrawer();
   const { isAuthenticated } = useContext(AuthContext);
   const router = useRouter();
+  const textSecondaryButton = useColorModeValue("gray.800", "green.400");
 
   const isVisible = useBreakpointValue({
     base: false,
@@ -39,9 +38,24 @@ export function Header() {
     );
   };
 
+  const handleLoginClick = () => {
+    router.push(
+      {
+        pathname: router.pathname,
+        query: { ...router.query, modal: "login" }
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
+
+  const handleSignupClick = () => {
+    router.push("/auth/signup");
+  };
+
   return (
     <>
-      <Flex as="header" w="100%" maxWidth={1144} mx="auto" my="8" align="center" px="0">
+      <Flex as="header" w="100%" maxWidth={1144} mx="auto" mt="8" align="center" px="0">
         {!isVisible && (
           <IconButton
             aria-label="Open navigation"
@@ -55,35 +69,25 @@ export function Header() {
 
         {/* {isAuthenticated && isVisible && <Search />} */}
 
-        <Flex align="center" ml="auto">
+        <Flex alignItems="center" ml="auto">
           {isAuthenticated && <Notification />}
 
           {!isAuthenticated ? (
-            <Button
-              as={Link}
-              href={{
-                pathname: router.pathname,
-                query: { ...router.query, modal: "login" }
-              }}
-              variant="ghost"
-              border="1px"
-              borderColor="green.400"
-              color="green.400"
-              gap={2}
-              px={4}
-              py={2}
-              fontWeight="semibold"
-              fontSize="sm"
-              _hover={{
-                textDecoration: "none",
-                transform: "translateY(-2px)",
-                shadow: "lg"
-              }}
-              transition="all 0.2s"
-            >
-              <TbSkateboard size={18} />
-              Faça seu login
-            </Button>
+            <Flex gap={2}>
+              <Button
+                onClick={handleLoginClick}
+                color="white"
+                bg="green.400"
+                size={["sm", "md"]}
+                _hover={{ bg: "green.600" }}
+              >
+                Login
+              </Button>
+
+              <Button variant="ghost" color={textSecondaryButton} size={["sm", "md"]} onClick={handleSignupClick}>
+                Criar uma conta
+              </Button>
+            </Flex>
           ) : (
             <Profile showProfileData={isVisible} />
           )}