From b4c14b820070caa8341ffda2f5cab5cf53d9cef6 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Tue, 16 Jul 2024 16:57:42 -0400 Subject: [PATCH] Restructured password confirmed page --- .../src/Pages/NewPasswordConfirmed/index.css | 87 ++++++------------ .../src/Pages/NewPasswordConfirmed/index.jsx | 65 ++++++------- Client/src/assets/Images/arrow-left.png | Bin 310 -> 0 bytes Client/src/assets/Images/success-icon.png | Bin 1851 -> 0 bytes Client/src/assets/icons/confirm-icon.svg | 18 ++++ 5 files changed, 72 insertions(+), 98 deletions(-) delete mode 100644 Client/src/assets/Images/arrow-left.png delete mode 100644 Client/src/assets/Images/success-icon.png create mode 100644 Client/src/assets/icons/confirm-icon.svg diff --git a/Client/src/Pages/NewPasswordConfirmed/index.css b/Client/src/Pages/NewPasswordConfirmed/index.css index 39f8bcd68..aae2d8636 100644 --- a/Client/src/Pages/NewPasswordConfirmed/index.css +++ b/Client/src/Pages/NewPasswordConfirmed/index.css @@ -1,67 +1,36 @@ .password-confirmed-page { - width: var(--env-var-width-1); display: flex; justify-content: center; - min-height: var(--env-var-height-1); + height: var(--env-var-height-1); +} +.password-confirmed-page button:not(.MuiIconButton-root) { + height: 34px; + border-radius: var(--env-var-radius-2); + line-height: 0; +} +.password-confirmed-page h1.MuiTypography-root { + font-size: var(--env-var-font-size-large); + color: var(--env-var-color-1); + font-weight: 600; +} +.password-confirmed-page p.MuiTypography-root, +.password-confirmed-page button { + font-size: var(--env-var-font-size-medium); +} +.password-confirmed-page p.MuiTypography-root { + color: var(--env-var-color-2); +} +.password-confirmed-page button:not(.MuiIconButton-root) svg { + margin-right: 5px; +} +.password-confirmed-page + .MuiFormControl-root:has(#register-password-input) + + span.MuiTypography-root { + display: none; + visibility: hidden; } .password-confirmed-form { - width: var(--env-var-width-2); - margin: 90px auto; -} - -.password-confirmed-form-header { - justify-content: center; - align-items: center; - text-align: center; -} - -.password-confirmed-v-gap-large { - height: var(--env-var-spacing-3); -} - -.password-confirmed-v-gap-medium { - height: var(--env-var-spacing-2); -} - -.password-confirmed-v-gap-small { - height: var(--env-var-spacing-1); -} - -.password-confirmed-form-heading { - font-size: var(--env-var-font-size-large); - font-weight: 700; - color: var(--env-var-color-1); -} - -.password-confirmed-form-subheading { - font-size: var(--env-var-font-size-medium); - font-weight: 600; - color: var(--env-var-color-2); -} - -.password-confirmed-body { + margin-top: 65px; width: var(--env-var-width-2); } - -.password-confirmed-back-button { - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; -} - -.password-confirmed-back-button-img { - width: var(--env-var-img-width-1); - height: var(--env-var-img-width-1); - margin-right: 5px; - align-items: center; -} - -.password-confirmed-back-button-text { - height: var(--env-var-img-width-1); - font-size: var(--env-var-font-size-medium); - font-weight: 600; - color: var(--env-var-color-2); - text-align: center; -} diff --git a/Client/src/Pages/NewPasswordConfirmed/index.jsx b/Client/src/Pages/NewPasswordConfirmed/index.jsx index 1bbfc06ad..89d065062 100644 --- a/Client/src/Pages/NewPasswordConfirmed/index.jsx +++ b/Client/src/Pages/NewPasswordConfirmed/index.jsx @@ -1,54 +1,41 @@ import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern"; import "./index.css"; -import React from "react"; -import SuccessIcon from "../../assets/Images/success-icon.png"; +import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded"; +import ConfirmIcon from "../../assets/icons/confirm-icon.svg?react"; import Button from "../../Components/Button"; -import LeftArrow from "../../assets/Images/arrow-left.png"; +import { Stack, Typography } from "@mui/material"; +import { useTheme } from "@emotion/react"; +import { useNavigate } from "react-router"; const NewPasswordConfirmed = () => { + const theme = useTheme(); + const navigate = useNavigate(); + return (
-
-
- SuccessIcon -
-
Password reset
-
-
+
+ + + + Password reset + + Your password has been successfully reset. Click below to log in magically. -
-
-
-
+ + + +
-
-
- LeftArrow -
- Back to log in -
-
-
+ +
); }; diff --git a/Client/src/assets/Images/arrow-left.png b/Client/src/assets/Images/arrow-left.png deleted file mode 100644 index 0bd5b126873ebe4e6f34f14149d0520efd81078d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 310 zcmeAS@N?(olHy`uVBq!ia0vp^qChOd!3HFgyvvM%6lZ})WHAE+w=f7ZGR&GI0Tg5` z4sv&5Sa(k5C6L3C?&#~tz_78O`%fY(kbm0K#WAFU@$KZjyoU?~+|EDre|e)}&7?jf z)l@I984aQ@7&@7(CO9nW$vDB*!E4iG&D~Kdq3No$=#Jy1iQ%`Nr_ZmEKM=2M;d=Pu zjl=5a-W{8JZ28VbuVklPcyKgMzO1^6fk$SVz(MDdL!awPnc13jZS=MsaJizZGbK#4 z&Z9Zu(skL|TJFoSo}2=XwnEp>`?;QUSG2TxxjN)v)V!SEhqlRw=I+-s%wDojbo#L` z;f6E+&XMSmm%V0K+IFUHOSIQTp?y>H6f(Ut7E~~rwY8}n{PT1t&|3_iu6{1-oD!M< DIv{hg diff --git a/Client/src/assets/Images/success-icon.png b/Client/src/assets/Images/success-icon.png deleted file mode 100644 index 43cdbbc2a14709f758809bcf6c8d7c525bd1c8aa..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1851 zcmV-B2gLY^P)v%9DYmqOaKx5iO&autQvZPgpg7f2&fOSy#{dJf4Ku+uLRD>&kg|ngURc- z`zMv3)CNSj-xH!V#x^#*iScoMhXdH0L4pCh2m=7dz-#*am0`fr7+#Z;la&*nIqv4x z*48D%{9qAVz6PA-42wA?j1?y*&uzc}z;*X=;2Vj9ra#Al+a|;Q8UFn!#5=*Zx83>e zU9Vi*-OH5A?gR`0>e$!q9namuzW4GRtJU3XZO1EDt8M~@4Af`pJ8^(0OO_-%tYj4w z>CG+oE*wXi)@*&(bBCF%f+9_vj;h0IJ8q8FEQ|fm*2f9g_MuJ8JMhLF!PS7T{ zw)XFNRc6SP`7m|^^{WFT1XNERV=VX4h4DM8Oc4glG{0k}k%JKfo$9r}P+R8`AL5w`+yTA|4c+rsCn+Z51n?(uTg&u*=+=q73HfVt(HVYz*nLOw~6Pn91o0T2! z3-VbpopFjUf*u^&(rFEf7m-Y6>2{ZD z#qc}&g|el!n3gC7>@Wu(d@o#1YN`Q^KQNo?R8bMh;?56y!iR0y-~GXHf>f7@RA2dO_Vln;mXaWh5zFK_W}b z1T;apz?NtmGFpT1M0(1;xnu?b0bGZGUeIh7gmYmO$y}s*fl=X4Np&X7)2K19enEt> zKP9c99)jGFFR9=h<`a0$(d*R9f>Ca*rXsnAFP$gaq#B0u`QK|G9wj@Cq1uFU1jt-O zk{FhKe}Q;ab_TvJ(F)QS(;9Rrj@sAmpdz2IhtG9pjI%PO3F1>rZO5$yXBS5cRo6|> zNgnxqxV45E<4|cf4`N0J2M<;Q5 zSY2JeEKbt8BXGDBIn;5+uCK3?bdOTMY4g9$`aPNk!%SN2%*cVbzzMbn-n6Z1wf^I< zl2&B@ukGF^E)e06IE{$4S=+rwn^-kCSw8Tf%{Dm6?^XiIMkA{rB)zt_cBNW-{g_5< zdv|XU$=ic;csw`+?%u$@EzrSsIvZUm{Cx$#1s_TF$Pu8^r!zA%CVp3CNc`gY^PgU~ z#;og%v1_Qo2SRmWuwa9u!Nh%k<*(A8kFdWUefY*cH{pm#Y?ObJV(4fv6$Hbm6Q=tz ze~znsGKpb?QVD-2Su*)K=E<^2$!7N3-V@Y?2q^JXDg}kYK1-#}aZ0I7wTrj#9_0!m z1lw`NhVnMd;1biu#K8#tPMb8H&{S>R52jae4}V+j_20cusjMU0QT2m1<#eSo16onn p=xa6Z0O)Lsh4RoP4-v{w#9Ij@lM#}WtUCYz002ovPDHLkV1oL%aTEXm diff --git a/Client/src/assets/icons/confirm-icon.svg b/Client/src/assets/icons/confirm-icon.svg new file mode 100644 index 000000000..d5cdd42de --- /dev/null +++ b/Client/src/assets/icons/confirm-icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + +