Apolo/feat/login screen

src/components/ExButton/index.tsx

+import { Button } from "@chakra-ui/react";
+
+interface ExButtonProps {
+  bgColor: string;
+  bgHover?: string;
+  color: string;
+  content: string;
+  disabled?: boolean;
+  isLoading?: boolean;
+  onClick?: () => void;
+  size?: "xs" | "sm" | "md" | "lg";
+  type: "button" | "submit" | "reset";
+}
+
+export default function ExButton({
+  bgColor,
+  bgHover,
+  color,
+  content,
+  onClick,
+  isLoading = false,
+  size,
+  type,
+}: ExButtonProps) {
+  return (
+    <Button
+      size={size}
+      bgColor={bgColor}
+      color={color}
+      onClick={onClick}
+      type={type}
+      _hover={{ bgColor: bgHover }}
+      isLoading={isLoading}
+      disabled={isLoading}
+    >
+      {content}
+    </Button>
+  );
+}

src/components/ExSidebar/index.tsx

+import { HamburgerIcon } from "@chakra-ui/icons";
+import {
+  Avatar,
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  Flex,
+  IconButton,
+  Image,
+  Stack,
+  Text,
+  useDisclosure,
+  useMediaQuery,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import { Link as RouterLink } from "react-router-dom";
+import LogoProvisorio from "../../../public/Logo.svg";
+import "../../app/App.css";
+
+export default function ExSidebar() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const btnRef = React.useRef<HTMLButtonElement | null>(null);
+  const [isLargerThanHD] = useMediaQuery("(min-width: 1000px)");
+
+  const [activeButton, setActiveButton] = useState<string>("");
+
+  const handleButtonClick = (buttonName: string) => {
+    setActiveButton(buttonName);
+  };
+
+  const header = (
+    <Box className="h-12 px-2 mt-5">
+      <Image src={LogoProvisorio} />
+    </Box>
+  );
+
+  const body = (
+    <Box className="bg-white w-full">
+      <Stack direction="column" spacing="32px">
+        <Button
+          size="lg"
+          _hover={{ bg: "#21381B", textColor: "white" }}
+          variant="ghost"
+          className={activeButton === "Estoque" ? "active-button" : ""}
+          onClick={() => handleButtonClick("Estoque")}
+        >
+          <Text className="font-bold text-3xl" as={RouterLink} to="/">
+            Estoque
+          </Text>
+        </Button>
+        <Button
+          size="lg"
+          variant="ghost"
+          _hover={{ bg: "#21381B", textColor: "white" }}
+          className={activeButton === "Pedidos" ? "active-button" : ""}
+          onClick={() => handleButtonClick("Pedidos")}
+        >
+          <Text className="font-bold text-3xl" as={RouterLink} to="/">
+            Pedidos
+          </Text>
+        </Button>
+        <Button
+          size="lg"
+          variant="ghost"
+          _hover={{ bg: "#21381B", textColor: "white" }}
+          className={activeButton === "Suporte" ? "active-button" : ""}
+          onClick={() => handleButtonClick("Suporte")}
+        >
+          <Text className="font-bold text-3xl" as={RouterLink} to="/">
+            Suporte
+          </Text>
+        </Button>
+        <Button
+          size="lg"
+          variant="ghost"
+          _hover={{ bg: "#21381B", textColor: "white" }}
+          className={activeButton === "Perfil" ? "active-button" : ""}
+          onClick={() => handleButtonClick("Perfil")}
+        >
+          <Text className="font-bold text-3xl" as={RouterLink} to="/">
+            Perfil
+          </Text>
+        </Button>
+        <Button size="lg" variant="ghost">
+          <Text
+            className="text-red-600 font-bold text-3xl"
+            as={RouterLink}
+            to="/"
+          >
+            Sair
+          </Text>
+        </Button>
+      </Stack>
+    </Box>
+  );
+
+  const footer = (
+    <Flex className="items-center justify-center w-full mb-3">
+      <Avatar bg="#4F6144" />
+      <Text className="ml-2 font-bold text-2xl p-1" as={RouterLink} to="/login">
+        <b>Fulano</b>
+      </Text>
+    </Flex>
+  );
+
+  return (
+    <>
+      {isLargerThanHD ? (
+        <Box
+          width="270px"
+          height="100%"
+          background="#fffff"
+          left={0}
+          top={0}
+          borderRight="2px solid black"
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          paddingY={4}
+          gap={28}
+        >
+          <Box
+            style={{
+              width: "95%",
+              height: "50px",
+              borderRadius: "5px",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              marginTop: "40px",
+            }}
+          >
+            <Image src={LogoProvisorio} />
+          </Box>
+
+          <Box bg="white" width="100%" flex={1} color="white">
+            <Stack direction="column" spacing="32px">
+              <Button
+                size="lg"
+                _hover={{ bg: "#21381B", textColor: "white" }}
+                variant="ghost"
+                className={activeButton === "Estoque" ? "active-button" : ""}
+                onClick={() => handleButtonClick("Estoque")}
+              >
+                <Text
+                  align="center"
+                  fontFamily="Bold"
+                  fontSize="25pt"
+                  as={RouterLink}
+                  to="/"
+                >
+                  Estoque
+                </Text>
+              </Button>
+              <Button
+                size="lg"
+                variant="ghost"
+                _hover={{ bg: "#21381B", textColor: "white" }}
+                className={activeButton === "Pedidos" ? "active-button" : ""}
+                onClick={() => handleButtonClick("Pedidos")}
+              >
+                <Text
+                  align="center"
+                  fontFamily="Bold"
+                  fontSize="25pt"
+                  as={RouterLink}
+                  to="/"
+                >
+                  Pedidos
+                </Text>
+              </Button>
+              <Button
+                size="lg"
+                variant="ghost"
+                _hover={{ bg: "#21381B", textColor: "white" }}
+                className={activeButton === "Suporte" ? "active-button" : ""}
+                onClick={() => handleButtonClick("Suporte")}
+              >
+                <Text align="center" fontFamily="Bold" fontSize="25pt">
+                  Suporte
+                </Text>
+              </Button>
+              <Button
+                size="lg"
+                variant="ghost"
+                _hover={{ bg: "#21381B", textColor: "white" }}
+                className={activeButton === "Perfil" ? "active-button" : ""}
+                onClick={() => handleButtonClick("Perfil")}
+              >
+                <Text
+                  align="center"
+                  fontFamily="Bold"
+                  fontSize="25pt"
+                  as={RouterLink}
+                  to="/"
+                >
+                  Perfil
+                </Text>
+              </Button>
+              <Button size="lg" variant="ghost">
+                <Text
+                  color="#E02D37"
+                  align="center"
+                  fontFamily="Bold"
+                  fontSize="25pt"
+                  as={RouterLink}
+                  to="/"
+                >
+                  Sair
+                </Text>
+              </Button>
+            </Stack>
+          </Box>
+
+          <Box>
+            <Flex
+              align="center"
+              justifyContent="center"
+              width="100%"
+              marginBottom={"10px"}
+            >
+              <Avatar bg="#4F6144" />
+              <Text
+                ml={2}
+                fontSize="20pt"
+                fontFamily="Bold"
+                as={RouterLink}
+                to="/login"
+                p={1}
+              >
+                <b>Fulano</b>
+              </Text>
+            </Flex>
+          </Box>
+        </Box>
+      ) : (
+        <Button ref={btnRef} bg="#21381B" onClick={onOpen}>
+          <IconButton
+            colorScheme="black"
+            aria-label="CloseMenu"
+            icon={<HamburgerIcon />}
+          />
+        </Button>
+      )}
+
+      <Drawer
+        isOpen={isOpen}
+        placement="left"
+        onClose={onClose}
+        finalFocusRef={btnRef}
+      >
+        <DrawerOverlay />
+        <DrawerContent
+          borderRight="2px solid black"
+          width="270px"
+          height="100%"
+        >
+          <DrawerCloseButton />
+          <DrawerHeader>{header}</DrawerHeader>
+          <DrawerBody mt="25">{body}</DrawerBody>
+          <DrawerFooter>{footer}</DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}

src/components/NavigationMenu/index.tsx

@@ -3,7 +3,7 @@ import { Link as RouterLink } from "react-router-dom";
 
 const NavigationMenu = () => {
   return (
-    <Box bg="#193917" p={4} color="white">
+    <Box bg="#193917" p={4} w={"100%"} color="white">
       <Flex justifyContent="space-around">
         <Link as={RouterLink} to="/" p={2}>
           Home

src/components/SidebarComponent/index.tsx

-import { HamburgerIcon } from "@chakra-ui/icons"; //Para o codigo funcionar sem erros deve-se dar npm i @chakra-ui/icons
-import {
-    Avatar,
-    Box,
-    Button,
-    Drawer,
-    DrawerBody,
-    DrawerCloseButton,
-    DrawerContent,
-    DrawerFooter,
-    DrawerHeader,
-    DrawerOverlay,
-    Flex,
-    IconButton,
-    Image,
-    Stack,
-    Text,
-    useDisclosure,
-    useMediaQuery,
-} from "@chakra-ui/react";
-import React, { useState } from "react";
-import { Link as RouterLink } from "react-router-dom";
-import LogoProvisorio from "../../../public/Logo.svg";
-import "../../app/App.css";
-
-export default function SidebarComponent() {
-    const { isOpen, onOpen, onClose } = useDisclosure();
-    const btnRef = React.useRef<HTMLButtonElement | null>(null);
-    const [isLargerThanHD] = useMediaQuery("(min-width: 1000px)"); //Se tiver pelo menos esse tamanho vai ser estático, caso contrário, vai ter o hambúrguer. COloquei esse tamanho para o Desktop
-
-    const [activeButton, setActiveButton] = useState<string>(""); // Estado para controlar o botão ativo
-
-    const handleButtonClick = (buttonName: string) => {
-        setActiveButton(buttonName);
-    };
-
-    const header = (
-      <Box className="h-12 px-2 mt-5">
-        <Image src={LogoProvisorio} />
-      </Box>
-    );
-    
-    const body = (
-        <Box className="bg-white w-full">
-          <Stack direction="column" spacing="32px">
-            <Button
-              size="lg"
-              _hover={{ bg: "#21381B", textColor: "white" }}
-              variant="ghost"
-              className={activeButton === "Estoque" ? "active-button" : ""}
-              onClick={() => handleButtonClick("Estoque")}
-            >
-              <Text className="font-bold text-3xl" as={RouterLink} to="/">
-                Estoque
-              </Text>
-            </Button>
-            <Button
-              size="lg"
-              variant="ghost"
-              _hover={{ bg: "#21381B", textColor: "white" }}
-              className={activeButton === "Pedidos" ? "active-button" : ""}
-              onClick={() => handleButtonClick("Pedidos")}
-            >
-              <Text className="font-bold text-3xl" as={RouterLink} to="/">
-                Pedidos
-              </Text>
-            </Button>
-            <Button
-              size="lg"
-              variant="ghost"
-              _hover={{ bg: "#21381B", textColor: "white" }}
-              className={activeButton === "Suporte" ? "active-button" : ""}
-              onClick={() => handleButtonClick("Suporte")}
-            >
-              <Text className="font-bold text-3xl" as={RouterLink} to="/">
-                Suporte
-              </Text>
-            </Button>
-            <Button
-              size="lg"
-              variant="ghost"
-              _hover={{ bg: "#21381B", textColor: "white" }}
-              className={activeButton === "Perfil" ? "active-button" : ""}
-              onClick={() => handleButtonClick("Perfil")}
-            >
-              <Text className="font-bold text-3xl" as={RouterLink} to="/">
-                Perfil
-              </Text>
-            </Button>
-            <Button size="lg" variant="ghost">
-              <Text className="text-red-600 font-bold text-3xl" as={RouterLink} to="/">
-                Sair
-              </Text>
-            </Button>
-          </Stack>
-        </Box>
-    );
-
-    const footer = (
-      <Flex className="items-center justify-center w-full mb-3">
-        <Avatar bg="#4F6144" />
-        <Text className="ml-2 font-bold text-2xl p-1" as={RouterLink} to="/login">
-          <b>Fulano</b>
-        </Text>
-      </Flex>
-    );
-
-    return (
-        <>
-            {isLargerThanHD ? ( //estática
-                <Box className="w-72 h-full bg-white border-r-2 border-black flex flex-col items-center py-4 justify-between">
-                    {header}
-                    {body}
-                    {footer}
-                </Box>
-            ) : (
-                <Button //hambúrguer
-                    className="p-2 w-10 h-full"
-                    ref={btnRef}
-                    bg="#21381B"
-                    onClick={onOpen}
-                >
-                    <IconButton
-                        colorScheme="black"
-                        aria-label="CloseMenu"
-                        icon={<HamburgerIcon />}
-                    />
-                </Button>
-            )}
-
-            <Drawer
-                isOpen={isOpen}
-                placement="left"
-                onClose={onClose}
-                finalFocusRef={btnRef}
-            >
-                <DrawerOverlay />
-                <DrawerContent
-                    borderRight="2px solid black"
-                    width="270px"
-                    height="100%"
-                >
-                    <DrawerCloseButton />
-                    <DrawerHeader>{header}</DrawerHeader>
-                    <DrawerBody mt="25">{body}</DrawerBody>
-                    <DrawerFooter>{footer}</DrawerFooter>
-                </DrawerContent>
-            </Drawer>
-        </>
-    );
-}

src/config/chakra.config.ts

@@ -35,7 +35,8 @@ const theme = extendTheme({
     green300: "#4F6144",
     green500: "#193917",
 
-    red100: "#E02D37",
+    red500: "#E02D37",
+    red800: "#C62828",
 
     orange300: "#E95E2D",
     orange400: "#B76817",