From 9a5906485d84c6c2611a88d7cd6978dd01724011 Mon Sep 17 00:00:00 2001 From: Bianca Andrade Date: Tue, 25 Jun 2024 20:00:59 -0300 Subject: [PATCH 1/3] =?UTF-8?q?Cria=C3=A7=C3=A3o=20de=20tela=20alterar=20s?= =?UTF-8?q?enha?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Portal/Menu/index.tsx | 1 + .../Portal/ProfileModal/CancelModal/styles.ts | 39 +++- .../ChangePasswordModal/index.tsx | 69 +++++++ .../ChangePasswordModal/styles.ts | 86 ++++++++ .../ProfileModal/ConfirmModal/styles.ts | 2 +- src/hooks/useApi.ts | 13 ++ src/pages/CandidateSettings/index.tsx | 5 +- src/pages/ChangePassword.tsx | 194 ++++++++++++++++++ src/pages/styles/ChangePasswordStyles.ts | 181 ++++++++++++++++ src/routes/router.tsx | 3 +- .../ConfirmPasswordValidation/index.ts | 23 ++- 11 files changed, 601 insertions(+), 15 deletions(-) create mode 100644 src/components/Portal/ProfileModal/ChangePasswordModal/index.tsx create mode 100644 src/components/Portal/ProfileModal/ChangePasswordModal/styles.ts create mode 100644 src/pages/ChangePassword.tsx create mode 100644 src/pages/styles/ChangePasswordStyles.ts diff --git a/src/components/Portal/Menu/index.tsx b/src/components/Portal/Menu/index.tsx index db11b57c..f5af7ad5 100644 --- a/src/components/Portal/Menu/index.tsx +++ b/src/components/Portal/Menu/index.tsx @@ -89,6 +89,7 @@ const Menu = () => {
  • navigate('/change-password')} > theme.colors.primaryDark}; border-radius: 10px; @@ -25,6 +24,8 @@ export const ModalContent = styled.div` export const ModalText = styled.p` display: flex; + justify-content: center; + align-items: center; flex-wrap: wrap; font-family: 'Radio Canada'; font-style: normal; @@ -35,36 +36,52 @@ export const ModalText = styled.p` color: ${({ theme }) => theme.colors.mutedDarker}; @media (max-width: 280px) { - width: 80%; - margin-top: 50px; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-size: 20px; } @media (max-width: 480px) { - width: 80%; - margin-top: 50px; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-size: 20px; } `; export const ModalTitle = styled.h1` display: flex; + justify-content: center; + align-items: center; flex-wrap: wrap; width: 370px; height: 48px; font-family: 'Radio Canada'; font-style: normal; font-weight: 700; - font-size: 40px; + font-size: 30px; line-height: 48px; color: ${({ theme }) => theme.colors.primaryDark}; @media (max-width: 280px) { - width: 80%; - margin-right: 40px; - + width: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 25px; } @media (max-width: 480px) { - width: 80%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 25px; } `; diff --git a/src/components/Portal/ProfileModal/ChangePasswordModal/index.tsx b/src/components/Portal/ProfileModal/ChangePasswordModal/index.tsx new file mode 100644 index 00000000..595344d8 --- /dev/null +++ b/src/components/Portal/ProfileModal/ChangePasswordModal/index.tsx @@ -0,0 +1,69 @@ +import { + ModalContent, + ModalTitle, + CloseModal, + ModalCloseButton, +} from './styles'; +import ModalIcon from '../../../../assets/imgs/mask-group.svg'; +import { useNavigate } from 'react-router'; +import { MaskBackground } from '../../../LoginCard/PopUpRegisterSuccess/styles'; +import { AuthContext } from '../../../../contexts/Auth/AuthContext'; +import { useContext, useEffect, useRef } from 'react'; + +interface ChangePasswordModalProps { + setChangePasswordModal: (value: boolean) => void; +} + +const ChangePasswordModal = ({ setChangePasswordModal }: ChangePasswordModalProps ) => { + const navigate = useNavigate(); + const auth = useContext(AuthContext); + const modalRef = useRef(null); + + const handleClick = () => { + setChangePasswordModal (false); + auth.user.type === 'USER' ? + (navigate('/candidate-portal')) + : + (navigate('/company-portal')) + setTimeout(() => window.location.reload(), 0) + document.body.style.overflow = 'auto'; + } + + useEffect(() => { + const handleOutsideClick = (e: MouseEvent) => { + if (modalRef.current && e.target instanceof Node && !modalRef.current.contains(e.target)) { + setChangePasswordModal (false); + handleClick(); + } + }; + + document.addEventListener('click', handleOutsideClick); + + return () => { + document.removeEventListener('click', handleOutsideClick); + }; + }, []); + + return ( + + + + + X + + +
    + Senha atualizada com sucesso + Sucesso +
    +     +     + ); +}; + +export default ChangePasswordModal; diff --git a/src/components/Portal/ProfileModal/ChangePasswordModal/styles.ts b/src/components/Portal/ProfileModal/ChangePasswordModal/styles.ts new file mode 100644 index 00000000..08f4da56 --- /dev/null +++ b/src/components/Portal/ProfileModal/ChangePasswordModal/styles.ts @@ -0,0 +1,86 @@ +import styled from 'styled-components'; + +export const ModalContent = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + position: fixed; + background: white; + + border: 2px solid ${({theme}) => theme.colors.primaryDark}; + border-radius: 10px; + + img { + width: 30%; + } + + .modal--texts { + display: flex; + flex-direction: column; + align-items: center; + padding: 0 24px 24px 24px; + } + + @media (max-width: 540px) { + width: 80%; + } +`; + +export const ModalTitle = styled.h2` + font-family: 'Radio Canada'; + font-style: normal; + font-weight: 700; + font-size: 30px; + line-height: 48px; + padding: 0 0 16px 0; + color: ${({theme}) => theme.colors.primaryDark}; + + @media (max-width: 280px) { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-size: 18px; + } + + @media (max-width: 480px) { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-size: 18px; + } +`; + +export const CloseModal = styled.div` + display: flex; + justify-content: flex-end; + align-self: flex-end; + padding-left: 150px; + + @media (max-width: 280px) { + margin-right: 10px; + } + + @media (max-width: 480px) { + width: 80%; + margin-top: 10px; + } +`; + +export const ModalCloseButton = styled.button` + width: 45px; + height: 45px; + background-color: #fff; + color: ${({theme}) => theme.colors.primaryDark}; + font-weight: bold; + border-radius: 8px; + &:hover { + background-color: red; + border: 1px solid; + color: #fff; + } + `; \ No newline at end of file diff --git a/src/components/Portal/ProfileModal/ConfirmModal/styles.ts b/src/components/Portal/ProfileModal/ConfirmModal/styles.ts index fa4ee09e..925ed80c 100644 --- a/src/components/Portal/ProfileModal/ConfirmModal/styles.ts +++ b/src/components/Portal/ProfileModal/ConfirmModal/styles.ts @@ -6,7 +6,7 @@ export const ModalContent = styled.div` align-items: center; gap: 20px; position: fixed; - background: #FDFFFC; + background: white; border: 2px solid ${({theme}) => theme.colors.primaryDark}; border-radius: 10px; diff --git a/src/hooks/useApi.ts b/src/hooks/useApi.ts index 3a0148da..431337b4 100644 --- a/src/hooks/useApi.ts +++ b/src/hooks/useApi.ts @@ -222,4 +222,17 @@ export const useApi = () => ({ const res = await api.patch(`/company/${id}`); return res.data; }, + + changePassword: async (oldPassword: string, password: string, confirmNewPassword: string) => { + const token = localStorage.getItem('authToken'); + const res: any = await api.patch('/user/update_password', { + oldPassword, + password, + confirmNewPassword, + }, { headers: { + Authorization: `Bearer ${token}`, + },}); + + return res.data; + }, }); diff --git a/src/pages/CandidateSettings/index.tsx b/src/pages/CandidateSettings/index.tsx index 3dd198b6..9198e0b9 100644 --- a/src/pages/CandidateSettings/index.tsx +++ b/src/pages/CandidateSettings/index.tsx @@ -75,7 +75,10 @@ export const CandidateSettings: React.FC = () => { useEffect(() => { const userCurriculum = () => { const curriculums = auth.user.curriculums; - + if (curriculums == null) { + return; + } + if (curriculums[0]) { const userCurriculum1 = curriculums[0]; setFileKey1(userCurriculum1.fileKey); diff --git a/src/pages/ChangePassword.tsx b/src/pages/ChangePassword.tsx new file mode 100644 index 00000000..2dd065c5 --- /dev/null +++ b/src/pages/ChangePassword.tsx @@ -0,0 +1,194 @@ +import { useState } from 'react'; +import { useForm, SubmitHandler } from 'react-hook-form'; +import { yupResolver } from '@hookform/resolvers/yup'; +import { ChangePasswordSchema } from '../validations/ConfirmPasswordValidation'; +import { + Container, + Form, + StyledIconOpenEyes, + StyledIconClosedEyes, + Button, + Checklist, + List, + ErrorMessages, + MessageChecklist, + ChangePasswordErrorMessage, + Border, +} from './styles/ChangePasswordStyles'; +import { useApi } from '../hooks/useApi'; +import Header from '../components/Portal/Header'; +import Footer from '../components/Portal/Footer'; +import ChangePasswordModal from '../components/Portal/ProfileModal/ChangePasswordModal'; +import CancelModal from '../components/Portal/ProfileModal/CancelModal'; + + +interface ChangePasswordForm { + oldPassword: string; + password: string; + confirmNewPassword: string; +} + +const ChangePassword = () => { + const [oldVisible, setOldVisible] = useState(false); + const [visible, setVisible] = useState(false); + const [confirmVisible, setConfirmVisible] = useState(false); + const [errorMessage, setErrorMessage] = useState(); + const [changePasswordModal, setChangePasswordModal] = useState(false); + const [cancelModal, setCancelModal] = useState(false); + + const { + register, + handleSubmit, + trigger, + watch, + formState: { errors, isSubmitted, isSubmitSuccessful }, + } = useForm({ + resolver: yupResolver(ChangePasswordSchema), + }); + + const characters = /(?=^.{8,20}$).*$/; + const letters = /(?=.*[a-z])(?=.*[A-Z])\w+/; + const number = /(?=.*[0-9])\w+/; + const specialCharacters = /(?=.*\W+).*$/; + + const newPasswordValue = watch("password"); + const api = useApi(); + + const onSubmitHandler: SubmitHandler = async (data, e) => { + e?.preventDefault(); + // console.log('bianca', data); + try { + await api.changePassword(data.oldPassword, data.password, data.confirmNewPassword); + setChangePasswordModal(true); + } catch (error: any) { + setErrorMessage(error.response.data.message); + // console.log('bianca erros', error.response.data.message); + } + } + + const handleCancelModal = (e: any) => { + e.preventDefault(); + document.body.style.overflow = 'hidden'; + setCancelModal(true); + window.scrollTo(0, 0); + }; + + return ( + +
    +
    +

    Alterar senha

    + + + + {errors.oldPassword && <>{errors.oldPassword.message}} + + + + + {errors.password && <>{errors.password.message}} + + + + + {errors.confirmNewPassword && <>{errors.confirmNewPassword?.message}} + +
    + {isSubmitSuccessful && !errorMessage && ( +

    Senha alterada com sucesso.

    + )} +
    + + {errorMessage && ( +

    {errorMessage}

    + )} +     + +

    Sua senha deve conter:

    +
      + + No mínimo 8 caracteres + + + Letras maiúsculas e minúsculas + + + No mínimo 1 número + + + No mínimo um caracter especial (!@?{ }...) + +
    +     +
    + + +
    + + {changePasswordModal && } + {cancelModal && } +
    + + ); +} + +export default ChangePassword; diff --git a/src/pages/styles/ChangePasswordStyles.ts b/src/pages/styles/ChangePasswordStyles.ts new file mode 100644 index 00000000..e7117206 --- /dev/null +++ b/src/pages/styles/ChangePasswordStyles.ts @@ -0,0 +1,181 @@ +import styled from "styled-components"; +import { AiFillEye } from 'react-icons/ai' +import { RiEyeCloseLine } from "react-icons/ri"; +import tickImage from '../../assets/imgs/tick.svg'; +import disabledImage from '../../assets/imgs/disabled.svg'; + +export const Border = styled.span` + border: 1px solid #dcdcdc; + width: 50%; + margin-bottom: 30px; +` + +export const Container = styled.main` + height: 100vh; + overflow-y: auto; +` + +export const Form = styled.form` + display: flex; + flex-direction: column; + place-items: center; + padding-top: 1rem; + padding-bottom: 1rem; + + h1 { + text-align: center; + color: var(--Logo-Cor, #046AD0); + font-family: "Radio Canada"; + font-size: 40px; + font-style: normal; + font-weight: 700; + line-height: normal; + font-weight: 700; + padding-top: 2rem; + padding-bottom: 1rem; + } + + label { + margin-bottom: 10px; + display: inline-flex; + flex-direction: column; + + span { + text-align: center; + font-weight: 600; + font-size: 24px; + color: #515050; + font-family: "Radio Canada"; + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: normal; + + } + + } + + label div { + display: flex; + background-color: #FDFFFC; + margin-top: 5px; + padding: 0.5rem; + border-radius: 5px; + border-width: 2px; + + input { + outline-color: transparent; + width: 280px; + font-family: "Radio Canada"; + + @media (max-width: 600px) { + width: 250px; + } + + @media (max-width: 280px) { + width: 150px; + } + } + + button { + padding-left: 0.75rem; + padding-right: 0.75rem; + } + } +` + +export const ErrorMessages = styled.div` + color: red; + padding-bottom: 10px; +` + +interface ErrorProps { + error: boolean; +} + +export const ConfirmPasswordErrorMessage = styled.div ` + border-color: ${props => props.error ? "red" : "none"} +` + +export const ChangePasswordErrorMessage = styled.div ` + border-color: ${props => props.error ? "red" : "none"}; + +` + +export const StyledIconOpenEyes = styled(AiFillEye)` + height: 30px; + width: 30px; + justify-self: end; + fill: #cbd5e1; +` +export const StyledIconClosedEyes = styled(RiEyeCloseLine)` + height: 30px; + width: 30px; + justify-self: end; + fill: #cbd5e1; +` + +export const Checklist = styled.div` + display:flex; + flex-direction: column; + padding: 1.5rem; + border-radius: 5px; + border: 1px solid; + border-color: #086BCF; + + h2 { + font-weight: 600; + margin-bottom: 5px; + align-self: center; + } +` + +interface ListProps { + valid: boolean; +} + +export const List = styled.li` + display: flex; + flex-direction: space-between; + list-style: none; + font-size: 14px; + background-repeat: no-repeat; + background-position-y: center; + background-image: ${props => props.valid ? `url(${tickImage})` : `url(${disabledImage})`}; + color: ${props => props.valid ? "#149911" : "#C1292E"}; +` + +export const MessageChecklist = styled.div` + padding-left: 32px; +` + +export const Button = styled.button` + padding: 2px; + margin-top: 30px; + margin-right: 20px; + border-width: 1px; + border-radius: 5px; + border-color: #086BCF; + width: 252px; + height: 58px; + color: #086BCF; + font-weight: bold; + + @media (max-width: 600px) { + width: 200px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 25px; + } + + @media (max-width: 280px) { + width: 150px; + font-size: 1em; + } + + &:hover{ + opacity: 0.8; + } +` \ No newline at end of file diff --git a/src/routes/router.tsx b/src/routes/router.tsx index ba50a072..69676a90 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -21,6 +21,7 @@ import { CandidateSettings } from '../pages/CandidateSettings'; import CompanyApplications from '../pages/CompanyApplications'; import JobsPanel from '../pages/JobsPanel'; import MatchJobs from '../pages/MatchJobs'; +import ChangePassword from '../pages/ChangePassword'; const NavRoutes: React.FC = () => { return ( @@ -40,7 +41,7 @@ const NavRoutes: React.FC = () => { element={} /> } /> - + } /> {/* atualizar layout */} Date: Fri, 28 Jun 2024 21:53:37 -0300 Subject: [PATCH 2/3] Alterar CancelModal, ChangePassword, useApi --- src/components/CancelModal.tsx | 2 +- .../Portal/ProfileModal/CancelModal/index.tsx | 1 + .../ChangePasswordModal/index.tsx | 5 +---- src/hooks/useApi.ts | 9 +++++++-- src/pages/CandidateSettings/index.tsx | 7 +++---- src/pages/ChangePassword.tsx | 20 +++++++++---------- src/pages/ProfileSettings/index.tsx | 5 +++-- src/pages/ResetPassword.tsx | 2 +- src/pages/styles/ChangePasswordStyles.ts | 2 +- 9 files changed, 27 insertions(+), 26 deletions(-) diff --git a/src/components/CancelModal.tsx b/src/components/CancelModal.tsx index 8ef7cad2..2a9895ce 100644 --- a/src/components/CancelModal.tsx +++ b/src/components/CancelModal.tsx @@ -1,7 +1,7 @@ interface CancelModalProps { handleConfirmCancel: () => void; setCancelModal: (value: boolean) => void; -} +}; function CancelModal({ handleConfirmCancel, diff --git a/src/components/Portal/ProfileModal/CancelModal/index.tsx b/src/components/Portal/ProfileModal/CancelModal/index.tsx index b12c362a..a95dbeab 100644 --- a/src/components/Portal/ProfileModal/CancelModal/index.tsx +++ b/src/components/Portal/ProfileModal/CancelModal/index.tsx @@ -7,6 +7,7 @@ import { useContext } from 'react'; interface CancelModalProps { setCancelModal: (value: boolean) => void; + open: boolean; } function CancelModal({ setCancelModal }: CancelModalProps) { diff --git a/src/components/Portal/ProfileModal/ChangePasswordModal/index.tsx b/src/components/Portal/ProfileModal/ChangePasswordModal/index.tsx index 595344d8..1eb9aad6 100644 --- a/src/components/Portal/ProfileModal/ChangePasswordModal/index.tsx +++ b/src/components/Portal/ProfileModal/ChangePasswordModal/index.tsx @@ -14,7 +14,7 @@ interface ChangePasswordModalProps { setChangePasswordModal: (value: boolean) => void; } -const ChangePasswordModal = ({ setChangePasswordModal }: ChangePasswordModalProps ) => { +const ChangePasswordModal = ({ setChangePasswordModal }: ChangePasswordModalProps ) => { const navigate = useNavigate(); const auth = useContext(AuthContext); const modalRef = useRef(null); @@ -49,9 +49,6 @@ const ChangePasswordModal = ({ setChangePasswordModal }: ChangePasswordModalPro X diff --git a/src/hooks/useApi.ts b/src/hooks/useApi.ts index 431337b4..5490044c 100644 --- a/src/hooks/useApi.ts +++ b/src/hooks/useApi.ts @@ -1,5 +1,10 @@ import api from '../services/api'; +type ChangePasswordResponse = { + success: boolean; + message: string; +}; + export const useApi = () => ({ login: async (email: string, password: string, type: string | any) => { const res: any = await api.post('/auth/login', { @@ -223,9 +228,9 @@ export const useApi = () => ({ return res.data; }, - changePassword: async (oldPassword: string, password: string, confirmNewPassword: string) => { + changePassword: async (oldPassword: string, password: string, confirmNewPassword: string): Promise => { const token = localStorage.getItem('authToken'); - const res: any = await api.patch('/user/update_password', { + const res = await api.patch('/user/update_password', { oldPassword, password, confirmNewPassword, diff --git a/src/pages/CandidateSettings/index.tsx b/src/pages/CandidateSettings/index.tsx index 9198e0b9..f1797c91 100644 --- a/src/pages/CandidateSettings/index.tsx +++ b/src/pages/CandidateSettings/index.tsx @@ -58,6 +58,7 @@ export const CandidateSettings: React.FC = () => { const [fileKey2, setFileKey2] = useState(); const [fileUrl1, setFileUrl1] = useState(); const [fileUrl2, setFileUrl2] = useState(); + const [isModalOpen, setIsModalOpen] = useState(false); const { register, @@ -184,11 +185,9 @@ export const CandidateSettings: React.FC = () => { setFileKey2(undefined); }; - // Função do modal de cancelamento - const handleCancelModal = (e: any) => { e.preventDefault(); - document.body.style.overflow = 'hidden'; + setIsModalOpen(false); setCancelModal(true); window.scrollTo(0, 0); }; @@ -491,7 +490,7 @@ export const CandidateSettings: React.FC = () => { {confirmModal && } - {cancelModal && } + {cancelModal && }
    diff --git a/src/pages/ChangePassword.tsx b/src/pages/ChangePassword.tsx index 2dd065c5..6b77358d 100644 --- a/src/pages/ChangePassword.tsx +++ b/src/pages/ChangePassword.tsx @@ -21,20 +21,20 @@ import Footer from '../components/Portal/Footer'; import ChangePasswordModal from '../components/Portal/ProfileModal/ChangePasswordModal'; import CancelModal from '../components/Portal/ProfileModal/CancelModal'; - interface ChangePasswordForm { oldPassword: string; password: string; confirmNewPassword: string; -} +}; const ChangePassword = () => { const [oldVisible, setOldVisible] = useState(false); const [visible, setVisible] = useState(false); const [confirmVisible, setConfirmVisible] = useState(false); - const [errorMessage, setErrorMessage] = useState(); + const [errorMessage, setErrorMessage] = useState(''); const [changePasswordModal, setChangePasswordModal] = useState(false); const [cancelModal, setCancelModal] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const { register, @@ -56,19 +56,17 @@ const ChangePassword = () => { const onSubmitHandler: SubmitHandler = async (data, e) => { e?.preventDefault(); - // console.log('bianca', data); try { await api.changePassword(data.oldPassword, data.password, data.confirmNewPassword); setChangePasswordModal(true); } catch (error: any) { setErrorMessage(error.response.data.message); - // console.log('bianca erros', error.response.data.message); - } - } + }; + }; const handleCancelModal = (e: any) => { e.preventDefault(); - document.body.style.overflow = 'hidden'; + setIsModalOpen(false); setCancelModal(true); window.scrollTo(0, 0); }; @@ -172,7 +170,7 @@ const ChangePassword = () => { @@ -185,10 +183,10 @@ const ChangePassword = () => { {changePasswordModal && } - {cancelModal && } + {cancelModal && }
    ); -} +}; export default ChangePassword; diff --git a/src/pages/ProfileSettings/index.tsx b/src/pages/ProfileSettings/index.tsx index 76dcfdc7..d368df81 100644 --- a/src/pages/ProfileSettings/index.tsx +++ b/src/pages/ProfileSettings/index.tsx @@ -37,10 +37,11 @@ export const ProfileSettings: React.FC = () => { const [imagePreview, setImagePreview] = useState(null); const [cancelModal, setCancelModal] = useState(false); const [confirmModal, setConfirmModal] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleCancelModal = (e: any) => { e.preventDefault(); - document.body.style.overflow = 'hidden'; + setIsModalOpen(false); setCancelModal(true); window.scrollTo(0, 0); }; @@ -212,7 +213,7 @@ export const ProfileSettings: React.FC = () => { {confirmModal && } - {cancelModal && } + {cancelModal && }
    diff --git a/src/pages/ResetPassword.tsx b/src/pages/ResetPassword.tsx index 86da28eb..3788a60c 100644 --- a/src/pages/ResetPassword.tsx +++ b/src/pages/ResetPassword.tsx @@ -140,4 +140,4 @@ const ResetPassword = () => { ) } -export default ResetPassword \ No newline at end of file +export default ResetPassword; \ No newline at end of file diff --git a/src/pages/styles/ChangePasswordStyles.ts b/src/pages/styles/ChangePasswordStyles.ts index e7117206..e78cf776 100644 --- a/src/pages/styles/ChangePasswordStyles.ts +++ b/src/pages/styles/ChangePasswordStyles.ts @@ -50,7 +50,6 @@ export const Form = styled.form` font-style: normal; font-weight: 500; line-height: normal; - } } @@ -108,6 +107,7 @@ export const StyledIconOpenEyes = styled(AiFillEye)` justify-self: end; fill: #cbd5e1; ` + export const StyledIconClosedEyes = styled(RiEyeCloseLine)` height: 30px; width: 30px; From a78758f2e6aa111f678311b1627ff4197fccc0db Mon Sep 17 00:00:00 2001 From: Bianca Andrade Date: Mon, 1 Jul 2024 16:54:25 -0300 Subject: [PATCH 3/3] =?UTF-8?q?Cria=C3=A7=C3=A3o=20de=20modal=20Termos=20d?= =?UTF-8?q?e=20Uso=20e=20Pol=C3=ADticas=20de=20Privacidade?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/LoginCard/UserForms/index.tsx | 18 ++- src/components/Portal/Menu/index.tsx | 10 +- .../Portal/ProfileModal/CancelModal/styles.ts | 4 +- .../ChangePasswordModal/styles.ts | 4 +- .../Portal/ProfileModal/PolicyModal/index.tsx | 100 +++++++++++++++ .../Portal/ProfileModal/PolicyModal/styles.ts | 120 ++++++++++++++++++ .../Portal/ProfileModal/TermsModal/index.tsx | 77 +++++++++++ .../Portal/ProfileModal/TermsModal/styles.ts | 120 ++++++++++++++++++ src/pages/CandidatePortal.tsx | 6 +- src/pages/ChangePassword.tsx | 1 - src/routes/router.tsx | 2 - yarn.lock | 5 + 12 files changed, 448 insertions(+), 19 deletions(-) create mode 100644 src/components/Portal/ProfileModal/PolicyModal/index.tsx create mode 100644 src/components/Portal/ProfileModal/PolicyModal/styles.ts create mode 100644 src/components/Portal/ProfileModal/TermsModal/index.tsx create mode 100644 src/components/Portal/ProfileModal/TermsModal/styles.ts diff --git a/src/components/LoginCard/UserForms/index.tsx b/src/components/LoginCard/UserForms/index.tsx index 2f3170c6..b707268e 100644 --- a/src/components/LoginCard/UserForms/index.tsx +++ b/src/components/LoginCard/UserForms/index.tsx @@ -35,6 +35,8 @@ import { MessageChecklist, } from '../styles'; import { Popup } from '../PopUpRegisterSuccess/styles'; +import TermsModal from '../../Portal/ProfileModal/TermsModal'; +import PolicyModal from '../../Portal/ProfileModal/PolicyModal'; export const UserForms = (props: any): JSX.Element => { const [hasError, setHasError] = useState(false); @@ -44,8 +46,18 @@ export const UserForms = (props: any): JSX.Element => { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [isFormSubmitted, setIsFormSubmitted] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); + const [policyModal, setPolicyModal] = useState(false); + const [termsModal, setTermsModal] = useState(false); + const handlePolicyModal = () => { + setPolicyModal(true); + }; + + const handleTermsModal = () => { + setTermsModal(true); + }; + const characters = /^(?=.{8,20}$).*$/; const letters = /^(?=.*[a-z])(?=.*[A-Z]).*$/; const number = /^(?=.*\d).*$/; @@ -362,8 +374,8 @@ export const UserForms = (props: any): JSX.Element => { {/* TODO: Direcionar para as páginas correspondentes após criadas */} - Li e aceito os Termos de Uso e{' '} -
    Política de Privacidade + Li e aceito os Termos de Uso e{' '} +
    Política de Privacidade     {hasError && ( @@ -405,6 +417,8 @@ export const UserForms = (props: any): JSX.Element => { /> ) : null} + {termsModal && } + {policyModal && } ); }; diff --git a/src/components/Portal/Menu/index.tsx b/src/components/Portal/Menu/index.tsx index f5af7ad5..f6c06b74 100644 --- a/src/components/Portal/Menu/index.tsx +++ b/src/components/Portal/Menu/index.tsx @@ -44,7 +44,7 @@ const Menu = () => { -
  • @@ -53,7 +53,7 @@ const Menu = () => { Meu perfil
    • - + */} {auth.user.type !== 'USER' && (
  • { Anunciar vagas
    • )} - + {/* */}
  • { setVisible(!visible); @@ -100,14 +100,14 @@ const Menu = () => { )} - + {/*
  • termos Termo de uso e Privacidade -
    • +
    • */}
  • theme.colors.primaryDark}; - border-radius: 10px; + border-radius: 8px; @media (max-width: 280px) { width: 100%; diff --git a/src/components/Portal/ProfileModal/ChangePasswordModal/styles.ts b/src/components/Portal/ProfileModal/ChangePasswordModal/styles.ts index 08f4da56..8d52307f 100644 --- a/src/components/Portal/ProfileModal/ChangePasswordModal/styles.ts +++ b/src/components/Portal/ProfileModal/ChangePasswordModal/styles.ts @@ -7,9 +7,7 @@ export const ModalContent = styled.div` gap: 20px; position: fixed; background: white; - - border: 2px solid ${({theme}) => theme.colors.primaryDark}; - border-radius: 10px; + border-radius: 8px; img { width: 30%; diff --git a/src/components/Portal/ProfileModal/PolicyModal/index.tsx b/src/components/Portal/ProfileModal/PolicyModal/index.tsx new file mode 100644 index 00000000..d4474e97 --- /dev/null +++ b/src/components/Portal/ProfileModal/PolicyModal/index.tsx @@ -0,0 +1,100 @@ +import React, { useEffect, useRef } from 'react'; +import { + ModalContent, + ModalTitle, + ModalText, + CloseModal, + ModalCloseButton, + Border, + ModalTextInicio, + ModalContainer, +} from './styles'; +import { MaskBackground } from '../../../LoginCard/PopUpRegisterSuccess/styles'; + +interface PolicyModalProps { + setPolicyModal: (value: boolean) => void; +}; + +const PolicyModal: React.FC = ({ setPolicyModal }) => { + const modalRef = useRef(null); + const handleCloseModal = () => { + setPolicyModal(false); + }; + + return ( + + + + + + X + + + Política de privacidade + + +
    + POLÍTICA DE PRIVACIDADE + + A sua privacidade é importante para nós. É política do SouJunior respeitar a sua privacidade em relação a qualquer informação sua que possamos coletar no site SouJunior e outros sites que possuímos e operamos.

    + Solicitamos informações pessoais apenas quando realmente precisamos delas para lhe fornecer um serviço. Fazemo-lo por meios justos e legais, com o seu conhecimento e consentimento. Também informamos por que estamos coletando e como será usado.

    + Apenas retemos as informações coletadas pelo tempo necessário para fornecer o serviço solicitado. Quando armazenamos dados, protegemos dentro de meios comercialmente aceitáveis ​​para evitar perdas e roubos, bem como acesso, divulgação, cópia, uso ou modificação não autorizados.

    + Não compartilhamos informações de identificação pessoal publicamente ou com terceiros, exceto quando exigido por lei.

    + O nosso site pode ter links para sites externos que não são operados por nós. Esteja ciente de que não temos controle sobre o conteúdo e práticas desses sites e não podemos aceitar responsabilidade por suas respectivas políticas de privacidade.

    + Você é livre para recusar a nossa solicitação de informações pessoais, entendendo que talvez não possamos fornecer alguns dos serviços desejados e caso aceite você poderá ainda, a qualquer tempo, retornar ao site, clicar políticas de privacidade e reler quantas vezes desejar.

    + O uso continuado de nosso site será considerado como aceitação de nossas práticas em torno de privacidade e informações pessoais. Se você tiver alguma dúvida sobre como lidamos com dados do usuário e informações pessoais, entre em contato conosco.

    + + Política de Cookies SouJunior

    +     + + O que são cookies?

    +     + Como é prática comum em quase todos os sites profissionais, este site usa cookies, que são pequenos arquivos baixados no seu computador, para melhorar sua experiência. Esta página descreve quais informações eles coletam, como as usamos e por que às vezes precisamos armazenar esses cookies. Também compartilharemos como você pode impedir que esses cookies sejam armazenados, no entanto, isso pode fazer o downgrade ou 'quebrar' certos elementos da funcionalidade do site.

    + + Como usamos os cookies?

    +     + Utilizamos cookies por vários motivos, detalhados abaixo. Infelizmente, na maioria dos casos, não existem opções padrão do setor para desativar os cookies sem desativar completamente a funcionalidade e os recursos que eles adicionam a este site. É recomendável que você deixe todos os cookies se não tiver certeza se precisa ou não deles, caso sejam usados ​​para fornecer um serviço que você usa.

    + + Desativar cookies

    +     + Você pode impedir a configuração de cookies ajustando as configurações do seu navegador (consulte a Ajuda do navegador para saber como fazer isso). Esteja ciente de que a desativação de cookies afetará a funcionalidade deste e de muitos outros sites que você visita. A desativação de cookies geralmente resultará na desativação de determinadas funcionalidades e recursos deste site. Portanto, é recomendável que você não desative os cookies.

    + + Cookies que definimos

    +     + Cookies relacionados à conta. Se você criar uma conta conosco, usaremos cookies para o gerenciamento do processo de inscrição e administração geral. Esses cookies geralmente serão excluídos quando você sair do sistema, porém, em alguns casos, eles poderão permanecer posteriormente para lembrar as preferências do seu site ao sair.

    + Cookies relacionados ao login. Utilizamos cookies quando você está logado, para que possamos lembrar dessa ação. Isso evita que você precise fazer login sempre que visitar uma nova página. Esses cookies são normalmente removidos ou limpos quando você efetua logout para garantir que você possa acessar apenas a recursos e áreas restritas ao efetuar login.

    + Cookies relacionados a boletins por e-mail. Este site oferece serviços de assinatura de boletim informativo ou e-mail e os cookies podem ser usados ​​para lembrar se você já está registrado e se deve mostrar determinadas notificações válidas apenas para usuários inscritos / não inscritos.

    + Pedidos processando cookies relacionados. Este site oferece facilidades de comércio eletrônico ou pagamento e alguns cookies são essenciais para garantir que seu pedido seja lembrado entre as páginas, para que possamos processá-lo adequadamente.

    + Cookies relacionados a pesquisas. Periodicamente, oferecemos pesquisas e questionários para fornecer informações interessantes, ferramentas úteis ou para entender nossa base de usuários com mais precisão. Essas pesquisas podem usar cookies para lembrar quem já participou numa pesquisa ou para fornecer resultados precisos após a alteração das páginas.

    + Cookies relacionados a formulários. Quando você envia dados por meio de um formulário como os encontrados nas páginas de contacto ou nos formulários de comentários, os cookies podem ser configurados para lembrar os detalhes do usuário para correspondência futura.

    + Cookies de preferências do site. Para proporcionar uma ótima experiência neste site, fornecemos a funcionalidade para definir suas preferências de como esse site é executado quando você o usa. Para lembrar suas preferências, precisamos definir cookies para que essas informações possam ser chamadas sempre que você interagir com uma página for afetada por suas preferências.

    + + Cookies de Terceiros

    +     + Em alguns casos especiais, também usamos cookies fornecidos por terceiros confiáveis. A seção a seguir detalha quais cookies de terceiros você pode encontrar através deste site.

    + Este site usa o Google Analytics, que é uma das soluções de análise mais difundidas e confiáveis ​​da Web, para nos ajudar a entender como você usa o site e como podemos melhorar sua experiência. Esses cookies podem rastrear itens como quanto tempo você gasta no site e as páginas visitadas, para que possamos continuar produzindo conteúdo atraente.

    + Para mais informações sobre cookies do Google Analytics, consulte a página oficial do Google Analytics.

    + As análises de terceiros são usadas para rastrear e medir o uso deste site, para que possamos continuar produzindo conteúdo atrativo. Esses cookies podem rastrear itens como o tempo que você passa no site ou as páginas visitadas, o que nos ajuda a entender como podemos melhorar o site para você.

    + Periodicamente, testamos novos recursos e fazemos alterações subtis na maneira como o site se apresenta. Quando ainda estamos testando novos recursos, esses cookies podem ser usados ​​para garantir que você receba uma experiência consistente enquanto estiver no site, enquanto entendemos quais otimizações os nossos usuários mais apreciam.

    + À medida que vendemos produtos, é importante entendermos as estatísticas sobre quantos visitantes de nosso site realmente compram e, portanto, esse é o tipo de dados que esses cookies rastrearão. Isso é importante para você, pois significa que podemos fazer previsões de negócios com precisão que nos permitem analizar nossos custos de publicidade e produtos para garantir o melhor preço possível.

    + + Compromisso do Usuário

    +     + O usuário se compromete a fazer uso adequado dos conteúdos e da informação que o SouJunior oferece no site e com caráter enunciativo, mas não limitativo:

    + A) Não se envolver em atividades que sejam ilegais ou contrárias à boa fé a à ordem pública;

    + B) Não difundir propaganda ou conteúdo de natureza preconceituosa ou casas de apostas, jogos de sorte e azar, qualquer tipo de pornografia ilegal, de apologia ao terrorismo ou contra os direitos humanos;

    + C) Não causar danos aos sistemas físicos (hardwares) e lógicos (softwares) do SouJunior, de seus fornecedores ou terceiros, para introduzir ou disseminar vírus informáticos ou quaisquer outros sistemas de hardware ou software que sejam capazes de causar danos anteriormente mencionados.

    + + Mais informações

    +     + Esperemos que esteja esclarecido e, como mencionado anteriormente, se houver algo que você não tem certeza se precisa ou não, geralmente é mais seguro deixar os cookies ativados, caso interaja com um dos recursos que você usa em nosso site. +     +
    +     +     + ); +}; + +export default PolicyModal; diff --git a/src/components/Portal/ProfileModal/PolicyModal/styles.ts b/src/components/Portal/ProfileModal/PolicyModal/styles.ts new file mode 100644 index 00000000..3659af1f --- /dev/null +++ b/src/components/Portal/ProfileModal/PolicyModal/styles.ts @@ -0,0 +1,120 @@ +import styled from 'styled-components'; + +export const ModalContent = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + position: fixed; + background: white; + border-radius: 8px; + overflow-y: auto; + max-height: 60%; + max-width: 20%; + + scrollbar-width: thin; + scrollbar-color: ${({ theme }) => theme.colors.primaryDark} transparent; + + &::-webkit-scrollbar { + width: 10px; + } + + &::-webkit-scrollbar-thumb { + background-color: ${({ theme }) => theme.colors.primaryDark}; + border-radius: 8px; + } + + &::-webkit-scrollbar-track { + background-color: #f1f1f1; + border-radius: 8px; + } + + .modal--texts { + display: flex; + flex-direction: column; + align-items: center; + padding: 0 24px 24px 24px; + } + + @media (max-width: 540px) { + max-width: 90%; + max-height: 50%; + } +`; + +export const Border = styled.span` + border: 2px solid ${({theme}) => theme.colors.primaryDark}; + width: 60%; + margin-bottom: 10px; + border-radius: 10px; +`; + +export const ModalContainer = styled.div` + display: flex; + margin-top 30px; +`; + +export const CloseModal = styled.div` + justify-content: flex-end; + align-self: flex-end; + padding-left: 150px; + position: absolute; + top: 0; + right: 0; +`; + +export const ModalCloseButton = styled.button` + width: 45px; + height: 45px; + color: ${({theme}) => theme.colors.primaryDark}; + font-weight: bold; + border-radius: 8px; + &:hover { + background-color: red; + border: 1px solid; + color: #fff; + border-radius: 10px; + } +`; + +export const ModalTextInicio = styled.p` + font-size: 15px; + text-align: center; + color: ${({theme}) => theme.colors.primaryDark}; +`; + +export const ModalText = styled.p` + font-family: Inter; + font-weight: 400; + font-size: 15px; + line-height: 26px; + padding: 0 0 16px 0; + text-align: justify; + white-space: pre-line; + + color: ${({theme}) => theme.colors.mutedDarker}; + + @media (max-width: 480px) { + width: 80%; + } +`; + +export const ModalTitle = styled.h2` + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 700; + padding: 0 0 16px 0; + color: ${({theme}) => theme.colors.primaryDark}; + + @media (max-width: 280px) { + font-size: 15px; + text-align: center; + } + + @media (max-width: 480px) { + display: flex; + font-size: 15px; + text-align: center; + } +`; \ No newline at end of file diff --git a/src/components/Portal/ProfileModal/TermsModal/index.tsx b/src/components/Portal/ProfileModal/TermsModal/index.tsx new file mode 100644 index 00000000..d9d192fe --- /dev/null +++ b/src/components/Portal/ProfileModal/TermsModal/index.tsx @@ -0,0 +1,77 @@ +import React, { useEffect, useRef } from 'react'; +import { + ModalContent, + ModalTitle, + ModalText, + CloseModal, + ModalCloseButton, + ModalContainer, + ModalTextInicio, + Border, +} from './styles'; +import { MaskBackground } from '../../../LoginCard/PopUpRegisterSuccess/styles'; + +interface TermsModalProps { + setTermsModal: (value: boolean) => void; +}; + +const TermsModal: React.FC = ({ setTermsModal }) => { + const modalRef = useRef(null); + const handleCloseModal = () => { + setTermsModal(false); + }; + + return ( + + + + + + X + + + Termos de uso + + +
    + TERMOS DE USO + + Ao navegar neste site e usar os serviços que são fornecidos pelo SouJunior, você afima que leu, compreendeu e concorda com nossos Termos e Condições. Estes Termos e Condições abrangem todos os aplicativos, serviços de Internet ou extensões dos sites relacionados. Você é livre para recusar a nosos termos e condições de uso, entendendo que talvez não possamos fornecer alguns dos serviços desejados e caso aceite você poderá ainda, a qualquer tempo, retornar ao site, clicar em termos de uso e reler quantas vezes desejar.

    + + Termos e Condições

    +     + Os Termos e Condições do SouJunior regem o uso deste Site e todo o seu conteúdo ("Site"). Estes Termos descrevem as regras e regulamentos que orientam o uso do SouJunior. Todos os materiais, informações, documentos, serviços ou todas as outras entidades (coletivamente referidas como "conteúdo'') que aparecem no SouJunior serão administrados de acordo com estes Termos e Condições.

    + O site é destinado a usuários com 18 (dezoito) anos de idade ou mais. Se você tem menos de 18 (dezoito) anos, não poderá usar ou registrar-se para usar este site ou seus serviços sem a permissão ou consentimento dos pais. Ao concordar com estes Termos e Condições, você tem a capacidade legal necessária para cumprir e ficar vinculado por estes Termos e Condições.

    + Áreas específicas deste site podem ser restritas ao acesso do usuário, e o SouJunior pode estender ainda mais essa restrição a todo o site, a qualquer momento e a seu exclusivo critério. Qualquer identificação de usuário, chave de segurança ou senha que você possa ter neste site são confidenciais e você é responsável por manter a confidencialidade dessas informações.

    + Nós nos reservamos o direito de registrar solicitações para que você remova todos os links ou qualquer link específico criado por você que redirecione para o nosso site, e você aprova a remoção imediata desses links para o nosso site, mediante solicitação.

    + Podemos alterar os termos e condições desses direitos de vinculação a qualquer momento. Ao conectar-se continuamente ao nosso site, você concorda em se comprometer e seguir os termos desta política de links.

    + Por favor, entre em contato conosco se encontrar algum link em nosso site que seja ofensivo, e poderemos considerar e analisar solicitações de remoção de tais links seja do SouJunior ou conteúdo feito por terceiros.

    + Este site pode conter links para sites ou aplicativos operados por terceiros. Não controlamos nenhum desses sites ou aplicativos de terceiros ou o operador de terceiros. Este Site, objeto do presente Termos de Uso não é responsável e não endossa quaisquer sites ou aplicativos de terceiros ou sua disponibilidade ou conteúdo. SouJunior não se responsabiliza pelos anúncios contidos no site. Você concorda em fazê-lo por sua própria conta e risco ao adquirir quaisquer bens e / ou serviços de terceiros. O anunciante é quem permanece responsável por tais bens e/ou serviços, e se você tiver alguma dúvida ou reclamação sobre eles, você deve entrar em contato com o anunciante “Conteúdo do usuário”.

    + Importante salientar que o termo usado "Conteúdo do Usuário" significa qualquer áudio, vídeo, texto, imagens ou outro material ou conteúdo que você decida exibir neste Site. Com relação ao conteúdo do usuário, ao exibi-lo, você concede ao SouJunior uma licença não exclusiva, mundial, irrevogável, isenta de royalties e sublicenciável para usar, reproduzir, adaptar, publicar, traduzir e distribuir em qualquer mídia.

    + O Conteúdo do Usuário deve ser seu e não deve infringir os direitos de terceiros. SouJunior reserva-se o direito de remover qualquer parte do seu conteúdo deste site a qualquer momento, sem aviso prévio. SouJunior tem permissão para monitorar suas atividades no site e remover qualquer conteúdo do usuário considerado impróprio, ofensivo, contrário às leis e regulamentos aplicáveis, ou que cause uma violação destes Termos e Condições.

    + Ao acessar este Site, informações específicas sobre o Usuário, como endereços de protocolo de Internet (IP), navegação no site, software do usuário e tempo de navegação, juntamente com outras informações semelhantes, serão armazenadas nos servidores do SouJunior. As informações sobre suas identidades, como nome, endereço, detalhes de contato, informações de faturamento e outras informações armazenadas neste site, serão estritamente usadas apenas para fins estatísticos e não serão publicadas para acesso geral. SouJunior, no entanto, não assume nenhuma responsabilidade pela segurança dessas informações.

    + O site é fornecido, com todas as responsabilidades e não assume compromissos, representações ou garantias expressas ou implícitas de qualquer tipo relacionadas a este site ou ao conteúdo nele contido.

    + + Indenização

    +     + O usuário concorda em indenizar o Site e suas afiliadas em toda a extensão, frente à todas as ações, reclamações, responsabilidades, perdas, danos, custos, demandas e despesas decorrentes do uso deste Site pelo Usuário, incluindo, sem limitação, qualquer reclamação relacionada à violação de qualquer uma das disposições destes Termos e Condições. Se estiver insatisfeito com algum ou todo o conteúdo deste site ou qualquer um ou todos os seus Termos e Condições, o usuário pode interromper o uso deste site.

    + Em qualquer momento, os usuários podem interromper o uso do Site para isso, no site, estão disponíveis as orientações necessárias. Caso ainda fique algum dúvida, não hesite em enviar um e-mail para.

    + Nós nos reservamos o direito e critério exclusivo de, e sem aviso prévio ou responsabilidade, negar o acesso e uso do site (incluindo o bloqueio de endereços IP específicos) a qualquer usuário por qualquer motivo, incluindo, mas não se limitando à violação de qualquer representação, garantia ou acordo nestes Termos ou em qualquer lei ou regulamento aplicável.

    + + Disposições Gerais

    +     + Os Termos e Condições deste site serão regidos e interpretados de acordo com as leis do país ou estado em que o Site opera. Você, por meio deste, se submete incondicionalmente à jurisdição não exclusiva dos tribunais localizados no Brasil para a resolução de quaisquer disputas.

    + Este Site reserva-se o direito de revisar estes Termos a qualquer momento conforme julgar adequado. Por isso é fundamental que os seus usuários estejam atentos à essas aleterações.

    + O Site reserva-se o direito de ceder, transferir e subcontratar seus direitos e/ou obrigações sob este Acordo sem qualquer notificação ou consentimento prévio necessário. Os usuários não terão permissão para atribuir, transferir ou subcontratar qualquer um de seus direitos e/ou obrigações sob estes Termos. Além disso, uma pessoa que não seja parte destes Termos e Condições não terá o direito de fazer cumprir qualquer disposição neles contida.

    + Estes Termos e Condições, incluindo quaisquer avisos legais e isenções de responsabilidade neste site, constituem o acordo completo entre o Site e você em relação ao uso deste site.

    + Qualquer dúvida, entre em contato por meio do endereço de e-mail: wouerner@soujunior.tech +     +
    +     +     + ); +}; + +export default TermsModal; diff --git a/src/components/Portal/ProfileModal/TermsModal/styles.ts b/src/components/Portal/ProfileModal/TermsModal/styles.ts new file mode 100644 index 00000000..3659af1f --- /dev/null +++ b/src/components/Portal/ProfileModal/TermsModal/styles.ts @@ -0,0 +1,120 @@ +import styled from 'styled-components'; + +export const ModalContent = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + position: fixed; + background: white; + border-radius: 8px; + overflow-y: auto; + max-height: 60%; + max-width: 20%; + + scrollbar-width: thin; + scrollbar-color: ${({ theme }) => theme.colors.primaryDark} transparent; + + &::-webkit-scrollbar { + width: 10px; + } + + &::-webkit-scrollbar-thumb { + background-color: ${({ theme }) => theme.colors.primaryDark}; + border-radius: 8px; + } + + &::-webkit-scrollbar-track { + background-color: #f1f1f1; + border-radius: 8px; + } + + .modal--texts { + display: flex; + flex-direction: column; + align-items: center; + padding: 0 24px 24px 24px; + } + + @media (max-width: 540px) { + max-width: 90%; + max-height: 50%; + } +`; + +export const Border = styled.span` + border: 2px solid ${({theme}) => theme.colors.primaryDark}; + width: 60%; + margin-bottom: 10px; + border-radius: 10px; +`; + +export const ModalContainer = styled.div` + display: flex; + margin-top 30px; +`; + +export const CloseModal = styled.div` + justify-content: flex-end; + align-self: flex-end; + padding-left: 150px; + position: absolute; + top: 0; + right: 0; +`; + +export const ModalCloseButton = styled.button` + width: 45px; + height: 45px; + color: ${({theme}) => theme.colors.primaryDark}; + font-weight: bold; + border-radius: 8px; + &:hover { + background-color: red; + border: 1px solid; + color: #fff; + border-radius: 10px; + } +`; + +export const ModalTextInicio = styled.p` + font-size: 15px; + text-align: center; + color: ${({theme}) => theme.colors.primaryDark}; +`; + +export const ModalText = styled.p` + font-family: Inter; + font-weight: 400; + font-size: 15px; + line-height: 26px; + padding: 0 0 16px 0; + text-align: justify; + white-space: pre-line; + + color: ${({theme}) => theme.colors.mutedDarker}; + + @media (max-width: 480px) { + width: 80%; + } +`; + +export const ModalTitle = styled.h2` + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 700; + padding: 0 0 16px 0; + color: ${({theme}) => theme.colors.primaryDark}; + + @media (max-width: 280px) { + font-size: 15px; + text-align: center; + } + + @media (max-width: 480px) { + display: flex; + font-size: 15px; + text-align: center; + } +`; \ No newline at end of file diff --git a/src/pages/CandidatePortal.tsx b/src/pages/CandidatePortal.tsx index ef49aaa4..7fe5a8fa 100644 --- a/src/pages/CandidatePortal.tsx +++ b/src/pages/CandidatePortal.tsx @@ -28,13 +28,13 @@ const CandidatePortal = () => {
    -

    {auth.user.name}, atualize seu currículo!

    - navigate('/candidate-settings')}> +

    Olá, {auth.user.name}

    + {/* navigate('/candidate-settings')}>
    currículo
    Atualizar meu currículo
    -     +     */}