diff --git a/.eslintrc.json b/.eslintrc.json index a98d7291..534c7ebc 100644 --- a/.eslintrc.json +++ b/.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" } } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 4dcf9e2d..ad24c5d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "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", @@ -7105,6 +7106,17 @@ "node": ">=8" } }, + "node_modules/phosphor-react": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/phosphor-react/-/phosphor-react-1.4.1.tgz", + "integrity": "sha512-gO5j7U0xZrdglTAYDYPACU4xDOFBTJmptrrB/GeR+tHhCZF3nUMyGmV/0hnloKjuTrOmpSFlbfOY78H39rgjUQ==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16" + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", diff --git a/package.json b/package.json index d7ede534..ac4fc99e 100644 --- a/package.json +++ b/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", diff --git a/src/assets/homepage/footer/discord.webp b/src/assets/homepage/footer/discord.webp deleted file mode 100644 index a2018d01..00000000 Binary files a/src/assets/homepage/footer/discord.webp and /dev/null differ diff --git a/src/assets/homepage/footer/face.webp b/src/assets/homepage/footer/face.webp deleted file mode 100644 index ff513b80..00000000 Binary files a/src/assets/homepage/footer/face.webp and /dev/null differ diff --git a/src/assets/homepage/footer/github.webp b/src/assets/homepage/footer/github.webp deleted file mode 100644 index 4eec1357..00000000 Binary files a/src/assets/homepage/footer/github.webp and /dev/null differ diff --git a/src/assets/homepage/footer/insta.webp b/src/assets/homepage/footer/insta.webp deleted file mode 100644 index 70a1ede5..00000000 Binary files a/src/assets/homepage/footer/insta.webp and /dev/null differ diff --git a/src/assets/homepage/footer/linkedin.webp b/src/assets/homepage/footer/linkedin.webp deleted file mode 100644 index 1248662e..00000000 Binary files a/src/assets/homepage/footer/linkedin.webp and /dev/null differ diff --git a/src/assets/homepage/footer/telegram.webp b/src/assets/homepage/footer/telegram.webp deleted file mode 100644 index b2487594..00000000 Binary files a/src/assets/homepage/footer/telegram.webp and /dev/null differ diff --git a/src/assets/homepage/footer/twitch.webp b/src/assets/homepage/footer/twitch.webp deleted file mode 100644 index d3c8bbfa..00000000 Binary files a/src/assets/homepage/footer/twitch.webp and /dev/null differ diff --git a/src/assets/homepage/footer/twitter.webp b/src/assets/homepage/footer/twitter.webp deleted file mode 100644 index 15856533..00000000 Binary files a/src/assets/homepage/footer/twitter.webp and /dev/null differ diff --git a/src/assets/homepage/footer/youtube.webp b/src/assets/homepage/footer/youtube.webp deleted file mode 100644 index 66c71c50..00000000 Binary files a/src/assets/homepage/footer/youtube.webp and /dev/null differ diff --git a/src/assets/homepage/onboarding/conecte.svg b/src/assets/homepage/onboarding/conecte.svg deleted file mode 100644 index a56b39d0..00000000 --- a/src/assets/homepage/onboarding/conecte.svg +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/homepage/onboarding/descreva.svg b/src/assets/homepage/onboarding/descreva.svg index 03531958..f2c7f426 100644 --- a/src/assets/homepage/onboarding/descreva.svg +++ b/src/assets/homepage/onboarding/descreva.svg @@ -1,68 +1,82 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/homepage/onboarding/encontre.svg b/src/assets/homepage/onboarding/encontre.svg index 35fd0bfe..632bc2c7 100644 --- a/src/assets/homepage/onboarding/encontre.svg +++ b/src/assets/homepage/onboarding/encontre.svg @@ -1,51 +1,70 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/homepage/onboarding/marque.svg b/src/assets/homepage/onboarding/marque.svg index 7f9467cd..336db38e 100644 --- a/src/assets/homepage/onboarding/marque.svg +++ b/src/assets/homepage/onboarding/marque.svg @@ -1,74 +1,85 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/logos/sou-junior.svg b/src/assets/logos/sou-junior.svg index 79fc6cf1..e41b2299 100644 --- a/src/assets/logos/sou-junior.svg +++ b/src/assets/logos/sou-junior.svg @@ -1,18 +1,4 @@ - - - - - - - - - - - - - - - - - + + + diff --git a/src/components/atoms/Button/index.tsx b/src/components/atoms/Button/index.tsx index 1243d1c3..9c4e6b45 100644 --- a/src/components/atoms/Button/index.tsx +++ b/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 | ComponentType -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 {content} - - if (btnRole === 'secondary') - return {content} - - if (btnRole === 'unstyled') - return ( - - {content} - - ) - - if (btnRole === 'modal-secondary') - return ( - - {content} - - ) - - if (btnRole === 'modal-default') - return ( - - {content} - - ) - - if (btnRole === 'form-secondary') - return ( - - {content} - - ) - - if (btnRole === 'form') - return ( - - {content} - - ) - - return <> + return ( + + {children} + + ) } diff --git a/src/components/atoms/Button/style.ts b/src/components/atoms/Button/style.ts index f6149791..3e59e57d 100644 --- a/src/components/atoms/Button/style.ts +++ b/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)` + ${({ 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; + ` + } + }} ` diff --git a/src/components/atoms/CardOnboarding/index.tsx b/src/components/atoms/CardOnboarding/index.tsx index 615c9161..7cfc1223 100644 --- a/src/components/atoms/CardOnboarding/index.tsx +++ b/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 ( -

{title}

-

{description}

+ +
+
{title}
+

{description}

+
) } diff --git a/src/components/atoms/CardOnboarding/style.ts b/src/components/atoms/CardOnboarding/style.ts index 6eba4d3e..fc006a02 100644 --- a/src/components/atoms/CardOnboarding/style.ts +++ b/src/components/atoms/CardOnboarding/style.ts @@ -1,26 +1,49 @@ +import { device } from '@/styles/theme' import styled from 'styled-components' export const ContainerCard = styled.div` display: flex; flex-direction: column; - text-align: center; - justify-content: space-between; align-items: center; + gap: 1rem; + background-color: ${(props) => props.theme.colors.white}; border-radius: 8px; - gap: 16px; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - padding: 24px 16px; - width: 292px; - height: 360px; - - h3 { - color: ${(props) => props.theme.colors.blue[500]}; - font-size: ${(props) => props.theme.fontSizes.md}; + padding: 1.5rem 1rem; + text-align: center; + + img { + width: 10rem; + height: 10rem; + + @media ${device.mobileL} { + width: 7.875rem; + height: 7.875rem; + } } - p { - color: ${(props) => props.theme.colors.gray[700]} !important; - font-size: ${(props) => props.theme.fontSizes.sm} !important; + section { + display: flex; + flex-direction: column; + gap: 0.6rem; + + .title { + color: ${(props) => props.theme.colors.blue[850]}; + font-size: 1.25rem; + line-height: 1.5rem; + font-weight: 500; + } + + p { + color: ${(props) => props.theme.colors.black[200]}; + font-size: ${(props) => props.theme.fontSizes.sm}; + font-weight: 400; + line-height: 1.4rem; + max-width: 15.75rem; + + @media ${device.mobileL} { + max-width: 13.875rem; + } + } } ` diff --git a/src/components/atoms/CardSchedulingMentor/index.tsx b/src/components/atoms/CardSchedulingMentor/index.tsx index c739b9f7..c1217513 100644 --- a/src/components/atoms/CardSchedulingMentor/index.tsx +++ b/src/components/atoms/CardSchedulingMentor/index.tsx @@ -4,16 +4,16 @@ import { StacksContainer, StyledName, TitleContainer, - Stack, ButtonsContainer, InfoButton, - SchedButton, } from './styled' import Image from 'next/image' import ModalSchedMentor from '../ModalSchedMentor' import { useState } from 'react' import { IMentors } from '@/services/interfaces/IUseMentorsService' import userWithoutImage from '@/assets/userDefault.png' +import { Tag } from '../Tag' +import { Button } from '../Button' interface MentorsProps { mentor: IMentors @@ -26,9 +26,12 @@ export default function CardScheduling({ mentor }: MentorsProps) { 'https://calendly.com', ).toString() + const hasValidCalendly = mentor.calendlyName && mentor.agendaName + function handleModal() { setOpen(!open) } + return ( @@ -45,16 +48,18 @@ export default function CardScheduling({ mentor }: MentorsProps) { <> {mentor.specialties.map((specialty) => { - return {specialty} + return {specialty} })} - - + {hasValidCalendly ? ( + + ) : ( + + )} Saiba mais diff --git a/src/components/atoms/CardSchedulingMentor/styled.ts b/src/components/atoms/CardSchedulingMentor/styled.ts index 6c9a0b13..cf60d9b8 100644 --- a/src/components/atoms/CardSchedulingMentor/styled.ts +++ b/src/components/atoms/CardSchedulingMentor/styled.ts @@ -40,16 +40,6 @@ export const StacksContainer = styled.span` flex-wrap: wrap; ` -export const Stack = styled.span` - background: #f5f1f3; - font-size: 0.75rem; - line-height: 0.9rem; - color: #001633; - padding: 0.5rem; - border-radius: 40px; - text-align: center; -` - const BaseButton = styled.button` padding: 1rem 1.5rem; border-radius: 0.5rem; @@ -58,20 +48,6 @@ const BaseButton = styled.button` border: none; ` -export const SchedButton = styled(BaseButton)` - background-color: #003986; - color: #fff; - - &:not(:disabled):hover { - background-color: #002c66; - } - - &:disabled { - background-color: ${(props) => props.theme.colors.gray[700]}; - cursor: not-allowed; - } -` - export const InfoButton = styled(BaseButton)` background-color: #ffff; color: #003986; diff --git a/src/components/atoms/Checkbox/style.ts b/src/components/atoms/Checkbox/style.ts index 51401e96..b32b3aa2 100644 --- a/src/components/atoms/Checkbox/style.ts +++ b/src/components/atoms/Checkbox/style.ts @@ -2,22 +2,21 @@ import styled from 'styled-components' export const CheckboxContainer = styled.div` display: flex; - gap: 12px; + gap: 0.5rem; align-items: center; justify-content: flex-start; - margin-bottom: 16px; input { - border: 1px solid ${(props) => props.theme.colors.blue[400]} !important; + border: 1px solid ${(props) => props.theme.colors.black[200]} !important; border-radius: 4px !important; - width: 16px !important; - height: 16px !important; - color: ${(props) => props.theme.colors.blue[400]} !important; + width: 1rem !important; + height: 1rem !important; + color: ${(props) => props.theme.colors.black[200]} !important; } label { - color: ${(props) => props.theme.colors.blue[400]}; - font-size: ${(props) => props.theme.fontSizes.sm}; + color: ${(props) => props.theme.colors.black[200]}; + font-size: ${(props) => props.theme.fontSizes.xs}; cursor: pointer; } ` diff --git a/src/components/atoms/EditPhotoModal/index.tsx b/src/components/atoms/EditPhotoModal/index.tsx index 7caf027c..81487775 100644 --- a/src/components/atoms/EditPhotoModal/index.tsx +++ b/src/components/atoms/EditPhotoModal/index.tsx @@ -2,20 +2,17 @@ import { Modal } from '@/components/atoms/Modal' import { ButtonsContainer, EditPhotoContainer, - StyledButton, StyledInfo, StyledHR, - NextButton, - AddPhotoButton, - EditButton, + SaveButton, + ActionButton, + PhotoContainerActions, } from './styled' -import PhotoButtom from '../PhotoButtom' -import CameraAltIcon from '@mui/icons-material/CameraAlt' -import ModeIcon from '@mui/icons-material/Mode' -import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate' +import PhotoButton from '../PhotoButton' import { useState } from 'react' import ModalImageEditor from '../ModalImageEditor' import { handleError } from '@/utils/handleError' +import { Camera, PencilSimple } from 'phosphor-react' interface EditPhotoModalProps { isOpen: boolean @@ -85,39 +82,49 @@ export default function EditPhotoModal({ } return ( - + Insira sua foto - - - - - Editar - - - - Câmera - - - - - Adicionar - - - - + + + + + + Editar + + + + Câmera + + + + + + + Adicionar + + + + + + + handleSavePhoto(selectedPhoto)} > Salvar - + props.theme.colors.gray1.neutral}; - color: #666; - font-weight: bold; - - .icon { - font-size: 30px; - } + gap: 2rem; ` -export const EditButton = styled.button` +export const ButtonsContainer = styled.div` + width: 100%; display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 96px; - height: 56px; - padding: 0px 12px; - border-radius: 8px; - border: none; - background-color: ${(props) => props.theme.colors.gray1.neutral}; - color: ${(props) => (props.disabled ? '#ccc' : '#666')}; - font-weight: bold; - cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')}; - - .icon { - font-size: 30px; - opacity: ${(props) => (props.disabled ? 0.6 : 1)}; - } + gap: 1rem; ` export const StyledHR = styled.div` width: 100%; - height: 2px; - background-color: #6666; + height: 1px; + background-color: ${(props) => props.theme.colors.gray[700]}; + margin-top: 0.25rem; ` -export const NextButton = styled.button` - width: 78px; - height: 48px; - padding: 12px, 16px, 12px, 16px; - border-radius: 8px; - background-color: ${(props) => - props.disabled ? '#ACACAC' : props.theme.colors.blue[700]}; - border: none; - color: white; - font-size: 16px; - align-self: flex-end; - margin-top: -10px; +export const SaveButton = styled(Button)` + margin-left: auto; ` -export const AddPhotoButton = styled.label` - width: 96px; - height: 56px; - background-color: ${(props) => props.theme.colors.gray1.neutral}; - border-radius: 8px; +export const ActionButton = styled.button` + flex: 1; + display: flex; flex-direction: column; align-items: center; justify-content: center; + + padding: 0.5rem 0.75rem; + background-color: ${(props) => props.theme.colors.gray[200]}; + border-radius: 0.5rem; + border: 0; + cursor: pointer; - color: #666; + color: ${(props) => props.theme.colors.gray[700]}; + font-weight: 600; + line-height: 1.2rem; + font-size: 1rem; - .icon { - font-size: 30px; + svg { + width: 1.5rem; + height: 1.5rem; + fill: ${(props) => props.theme.colors.gray[700]}; } input[type='file'] { display: none; } + + &:disabled { + cursor: not-allowed; + background-color: ${(props) => props.theme.colors.gray[200]}; + color: ${(props) => props.theme.colors.gray[600]}; + } ` diff --git a/src/components/atoms/Eye/index.tsx b/src/components/atoms/Eye/index.tsx index ab09e57f..e213f27c 100644 --- a/src/components/atoms/Eye/index.tsx +++ b/src/components/atoms/Eye/index.tsx @@ -1,47 +1,17 @@ import VisibilityIcon from '@mui/icons-material/Visibility' import VisibilityOffIcon from '@mui/icons-material/VisibilityOff' -import { MouseEvent } from 'react' import { EyeContainer } from './style' +import { ToggleProps } from '@radix-ui/react-toggle' -interface EyeProps { - eye: boolean - size: number - onClick: (e: MouseEvent) => void - marginTop?: number - color?: string - left?: string - right?: string - top?: string - bottom?: string -} +type EyeProps = ToggleProps -export function Eye({ - eye, - onClick, - marginTop, - color, - right = '1rem', - top = 'auto', - left = 'auto', - bottom = 'auto', -}: EyeProps) { +export function Eye({ pressed, ...props }: EyeProps) { return ( - - {' '} - {eye === false ? ( - + + {pressed ? ( + ) : ( - + )} ) diff --git a/src/components/atoms/Eye/style.ts b/src/components/atoms/Eye/style.ts index b4accb4f..bca91353 100644 --- a/src/components/atoms/Eye/style.ts +++ b/src/components/atoms/Eye/style.ts @@ -1,35 +1,17 @@ -import styled, { css } from 'styled-components' +import * as Toggle from '@radix-ui/react-toggle' +import styled from 'styled-components' -export const EyeContainer = styled.button< - Partial<{ - marginTop: number - position: { - left: string - right: string - top: string - bottom: string - } - }> ->` +export const EyeContainer = styled(Toggle.Root)` + all: unset; position: absolute; - border: none; - background-color: transparent; - color: ${(props) => props.theme.colors.gray[700]}; - margin-top: ${(props) => props.marginTop}px; - cursor: pointer; outline: none; padding: 0; z-index: 1; line-height: 0; + cursor: pointer; + color: ${(props) => props.theme.colors.gray[700]}; - ${(props) => { - if (props.position) { - return css` - top: ${props.position.top}; - bottom: ${props.position.bottom}; - left: ${props.position.left}; - right: ${props.position.right}; - ` - } - }} + &:focus-visible { + box-shadow: 0 0 0 2px ${(props) => props.theme.colors.blue[400]}; + } ` diff --git a/src/components/atoms/GridSpecialities/index.tsx b/src/components/atoms/GridSpecialities/index.tsx index 228217d8..2aee07d5 100644 --- a/src/components/atoms/GridSpecialities/index.tsx +++ b/src/components/atoms/GridSpecialities/index.tsx @@ -100,7 +100,7 @@ export default function GridSpecialities({ Em quais áreas você deseja mentorar?* - <>* Indica um campo obrigatório + * Indica um campo obrigatório {specialties.map((speciality, index) => ( diff --git a/src/components/atoms/GridSpecialities/styled.ts b/src/components/atoms/GridSpecialities/styled.ts index f459d8c2..748f0e87 100644 --- a/src/components/atoms/GridSpecialities/styled.ts +++ b/src/components/atoms/GridSpecialities/styled.ts @@ -1,4 +1,6 @@ import styled from 'styled-components' +import { Button } from '../Button' + interface SpecialityItemProps { selected: boolean } @@ -17,8 +19,9 @@ export const SpecialityItem = styled.div` border-radius: 50px; padding: 8px 12px 8px 4px; background-color: ${(props) => - props.selected ? props.theme.colors.blue[600] : 'gray'}; - color: white; + props.selected ? props.theme.colors.blue[600] : '#CBCBCB'}; + color: ${(props) => + props.selected ? props.theme.colors.white : props.theme.colors.gray[700]}; text-align: center; cursor: pointer; display: flex; @@ -60,39 +63,27 @@ export const StyledTitle = styled.span` ` export const StyledImportant = styled.span` - font-size: 14px; + font-size: ${(props) => props.theme.fontSizes.xs}; font-weight: 400; - line-height: 17px; - letter-spacing: 0em; + line-height: 1rem; text-align: left; width: 100%; - margin-top: 15px; + margin-top: 1rem; + color: ${(props) => props.theme.colors.black[200]}; - &::first-letter { + span { color: ${(props) => props.theme.colors.blue[600]}; } ` export const StyledHR = styled.div` width: 100%; - height: 2px; - background-color: #6666; - margin-top: 30px; + height: 1px; + background-color: ${(props) => props.theme.colors.gray[700]}; + margin-top: 2.25rem; ` -export const NextButton = styled.button` - width: 106px; - height: 48px; - padding: 12px, 16px, 12px, 16px; - border-radius: 8px; - background-color: ${(props) => - props.disabled ? '#ACACAC' : props.theme.colors.blue[700]}; - border: none; - color: white; - font-size: 16px; +export const NextButton = styled(Button)` margin-top: 15px; align-self: flex-end; - - && disable { - } ` diff --git a/src/components/atoms/InfoTooltip/style.ts b/src/components/atoms/InfoTooltip/style.ts index 30266e02..720cd912 100644 --- a/src/components/atoms/InfoTooltip/style.ts +++ b/src/components/atoms/InfoTooltip/style.ts @@ -6,7 +6,6 @@ export const InfoContainer = styled.span>` height: 24px; position: absolute; right: ${(props) => props.right}px; - margin-right: 30px; cursor: pointer; z-index: 40; diff --git a/src/components/atoms/InputForm/index.tsx b/src/components/atoms/InputForm/index.tsx index 95b9b679..a0798ed7 100644 --- a/src/components/atoms/InputForm/index.tsx +++ b/src/components/atoms/InputForm/index.tsx @@ -1,14 +1,21 @@ -import { ErrorMessage } from 'formik' -import { Label } from './label' -import { ContainerDiv, ContainerError, ContainerInput, Field } from './style' +import { ErrorMessage, Field, FieldAttributes, useFormikContext } from 'formik' +import { + ContainerInputLabel, + ContainerError, + ContainerInput, + StyledLabel, +} from './style' +import { ReactNode } from 'react' -interface InputFormProps { +interface InputFormProps extends FieldAttributes { name: string type: string - placeholder: string + placeholder?: string label: string inputType?: string - showAsterisk?: boolean + isRequired?: boolean + children?: ReactNode + className?: string } export function InputForm({ @@ -17,14 +24,20 @@ export function InputForm({ placeholder, label, inputType, - showAsterisk = true, + isRequired = true, + children, ...rest }: InputFormProps) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const { errors, touched } = useFormikContext() + return ( - - + {errors[name] && touched[name] && ( + + + + )} + ) } diff --git a/src/components/atoms/InputForm/label.tsx b/src/components/atoms/InputForm/label.tsx deleted file mode 100644 index 814b8967..00000000 --- a/src/components/atoms/InputForm/label.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { StyledLabel, StyledLabelError } from './style' - -interface LabelProps { - name: string - isError?: boolean -} - -export const Label = ({ name, isError = false }: LabelProps) => { - const LabelComponent = isError ? StyledLabelError : StyledLabel - return {name} -} diff --git a/src/components/atoms/InputForm/style.ts b/src/components/atoms/InputForm/style.ts index d418db05..3d3fb724 100644 --- a/src/components/atoms/InputForm/style.ts +++ b/src/components/atoms/InputForm/style.ts @@ -1,46 +1,63 @@ -import { Field as FieldComponent } from 'formik' import styled from 'styled-components' -export const ContainerDiv = styled.div` - div { - display: flex; - width: 100%; - } +export const ContainerInputLabel = styled.label` + display: flex; + flex-direction: column; + gap: 0.5rem; + width: 100%; ` + export const ContainerInput = styled.div` + display: flex; + align-items: center; + gap: 0.5rem; + + border: 1px solid + ${(props) => + props.className?.includes('error') + ? props.theme.colors.red[500] + : props.theme.colors.gray[600]}; + border-radius: 8px; + background: ${(props) => props.theme.colors.white}; + color: ${(props) => props.theme.colors.black[200]}; + padding: 0 1rem; + + transition: 0.3s ease; + + &:hover { + border: 1px solid ${(props) => props.theme.colors.blue[850]}; + } + + &:focus-within { + border: 1px solid ${(props) => props.theme.colors.blue[850]}; + box-shadow: 0 0 0 1px ${(props) => props.theme.colors.blue[850]}; + } + + svg { + width: 1.5rem; + height: 1.5rem; + color: ${(props) => props.theme.colors.gray[700]}; + } + input, textarea, select { + flex: 1; + outline: none; resize: none; + height: 100%; width: 100%; - margin: 4px 0px 16px; - padding: 12px 32px 12px; - font-size: 14px; - outline: none; - border: 1px solid ${(props) => props.theme.colors.gray[700]}; + + padding: 0.875rem 0; + font-size: 0.875rem; + line-height: 150%; + + border: 0; border-radius: 8px; - background: ${(props) => props.theme.colors.white}; - color: ${(props) => props.theme.colors.gray[300]}; - - &:hover { - box-shadow: 0px 3px 6px rgba(17, 101, 186, 0.6); - input { - border: 1px solid ${(props) => props.theme.colors.blue[400]}; - } - } - &:focus-within { - border-radius: 8px; - -moz-border-radius: 8px; - -webkit-border-radius: 8px; - -webkit-box-shadow: 0px 0px 15px 1px - ${(props) => props.theme.colors.blue[700]}; - -moz-box-shadow: 0px 0px 15px 1px - ${(props) => props.theme.colors.blue[700]}; - box-shadow: 0px 0px 5px 0px ${(props) => props.theme.colors.blue[700]}; - border: 1px solid ${(props) => props.theme.colors.blue[700]}; - outline: none; + &::placeholder { + color: ${(props) => props.theme.colors.gray[250]}; } } @@ -49,29 +66,18 @@ export const ContainerInput = styled.div` } ` -export const ContainerError = styled.div` - .error-message { - color: ${(props) => props.theme.colors.error}; - font-weight: bold; - font-size: 12px; - margin-bottom: 12px; - margin-top: -8px; - } +export const ContainerError = styled.span` + color: ${(props) => props.theme.colors.red[500]}; + font-weight: bold; + font-size: 0.75rem; ` -export const StyledLabel = styled.label` - font-size: 14px; +export const StyledLabel = styled.span` + font-size: 0.875rem; + line-height: 150%; color: ${(props) => props.theme.colors.gray[700]}; ` export const StyledLabelError = styled(StyledLabel)` - color: ${(props) => props.theme.colors.error}; -` - -export const Field = styled(FieldComponent)` - color: ${(props) => props.theme.colors.gray[700]} !important; - - &::placeholder { - color: ${(props) => props.theme.colors.gray[300]}; - } + color: ${(props) => props.theme.colors.red[500]}; ` diff --git a/src/components/atoms/InputLogin/index.tsx b/src/components/atoms/InputLogin/index.tsx deleted file mode 100644 index 455e2efc..00000000 --- a/src/components/atoms/InputLogin/index.tsx +++ /dev/null @@ -1,99 +0,0 @@ -// import { Lock, User2Icon } from "lucide-react"; -import { MouseEvent, useState } from 'react' -import { Eye } from '../Eye' -import { - ContainerInput, - ContainerInputError, - InputError, - Label, - LabelError, -} from './style' - -interface InputProps { - type: string - value: string - error: string - setValue: (e: string) => void - placeholder: string - label: string - id: string -} - -export function InputLogin({ - type, - value, - error, - setValue, - placeholder, - label, - id, -}: InputProps) { - const [eye, setEye] = useState(true) - const [show, setShow] = useState(true) - - function toggleShow(e: MouseEvent) { - e.preventDefault() - setEye(!eye) - setShow(!show) - } - - if (error !== '') { - return ( - <> - {label} - - {/* {type === "email" ? ( - - ) : ( - - )} */} - setValue(e.target.value)} - /> - {type === 'password' && ( - toggleShow(e)} - size={20} - /> - )} - - - ) - } else { - return ( - <> - - - {/* {type === "email" ? ( - - ) : ( - - )} */} - - setValue(e.target.value)} - /> - {type === 'password' && ( - toggleShow(e)} - size={20} - color="#046AD0" - /> - )} - - - ) - } -} diff --git a/src/components/atoms/InputLogin/style.ts b/src/components/atoms/InputLogin/style.ts deleted file mode 100644 index 43622cbe..00000000 --- a/src/components/atoms/InputLogin/style.ts +++ /dev/null @@ -1,90 +0,0 @@ -import styled from 'styled-components' - -export const ContainerInput = styled.div` - display: flex; - align-items: center; - justify-content: center; - gap: 16px; - position: relative; - border-radius: 8px; - margin: 8px 0px 32px; - - .icon { - color: ${(props) => props.theme.colors.gray[700]}; - transition: all 0.2s ease; - position: absolute; - left: 16px; - } - - &:hover { - box-shadow: 0px 3px 6px rgba(17, 101, 186, 0.6); - input { - border: 1px solid ${(props) => props.theme.colors.blue[400]}; - } - - .icon { - color: ${(props) => props.theme.colors.blue[400]}; - } - } - - &:focus-within { - .icon { - fill: ${(props) => props.theme.colors.blue[400]}; - color: ${(props) => props.theme.colors.gray[700]}; - } - input { - border: 1px solid ${(props) => props.theme.colors.blue[400]}; - } - } - - input { - height: 100%; - width: 100%; - padding: 16px 48px 16px; - outline: none; - background-color: '#fff'; - border: 1px solid ${(props) => props.theme.colors.gray[700]}; - border-radius: 8px; - - &::placeholder { - margin: 20px; - color: ${(props) => props.theme.colors.gray[700]}; - } - } -` - -export const Label = styled.label` - color: ${(props) => props.theme.colors.gray[700]}; -` - -export const ContainerEye = styled.button` - position: absolute; - border: none; - height: 48px; - background-color: transparent; - right: 0px; -` - -export const InputError = styled.input` - height: 100%; - width: 100%; - padding: 16px 48px 16px; - width: 100%; - outline: none; - background-color: '#fff'; - border: 1px solid ${(props) => props.theme.colors.error}; - border-radius: 8px; -` - -export const LabelError = styled(Label)` - color: ${(props) => props.theme.colors.error}; -` - -export const ContainerInputError = styled(ContainerInput)` - input { - border: 1px solid ${(props) => props.theme.colors.error}; - } - .icon { - color: ${(props) => props.theme.colors.error}; - } -` diff --git a/src/components/atoms/InputSearch/styled.ts b/src/components/atoms/InputSearch/styled.ts index 3296592b..b6a88e56 100644 --- a/src/components/atoms/InputSearch/styled.ts +++ b/src/components/atoms/InputSearch/styled.ts @@ -4,7 +4,7 @@ import SearchIcon from '@mui/icons-material/Search' export const ContainerInput = styled.div` border-radius: 0.5rem; position: relative; - border: 1px solid #acacac; + border: 1px solid ${(props) => props.theme.colors.gray[600]}; max-width: 389px; width: 100%; @@ -12,10 +12,10 @@ export const ContainerInput = styled.div` align-items: center; justify-content: space-between; - color: #323232; + color: ${(props) => props.theme.colors.black[200]}; &:focus-within { - border-color: #003986; + border-color: ${(props) => props.theme.colors.blue[800]}; } ` diff --git a/src/components/atoms/ItemHero/index.tsx b/src/components/atoms/ItemHero/index.tsx index 78923316..6c5d98f5 100644 --- a/src/components/atoms/ItemHero/index.tsx +++ b/src/components/atoms/ItemHero/index.tsx @@ -32,6 +32,7 @@ export function ItemHero< src={imageSrc} alt="Imagem de um Mentor" loading="eager" + quality={100} /> ) diff --git a/src/components/atoms/ItemHero/style.ts b/src/components/atoms/ItemHero/style.ts index b3174993..74b3d407 100644 --- a/src/components/atoms/ItemHero/style.ts +++ b/src/components/atoms/ItemHero/style.ts @@ -1,32 +1,38 @@ +import { device } from '@/styles/theme' import styled from 'styled-components' -export const ItemInvisible = styled.div` - height: 100px; - width: 100px; - border-radius: '12px'; +const BaseItemStyles = styled.div` + height: 5.5rem; + width: 5.5rem; + border-radius: 24px; + + @media ${device.mobileL} { + width: 3rem; + height: 3rem; + border-radius: 12px; + } +` + +export const ItemInvisible = styled(BaseItemStyles)` display: none; ` -export const ItemPrimary = styled.div` - height: 100px; - width: 100px; - background-color: ${(props) => props.theme.colors.blue[400]}; - border: 4px solid ${(props) => props.theme.colors.blue[400]}; - border-radius: '12px'; +export const ItemPrimary = styled(BaseItemStyles)` + background-color: ${(props) => props.theme.colors.blue[800]}; + border: 4px solid ${(props) => props.theme.colors.blue[800]}; ` -export const ItemSecondary = styled.div` - height: 100px; - width: 100px; - border: 4px solid ${(props) => props.theme.colors.blue[400]}; +export const ItemSecondary = styled(BaseItemStyles)` + border: 4px solid ${(props) => props.theme.colors.blue[800]}; background-color: transparent; - border-radius: '12px'; ` -export const ItemImage = styled.div` - height: 100px; - width: 100px; - object-fit: cover; +export const ItemImage = styled(BaseItemStyles)` border: none; - border-radius: '12px'; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } ` diff --git a/src/components/atoms/MarqueeRolagem/index.tsx b/src/components/atoms/MarqueeRolagem/index.tsx deleted file mode 100644 index cbb3672c..00000000 --- a/src/components/atoms/MarqueeRolagem/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ReactNode } from 'react' -import Marquee from 'react-fast-marquee' - -interface MarqueeRolagemProps { - children: ReactNode - pauseOnHover: boolean - speed: number -} - -export function MarqueeRolagem({ - children, - pauseOnHover, - speed, -}: MarqueeRolagemProps) { - return ( - - {children} - - ) -} diff --git a/src/components/atoms/Modal/index.tsx b/src/components/atoms/Modal/index.tsx index cda8e0fe..c48afcf8 100644 --- a/src/components/atoms/Modal/index.tsx +++ b/src/components/atoms/Modal/index.tsx @@ -1,13 +1,13 @@ -import { Box, Dialog } from '@mui/material' +import { Box, Dialog, DialogProps } from '@mui/material' import { ReactNode } from 'react' import { ButtonClose } from './style' import CloseIcon from '@mui/icons-material/Close' -interface ModalProps { +interface ModalProps extends DialogProps { open: boolean onClose: () => void children: ReactNode - height: number + height?: number width?: number showBtn?: boolean bgColor?: string @@ -21,6 +21,7 @@ export const Modal = ({ width, showBtn = false, bgColor = '#d7d9d7', + ...props }: ModalProps) => { return ( void isOpen: boolean onClose: () => void -}> = ({ src, onSave, isOpen, onClose }) => { +} + +const ModalImageEditor = ({ + src, + onSave, + isOpen, + onClose, +}: ModalImageEditorProps) => { const [crop, setCrop] = useState({ x: 0, y: 0 }) const [zoom, setZoom] = useState(1) const [croppedImage, setCroppedImage] = useState(null) + const { colors } = useTheme() const onCropComplete = (croppedArea: Area, croppedAreaPixels: Area) => { const x = croppedAreaPixels.x @@ -65,15 +76,9 @@ const ModalImageEditor: React.FC<{ } return ( - + - Editar foto + Editar foto - Zoom - - - - setZoom(Number(zoom))} - /> - + - + + + Zoom + + + + + setZoom(Number(zoom))} + /> + + + + + + - - Descartar - Salvar - + + + + + ) diff --git a/src/components/atoms/ModalImageEditor/styled.ts b/src/components/atoms/ModalImageEditor/styled.ts index c2ac6e73..fe226f7f 100644 --- a/src/components/atoms/ModalImageEditor/styled.ts +++ b/src/components/atoms/ModalImageEditor/styled.ts @@ -4,16 +4,25 @@ export const Container = styled.div` display: flex; flex-direction: column; align-items: center; + gap: 1rem; width: 387px; - height: 528px; - padding: 0px 30px; - gap: 10px; + padding: 0px 1.5rem 1.5rem; +` + +export const CropTitle = styled.h4` + font-weight: 500; + font-size: 1.25rem; + line-height: 1.5rem; + color: ${(props) => props.theme.colors.black[200]}; + margin-right: auto; ` export const CropInfo = styled.span` - text-align: left; - width: 100%; - font-weight: 600; + font-weight: 400; + font-size: 1rem; + line-height: 1.4rem; + color: ${(props) => props.theme.colors.black[200]}; + margin-right: auto; ` export const CropContainer = styled.div` @@ -31,55 +40,39 @@ export const CropImage = styled.img` border: 1px solid red; ` +export const CropControlsContainer = styled.div` + width: 100%; +` + export const Controls = styled.div` display: flex; align-items: center; gap: 12px; - justify-content: center; width: 100%; ` -export const ButtomsContainer = styled.div` +export const ButtonsContainer = styled.div` display: flex; justify-content: flex-end; width: 100%; - gap: 5px; -` - -export const SaveButton = styled.button` - padding: 10px 20px; - background-color: ${(props) => props.theme.colors.blue[700]}; - color: white; - border: none; - cursor: pointer; - transition: background-color 0.3s ease; - - &:hover { - background-color: #0056b3; - } -` - -export const CancelButtom = styled.button` - padding: 10px 20px; - background-color: white; - color: ${(props) => props.theme.colors.blue[700]}; - border: none; - cursor: pointer; - transition: background-color 0.3s ease; + gap: 1rem; - &:hover { - background-color: ${(props) => props.theme.colors.blue[700]}; - color: white; + button { + padding-left: 1rem; + padding-right: 1rem; } ` export const ControlButton = styled.span` - font-size: 25px; cursor: pointer; + width: 1rem; + height: 1rem; + color: ${(props) => props.theme.colors.black[200]}; ` export const StyledHR = styled.div` width: 100%; - height: 2px; - background-color: #6666; + height: 1px; + background-color: ${(props) => props.theme.colors.gray[700]}; + margin-top: 0.25rem; ` diff --git a/src/components/atoms/ModalSchedMentor/index.tsx b/src/components/atoms/ModalSchedMentor/index.tsx index 03053f67..3cb857f0 100644 --- a/src/components/atoms/ModalSchedMentor/index.tsx +++ b/src/components/atoms/ModalSchedMentor/index.tsx @@ -4,7 +4,6 @@ import { MentorName, ModalContainer, PhotoContainer, - SchedButton, SpecialityContainer, Specialitytitle, Stack, @@ -15,8 +14,8 @@ import { } from './styled' import { IMentors } from '@/services/interfaces/IUseMentorsService' import UserDefault from '@/assets/userDefault.png' -import Link from 'next/link' import Close from '@mui/icons-material/Close' +import { Button } from '../Button' interface ModalSchedProps { open: boolean @@ -34,6 +33,8 @@ export default function ModalSchedMentor({ 'https://calendly.com', ).toString() + const hasValidCalendly = mentor.calendlyName && mentor.agendaName + return ( @@ -61,11 +62,14 @@ export default function ModalSchedMentor({ {mentor.aboutMe} - - - Agendar mentoria - - + + {hasValidCalendly ? ( + + ) : ( + + )} ) diff --git a/src/components/atoms/ModalSchedMentor/styled.ts b/src/components/atoms/ModalSchedMentor/styled.ts index db1c9bc3..651190b1 100644 --- a/src/components/atoms/ModalSchedMentor/styled.ts +++ b/src/components/atoms/ModalSchedMentor/styled.ts @@ -17,6 +17,11 @@ export const ModalContainer = styled.div` background-color: white; border-radius: 1rem; padding: 2rem; + + button, + a { + width: max-content; + } ` export const TitleContainer = styled.div` @@ -73,30 +78,6 @@ export const AboutContainer = styled.div` color: #666666; ` -export const SchedButton = styled.button` - width: 174.5px; - height: 44px; - padding: 16px 24px 16px 24px; - border-radius: 8px; - gap: 8px; - background-color: #003986; - border: none; - color: white; - font-size: 15px; - line-height: 19.2px; - display: flex; - align-items: center; - - &:not(:disabled):hover { - background-color: #002c66; - } - - &:disabled { - background-color: ${(props) => props.theme.colors.gray[700]}; - cursor: not-allowed; - } -` - export const ButtonClose = styled.button` all: unset; color: #cbcbcb; diff --git a/src/components/atoms/PersonTitle/index.tsx b/src/components/atoms/PersonTitle/index.tsx deleted file mode 100644 index 35a0ab4a..00000000 --- a/src/components/atoms/PersonTitle/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { ContainerTitle } from './style' - -interface PersonTitleProps { - text: string -} - -export function PersonTitle({ text }: PersonTitleProps) { - return ( - -

{text}

- - ) -} diff --git a/src/components/atoms/PersonTitle/style.ts b/src/components/atoms/PersonTitle/style.ts deleted file mode 100644 index 8d8c8fe6..00000000 --- a/src/components/atoms/PersonTitle/style.ts +++ /dev/null @@ -1,11 +0,0 @@ -import styled from 'styled-components' - -export const ContainerTitle = styled.div` - margin-bottom: 8px; - margin-top: 60px; - - h2 { - color: ${(props) => props.theme.colors.gray[700]}; - font-size: ${(props) => props.theme.fontSizes.xxl}; - } -` diff --git a/src/components/atoms/PhotoButtom/index.tsx b/src/components/atoms/PhotoButtom/index.tsx deleted file mode 100644 index 40526246..00000000 --- a/src/components/atoms/PhotoButtom/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { UserProfileButtom } from './styled' -import Image from 'next/image' -import userAvatar from '@/assets/icons/userAvatar.png' - -interface PhotoButtomProps { - onClick?: () => void - selectedPhoto?: string | null - size?: number -} - -export default function PhotoButtom({ - onClick, - selectedPhoto, - size = 80, -}: PhotoButtomProps) { - return ( - <> - - {selectedPhoto ? ( - Selected - ) : ( - Avatar usuário. - )} - - - ) -} diff --git a/src/components/atoms/PhotoButtom/styled.ts b/src/components/atoms/PhotoButtom/styled.ts deleted file mode 100644 index 701e8a21..00000000 --- a/src/components/atoms/PhotoButtom/styled.ts +++ /dev/null @@ -1,23 +0,0 @@ -import styled from 'styled-components' - -export const UserProfileButtom = styled.button` - cursor: pointer; - border: none; - background-color: white; - width: 80px; - height: 90px; - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - .icon { - width: 80px; - height: 80px; - } - - img { - border-radius: 50%; - } -` diff --git a/src/components/atoms/PhotoButton/index.tsx b/src/components/atoms/PhotoButton/index.tsx new file mode 100644 index 00000000..57060add --- /dev/null +++ b/src/components/atoms/PhotoButton/index.tsx @@ -0,0 +1,25 @@ +import { UserProfileButtom } from './styled' +import Image from 'next/image' +import { User } from 'phosphor-react' + +interface PhotoButtonProps { + onClick?: () => void + selectedPhoto?: string | null + size?: number +} + +export default function PhotoButton({ + onClick, + selectedPhoto, + size = 80, +}: PhotoButtonProps) { + return ( + + {selectedPhoto ? ( + Selected + ) : ( + + )} + + ) +} diff --git a/src/components/atoms/PhotoButton/styled.ts b/src/components/atoms/PhotoButton/styled.ts new file mode 100644 index 00000000..f7e80720 --- /dev/null +++ b/src/components/atoms/PhotoButton/styled.ts @@ -0,0 +1,27 @@ +import styled from 'styled-components' + +export const UserProfileButtom = styled.button` + display: flex; + justify-content: center; + align-items: center; + + border: 2px solid ${(props) => props.theme.colors.gray[700]}; + background-color: ${(props) => props.theme.colors.white}; + border-radius: 50%; + color: ${(props) => props.theme.colors.gray[700]}; + + width: 8rem; + height: 8rem; + overflow: hidden; + + .icon-without-img { + width: 2.5rem; + height: 2.5rem; + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + } +` diff --git a/src/components/atoms/Select/index.tsx b/src/components/atoms/Select/index.tsx index ac3e2c58..df74d0f8 100644 --- a/src/components/atoms/Select/index.tsx +++ b/src/components/atoms/Select/index.tsx @@ -18,7 +18,7 @@ interface SelectProps extends SelectPrimitive.SelectProps { export function Select({ children, placeholder, ...props }: SelectProps) { return ( - + @@ -26,7 +26,11 @@ export function Select({ children, placeholder, ...props }: SelectProps) { - + diff --git a/src/components/atoms/Select/styles.ts b/src/components/atoms/Select/styles.ts index 3d94facf..87d3744b 100644 --- a/src/components/atoms/Select/styles.ts +++ b/src/components/atoms/Select/styles.ts @@ -20,7 +20,7 @@ export const SelectTrigger = styled(Select.Trigger)` } &[data-placeholder] { - color: ${(props) => props.theme.colors.gray[500]}; + color: ${(props) => props.theme.colors.gray[600]}; } svg { @@ -29,7 +29,7 @@ export const SelectTrigger = styled(Select.Trigger)` &:focus-visible { border: 1px solid ${(props) => props.theme.colors.blue[400]}; - box-shadow: 0 0 0 2px rgba(17, 101, 186, 0.6); + box-shadow: 0 0 0 1px ${(props) => props.theme.colors.blue[850]}; } ` @@ -55,12 +55,9 @@ export const SelectItemContainer = styled(Select.Item)` border-radius: 0.25rem; outline: none; - &:hover { - background: ${(props) => props.theme.colors.gray[300]}; - } - - &:focus-visible { - box-shadow: 0 0 0 2px rgba(17, 101, 186, 0.6); + &:hover, + &:focus { + background: ${(props) => props.theme.colors.gray[250]}; } ` @@ -79,5 +76,5 @@ export const ScrollAreaBar = styled(ScrollArea.Scrollbar)` export const ScrollAreaThumb = styled(ScrollArea.Thumb)` border-radius: 0.25rem; - background: ${(props) => props.theme.colors.gray[300]}; + background: ${(props) => props.theme.colors.gray[250]}; ` diff --git a/src/components/atoms/SelectFilter/styled.ts b/src/components/atoms/SelectFilter/styled.ts index 6d210ef6..58e5d439 100644 --- a/src/components/atoms/SelectFilter/styled.ts +++ b/src/components/atoms/SelectFilter/styled.ts @@ -12,6 +12,7 @@ export const SelectTrigger = styled(Select.Trigger)` color: #323232; padding: 0.75rem 1.5rem; border: 1px solid #666; + border-radius: 0.5rem; cursor: pointer; outline: 0; diff --git a/src/components/atoms/Slider/index.tsx b/src/components/atoms/Slider/index.tsx index 75b29713..ef9a8a58 100644 --- a/src/components/atoms/Slider/index.tsx +++ b/src/components/atoms/Slider/index.tsx @@ -1,13 +1,11 @@ import { CardMentor } from '@/components/molecules/CardMentor' import { MutableRefObject } from 'react' -import { A11y, Pagination, Scrollbar } from 'swiper/modules' +import { A11y, Pagination } from 'swiper/modules' import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react' import { SwiperContainer } from './style' import 'swiper/css' -import 'swiper/css/navigation' import 'swiper/css/pagination' -import 'swiper/css/scrollbar' import { useMentorsService } from '@/services/user/useMentorsService' interface SliderProps { @@ -26,9 +24,14 @@ export const Slider = ({ swiperRef }: SliderProps) => { return ( {completedProfileMentors?.map((mentor) => { diff --git a/src/components/atoms/Slider/style.ts b/src/components/atoms/Slider/style.ts index a5b4b8de..2dc05ce8 100644 --- a/src/components/atoms/Slider/style.ts +++ b/src/components/atoms/Slider/style.ts @@ -1,5 +1,27 @@ +import { device } from '@/styles/theme' import styled from 'styled-components' export const SwiperContainer = styled.div` position: relative; + + .swiper-slide { + max-width: 19rem; + } + + @media ${device.desktopM} { + .swiper-slide:first-child { + padding-left: 2rem; + } + } + + @media ${device.desktopS} { + .swiper-slide, + .swiper-slide:first-child { + padding-left: 1.5rem; + } + + .swiper-slide:last-child { + padding-right: 1rem; + } + } ` diff --git a/src/components/atoms/Tag/index.tsx b/src/components/atoms/Tag/index.tsx new file mode 100644 index 00000000..a3cafc28 --- /dev/null +++ b/src/components/atoms/Tag/index.tsx @@ -0,0 +1,14 @@ +import { ComponentType, ElementType, ReactNode } from 'react' +import { TagStyle } from './styles' + +type ElementOrComponentType = ElementType | ComponentType + +interface TagProps { + children: ReactNode + as?: ElementOrComponentType + [key: string]: any +} + +export function Tag({ children, ...props }: TagProps) { + return {children} +} diff --git a/src/components/atoms/Tag/styles.ts b/src/components/atoms/Tag/styles.ts new file mode 100644 index 00000000..d2dc4a42 --- /dev/null +++ b/src/components/atoms/Tag/styles.ts @@ -0,0 +1,12 @@ +import styled from 'styled-components' + +export const TagStyle = styled.span` + border-radius: 2.5rem; + background-color: ${(props) => props.theme.colors.blue[25]}; + padding: 0.5rem; + color: ${(props) => props.theme.colors.blue[950]}; + + font-size: 0.75rem; + font-weight: 400; + line-height: 120%; +` diff --git a/src/components/atoms/UserAvatar/index.tsx b/src/components/atoms/UserAvatar/index.tsx index e59f4afe..68d5a89a 100644 --- a/src/components/atoms/UserAvatar/index.tsx +++ b/src/components/atoms/UserAvatar/index.tsx @@ -19,9 +19,9 @@ export function UserAvatar() { User Avatar setImageError(true)} /> )} diff --git a/src/components/molecules/Calendar/styles.ts b/src/components/molecules/Calendar/styles.ts index 81c87e52..56549ba0 100644 --- a/src/components/molecules/Calendar/styles.ts +++ b/src/components/molecules/Calendar/styles.ts @@ -78,7 +78,7 @@ export const CalendarDay = styled(Toggle.Root)` width: 1.1rem; transition: 0.3s; text-align: center; - color: ${(props) => props.isDisabled && props.theme.colors.gray[300]}; + color: ${(props) => props.isDisabled && props.theme.colors.gray[250]}; line-height: 150%; padding: 0.5rem; @@ -105,7 +105,7 @@ export const CalendarTrigger = styled(Popover.Trigger)` all: unset; cursor: pointer; padding: 0.75rem 1rem; - border: 1px solid ${(props) => props.theme.colors.gray[700]}; + border: 1px solid ${(props) => props.theme.colors.gray[600]}; border-radius: 0.5rem; transition: all 0.3s ease; @@ -121,16 +121,20 @@ export const CalendarTrigger = styled(Popover.Trigger)` } &[data-state='closed']:hover { - border: 1px solid ${(props) => props.theme.colors.blue[400]}; - box-shadow: 0 3px 6px 0 rgba(17, 101, 186, 0.6); + border: 1px solid ${(props) => props.theme.colors.blue[850]}; } - &[data-state='open'] { - border: 1px solid ${(props) => props.theme.colors.blue[400]}; - box-shadow: 0 0 0 1px ${(props) => props.theme.colors.blue[400]}; + &[data-state='open'], + &:focus-visible { + border: 1px solid ${(props) => props.theme.colors.blue[850]}; + box-shadow: 0 0 0 1px ${(props) => props.theme.colors.blue[850]}; svg { - color: ${(props) => props.theme.colors.blue[400]}; + color: ${(props) => props.theme.colors.blue[850]}; } } + + &.error { + border: 1px solid ${(props) => props.theme.colors.red[500]}; + } ` diff --git a/src/components/molecules/CardDepo/index.tsx b/src/components/molecules/CardDepo/index.tsx index 4c70a73a..2062e57e 100644 --- a/src/components/molecules/CardDepo/index.tsx +++ b/src/components/molecules/CardDepo/index.tsx @@ -1,6 +1,11 @@ -import { Card } from '@/components/atoms/Card' import Image from 'next/image' -import { GreatContainer, HeaderCardDepo } from './style' +import { + Card, + HeaderCardDepo, + TestimonyDescription, + TestimonyImageContainer, + TestimonyInfo, +} from './style' import { ITestimony } from '@/services/interfaces/IUseTestimonyService' interface CardDepoProps { @@ -9,31 +14,31 @@ interface CardDepoProps { export function CardDepo({ testimony }: CardDepoProps) { return ( -
- - - - {testimony.imageUrl && ( - {testimony.userName} - )} -
-

{testimony.userName}

-
{testimony.role}
-
- -

{testimony.description}

- - -
+ + + + {testimony.imageUrl && ( + {testimony.userName} + )} + + + + {testimony.userName} + + {testimony.role} + + + + + + {testimony.description} + + ) } diff --git a/src/components/molecules/CardDepo/style.ts b/src/components/molecules/CardDepo/style.ts index 200f3285..8e6eb511 100644 --- a/src/components/molecules/CardDepo/style.ts +++ b/src/components/molecules/CardDepo/style.ts @@ -1,57 +1,77 @@ import styled from 'styled-components' -export const HeaderCardDepo = styled.div` +export const Card = styled.div` display: flex; - justify-content: flex-start; - align-items: center; - gap: 20px; + flex-direction: column; + gap: 1rem; - img { - width: 56px; - height: 56px; - object-fit: cover; - border-radius: 500%; + width: 100%; + max-width: 19.5rem; + height: 18.5rem; + padding: 1.5rem 1rem; + + border-radius: 0.5rem; + box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25); + + @media (max-width: 348px) { + max-width: 17.5rem; } - div { - display: flex; - flex-direction: column; +` + +export const HeaderCardDepo = styled.div` + display: flex; + align-items: flex-end; + justify-self: flex-start; + gap: 1rem; +` + +export const TestimonyInfo = styled.div` + display: flex; + flex-direction: column; + flex: 1; + + .testimony-name { + color: ${(props) => props.theme.colors.gray[700]}; + font-weight: 600; + line-height: 1.4rem; } - h4 { - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 150%; - color: #212121; - font-family: 'Radio Canada'; + .testimony-role { + color: ${(props) => props.theme.colors.gray[600]}; + line-height: 1.4rem; + + display: block; + max-width: 10rem; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } +` + +export const TestimonyImageContainer = styled.div` + background-color: ${(props) => props.theme.colors.gray[250]}; + border-radius: 50%; + overflow: hidden; - h5 { - font-family: 'Radio Canada'; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 150%; - color: #5d5f5d; + width: 4rem; + height: 4rem; + + img { + width: 100%; + height: 100%; + object-fit: cover; } ` -export const GreatContainer = styled.div` - padding: 20px; - display: flex; - flex-direction: column; - gap: 12px; - height: 280px; - width: 302px; +export const TestimonyDescription = styled.p` + display: -webkit-box; + -webkit-line-clamp: 7; + -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; - p { - font-family: 'Radio Canada'; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 24px; - color: #5d5f5d; - } + font-size: ${(props) => props.theme.fontSizes.xs}; + line-height: 1.5rem; + font-weight: 400; + color: ${(props) => props.theme.colors.gray[750]}; ` diff --git a/src/components/molecules/CardMentor/index.tsx b/src/components/molecules/CardMentor/index.tsx index f7f2f7bd..bee11d9b 100644 --- a/src/components/molecules/CardMentor/index.tsx +++ b/src/components/molecules/CardMentor/index.tsx @@ -1,52 +1,66 @@ import { Card } from '@/components/atoms/Card' -import { - CardButton, - CardImage, - CardStack, - CardStacks, - CardSubtitle, - CardTitle, -} from './style' +import { CardImage, CardStacks, CardTitle } from './style' import { IMentors } from '@/services/interfaces/IUseMentorsService' -import userWithoutImage from '@/assets/userDefault.png' +import { Tag } from '@/components/atoms/Tag' +import { useTheme } from 'styled-components' +import { Button } from '@/components/atoms/Button' +import Image from 'next/image' interface CardMentorProps { mentor: IMentors } -const MAX_SPECIALTIES_NUMBER = 3 - export function CardMentor({ mentor }: CardMentorProps) { - const specialties = mentor.specialties.slice(0, MAX_SPECIALTIES_NUMBER) - const allSpecialtiesString = mentor.specialties.join(', ') + const { colors } = useTheme() + + const splitMentorName = mentor.fullName.split(' ') + const hasValidCalendly = mentor.calendlyName || mentor.agendaName return ( - - -
- {mentor.fullName} - {mentor.aboutMe} -
- - {specialties.map((specialty: string) => ( - {specialty} + + + {mentor.profile && ( + {mentor.fullName} + )} + + + + {splitMentorName[0]} + {splitMentorName[splitMentorName.length - 1]} + + + + {mentor.specialties.map((specialty: string) => ( + {specialty} ))} - - - + + {hasValidCalendly ? ( + + ) : ( + + )} ) } diff --git a/src/components/molecules/CardMentor/style.ts b/src/components/molecules/CardMentor/style.ts index 339ecc10..fc7a27c5 100644 --- a/src/components/molecules/CardMentor/style.ts +++ b/src/components/molecules/CardMentor/style.ts @@ -1,25 +1,28 @@ import styled from 'styled-components' -import Image from 'next/image' -export const CardImage = styled(Image)` - width: 9.75rem; - height: 9.75rem; +export const CardImage = styled.div` + width: 7.5rem; + height: 7.5rem; border-radius: 50%; - box-shadow: - 0px 2px 4px 0px rgba(0, 0, 0, 0.15), - 0px 1px 4px 0px rgba(0, 0, 0, 0.25); - object-fit: cover; + overflow: hidden; align-self: center; + background-color: ${(props) => props.theme.colors.gray[250]}; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } ` -export const CardTitle = styled.h1` - font-family: 'Radio Canada'; - font-style: normal; - font-weight: 600; - font-size: 1.5rem; - line-height: 150%; - color: ${(props) => props.theme.colors.gray[700]}; - margin-bottom: 0.25rem; +export const CardTitle = styled.p` + display: flex; + flex-direction: column; + + font-weight: 500; + font-size: 1.25rem; + line-height: 120%; + color: ${(props) => props.theme.colors.black[200]}; ` export const CardSubtitle = styled.p` @@ -41,27 +44,16 @@ export const CardSubtitle = styled.p` export const CardStacks = styled.div` display: flex; align-items: center; - gap: 10px; + flex-wrap: wrap; + gap: 0.5rem; width: 100%; -` - -export const CardStack = styled.div` - display: flex; - justify-content: center; - align-items: center; - padding: 6px 12px; - background: #5d5f5d; - border-radius: 4px; - font-family: 'Radio Canada'; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 100%; - color: #fdfdfd; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + // Button + & ~ a, + & ~ button { + justify-content: center; + margin-top: auto; + } ` export const CardButton = styled.a` diff --git a/src/components/molecules/Footer/index.tsx b/src/components/molecules/Footer/index.tsx deleted file mode 100644 index 9b781951..00000000 --- a/src/components/molecules/Footer/index.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import { Button } from '@/components/atoms/Button' -import Image from 'next/image' -import Link from 'next/link' -import { useState } from 'react' -import { ModalPrivacyPolicy } from '../ModalPrivacyPolicy' -import ModalTerms from '../ModalTerms' -import { - ContainerFooter, - ContainerModais, - ContainerSocialMedias, - SectionFooter, - SectionFooterLinks, -} from './style' - -import discord from '@/assets/homepage/footer/discord.webp' -import facebook from '@/assets/homepage/footer/face.webp' -import github from '@/assets/homepage/footer/github.webp' -import insta from '@/assets/homepage/footer/insta.webp' -import linkedin from '@/assets/homepage/footer/linkedin.webp' -import telegram from '@/assets/homepage/footer/telegram.webp' -import twitch from '@/assets/homepage/footer/twitch.webp' -import twitter from '@/assets/homepage/footer/twitter.webp' -import youtube from '@/assets/homepage/footer/youtube.webp' -import logo from '@/assets/logos/sou-junior-black.webp' - -export function Footer() { - const [openTermos, setOpenTermos] = useState(false) - const [openPoliticas, setOpenPoliticas] = useState(false) - - const handleOpenTermos = () => setOpenTermos(true) - const handleCloseTermos = () => setOpenTermos(false) - const handleOpenPoliticas = () => setOpenPoliticas(true) - const handleClosePoliticas = () => setOpenPoliticas(false) - - return ( -
- - - Logo - -
- ) -} diff --git a/src/components/molecules/Footer/style.ts b/src/components/molecules/Footer/style.ts deleted file mode 100644 index 7182d71a..00000000 --- a/src/components/molecules/Footer/style.ts +++ /dev/null @@ -1,70 +0,0 @@ -import styled from 'styled-components' - -export const ContainerFooter = styled.div` - padding: 48px; - display: flex; - justify-content: space-around; - gap: 48px; - background: #5d5f5d; - color: #fff; - font-size: 16px; -` - -export const ContainerModais = styled.div` - display: flex; - justify-content: left; - align-items: left; - gap: 24px; - - span { - width: 1px; - height: 24px; - background-color: #fff; - } -` - -export const ContainerSocialMedias = styled.div` - background: #5d5f5d; - color: #fff; - display: flex; - justify-content: center; - align-items: center; - gap: 64px; - padding: 0px 0px 64px; - - a { - &:hover { - filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.6)); - } - } -` - -export const SectionFooter = styled.section` - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - max-width: fit-content; - max-height: 120px; -` - -export const SectionFooterLinks = styled.section` - display: flex; - flex-direction: column; - justify-content: left; - align-items: left; - max-width: fit-content; - - h2 { - font-size: 16px; - margin-bottom: 32px; - line-height: 20px; - } - - a { - color: #fff; - text-align: justify; - margin-bottom: 24px; - line-height: 24px; - } -` diff --git a/src/components/molecules/FormEmailToReset/index.tsx b/src/components/molecules/FormEmailToReset/index.tsx index ef86e4d9..504cf23b 100644 --- a/src/components/molecules/FormEmailToReset/index.tsx +++ b/src/components/molecules/FormEmailToReset/index.tsx @@ -36,11 +36,11 @@ export default function FormEmailToReset() {
logo -

Esqueceu a senha?

- +

Esqueceu a senha?

+

Um e-mail será enviado para o endereço cadastrado com as instruções para redefinir senha. - +

- Voltar ao login diff --git a/src/components/molecules/FormEmailToReset/styled.ts b/src/components/molecules/FormEmailToReset/styled.ts index 5749a309..4393df91 100644 --- a/src/components/molecules/FormEmailToReset/styled.ts +++ b/src/components/molecules/FormEmailToReset/styled.ts @@ -5,24 +5,25 @@ export const ContainerForm = styled.div` height: 36.875rem; background: ${(props) => props.theme.colors.white}; border-radius: 12px; - padding: 12px 0px; form { - p { - color: ${(props) => props.theme.colors.gray[700]}; - font-size: 24px; - font-weight: 700; - line-height: 29px; - letter-spacing: 0em; - text-align: left; - } - span { - color: ${(props) => props.theme.colors.gray[700]}; - font-size: 16px; - font-weight: 400; - line-height: 24px; - letter-spacing: 0em; - text-align: left; + display: flex; + flex-direction: column; + + label { + span { + font-size: ${(props) => props.theme.fontSizes.xs}; + } + + span:first-child { + font-size: 1rem; + line-height: 1.5rem; + color: ${(props) => props.theme.colors.gray[750]}; + } + + input { + font-size: 1rem; + } } button { @@ -32,16 +33,27 @@ export const ContainerForm = styled.div` ` export const MessagesContainer = styled.div` - margin: 30px 0px; + margin: 1.5rem 0px; + + h2 { + color: ${(props) => props.theme.colors.gray[750]}; + font-size: ${(props) => props.theme.fontSizes.lg}; + font-weight: 700; + line-height: 1.8rem; + text-align: left; + margin-bottom: 1rem; + } + p { - margin-bottom: 20px; + color: ${(props) => props.theme.colors.gray[750]}; + font-size: 1rem; + line-height: 1.5rem; + text-align: left; } ` -// ... seu código anterior ... - export const FormWrapper = styled.div` - padding: 10px 30px; + padding: 2rem; height: 100%; width: 100%; display: flex; @@ -57,4 +69,8 @@ export const FormWrapper = styled.div` text-align: center; cursor: pointer; } + + button { + margin-top: 1.5rem !important; + } ` diff --git a/src/components/molecules/FormLogin/index.tsx b/src/components/molecules/FormLogin/index.tsx index 91ee9029..ebfde21d 100644 --- a/src/components/molecules/FormLogin/index.tsx +++ b/src/components/molecules/FormLogin/index.tsx @@ -1,34 +1,44 @@ import CardLoading from '@/assets/loading.gif' import souJuniorLogoImg from '@/assets/logos/sou-junior.svg' import { Button } from '@/components/atoms/Button' -import { InputLogin } from '@/components/atoms/InputLogin' import Image from 'next/image' import Link from 'next/link' -import { FormEvent, useEffect, useState } from 'react' +import { useState } from 'react' import { ToastContainer } from 'react-toastify' import 'react-toastify/dist/ReactToastify.css' import { Checkbox } from '../../atoms/Checkbox' -import { ContainerForm } from './style' +import { + BlockedAccountError, + CallToRegisterText, + ContainerCheckbox, + ContainerForm, + ContainerInput, +} from './style' import UserLoginService from '@/services/user/userLoginService' +import { Form, Formik } from 'formik' +import * as yup from 'yup' +import { InputForm } from '@/components/atoms/InputForm' +import { LockOutlined, PersonOutlineRounded } from '@mui/icons-material' +import { Eye } from '@/components/atoms/Eye' + +const loginSchema = yup.object({ + email: yup.string().email('E-mail inválido').required('Obrigatório'), + password: yup + .string() + .required('A senha é obrigatória') + .min(8, 'Senha inválida'), +}) + +type LoginDataType = yup.InferType export function FormLogin() { - const [email, setEmail] = useState('') - const [password, setPassword] = useState('') const [isKeepConnected, setIsKeepConnected] = useState(false) + const [isPasswordVisible, setIsPasswordVisible] = useState(false) const type = 'mentor' - const { - sendLogin, - formState, - checkFields, - disable, - setSubmitButton, - submitButton, - loading, - } = UserLoginService() + const { sendLogin, disable, submitButton, loading } = UserLoginService() - const handleSubmit = async (event: FormEvent) => { - event.preventDefault() + const handleSubmit = async ({ email, password }: LoginDataType) => { const user = await sendLogin({ email, password, type }) const userStringify = JSON.stringify(user) @@ -40,12 +50,6 @@ export function FormLogin() { } } - useEffect(() => { - const data = { email, password, type, isKeepConnected } - setSubmitButton(!checkFields(data)) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [email, password, type]) - return ( <> + -
- Logo SouJunior + Logo SouJunior -

Bem-vindo de volta

+

Bem-vindo de volta

+ + {({ errors, touched }) => { + return ( + +
+ + + + + - -
- - {!disable && {formState.errors}} -
- {disable && ( - - Seu acesso a conta continua bloqueado, pois você não redefiniu sua - senha após as cinco tentativas de acesso incorretas. Por favor, - clique em ‘Esqueci minha senha’ para realizar a - recuperação - - )} + + + + + + {disable && ( + + Seu acesso a conta continua bloqueado, pois você não + redefiniu sua senha após as cinco tentativas de acesso + incorretas. Por favor, clique em ‘Esqueci minha + senha’ para realizar a recuperação + + )} + +
-
- - - Esqueci a senha - -
+ + + Esqueci minha senha + - -

- Ainda não possui cadastro?{' '} - Clique aqui e cadastre-se -

- + + Ainda não possui cadastro?{' '} + Clique aqui e cadastre-se + + + ) + }} +
) diff --git a/src/components/molecules/FormLogin/style.ts b/src/components/molecules/FormLogin/style.ts index 88f4b1db..028a04a9 100644 --- a/src/components/molecules/FormLogin/style.ts +++ b/src/components/molecules/FormLogin/style.ts @@ -1,45 +1,110 @@ import styled from 'styled-components' export const ContainerForm = styled.div` - max-width: 500px; + max-width: 31.5rem; width: 100%; + display: flex; flex-direction: column; - background-color: ${(props) => props.theme.colors.white}; - position: absolute; - top: 10%; - right: 5%; - border-radius: 12px; - padding: 32px; - filter: drop-shadow(1px 4px 20px rgba(0, 0, 0, 0.4)) - drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); + background: ${(props) => props.theme.colors.white}; + border-radius: 0.5rem; + padding: 1.5rem; + + img { + margin-bottom: 1rem; + width: 16.5rem; + height: 3rem; + } + + h2 { + font-weight: 500; + font-size: ${(props) => props.theme.fontSizes.lg}; + line-height: 120%; + color: ${(props) => props.theme.colors.gray[700]}; + margin-bottom: 2rem; + } form { display: flex; flex-direction: column; - img { - margin-bottom: 40px; + .group-fields { + display: flex; + flex-direction: column; + gap: 1.5rem; } - h2 { - font-weight: 600; - font-size: ${(props) => props.theme.fontSizes.lg}; - line-height: 120%; - color: ${(props) => props.theme.colors.blue[400]}; - margin-bottom: 32px; + input { + font-size: 1rem; + } + } +` + +export const ContainerInput = styled.div` + position: relative; + + svg { + width: 1.5rem; + height: 1.5rem; + } + + label { + span:first-child { + color: ${(props) => props.theme.colors.gray[700]}; } span { - color: ${(props) => props.theme.colors.error}; - /* - position: absolute; - bottom: 0; - */ + font-weight: 400; + font-size: 1rem; + line-height: 150%; } + } + + .eye-visibility { + right: 1rem; + top: 2.8rem; - p { - margin-top: 12px; + svg { + color: ${(props) => props.theme.colors.black[200]}; } } + + &.error span, + &.error svg { + color: ${(props) => props.theme.colors.red[500]} !important; + } + + &:focus-within svg { + color: ${(props) => props.theme.colors.blue[800]}; + } +` + +export const ContainerCheckbox = styled.div` + display: flex; + justify-content: space-between; + margin-top: 1.5rem; + margin-bottom: 2rem; + + a { + color: ${(props) => props.theme.colors.blue[800]}; + font-weight: 500; + } +` + +export const CallToRegisterText = styled.p` + color: ${(props) => props.theme.colors.black[200]}; + line-height: 150%; + margin-top: 2.5rem; + padding-bottom: 0.5rem; + + a { + color: ${(props) => props.theme.colors.blue[800]}; + font-weight: 500; + } +` + +export const BlockedAccountError = styled.p` + color: ${(props) => props.theme.colors.red[500]}; + font-size: 0.875rem; + margin-top: 0.5rem; ` diff --git a/src/components/molecules/FormNewPass/index.tsx b/src/components/molecules/FormNewPass/index.tsx index 3d0c910e..9e8eafb4 100644 --- a/src/components/molecules/FormNewPass/index.tsx +++ b/src/components/molecules/FormNewPass/index.tsx @@ -6,11 +6,10 @@ import { InfoTooltip } from '@/components/atoms/InfoTooltip' import souJuniorLogoImg from '@/assets/logos/sou-junior.svg' import Image from 'next/image' import Link from 'next/link' -import { useState, MouseEvent, useEffect } from 'react' +import { useState, useEffect } from 'react' import { ContainerForm, FormWrapper, - LabelInput, MessagesContainer, WrapperInput, } from './styled' @@ -23,10 +22,9 @@ import 'react-toastify/dist/ReactToastify.css' import ToastSuccess from '../ToastSuccess' export default function FormNewPass() { - const [show, setShow] = useState(true) - const [eye, setEye] = useState(true) - const [showConfirm, setShowConfirm] = useState(true) - const [eyeConfirm, setEyeConfirm] = useState(true) + const [isPasswordVisible, setIsPasswordVisible] = useState(false) + const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = + useState(false) const [toast, setToast] = useState(false) const router = useRouter() @@ -41,22 +39,6 @@ export default function FormNewPass() { email: '', } - const handleShowPassword = ( - e: MouseEvent, - ) => { - e.preventDefault() - setEye(!eye) - setShow(!show) - } - - const handleConfirmPassword = ( - e: MouseEvent, - ) => { - e.preventDefault() - setEyeConfirm(!eyeConfirm) - setShowConfirm(!showConfirm) - } - const { handle } = setNewPasswordService() const formik = useFormik({ @@ -77,55 +59,47 @@ export default function FormNewPass() {
logo -

Nova Senha

- - Preencha os campos abaixo com sua nova senha e confirme-a. - +

Nova Senha

+

Preencha os campos abaixo com sua nova senha e confirme-a.

 - - - handleShowPassword(e)} - eye={eye} - size={20} - top="2rem" - color={'#5D5F5D'} + + + + - - Nova senha - - + + + handleConfirmPassword(e)} - eye={eyeConfirm} - size={20} - top="2rem" - color={'#5D5F5D'} + aria-label="Mostrar confirmação da senha" + pressed={isConfirmPasswordVisible} + onPressedChange={setIsConfirmPasswordVisible} /> - - Confirmar senha - - - Voltar ao login diff --git a/src/components/molecules/FormNewPass/styled.ts b/src/components/molecules/FormNewPass/styled.ts index 33833294..d6418472 100644 --- a/src/components/molecules/FormNewPass/styled.ts +++ b/src/components/molecules/FormNewPass/styled.ts @@ -1,47 +1,47 @@ import { styled } from 'styled-components' export const ContainerForm = styled.div` - width: 31.5rem; + max-width: 31.5rem; + width: 100%; height: 36.875rem; background: ${(props) => props.theme.colors.white}; border-radius: 12px; - padding: 12px 0px; form { - p { - color: ${(props) => props.theme.colors.gray[700]}; - font-size: 24px; - font-weight: 700; - line-height: 29px; - letter-spacing: 0em; - text-align: left; - } - span { - color: ${(props) => props.theme.colors.gray[700]}; - font-size: 16px; - font-weight: 400; - line-height: 24px; - letter-spacing: 0em; - text-align: left; - } + display: flex; + flex-direction: column; button { margin-top: 10px; } + + .new-password-field { + margin-bottom: 1rem; + } } ` export const MessagesContainer = styled.div` - margin: 30px 0px; + margin: 1.5rem 0px; + + h2 { + color: ${(props) => props.theme.colors.gray[750]}; + font-size: ${(props) => props.theme.fontSizes.lg}; + font-weight: 700; + line-height: 1.8rem; + margin-bottom: 1rem; + } + p { - margin-bottom: 20px; + color: ${(props) => props.theme.colors.gray[750]}; + font-size: ${(props) => props.theme.fontSizes.sm}; + font-weight: 400; + line-height: 1.5rem; } ` -// ... seu código anterior ... - export const FormWrapper = styled.div` - padding: 10px 30px; + padding: 2rem; height: 100%; width: 100%; display: flex; @@ -57,20 +57,40 @@ export const FormWrapper = styled.div` text-align: center; cursor: pointer; } + + button { + margin-top: 1.5rem !important; + } ` export const WrapperInput = styled.div` position: relative; -` -export const LabelInput = styled.label` - display: flex; - flex-direction: column; - gap: 0.2rem; + label { + span { + font-size: ${(props) => props.theme.fontSizes.xs}; + } + + span:first-child { + font-size: 1rem; + line-height: 1.5rem; + color: ${(props) => props.theme.colors.gray[750]}; + } + + input { + font-size: 1rem; + padding-right: 2rem; + } + } + + // Eye visibility + button { + right: 1rem; + top: 1.25rem; - span { - color: ${(props) => props.theme.colors.gray[700]}; - font-size: 1rem; - line-height: 150%; + svg { + width: 1.5rem; + height: 1.5rem; + } } ` diff --git a/src/components/molecules/FormOnboard2/index.tsx b/src/components/molecules/FormOnboard2/index.tsx index c58fd0b3..9e6937f3 100644 --- a/src/components/molecules/FormOnboard2/index.tsx +++ b/src/components/molecules/FormOnboard2/index.tsx @@ -1,10 +1,13 @@ -import PhotoButtom from '@/components/atoms/PhotoButtom' +import PhotoButton from '@/components/atoms/PhotoButton' import { BackButton, ButtonContainer, + CharactersWarnInput, Dotted, FormContainer, NextButton, + SelectInputContainer, + SelectItemStyled, StyledHR, StyledImportant, StyledInfo, @@ -12,7 +15,7 @@ import { } from './styled' import { Dispatch, SetStateAction, useEffect, useState } from 'react' import EditPhotoModal from '@/components/atoms/EditPhotoModal' -import { Field, Form, FormikProvider, useFormik } from 'formik' +import { Form, FormikProvider, useFormik } from 'formik' import { InputForm } from '@/components/atoms/InputForm' import UserUpdateService from '@/services/user/userUpdateService' import { useRouter } from 'next/router' @@ -20,6 +23,7 @@ import { ToastContainer, toast } from 'react-toastify' import 'react-toastify/dist/ReactToastify.css' import useUser from '@/context/Auth/useUser' import { genders } from '@/data/static-info' +import { Select } from '@/components/atoms/Select' interface FormOnBoardProps { onStep?: Dispatch> @@ -119,7 +123,7 @@ export default function FormOnboard2({ onStep }: FormOnBoardProps) { }} /> - Formato aceito: jpg ou png. Tamanho máx.: 8 MB. + setSelectedPhoto(photo)} @@ -140,38 +145,38 @@ export default function FormOnboard2({ onStep }: FormOnBoardProps) {
- - Máximo 600 caracteres. + + Máximo 600 caracteres. - - - {genders.map((gender) => ( - - ))} - + * + + + - + Voltar diff --git a/src/components/molecules/FormOnboard2/styled.ts b/src/components/molecules/FormOnboard2/styled.ts index 11548dc2..2b75aeb5 100644 --- a/src/components/molecules/FormOnboard2/styled.ts +++ b/src/components/molecules/FormOnboard2/styled.ts @@ -1,42 +1,58 @@ +import { Button } from '@/components/atoms/Button' +import { SelectItem } from '@/components/atoms/Select/SelectItem' import styled from 'styled-components' export const Dotted = styled.div` - width: 183px; - height: 198px; - border-radius: 8px; - border: 2px dotted black; display: flex; flex-direction: column; align-items: center; - gap: 10px; - padding: 5px 0px; + padding: 1rem; + + border-radius: 8px; + border: 2px dashed ${(props) => props.theme.colors.gray[700]}; + text-align: center; + + button { + width: 5rem; + height: 5rem; + + .icon-without-img { + width: 2rem; + height: 2rem; + } + } ` export const StyledImportant = styled.span` - font-size: 14px; + font-size: ${(props) => props.theme.fontSizes.xs}; font-weight: 400; - line-height: 16.8px; - letter-spacing: 0em; - text-align: center; - width: 90%; + line-height: 1rem; + color: ${(props) => props.theme.colors.black[200]}; + padding-top: 1rem; + padding-bottom: 0.5rem; + max-width: 9.5rem; .last { color: ${(props) => props.theme.colors.blue[600]}; } ` +export const StyledInfoContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.5rem; +` + export const StyledInfo = styled.span` - font-size: 12px; - font-weight: 400; - line-height: 14px; - letter-spacing: 0em; - text-align: center; + font-size: 0.75rem; + line-height: 1rem; + color: ${(props) => props.theme.colors.black[200]}; + max-width: 9.5rem; ` -export const StyledInfoContainer = styled.div` +export const CharactersWarnInput = styled(StyledInfo)` + max-width: none; text-align: right; - width: 100%; - margin-top: -10px; ` export const FormContainer = styled.div` @@ -45,45 +61,60 @@ export const FormContainer = styled.div` .asterisk { color: ${(props) => props.theme.colors.blue[600]}; } + + form { + display: flex; + flex-direction: column; + } + + .select-trigger { + padding: 0.75rem 1rem; + } ` export const StyledHR = styled.div` width: 100%; - height: 2px; - background-color: #6666; - margin-top: 30px; + height: 1px; + background-color: ${(props) => props.theme.colors.gray[700]}; + margin-top: 2.25rem; ` export const ButtonContainer = styled.div` display: flex; width: 100%; justify-content: flex-end; - gap: 2px; + gap: 1rem; + margin-top: 1rem; ` -export const NextButton = styled.button` - width: 106px; - height: 48px; - padding: 12px, 16px, 12px, 16px; - border-radius: 8px; - background-color: ${(props) => - props.disabled ? '#ACACAC' : props.theme.colors.blue[700]}; - border: none; - color: white; - font-size: 16px; - margin-top: 15px; +export const NextButton = styled(Button)` align-self: flex-end; ` -export const BackButton = styled.button` - width: 106px; - height: 48px; - padding: 12px, 16px, 12px, 16px; - border-radius: 8px; - background-color: white; - border: none; - color: ${(props) => props.theme.colors.blue[700]}; - font-size: 16px; - margin-top: 15px; +export const BackButton = styled(Button)` + color: ${(props) => props.theme.colors.gray[700]}; + border-color: ${(props) => props.theme.colors.gray[700]}; + align-self: flex-end; ` + +export const SelectInputContainer = styled.label` + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-top: 0.5rem; + + span { + color: ${(props) => props.theme.colors.black[200]}; + font-size: ${(props) => props.theme.fontSizes.xs}; + line-height: 120%; + + span { + color: ${(props) => props.theme.colors.blue[700]}; + } + } +` + +export const SelectItemStyled = styled(SelectItem)` + margin: 0 !important; +` diff --git a/src/components/molecules/FormRegister/index.tsx b/src/components/molecules/FormRegister/index.tsx index d47a013c..700aff34 100644 --- a/src/components/molecules/FormRegister/index.tsx +++ b/src/components/molecules/FormRegister/index.tsx @@ -1,5 +1,4 @@ import souJuniorLogoImg from '@/assets/logos/sou-junior.svg' -import { Checkbox } from '@/components/atoms/Checkbox' import { Eye } from '@/components/atoms/Eye' import { InfoTooltip } from '@/components/atoms/InfoTooltip' import ModalEmail from '@/components/molecules/ModalEmail' @@ -10,7 +9,7 @@ import { } from '@/utils/registerSchema' import { Field, Form, FormikProvider, useFormik } from 'formik' import Image from 'next/image' -import { MouseEvent, useEffect, useState } from 'react' +import { useState } from 'react' import { Button } from '../../atoms/Button' import { InputForm } from '../../atoms/InputForm' import { ModalCancel } from '../ModalCancel' @@ -38,14 +37,11 @@ export function FormRegister() { const [openTermos, setOpenTermos] = useState(false) const [openPoliticas, setOpenPoliticas] = useState(false) const [openModalCancel, setOpenModalCancel] = useState(false) - const [agree, setIsAgree] = useState(false) - const [concluidoDesabilitado, setIsConcluidoDesabilitado] = useState(true) const [openEmail, setOpenEmail] = useState(false) - const [show, setShow] = useState(true) - const [eye, setEye] = useState(true) - const [showConfirm, setShowConfirm] = useState(true) - const [eyeConfirm, setEyeConfirm] = useState(true) const [showCalendar, setShowCalendar] = useState(false) + const [isPasswordVisible, setIsPasswordVisible] = useState(false) + const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = + useState(false) const router = useRouter() @@ -57,22 +53,6 @@ export function FormRegister() { const closeModalEmail = () => setOpenEmail(false) const closeModalCancel = () => setOpenModalCancel(false) - const handleShowPassword = ( - e: MouseEvent, - ) => { - e.preventDefault() - setEye(!eye) - setShow(!show) - } - - const handleConfirmPassword = ( - e: MouseEvent, - ) => { - e.preventDefault() - setEyeConfirm(!eyeConfirm) - setShowConfirm(!showConfirm) - } - const handleSubmit = async ( values: ValuesFormType, { resetForm }: { resetForm: () => void }, @@ -92,17 +72,15 @@ export function FormRegister() { } catch (error) { if (error instanceof AxiosError) { if (error?.response?.status === 400) { - alert(`${error?.response.status} ${error?.response.data.message[0]}`) + alert(`${error?.response.status} ${error?.response.data.message}`) + console.error(error) return } alert( 'Ocorreu um erro na criação do mentor. Verifique a conexão de internet ou tente novamente mais tarde.', ) - return } - - console.error(error) } } @@ -113,22 +91,14 @@ export function FormRegister() { validateOnChange: true, }) + const isButtonDisabled = Object.entries(formik.values).some( + ([key, value]) => !value || formik.errors[key as keyof ValuesFormType], + ) + const handleModalCancel = () => { - const { - name, - password, - confirmEmail, - confirmPassword, - dataBirthday, - email, - } = formik.values - const isSomeFieldFilled = - name || - password || - email || - dataBirthday || - confirmEmail || - confirmPassword + const isSomeFieldFilled = Object.values(formik.values).some( + (field) => field, + ) if (isSomeFieldFilled) { setOpenModalCancel(true) @@ -138,27 +108,18 @@ export function FormRegister() { router.back() } - useEffect(() => { - setIsConcluidoDesabilitado( - agree && formik.isValid && Object.keys(formik.touched).length > 0, - ) - }, [agree, formik.isValid, formik.touched]) - - const yesterday = new Date() - yesterday.setDate(yesterday.getDate() - 1) - - const hundredYearsAgo = new Date() - hundredYearsAgo.setFullYear(hundredYearsAgo.getFullYear() - 100) - return ( +
+ logo +

+ * Indica um campo obrigatório +

+
+ - logo -

- * Indica um campo obrigatório -

setShowCalendar(!showCalendar)} > - + Data de nascimento * - + {formik.values.dataBirthday ? ( {dayjs(formik.values.dataBirthday).format('DD/MM/YYYY')} @@ -186,6 +151,12 @@ export function FormRegister() { )} + + {formik.errors.dataBirthday && ( + + {formik.errors.dataBirthday} + + )} @@ -218,62 +191,56 @@ export function FormRegister() { inputType="email" /> - - - handleShowPassword(e)} - eye={eye} - size={20} - right="1rem" - top="2.1rem" - color={'#5D5F5D'} - /> - + - - handleConfirmPassword(e)} - eye={eyeConfirm} - size={20} - right="1rem" - top="2.1rem" - color={'#5D5F5D'} + aria-label="Mostrar senha" + pressed={isPasswordVisible} + onPressedChange={setIsPasswordVisible} /> + + + + + - - + + Concordo com os{' '} - {' '} e{' '} - {' '} do SouJunior. @@ -303,18 +270,16 @@ export function FormRegister() { ) : ( - )} props.theme.colors.white}; border-radius: 12px; - padding: 12px 0px; + padding: 2rem; ` export const ContainerRegister = styled.div` - form { - margin: 8px 20px; - height: 100%; + .container-logo-form { + display: flex; + flex-direction: column; + gap: 1.5rem; + margin-bottom: 0.5rem; img { - width: 240px; - height: 36px; + width: 15rem; + height: 2.25rem; + } + + p { + font-size: 0.75rem; + color: ${(props) => props.theme.colors.gray[700]}; } } - p { - font-family: 'Radio Canada'; - font-style: normal; - font-size: ${(props) => props.theme.fontSizes.xs}; - color: ${(props) => props.theme.colors.gray[700]}; - margin: 8px 0px; + form { + display: flex; + flex-direction: column; + gap: 1rem; } input[type='radio'] { @@ -47,13 +53,30 @@ export const ContainerTerms = styled.div` text-align: justify; align-items: flex-start; justify-content: center; + margin-top: 0.5rem; ` -export const TxtTerms = styled.div` - font-size: 14px; +export const TxtTerms = styled.label` + font-size: 0.875rem; width: 100%; - margin-left: 8px; color: ${(props) => props.theme.colors.blue[500]}; + line-height: 150%; + + margin-left: 0.5rem; + margin-top: -5px; // Align text with checkbox input + + button { + display: inline; + padding: 0; + color: ${(props) => props.theme.colors.blue[500]}; + + font-size: 0.875rem; + font-weight: 400; + line-height: 150%; + + border-bottom: 1px solid ${(props) => props.theme.colors.blue[500]}; + border-radius: 0; + } ` export const ContainerBtn = styled.div` @@ -72,7 +95,11 @@ export const DatePickerContainer = styled.label` font-size: 0.875rem; color: ${(props) => props.theme.colors.gray[700]}; - margin-bottom: 1rem; + &.error { + svg { + color: ${(props) => props.theme.colors.red[500]}; + } + } span { span { @@ -80,8 +107,14 @@ export const DatePickerContainer = styled.label` } } + .error-message { + color: ${(props) => props.theme.colors.red[500]}; + font-weight: bold; + font-size: 0.75rem; + } + [data-placeholder] { - color: ${(props) => props.theme.colors.gray[300]}; + color: ${(props) => props.theme.colors.gray[250]}; } ` @@ -96,25 +129,14 @@ const animloader = keyframes` } ` -export const ButtonLoading = styled.button` - display: grid; - place-content: center; - font-size: ${(props) => props.theme.fontSizes.sm}; - border-color: ${(props) => props.theme.colors.blue[400]}; - color: ${(props) => props.theme.colors.white}; - width: 100%; - height: 48px; - - background: ${(props) => props.theme.colors.blue[400]}; - - &:not(:disabled):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); - } +export const ButtonLoading = styled(Button)` + height: 43px; + padding: 0; &:disabled { cursor: wait; + background-color: ${(props) => props.theme.colors.blue[800]}; + border-color: ${(props) => props.theme.colors.blue[800]}; } .loader { @@ -123,6 +145,7 @@ export const ButtonLoading = styled.button` display: inline-block; position: relative; } + .loader::after, .loader::before { content: ''; @@ -143,4 +166,18 @@ export const ButtonLoading = styled.button` export const WrapperInput = styled.label` position: relative; + + input { + padding-right: 2.8rem; // Giving space to Eye icon + } + + button { + right: 1rem; + top: 2.5rem; + + svg { + width: 1.5rem; + height: 1.5rem; + } + } ` diff --git a/src/components/molecules/Header/index.tsx b/src/components/molecules/Header/index.tsx deleted file mode 100644 index 7f025309..00000000 --- a/src/components/molecules/Header/index.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import logoImg from '@/assets/logos/sou-junior.svg' -import { Button } from '@/components/atoms/Button' -import Image from 'next/image' -import Link from 'next/link' -import { - ContainerHeader, - DropdownMenuContent, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, - GroupBtn, - LinkUserAccount, - SignOutBtn, -} from './style' -import { UserAvatar } from '@/components/atoms/UserAvatar' -import useUser from '@/context/Auth/useUser' -import * as DropdownMenu from '@radix-ui/react-dropdown-menu' - -export function Header() { - const { user, logout } = useUser() - - return ( - - - - {user != null ? ( - - - - - - - - {user?.fullName} - - Mentor - - - Minha conta - Sair - - - - ) : ( - - - + + diff --git a/src/components/molecules/ModalCancel/style.ts b/src/components/molecules/ModalCancel/style.ts index cabdca5d..158d8cf2 100644 --- a/src/components/molecules/ModalCancel/style.ts +++ b/src/components/molecules/ModalCancel/style.ts @@ -1,3 +1,4 @@ +import Link from 'next/link' import styled from 'styled-components' export const ContainerModalCancel = styled.div` @@ -34,3 +35,13 @@ export const ContainerBtn = styled.div` width: 100%; color: #c1292e; ` + +export const DiscardBtn = styled(Link)` + background-color: ${(props) => props.theme.colors.red[600]}; + border-color: ${(props) => props.theme.colors.red[600]}; + + &:not(:disabled):hover { + background-color: ${(props) => props.theme.colors.red[800]}; + border-color: ${(props) => props.theme.colors.red[800]}; + } +` diff --git a/src/components/molecules/ModalEmail/index.tsx b/src/components/molecules/ModalEmail/index.tsx index 850d43d8..b07061e3 100644 --- a/src/components/molecules/ModalEmail/index.tsx +++ b/src/components/molecules/ModalEmail/index.tsx @@ -2,7 +2,14 @@ import { Modal } from '@/components/atoms/Modal' import Image from 'next/image' import confirmEmail from '@/assets/ConfirmEmail.png' import logo from '@/assets/logos/sou-junior.svg' -import { ContainerModal, FooterModal, Hash, Message, TitleModal } from './style' +import { + ContainerModal, + FooterModal, + Hash, + HeaderModal, + Message, + TitleModal, +} from './style' interface ModalEmailProps { open: boolean @@ -14,14 +21,18 @@ export default function ModalEmail({ open, onClose, height }: ModalEmailProps) { return ( - Cheque seu email - Garoto mexendo em nootebook - Enviamos um email para você de confirmação. + + Cheque seu e-mail + Garoto mexendo em nootebook + + Enviamos um email para você de confirmação. + + logo da SouJunior #MovimentoSouJunior diff --git a/src/components/molecules/ModalEmail/style.ts b/src/components/molecules/ModalEmail/style.ts index ded46a09..a3c1e5d3 100644 --- a/src/components/molecules/ModalEmail/style.ts +++ b/src/components/molecules/ModalEmail/style.ts @@ -2,15 +2,31 @@ import styled from 'styled-components' export const ContainerModal = styled.div` display: flex; + flex-direction: column; justify-content: center; align-items: center; - flex-direction: column; height: 100%; width: 100%; background-color: #fff; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 8px; - gap: 20px; + gap: 1.5rem; + + padding: 0 3.5rem; +` + +export const HeaderModal = styled.header` + display: flex; + flex-direction: column; + align-items: center; + + img { + width: 17.8125rem; + height: 17.375rem; + + margin-top: -0.5rem; + margin-bottom: -1.3rem; + } ` export const TitleModal = styled.h1` @@ -18,22 +34,29 @@ export const TitleModal = styled.h1` font-size: ${(props) => props.theme.fontSizes.lg}; ` -export const Message = styled.span` +export const Message = styled.p` color: ${(props) => props.theme.colors.gray[700]}; - font-size: ${(props) => props.theme.fontSizes.sm}; - max-width: 50%; + font-size: 1rem; text-align: center; line-height: 150%; + max-width: 15.5rem; ` export const Hash = styled.span` color: ${(props) => props.theme.colors.blue[500]}; - font-size: ${(props) => props.theme.fontSizes.sm}; + font-size: 0.875rem; + line-height: 150%; ` export const FooterModal = styled.div` display: flex; align-items: center; flex-direction: column; - gap: 10px; + gap: 0.3rem; + padding-bottom: 1.2rem; + + img { + width: 6.75rem; + height: 1rem; + } ` diff --git a/src/components/molecules/ModalPrivacyPolicy/index.tsx b/src/components/molecules/ModalPrivacyPolicy/index.tsx index da59f142..47037aa5 100644 --- a/src/components/molecules/ModalPrivacyPolicy/index.tsx +++ b/src/components/molecules/ModalPrivacyPolicy/index.tsx @@ -1,5 +1,5 @@ import { Modal } from '@/components/atoms/Modal' -import { Policies, Terms } from '../FormRegister/text' +import { Policies } from '../FormRegister/text' import { ModalBox, ModalBoxParagrafo, @@ -27,7 +27,7 @@ export function ModalPrivacyPolicy({ #MovimentoSouJunior - {Terms.title} + {Policies.title} {Policies.paragraphs.map((paragrafo) => ( {paragrafo} ))} diff --git a/src/components/molecules/OnBoardModal/index.tsx b/src/components/molecules/OnBoardModal/index.tsx index abe08ac2..14426bcc 100644 --- a/src/components/molecules/OnBoardModal/index.tsx +++ b/src/components/molecules/OnBoardModal/index.tsx @@ -18,18 +18,22 @@ export default function OnBoardModal() { } return ( - + - ESPECIALIDADES - + + ESPECIALIDADES + + - PERFIL - + + PERFIL + + {' '} diff --git a/src/components/molecules/OnBoardModal/styled.ts b/src/components/molecules/OnBoardModal/styled.ts index 0d3ffda2..757ece7e 100644 --- a/src/components/molecules/OnBoardModal/styled.ts +++ b/src/components/molecules/OnBoardModal/styled.ts @@ -27,15 +27,25 @@ export const Tab = styled.div` width: 100px; ` -export const TabLabel = styled.div` +export const TabLabel = styled.span` margin-bottom: 5px; + font-weight: 500; + line-height: 1.2rem; + color: ${(props) => props.theme.colors.gray[600]}; + + &[data-active='true'] { + color: ${(props) => props.theme.colors.blue[800]}; + } ` export const TabLine = styled.div` width: 258px; height: 2px; - background-color: ${(props) => props.theme.colors.blue[700]}; transition: width 0.3s ease-in-out; + + &[data-active='true'] { + background-color: ${(props) => props.theme.colors.blue[800]}; + } ` export const TabWrapper = styled.div` diff --git a/src/components/molecules/PerfilTab/index.tsx b/src/components/molecules/PerfilTab/index.tsx index df6bf4d8..abf231c3 100644 --- a/src/components/molecules/PerfilTab/index.tsx +++ b/src/components/molecules/PerfilTab/index.tsx @@ -10,7 +10,7 @@ export default function PerfilTab({ onStep }: PerfilTabProps) { return ( - <>* Indica um campo obrigatório + * Indica um campo obrigatório {' '} diff --git a/src/components/molecules/PerfilTab/styled.ts b/src/components/molecules/PerfilTab/styled.ts index 698a12f8..ca740cd5 100644 --- a/src/components/molecules/PerfilTab/styled.ts +++ b/src/components/molecules/PerfilTab/styled.ts @@ -9,15 +9,15 @@ export const PerfilContainer = styled.div` ` export const StyledImportant = styled.span` - font-size: 14px; + font-size: ${(props) => props.theme.fontSizes.xs}; font-weight: 400; - line-height: 17px; - letter-spacing: 0em; + line-height: 1rem; text-align: left; width: 100%; - margin-top: 15px; + margin-top: 1rem; + color: ${(props) => props.theme.colors.black[200]}; - &::first-letter { + span { color: ${(props) => props.theme.colors.blue[600]}; } ` diff --git a/src/components/organisms/DepoSection/index.tsx b/src/components/organisms/DepoSection/index.tsx index 06dbf06d..81f36c60 100644 --- a/src/components/organisms/DepoSection/index.tsx +++ b/src/components/organisms/DepoSection/index.tsx @@ -1,11 +1,15 @@ import { Button } from '@/components/atoms/Button' -import { MarqueeRolagem } from '@/components/atoms/MarqueeRolagem' import { CardDepo } from '@/components/molecules/CardDepo' import Link from 'next/link' -import { ContainerBtn, ContainerDepo } from './style' +import { ContainerDepo, ContainerSlider } from './style' import { useTestimonyService } from '../../../services/user/useTestimonyService' import { AxiosError } from 'axios' +import { A11y } from 'swiper/modules' +import { Swiper, SwiperSlide } from 'swiper/react' + +import 'swiper/css' + export function DepoSection() { const { data: testimonies, error } = useTestimonyService() @@ -13,20 +17,24 @@ export function DepoSection() {

Seja um mentor

- - {testimonies?.length && - testimonies?.map((testimony) => { - return - })} + + + {testimonies?.length && + testimonies?.map((testimony) => { + return ( + + + + ) + })} + + - {error instanceof AxiosError && {error?.response?.data.message}} - + {error instanceof AxiosError && {error?.response?.data.message}} - - - ) } diff --git a/src/components/organisms/DepoSection/style.ts b/src/components/organisms/DepoSection/style.ts index d40a8913..a76eb27c 100644 --- a/src/components/organisms/DepoSection/style.ts +++ b/src/components/organisms/DepoSection/style.ts @@ -1,26 +1,83 @@ +import { device } from '@/styles/theme' import styled from 'styled-components' export const ContainerDepo = styled.div` display: flex; flex-direction: column; - padding: 64px 0px; - background-color: ${(props) => props.theme.colors.gray[300]}; + gap: 2rem; + padding: 4rem 2rem; + + max-width: 1280px; + margin: 0 auto; + width: 100%; + + @media ${device.desktopM} { + max-width: none; + padding: 4rem 0; + } + + @media ${device.mobileL} { + padding-top: 3.5rem; + padding-bottom: 3.5rem; + } h2 { - text-align: center; - font-style: normal; - font-weight: 700; - font-size: 40px; + font-size: ${(props) => props.theme.fontSizes.xxl}; + font-weight: 600; line-height: 120%; - color: ${(props) => props.theme.colors.blue[500]}; - margin-bottom: 60px; + color: ${(props) => props.theme.colors.black[200]}; + + @media ${device.desktopM} { + padding: 0 2rem; + } + + @media ${device.desktopS} { + padding: 0 1rem; + } + + @media ${device.tablet} { + font-size: ${(props) => props.theme.fontSizes.xl}; + } + } + + a { + width: max-content; + margin: 0 auto; } ` -export const ContainerBtn = styled.div` - display: flex; - justify-content: center; - align-items: center; - margin-top: 60px; - gap: 24px; +export const ContainerSlider = styled.div` + .swiper { + padding: 0.25rem; + padding-bottom: 0.75rem; + } + + .swiper-slide { + width: max-content !important; + padding-left: 2rem; + } + + .swiper-slide:first-child { + padding-left: 0; + } + + .swiper-slide:last-child { + padding-right: 1rem; + } + + @media ${device.desktopM} { + .swiper-slide { + padding-left: 1.5rem; + } + + .swiper-slide:first-child { + padding-left: 2rem; + } + } + + @media ${device.desktopS} { + .swiper-slide:first-child { + padding-left: 1rem; + } + } ` diff --git a/src/components/organisms/Footer/index.tsx b/src/components/organisms/Footer/index.tsx new file mode 100644 index 00000000..86c3a95e --- /dev/null +++ b/src/components/organisms/Footer/index.tsx @@ -0,0 +1,189 @@ +import Image from 'next/image' +import Link from 'next/link' +import { useState } from 'react' +import { ModalPrivacyPolicy } from '@/components/molecules/ModalPrivacyPolicy' +import ModalTerms from '@/components/molecules/ModalTerms' + +import { + FooterBtn, + FooterContainer, + FooterContent, + FooterCopyright, + FooterLink, + FooterMainInfo, + FooterSitemap, + FooterSocialMediaContainer, + FooterTitle, + FooterTitleContainer, +} from './style' + +import logo from '@/assets/logos/sou-junior-black.webp' +import { + DiscordLogo, + FacebookLogo, + GithubLogo, + InstagramLogo, + LinkedinLogo, + TelegramLogo, + TwitchLogo, + YoutubeLogo, +} from 'phosphor-react' + +export function Footer() { + const [openTermos, setOpenTermos] = useState(false) + const [openPoliticas, setOpenPoliticas] = useState(false) + + const handleOpenTermos = () => setOpenTermos(true) + const handleCloseTermos = () => setOpenTermos(false) + const handleOpenPoliticas = () => setOpenPoliticas(true) + const handleClosePoliticas = () => setOpenPoliticas(false) + + const currentYear = new Date().getFullYear() + + return ( + + + + + SouJunior logo + + + + + Tenha mentorias + Como funciona + + + + Mentores + Cadastrar + Login + + + + Suporte + FAQ + + + + Legal + Termo de uso + + Política de privacidade + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + © {currentYear} SouJunior. Todos os direitos reservados. + + + + ) +} diff --git a/src/components/organisms/Footer/style.ts b/src/components/organisms/Footer/style.ts new file mode 100644 index 00000000..feb45f7e --- /dev/null +++ b/src/components/organisms/Footer/style.ts @@ -0,0 +1,98 @@ +import { device } from '@/styles/theme' +import Link from 'next/link' +import styled from 'styled-components' + +export const FooterContainer = styled.footer` + background-color: ${(props) => props.theme.colors.gray[700]}; + color: ${(props) => props.theme.colors.white}; +` + +export const FooterContent = styled.div` + display: flex; + flex-direction: column; + gap: 2.5rem; + + padding: 4rem 2rem; + + @media ${device.desktopS} { + padding: 4rem 1rem; + } + + @media ${device.mobileL} { + padding: 2rem 1rem; + } +` + +export const FooterMainInfo = styled.div` + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 2rem; + flex-wrap: wrap; +` + +export const FooterSitemap = styled.div` + display: flex; + align-items: flex-start; + flex-wrap: wrap; + column-gap: 5rem; + row-gap: 2rem; + + @media ${device.mobileL} { + flex-direction: column; + } +` + +export const FooterTitleContainer = styled.section` + display: flex; + flex-direction: column; + gap: 1.5rem; +` + +export const FooterLink = styled(Link)` + font-size: 1rem; + line-height: 1.4rem; + font-weight: 400; +` + +export const FooterBtn = styled.button` + all: unset; + font-size: 1rem; + line-height: 1.4rem; + cursor: pointer; +` + +export const FooterTitle = styled.h6` + font-size: 1.25rem; + font-weight: 500; + line-height: 1.5rem; +` + +export const FooterSocialMediaContainer = styled.div` + display: flex; + align-items: center; + gap: 1rem; + + @media ${device.mobileL} { + gap: 0.5rem; + justify-content: center; + } + + svg { + width: 1.5rem; + height: 1.5rem; + } +` + +export const FooterCopyright = styled.p` + padding-top: 1rem; + border-top: 1px solid ${(props) => props.theme.colors.gray[200]}; + + font-size: ${(props) => props.theme.fontSizes.xs}; + line-height: 1.25rem; + text-align: right; + + @media ${device.mobileL} { + text-align: left; + } +` diff --git a/src/components/organisms/Global/layout.tsx b/src/components/organisms/Global/layout.tsx index 62d0efaf..41ab19ac 100644 --- a/src/components/organisms/Global/layout.tsx +++ b/src/components/organisms/Global/layout.tsx @@ -1,6 +1,5 @@ -import { Header } from '@/components/molecules/Header' +import { Header } from '@/components/organisms/Header' import { ReactNode } from 'react' -import { ContainerLayoyt } from './styled' type LayoutProps = { children: ReactNode @@ -9,9 +8,7 @@ type LayoutProps = { export const Layout = ({ children }: LayoutProps) => { return ( <> - -
- +
{children} ) diff --git a/src/components/organisms/Global/styled.ts b/src/components/organisms/Global/styled.ts deleted file mode 100644 index 57d71207..00000000 --- a/src/components/organisms/Global/styled.ts +++ /dev/null @@ -1,7 +0,0 @@ -import styled from 'styled-components' - -export const ContainerLayoyt = styled.div` - padding: 0px 64px; - margin: 0px 0px 100px; - position: relative; -` diff --git a/src/components/organisms/Header/index.tsx b/src/components/organisms/Header/index.tsx new file mode 100644 index 00000000..f9953c62 --- /dev/null +++ b/src/components/organisms/Header/index.tsx @@ -0,0 +1,110 @@ +import logoImg from '@/assets/logos/sou-junior.svg' +import { Button } from '@/components/atoms/Button' +import Image from 'next/image' +import Link from 'next/link' +import { + ContainerHeader, + Divider, + DropdownMenuContent, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, + GroupBtn, + GroupBtnMobile, + LinkUserAccount, + MenuBurgerContent, + MenuBurgerOverlay, + MenuBurgerTrigger, + SignOutBtn, +} from './style' +import { UserAvatar } from '@/components/atoms/UserAvatar' +import useUser from '@/context/Auth/useUser' +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' +import { Menu } from '@mui/icons-material' +import { useState } from 'react' + +export function Header() { + const [isMenuOpen, setIsMenuOpen] = useState(false) + const { user, logout } = useUser() + + return ( + + + + {user != null ? ( + + + + + + + + {user?.fullName} + + Mentor + + + Minha conta + Sair + + + + ) : ( + + + + + )} + + {/* Mobile menu */} + + + + + + {isMenuOpen && } + + +
+ + Como Funciona + + + + Encontre Seu Mentor + +
+ + + + + + + + + + + + + + + ) +} diff --git a/src/components/organisms/Header/style.ts b/src/components/organisms/Header/style.ts new file mode 100644 index 00000000..04de7712 --- /dev/null +++ b/src/components/organisms/Header/style.ts @@ -0,0 +1,262 @@ +import styled, { css } from 'styled-components' +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' +import Link from 'next/link' +import { device } from '@/styles/theme' + +export const ContainerHeader = styled.header` + display: flex; + justify-content: space-between; + padding: 1rem 2rem; + background: #fff; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + + @media ${device.desktopS} { + padding: 1rem; + } + + .navigation { + display: flex; + gap: 0.5rem; + align-items: center; + padding: 0.25rem 0; + + .mySpan { + background-color: ${(props) => props.theme.colors.blue[800]}; + width: 2px; + height: 2.5rem; + } + + .nav-logo { + width: 15.5rem; + height: 2.5rem; + + @media ${device.mobileL} { + width: 11.9rem; + height: 2rem; + } + + img { + width: 100%; + height: 100%; + } + } + + .nav-links { + display: flex; + align-items: center; + gap: 0.5rem; + + a { + padding: 0.25rem 0.5rem; + font-size: 1.25rem; + line-height: 1.75rem; + color: ${(props) => props.theme.colors.blue[800]}; + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; + + &:hover { + font-weight: 600; + font-size: 1.225rem; + } + } + } + + @media ${device.desktopXS} { + .mySpan, + .nav-links { + display: none; + } + } + } +` + +export const GroupBtn = styled.div` + display: flex; + gap: 1rem; + + @media ${device.desktopXS} { + display: none; + } +` + +export const AvatarGroup = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100px; +` + +export const DropdownMenuTrigger = styled(DropdownMenu.Trigger)` + all: unset; + + display: flex; + align-items: center; + gap: 1rem; + cursor: pointer; + line-height: 0; + + img { + width: 2.75rem; + height: 2.75rem; + border-radius: 50%; + } + + svg { + width: 1.2rem; + height: 1.2rem; + color: #666; + rotate: 270deg; + transition: rotate 0.3s; + } + + &[data-state='open'] svg { + rotate: 90deg; + } + + &:focus-visible { + box-shadow: 0 0 0 2px rgba(17, 101, 186, 0.6); + } +` + +export const DropdownMenuContent = styled(DropdownMenu.Content)` + padding: 0.5rem 0; + border-radius: 0.5rem; + background: #fff; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + color: #323232; + display: flex; + flex-direction: column; + + width: 17rem; + + span { + padding: 0 1rem; + } +` + +export const DropdownMenuLabel = styled.strong` + font: 500 1.25rem 'Radio Canada'; + line-height: 120%; + padding: 0.5rem 1rem; +` + +export const DropdownMenuSeparator = styled(DropdownMenu.Separator)` + width: 100%; + height: 1px; + background-color: ${(props) => props.theme.colors.gray[600]}; + margin: 0.5rem 0; +` + +const baseBtnStyles = css` + all: unset; + cursor: pointer; + display: block; + padding: 1rem; + line-height: 120%; + flex: 1; + transition: 0.2s; + + &:hover, + &:focus { + background-color: ${(props) => props.theme.colors.gray[250]}; + } +` + +export const LinkUserAccount = styled(Link)` + ${baseBtnStyles} + + &:hover, + &:focus { + color: ${(props) => props.theme.colors.black[200]}; + background-color: ${(props) => props.theme.colors.gray[250]}; + } +` + +export const SignOutBtn = styled(DropdownMenu.Item)` + ${baseBtnStyles} + color: ${(props) => props.theme.colors.red[300]}; +` + +// Menu Burger +export const MenuBurgerTrigger = styled(DropdownMenu.Trigger)` + all: unset; + display: none; + cursor: pointer; + align-self: center; + + color: ${(props) => props.theme.colors.blue[800]}; + line-height: 0; + + svg { + width: 2.5rem; + height: 2.5rem; + } + + @media ${device.desktopXS} { + display: block; + } +` + +export const MenuBurgerOverlay = styled.div` + display: none; + background-color: rgba(0, 0, 0, 0.25); + position: fixed; + inset: 0; + z-index: 1; + margin-top: 5rem; // Header's height + + @media ${device.desktopXS} { + display: block; + } +` + +export const MenuBurgerContent = styled(DropdownMenu.Content)` + display: none; + flex-direction: column; + gap: 0.5rem; + z-index: 1; + + @media ${device.desktopXS} { + display: flex; + } + + @media ${device.mobileL} { + margin-top: -4px; + } + + background-color: ${(props) => props.theme.colors.white}; + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + border-top: 2px solid ${(props) => props.theme.colors.gray[500]}; + + padding: 1rem 0; + color: ${(props) => props.theme.colors.blue[800]}; + width: var(--radix-dropdown-menu-content-available-width); + + .menu-burger-links { + display: flex; + flex-direction: column; + + a { + padding: 1rem; + line-height: 1.2rem; + } + } + + [role='menuitem'] { + outline: 0; + } +` + +export const Divider = styled.hr` + border: 0; + border-top: 2px solid ${(props) => props.theme.colors.gray[500]}; +` + +export const GroupBtnMobile = styled.div` + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 0.5rem 1rem 0; +` diff --git a/src/components/organisms/HeroSection/index.tsx b/src/components/organisms/HeroSection/index.tsx index 2ba259b8..6afc3a0a 100644 --- a/src/components/organisms/HeroSection/index.tsx +++ b/src/components/organisms/HeroSection/index.tsx @@ -1,16 +1,19 @@ -import { PersonTitle } from '@/components/atoms/PersonTitle' import { ListItemsHero } from '@/components/molecules/ListItemsHero' import { AnimatePresence, motion } from 'framer-motion' import { FormEvent, useEffect, useState } from 'react' import { AnimationTextHero } from '../../../styles/animations' import { - ButtonMentor, + BtnSearchForm, ContainerHero, ContainerInputForm, - TextAnimated, + PlaceholderInput, + PlaceholderInputMobile, + QueryInput, + Title, } from './style' -import Search from '@mui/icons-material/Search' import { useRouter } from 'next/router' +import { Button } from '@/components/atoms/Button' +import { MagnifyingGlass } from 'phosphor-react' const text = ['mentorias personalizadas', 'profissionais experientes'] @@ -45,12 +48,11 @@ export function HeroSection() { return ( -
-
- - - + + + Decole sua carreira mais rápido com + <motion.span key={textHero} variants={AnimationTextHero} initial={'initial'} @@ -58,30 +60,43 @@ export function HeroSection() { exit={'exit'} > {textHero} - </TextAnimated> - </AnimatePresence> - <p> - Tenha acesso a mentorias individuais e <br /> gratuitas com - profissionais renomados. - </p> - <ContainerInputForm onSubmit={handleSearchMentor}> - <div> - <Search /> - <input - type="text" - placeholder="Pesquisar por nome ou especialidade" - aria-label="Pesquisar por nome ou especialidade" - value={queryMentor} - onChange={(e) => setQueryMentor(e.target.value)} - /> - </div> - <ButtonMentor disabled={!queryMentor}> + </motion.span> + + + +

+ Tenha acesso a mentorias individuais e gratuitas com profissionais + renomados. +

+ + +
+ setQueryMentor(e.target.value)} + id="query-mentor" + /> + + Pesquisar por nome ou especialidade + + Encontre seu mentor - - -
- -
+ + + + + + +
+ + + + + ) } diff --git a/src/components/organisms/HeroSection/style.ts b/src/components/organisms/HeroSection/style.ts index 37e092e1..35cb4a2d 100644 --- a/src/components/organisms/HeroSection/style.ts +++ b/src/components/organisms/HeroSection/style.ts @@ -1,95 +1,204 @@ -import styled from 'styled-components' +import { device } from '@/styles/theme' +import styled, { css } from 'styled-components' export const ContainerHero = styled.div` - padding: 0px 64px; - margin: 0px 0px 100px; + display: flex; + justify-content: space-between; + gap: 1.5rem; + + padding: 12.5rem 2rem; position: relative; - p { - margin: 80px 0px 40px; - font-size: ${(props) => props.theme.fontSizes.md}; + @media ${device.desktopS} { + padding-left: 1rem; + padding-right: 1rem; } - input { - background-color: transparent; - border: none; - height: 100%; - width: 100%; - padding: 24px 0px; - font-size: ${(props) => props.theme.fontSizes.md}; + @media ${device.desktopXS} { + flex-direction: column-reverse; + gap: 3rem; + padding-top: 2rem; + padding-bottom: 2rem; - &:focus-visible { - outline: none; + .list-items-hero { + align-self: flex-end; } + } + + .hero-texts { + display: flex; + flex-direction: column; + } - &::placeholder { - color: ${(props) => props.theme.colors.placeholder}; - font-size: ${(props) => props.theme.fontSizes.md}; + p { + max-width: 23rem; + font-size: 1.25rem; + line-height: 1.75rem; + color: ${(props) => props.theme.colors.gray[700]}; + margin-top: 3.5rem; + + @media (max-width: 1230px) { + margin-top: 2.5rem; + } + + @media ${device.mobileL} { + font-size: ${(props) => props.theme.fontSizes.sm}; + color: ${(props) => props.theme.colors.black[200]}; + line-height: 1.4rem; } } ` +export const Title = styled.h1` + color: ${(props) => props.theme.colors.gray[750]}; + font-size: ${(props) => props.theme.fontSizes.xxl}; + font-weight: 600; + line-height: 3rem; + + span { + display: block; + color: ${(props) => props.theme.colors.blue[800]}; + } + + @media ${device.mobileL} { + font-size: ${(props) => props.theme.fontSizes.lg}; + line-height: 1.8rem; + max-width: 18.5rem; + } + + @media ${device.mobileS} { + max-width: 17rem; + } +` + export const ContainerInputForm = styled.form` - border-radius: 8px; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.13); - background-color: '#FAFAFA'; - width: 680px; - border: 1px solid ${(props) => props.theme.colors.opacityGray}; - padding: 0.5rem 0.75rem; display: flex; justify-content: space-between; + gap: 1rem; + + border-radius: 8px; + box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25); + background-color: ${(props) => props.theme.colors.white}; + + width: 100%; + max-width: 42.7rem; + padding: 0.5rem; + margin-top: auto; + + @media ${device.desktopXS} { + margin-top: 4rem; + } + + @media (max-width: 615px) { + .button-find-mentor { + display: none; + } + + .search-form-icon.only-icon { + display: none; + } + } div { display: flex; - align-items: center; - gap: 1rem; flex: 1; + position: relative; - svg { - color: ${(props) => props.theme.colors.blue[400]}; - } + .search-form-icon { + width: 1.5rem; + height: 1.5rem; - input { - padding: 0.75rem 0; - padding-right: 1rem; - font-size: 1.125rem; - line-height: 1.7rem; + color: ${(props) => props.theme.colors.black[200]}; + opacity: 0.6; + } - &::placeholder { - color: ${(props) => props.theme.colors.gray[500]}; - } + .search-form-icon.only-icon { + position: absolute; + right: 1rem; + pointer-events: none; + align-self: center; } } ` -export const TextAnimated = styled.h3` - color: ${(props) => props.theme.colors.blue[400]}; - font-size: ${(props) => props.theme.fontSizes.xxl}; +export const QueryInput = styled.input` + width: 100%; + border: 1px solid ${(props) => props.theme.colors.gray[600]}; + border-radius: 0.5rem; + + padding: 0.5rem 1rem; + padding-right: 3rem; + + font-size: 1rem; + line-height: 1.4rem; + color: ${(props) => props.theme.colors.black[200]}; + outline: 0; + + &:focus ~ label { + transform: translateY(-2rem); + padding: 0 0.25rem; + font-size: ${(props) => props.theme.fontSizes.xs}; + } + + ${(props) => { + if (String(props.value).trim()) { + return css` + & ~ label { + transform: translateY(-2rem); + padding: 0 0.25rem; + font-size: ${(props) => props.theme.fontSizes.xs}; + } + ` + } + }} +` + +const PlaceholderInputBaseStyles = styled.label` position: absolute; - margin-bottom: 40px; + left: 1rem; + top: 50%; + transform: translateY(-50%); + + color: ${(props) => props.theme.colors.black[200]}; + font-size: 1rem; + font-weight: 400; + line-height: 1.4rem; + + background-color: ${(props) => props.theme.colors.white}; + transition: all 0.3s; + pointer-events: none; ` -export const ButtonMentor = styled.button` - display: block; - max-width: 13.5rem; - width: 100%; - padding: 0.75rem; +export const PlaceholderInput = styled(PlaceholderInputBaseStyles)` + @media (max-width: 615px) { + display: none; + } +` +export const PlaceholderInputMobile = styled(PlaceholderInputBaseStyles)` + display: none; - background-color: ${(props) => props.theme.colors.blue[400]}; - color: ${(props) => props.theme.colors.white}; - line-height: 1.5rem; - border-radius: 0.5rem; - border: 1px solid ${(props) => props.theme.colors.blue[400]}; + @media (max-width: 615px) { + display: inline; + } +` - text-align: center; - font-size: 1rem; +export const BtnSearchForm = styled.button` + all: unset; + + display: none; + line-height: 0; + cursor: pointer; + + position: absolute; + right: 1rem; + top: 50%; + transform: translateY(-50%); - &:not(:disabled):hover { - background-color: #fff; - color: ${(props) => props.theme.colors.blue[400]}; + &:focus-visible { + box-shadow: 0 0 0 2px ${(props) => props.theme.colors.blue[500]}; } - &:disabled { - cursor: not-allowed; + @media (max-width: 615px) { + display: block; } ` diff --git a/src/components/organisms/MentorSection/index.tsx b/src/components/organisms/MentorSection/index.tsx index 163a1b9c..83ec9d0a 100644 --- a/src/components/organisms/MentorSection/index.tsx +++ b/src/components/organisms/MentorSection/index.tsx @@ -1,15 +1,15 @@ import { Slider } from '@/components/atoms/Slider' import { - ArrowSliderBtn, ContainerButtons, MentorsComponent, MentorsContent, MentorsContentContainer, MentorsTitle, - SeeAll, } from './style' import { useEffect, useRef, useState } from 'react' import { SwiperClass } from 'swiper/react' +import { Button } from '@/components/atoms/Button' +import Link from 'next/link' export const MentorSection = () => { const swiperRef = useRef<{ swiper: SwiperClass } | null>(null) @@ -40,27 +40,35 @@ export const MentorSection = () => { return ( - - - Encontre seu mentor: + + Encontre seu mentor + + - Ver todos - - + - + Ver todos + + + - - ) @@ -69,31 +77,16 @@ export const MentorSection = () => { function ArrowLeftIcon() { return ( - - - - - - - - - - - + ) } @@ -102,35 +95,15 @@ function ArrowRightIcon() { return ( - - - - - - - - - - - + ) } diff --git a/src/components/organisms/MentorSection/style.ts b/src/components/organisms/MentorSection/style.ts index 5381ba51..698345d1 100644 --- a/src/components/organisms/MentorSection/style.ts +++ b/src/components/organisms/MentorSection/style.ts @@ -1,74 +1,64 @@ -import Link from 'next/link' +import { device } from '@/styles/theme' import styled from 'styled-components' export const MentorsComponent = styled.section` - background: #fff; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - width: 100%; - display: flex; - justify-content: center; - align-items: center; - padding: 90px 0; + background: ${(props) => props.theme.colors.blue[25]}; ` export const MentorsContentContainer = styled.div` - max-width: 1300px; - margin: 0 auto; position: relative; + padding: 4rem 2rem; + padding-right: 0; + + @media ${device.desktopM} { + max-width: none; + padding: 4rem 0; + } + + @media ${device.mobileL} { + padding-top: 3.5rem; + padding-bottom: 3.5rem; + } ` export const MentorsContent = styled.section` display: flex; - justify-content: space-between; - margin-bottom: 2rem; + flex-direction: column; + gap: 1.5rem; + margin-top: 2rem; ` export const ContainerButtons = styled.div` display: flex; - align-items: center; -` + align-self: center; + gap: 1.5rem; -export const MentorsTitle = styled.h1` - color: ${(props) => props.theme.colors.gray[700]}; - font-size: 2.5rem; - font-family: 'Radio Canada'; - font-weight: 700; - line-height: 120%; -` - -export const SeeAll = styled(Link)` - padding: 0.75rem 1rem; - line-height: normal; - border-radius: 0.5rem; - border: 1px solid ${(props) => props.theme.colors.blue[400]}; - color: ${(props) => props.theme.colors.blue[400]}; + .arrow-slider { + color: ${(props) => props.theme.colors.blue[800]}; + padding: 0.5rem; - margin-right: 1.5rem; - - &:hover { - background-color: ${(props) => props.theme.colors.blue[400]}; - color: #fff; + svg { + width: 1.5rem; + height: 1.5rem; + } } ` -export const ArrowSliderBtn = styled.button` - all: unset; - width: 2.2rem; - height: 2.2rem; - border: 1px solid ${(props) => props.theme.colors.blue[400]}; - color: ${(props) => props.theme.colors.blue[400]}; - border-radius: 9999px; - cursor: pointer; +export const MentorsTitle = styled.h2` + color: ${(props) => props.theme.colors.black[200]}; + font-size: ${(props) => props.theme.fontSizes.xxl}; + font-weight: 600; + line-height: 120%; - display: grid; - place-content: center; + @media ${device.desktopM} { + padding: 0 2rem; + } - &:disabled { - cursor: not-allowed; - opacity: 0.7; + @media ${device.desktopS} { + padding: 0 1rem; } - & + & { - margin-left: 0.75rem; + @media ${device.tablet} { + font-size: ${(props) => props.theme.fontSizes.xl}; } ` diff --git a/src/components/organisms/Onboarding/index.tsx b/src/components/organisms/Onboarding/index.tsx index 2ffdada0..a9c2697b 100644 --- a/src/components/organisms/Onboarding/index.tsx +++ b/src/components/organisms/Onboarding/index.tsx @@ -1,15 +1,40 @@ -import { ListCardsOnboarding } from '../../molecules/ListCardsOnboarding' -import { ContainerOnboarding } from './style' +import { CardOnboarding } from '@/components/atoms/CardOnboarding' +import { Container, ContainerListCard, ContainerOnboarding } from './style' + +import girlWithMagnifyingGlass from '@/assets/homepage/onboarding/encontre.svg' +import scheduleImg from '@/assets/homepage/onboarding/marque.svg' +import describeImg from '@/assets/homepage/onboarding/descreva.svg' export function Onboarding() { return ( - -

Conecte-se a um mentor em 4 passos

-

- com a facilidade e praticidade oferecida pelo Portal de - Mentorias.{' '} -

- - + + +

Conecte-se a um mentor em 4 passos

+

+ com a facilidade e praticidade oferecida pelo Portal de Mentorias. +

+ + + + Encontre seu mentor especializado na área desejada e mais adequado + para você. + + + Marque um horário disponível na agenda do mentor, que melhor se + encaixa para vocês. + + + Descreva seu objetivo com a mentoria, para que o mentor possa se + preparar. + + + Compareça no dia e horário agendado e comece a aprender. + + + + ) } diff --git a/src/components/organisms/Onboarding/style.ts b/src/components/organisms/Onboarding/style.ts index 16daa623..cd217b2d 100644 --- a/src/components/organisms/Onboarding/style.ts +++ b/src/components/organisms/Onboarding/style.ts @@ -1,27 +1,51 @@ +import { device } from '@/styles/theme' import styled from 'styled-components' -export const ContainerOnboarding = styled.div` - background: ${(props) => props.theme.colors.gradient}; +export const Container = styled.div` + position: relative; + background: ${(props) => props.theme.colors.blue[600]}; +` + +export const ContainerOnboarding = styled.section` width: 100%; height: 100%; - padding: 48px 64px; + padding: 4rem 1rem; text-align: center; h2 { - font-size: ${(props) => props.theme.fontSizes.xxxl}; + font-size: ${(props) => props.theme.fontSizes.xxl}; color: ${(props) => props.theme.colors.white}; - margin-bottom: 12px; + margin-bottom: 1rem; + font-weight: 600; } - p { + .description-onboarding { color: ${(props) => props.theme.colors.white}; font-size: ${(props) => props.theme.fontSizes.lg}; - font-weight: 500; - margin-bottom: 48px; + font-weight: 600; + line-height: 1.8rem; + margin-bottom: 3rem; + } + + @media ${device.mobileL} { + padding: 2.5rem 1rem; - span { - color: ${(props) => props.theme.colors.white}; - font-weight: 700; + h2 { + font-size: ${(props) => props.theme.fontSizes.lg}; + line-height: 1.8rem; + } + + .description-onboarding { + font-size: 1.25rem; + line-height: 1.5rem; + margin-bottom: 1.5rem; } } ` + +export const ContainerListCard = styled.div` + display: flex; + gap: 1.5rem; + flex-wrap: wrap; + justify-content: center; +` diff --git a/src/pages/faq/index.tsx b/src/pages/faq/index.tsx index 1dcd1431..9206ccd2 100644 --- a/src/pages/faq/index.tsx +++ b/src/pages/faq/index.tsx @@ -4,6 +4,7 @@ import { AccordionContainer, AccordionTitle, FaqContainer, + FaqMain, ImageContainer, TitleSpan, } from '@/styles/pages/faq' @@ -11,7 +12,7 @@ import Image from 'next/image' import ImagemFAQ from '@/assets/seo.svg' import { AccordionDetails, AccordionSummary } from '@mui/material' import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded' -import { Footer } from '@/components/molecules/Footer' +import { Footer } from '@/components/organisms/Footer' import Link from 'next/link' export default function FaqPage() { @@ -22,8 +23,8 @@ export default function FaqPage() { } return ( - <> - + + Image @@ -132,8 +133,9 @@ export default function FaqPage() { - + +