Formulários de Login e Cadastro

.eslintrc.json

@@ -4,6 +4,7 @@
 		"@rocketseat/eslint-config/next"
   ],
   "rules": {
-    "no-unused-vars": "off"
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off"
   }
 }

package.json

@@ -36,10 +36,10 @@
     "formik": "^2.4.2",
     "framer-motion": "^10.13.0",
     "next": "13.4.12",
+    "phosphor-react": "^1.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-easy-crop": "^5.0.2",
-    "react-fast-marquee": "^1.6.0",
     "react-toastify": "^9.1.3",
     "styled-components": "^6.0.5",
     "swiper": "^10.0.4",

src/components/atoms/Button/index.tsx

@@ -1,75 +1,23 @@
-import { ReactNode } from 'react'
-import {
-  ButtonDefault,
-  ButtonForm,
-  ButtonFormVariant,
-  ButtonModal,
-  ButtonModalSecondary,
-  ButtonUnstyled,
-  ButtonVariant,
-} from './style'
+import { ComponentType, ElementType, ReactNode } from 'react'
+import { ButtonStyle, ButtonStyleProps } from './style'
 
-import Link from 'next/link'
+type ElementOrComponentType = ElementType<any> | ComponentType<any>
 
-interface ButtonProps {
-  content: ReactNode
-  btnRole?:
-    | 'primary'
-    | 'secondary'
-    | 'unstyled'
-    | 'modal-secondary'
-    | 'modal-default'
-    | 'form'
-    | 'form-secondary'
-  disabled?: boolean
-  onClick?: () => void
+interface ButtonProps extends ButtonStyleProps {
+  children: ReactNode
+  as?: ElementOrComponentType
+  [key: string]: any
 }
 
 export function Button({
-  content,
-  btnRole = 'primary',
-  disabled = false,
-  onClick,
+  children,
+  variant = 'primary',
+  size = 'lg',
+  ...props
 }: ButtonProps) {
-  if (btnRole === 'primary') return <ButtonDefault>{content}</ButtonDefault>
-
-  if (btnRole === 'secondary')
-    return <ButtonVariant type="button">{content}</ButtonVariant>
-
-  if (btnRole === 'unstyled')
-    return (
-      <ButtonUnstyled onClick={onClick} type="button">
-        {content}
-      </ButtonUnstyled>
-    )
-
-  if (btnRole === 'modal-secondary')
-    return (
-      <ButtonModalSecondary onClick={onClick} type="button">
-        {content}
-      </ButtonModalSecondary>
-    )
-
-  if (btnRole === 'modal-default')
-    return (
-      <Link href={'/'}>
-        <ButtonModal type="button">{content}</ButtonModal>
-      </Link>
-    )
-
-  if (btnRole === 'form-secondary')
-    return (
-      <ButtonFormVariant onClick={onClick} type="button">
-        {content}
-      </ButtonFormVariant>
-    )
-
-  if (btnRole === 'form')
-    return (
-      <ButtonForm type="submit" disabled={disabled}>
-        {content}
-      </ButtonForm>
-    )
-
-  return <></>
+  return (
+    <ButtonStyle variant={variant} size={size} {...props}>
+      {children}
+    </ButtonStyle>
+  )
 }

src/components/atoms/Button/style.ts

@@ -1,97 +1,88 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
-export const ButtonDefault = styled.button`
-  font-size: ${(props) => props.theme.fontSizes.sm};
-  border-color: ${(props) => props.theme.colors.blue[400]};
-  color: ${(props) => props.theme.colors.white};
-  background-color: ${(props) => props.theme.colors.blue[400]};
-
-  &:hover {
-    background-color: transparent;
-    color: ${(props) => props.theme.colors.blue[400]};
-  }
-`
-
-export const ButtonVariant = styled(ButtonDefault)`
-  border-color: ${(props) => props.theme.colors.blue[400]};
-  color: ${(props) => props.theme.colors.blue[400]};
-  background-color: transparent;
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.blue[400]};
-    color: ${(props) => props.theme.colors.white};
-  }
-`
-
-export const ButtonForm = styled(ButtonDefault)`
-  width: 100%;
-  height: 48px;
-
-  background: ${(props) => props.theme.colors.blue[400]};
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.blue[700]};
-    color: ${(props) => props.theme.colors.white};
-    box-shadow: 0px 1px 15px rgba(17, 101, 186, 0.4);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    filter: grayscale(100%);
-  }
-`
+const BaseStylesButton = styled.button`
+  all: unset;
 
-export const ButtonFormVariant = styled(ButtonForm)`
-  width: 100%;
-  border-color: ${(props) => props.theme.colors.blue[400]};
-  color: ${(props) => props.theme.colors.blue[400]};
-  background-color: ${(props) => props.theme.colors.white};
-`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
 
-export const ButtonUnstyled = styled.button`
-  all: unset;
+  border-radius: 0.5rem;
   cursor: pointer;
-  margin: 0px;
-  text-decoration: underline;
-  transition: all 0.3s ease;
-
-  &:hover {
-    color: ${(props) => props.theme.colors.blue[300]};
-  }
-`
 
-export const ButtonModal = styled.button`
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 150%;
-  color: #fff;
-  padding: 8px 40px;
-  border: 2px solid ${(props) => props.theme.colors.red[500]};
-  background-color: ${(props) => props.theme.colors.red[500]};
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 0.7;
 
-  a {
-    color: #fff;
-    width: 100%;
-    height: 100%;
-    padding: 8px 40px;
-  }
+  transition: 0.3s ease;
 
-  &:hover {
-    color: #5d5f5d;
-    background-color: transparent;
-    border-color: #5d5f5d;
-  }
+  ${(props) => {
+    if (props.disabled) {
+      return css`
+        cursor: not-allowed;
+      `
+    }
+  }}
 `
 
-export const ButtonModalSecondary = styled(ButtonModal)`
-  color: #5d5f5d;
-  background-color: transparent;
-  border: 2px solid #5d5f5d;
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.red[500]};
-    color: #fff;
-    border-color: ${(props) => props.theme.colors.red[500]};
-  }
+export interface ButtonStyleProps {
+  variant?: 'primary' | 'secondary' | 'tertiary'
+  size?: 'lg' | 'md' | 'sm'
+}
+
+export const ButtonStyle = styled(BaseStylesButton)<ButtonStyleProps>`
+  ${({ variant, theme, disabled }) => {
+    switch (variant) {
+      case 'primary':
+        return css`
+          border: 2px solid
+            ${!disabled ? theme.colors.blue[800] : theme.colors.gray[500]};
+          background-color: ${!disabled
+            ? theme.colors.blue[800]
+            : theme.colors.gray[500]};
+          color: ${theme.colors.white};
+
+          &:not(:disabled):hover {
+            border-color: ${theme.colors.blue[850]};
+            background-color: ${theme.colors.blue[850]};
+          }
+        `
+      case 'secondary':
+        return css`
+          border: 2px solid ${theme.colors.blue[800]};
+          color: ${theme.colors.blue[800]};
+
+          &:not(:disabled):hover {
+            border-color: ${theme.colors.blue[850]};
+            color: ${theme.colors.blue[850]};
+          }
+        `
+      case 'tertiary':
+        return css`
+          color: ${theme.colors.blue[800]};
+
+          &:not(:disabled):hover {
+            color: ${theme.colors.blue[850]};
+          }
+        `
+    }
+  }}
+
+  ${({ size }) => {
+    switch (size) {
+      case 'lg':
+        return css`
+          padding: 1rem 1.5rem;
+        `
+      case 'md':
+        return css`
+          padding: 0.75rem 1.5rem;
+        `
+      case 'sm':
+        return css`
+          padding: 0.5rem 1.5rem;
+        `
+    }
+  }}
 `

src/components/atoms/CardOnboarding/index.tsx

@@ -1,22 +1,26 @@
 import Image from 'next/image'
 import { ContainerCard } from './style'
+import { ReactNode } from 'react'
 
 interface CardOnboardingProps {
   title: string
-  description: string
+  children: ReactNode
   img: string
 }
 
 export function CardOnboarding({
   title,
-  description,
+  children: description,
   img,
 }: CardOnboardingProps) {
   return (
     <ContainerCard>
       <Image width={180} height={180} src={img} alt={title} loading="eager" />
-      <h3>{title}</h3>
-      <p>{description}</p>
+
+      <section>
+        <h5 className="title">{title}</h5>
+        <p>{description}</p>
+      </section>
     </ContainerCard>
   )
 }