From b081f2119ddd9d4d69f3df8cf4c02cc9bdb3d151 Mon Sep 17 00:00:00 2001 From: bunsy-0900 Date: Tue, 16 Jan 2024 14:33:23 +0700 Subject: [PATCH 1/8] fix: add missing imports Signed-off-by: bunsy-0900 --- signup-ui/src/app/AppRouter.tsx | 1 + .../SignUpPage/AccountSetup/AccountSetup.tsx | 22 ++++++++++++------- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/signup-ui/src/app/AppRouter.tsx b/signup-ui/src/app/AppRouter.tsx index 97d171d7..47c0ef6c 100644 --- a/signup-ui/src/app/AppRouter.tsx +++ b/signup-ui/src/app/AppRouter.tsx @@ -16,6 +16,7 @@ import { UNDER_CONSTRUCTION, } from "~constants/routes"; import { lazyRetry } from "~utils/lazyRetry"; +import { setupResponseInterceptor } from "~services/api.service"; const SignUpPage = lazy(() => lazyRetry(() => import("~pages/SignUpPage"))); const ResetPasswordPage = lazy(() => diff --git a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx index aabdf28f..cfbb146a 100644 --- a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx +++ b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx @@ -1,7 +1,7 @@ import { KeyboardEvent, useCallback, useMemo, useState } from "react"; import { PopoverTrigger } from "@radix-ui/react-popover"; import { UseFormReturn } from "react-hook-form"; -import { useTranslation } from "react-i18next"; +import { Trans, useTranslation } from "react-i18next"; import { Button } from "~components/ui/button"; import { Checkbox } from "~components/ui/checkbox"; @@ -63,7 +63,7 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => { const { registerMutation } = useRegister(); const [openTermConditionModal, setOpenTermConditionModal] = useState(false); - const [modalData, setModalData] = useState({title: "", content: ""}); + const [modalData, setModalData] = useState({ title: "", content: "" }); const disabledContinue = !isValid || @@ -121,20 +121,26 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => { const onModalToggle = () => { setOpenTermConditionModal(false); - setModalData({title: "", content: ""}); - } + setModalData({ title: "", content: "" }); + }; const onOpenTerm = (e: any) => { e.preventDefault(); - setModalData({title: t("terms_and_conditions_title"), content: t("terms_and_conditions_content")}); + setModalData({ + title: t("terms_and_conditions_title"), + content: t("terms_and_conditions_content"), + }); setOpenTermConditionModal(true); - } + }; const onOpenPrivacy = (e: any) => { e.preventDefault(); - setModalData({title: t("privacy_and_policy_title"), content: t("privacy_and_policy_content")}); + setModalData({ + title: t("privacy_and_policy_title"), + content: t("privacy_and_policy_content"), + }); setOpenTermConditionModal(true); - } + }; const handleFullNameInput = (event: KeyboardEvent) => handleInputFilter( From a0e118f5c7a1e1fe1d0706a11ec6ec4afa4e16bb Mon Sep 17 00:00:00 2001 From: bunsy-0900 Date: Mon, 15 Jan 2024 16:39:21 +0700 Subject: [PATCH 2/8] fix: fix overflow popup content Signed-off-by: bunsy-0900 --- signup-ui/src/components/label-popover.tsx | 36 ++++++++++++++++ signup-ui/src/components/ui/popover.tsx | 6 ++- .../ResetPassword/ResetPassword.tsx | 33 ++++++-------- .../ResetPasswordPage/UserInfo/UserInfo.tsx | 6 --- .../SignUpPage/AccountSetup/AccountSetup.tsx | 43 ++++++++----------- 5 files changed, 70 insertions(+), 54 deletions(-) create mode 100644 signup-ui/src/components/label-popover.tsx diff --git a/signup-ui/src/components/label-popover.tsx b/signup-ui/src/components/label-popover.tsx new file mode 100644 index 00000000..2fa96cb9 --- /dev/null +++ b/signup-ui/src/components/label-popover.tsx @@ -0,0 +1,36 @@ +import { + Popover, + PopoverArrow, + PopoverContent, + PopoverTrigger, +} from "./ui/popover"; + +interface LabelPopoverProps { + icon: React.ReactNode; + children: React.ReactNode; +} + +export const LabelPopover = ({ icon, children }: LabelPopoverProps) => { + return ( + <> +
+ + {icon} + + {children} + + + +
+
+ + {icon} + + {children} + + + +
+ + ); +}; diff --git a/signup-ui/src/components/ui/popover.tsx b/signup-ui/src/components/ui/popover.tsx index 78852ca3..9b4daa37 100644 --- a/signup-ui/src/components/ui/popover.tsx +++ b/signup-ui/src/components/ui/popover.tsx @@ -5,6 +5,8 @@ import { cn } from "~utils/cn"; const Popover = PopoverPrimitive.Root; +const PopoverAnchor = PopoverPrimitive.Anchor; + const PopoverTrigger = PopoverPrimitive.Trigger; const PopoverContent = React.forwardRef< @@ -17,7 +19,7 @@ const PopoverContent = React.forwardRef< align={align} sideOffset={sideOffset} className={cn( - "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", + "z-50 w-[175px] rounded-md border bg-popover px-3 py-2 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 md:w-[220px] sm:w-[200px]", className )} {...props} @@ -37,4 +39,4 @@ const PopoverArrow = React.forwardRef< /> )); -export { Popover, PopoverTrigger, PopoverArrow, PopoverContent }; +export { Popover, PopoverAnchor, PopoverTrigger, PopoverArrow, PopoverContent }; diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx index 81ece7ce..72320b19 100644 --- a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx +++ b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx @@ -3,6 +3,7 @@ import { useFormContext, UseFormReturn } from "react-hook-form"; import { Trans, useTranslation } from "react-i18next"; import { useLocation } from "react-router-dom"; +import { LabelPopover } from "~components/label-popover"; import { ActionMessage } from "~components/ui/action-message"; import { Button } from "~components/ui/button"; import { @@ -14,12 +15,6 @@ import { } from "~components/ui/form"; import { Icons } from "~components/ui/icons"; import { Input } from "~components/ui/input"; -import { - Popover, - PopoverArrow, - PopoverContent, - PopoverTrigger, -} from "~components/ui/popover"; import { Step, StepAlert, @@ -172,21 +167,19 @@ export const ResetPassword = ({ methods, settings }: ResetPasswordProps) => {
{t("new_password")} - - + - - - , - li:
  • , - }} - /> - - - + } + > + , + li:
  • , + }} + /> +
    • {
    {t("full_name")} - - - - - - {t("full_name_tooltip")} - - - + } + > + {t("full_name_tooltip")} +
    {
    {t("password")} - - - - - - , - li:
  • , - }} - /> - - - + } + > + , + li:
  • , + }} + /> +
    • Date: Tue, 16 Jan 2024 16:44:09 +0700 Subject: [PATCH 3/8] fix: resize info icon on small screen Signed-off-by: bunsy-0900 --- .../ResetPasswordPage/ResetPassword/ResetPassword.tsx | 2 +- .../src/pages/SignUpPage/AccountSetup/AccountSetup.tsx | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx index 72320b19..6f38adba 100644 --- a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx +++ b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx @@ -169,7 +169,7 @@ export const ResetPassword = ({ methods, settings }: ResetPasswordProps) => { {t("new_password")} + } > {
    {t("full_name")} } + icon={ + + } > {t("full_name_tooltip")} @@ -225,7 +227,9 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
    {t("password")} } + icon={ + + } > Date: Wed, 17 Jan 2024 09:51:18 +0700 Subject: [PATCH 4/8] fix: fix truncated icons Signed-off-by: bunsy-0900 --- signup-ui/src/components/label-popover.tsx | 8 ++++---- signup-ui/src/components/ui/icons.tsx | 9 +++++++-- .../ResetPasswordPage/ResetPassword/ResetPassword.tsx | 5 ++++- .../src/pages/SignUpPage/AccountSetup/AccountSetup.tsx | 10 ++++++++-- 4 files changed, 23 insertions(+), 9 deletions(-) diff --git a/signup-ui/src/components/label-popover.tsx b/signup-ui/src/components/label-popover.tsx index 2fa96cb9..fdf0889b 100644 --- a/signup-ui/src/components/label-popover.tsx +++ b/signup-ui/src/components/label-popover.tsx @@ -13,18 +13,18 @@ interface LabelPopoverProps { export const LabelPopover = ({ icon, children }: LabelPopoverProps) => { return ( <> -
    +
    - {icon} + {icon} {children}
    -
    +
    - {icon} + {icon} {children} diff --git a/signup-ui/src/components/ui/icons.tsx b/signup-ui/src/components/ui/icons.tsx index ac7672d8..90de89b2 100644 --- a/signup-ui/src/components/ui/icons.tsx +++ b/signup-ui/src/components/ui/icons.tsx @@ -6,7 +6,7 @@ import { ReactComponent as ChevronDown } from "~assets/svg/chevron-down.svg"; import { ReactComponent as ChevronUp } from "~assets/svg/chevron-up.svg"; import { ReactComponent as EyeOff } from "~assets/svg/eye-off.svg"; import { ReactComponent as Eye } from "~assets/svg/eye.svg"; -import { ReactComponent as Info } from "~assets/svg/info.svg"; +import InfoSvg from "~assets/svg/info.svg"; import { ReactComponent as Loader } from "~assets/svg/loader.svg"; import { ReactComponent as X } from "~assets/svg/x.svg"; @@ -18,7 +18,12 @@ export const Icons = { close: X, eye: Eye, eyeOff: EyeOff, - info: Info, + info: React.forwardRef< + HTMLImageElement, + React.ImgHTMLAttributes + >(({ alt, ...props }, ref) => ( + {alt} + )), loader: Loader, arrow: React.forwardRef>( (props, ref) => ( diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx index 6f38adba..879f116a 100644 --- a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx +++ b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx @@ -169,7 +169,10 @@ export const ResetPassword = ({ methods, settings }: ResetPasswordProps) => { {t("new_password")} + } > { {t("full_name")} + } > {t("full_name_tooltip")} @@ -228,7 +231,10 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => { {t("password")} + } > Date: Wed, 17 Jan 2024 10:17:46 +0700 Subject: [PATCH 5/8] fix: add margin to icon label Signed-off-by: bunsy-0900 --- .../pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx | 2 +- signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx index 879f116a..67eb57d2 100644 --- a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx +++ b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx @@ -170,7 +170,7 @@ export const ResetPassword = ({ methods, settings }: ResetPasswordProps) => { } diff --git a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx index 92d91cf2..78299f56 100644 --- a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx +++ b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx @@ -191,7 +191,7 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => { } @@ -232,7 +232,7 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => { } From 6f0044663c40a51c530fb6711fdfc5a5fe82029b Mon Sep 17 00:00:00 2001 From: bunsy-0900 Date: Wed, 17 Jan 2024 10:34:03 +0700 Subject: [PATCH 6/8] fix: add default width and height to label icon Signed-off-by: bunsy-0900 --- .../pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx | 2 ++ signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx index 67eb57d2..495da819 100644 --- a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx +++ b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx @@ -172,6 +172,8 @@ export const ResetPassword = ({ methods, settings }: ResetPasswordProps) => { } > diff --git a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx index 78299f56..426707d2 100644 --- a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx +++ b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx @@ -193,6 +193,8 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => { } > @@ -234,6 +236,8 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => { } > From 894f63b0fe5e037b8a35d99385f844a5bd0e71e2 Mon Sep 17 00:00:00 2001 From: bunsy-0900 Date: Wed, 17 Jan 2024 13:44:12 +0700 Subject: [PATCH 7/8] fix: replace info icon svg with png Signed-off-by: bunsy-0900 --- signup-ui/src/assets/png/info-38-2.png | Bin 0 -> 1520 bytes signup-ui/src/components/ui/icons.tsx | 4 ++-- .../ResetPassword/ResetPassword.tsx | 2 -- .../SignUpPage/AccountSetup/AccountSetup.tsx | 4 ---- 4 files changed, 2 insertions(+), 8 deletions(-) create mode 100644 signup-ui/src/assets/png/info-38-2.png diff --git a/signup-ui/src/assets/png/info-38-2.png b/signup-ui/src/assets/png/info-38-2.png new file mode 100644 index 0000000000000000000000000000000000000000..0f42d93870e37eac5877e3dfe587a08fcd24bb31 GIT binary patch literal 1520 zcmVYiv|S6vw@NBDJzA@d5Ff8b4XvZX2jZQ;ixE(U=rTEQWv} z2#Def`JnNG(I7&M7?n3j6ip}+L+S^rrqN*OyKMVOV0N zzllU54WUqI&`&pxSK*3^iXfdnN3Ns8)978}LHAE&uSV_wc|&Jsr--IaX-QR8Rb7u& z)`9d0IiEZwEox$cvwUtOukGmQ_$3uaN>Y`Tl}|C!kFidSav~YIq>#1~lqbo<h!g-HAyG%3W+aCwf5^?vt!r&<)dbHdfjfNY2#yK>rRpIa*Lqu(-Lo`HysZ znq$ZuBip&#PyIoyXiKUdP%U32E&J72X=^%Qwd3|DS>D^JDrRYwE@^9P`_zlBRweSA z;=)Beq#k!lOG}IL^78s=%rQWxXwcT+DV3L(FAy+UBNomoChZr(yLxUCCB_&51=;aMhLC(qsySy<>chp{zPz#JtC#xfkZbqYe$vzb%b zS_%%@0cIFW^@-F`{*-3A`X8X zMkf=kzFI0Dg74l=*vB?@b#=Y$b+S(asdq7o?e8S@m5#Z`$wJnArwO3$9P^U0B^4hh z=`T`Da!(27Os=zxZY<{^xCR%>dTCQOq|kkl4&Ef|6snufKKfl?k1jzzHetHU42z*~ zIDB(&Z?87UlqpkE=*b($ATpJH)rY)Q1F4SqljmoAtVO^*2~t0d!2KRceWf|6qbHO0 zbuSSeQitg4ZdBwQ-4VZJ+UUaa-^o)+H{obB`m-UWPYSBrAht3cF~98)(otzS*>1wx zkZ*<5Z{tYm56g2Qq~4<%(0@n`Q0$pZVusLSaP95+j8-4k-DwAR(Y+61?;xa6*z@`b z|G($nH@~H&CG8wbW;M?8S8|r$OZz>FNt#FGet826jSE2uZ^#haiNf4CV!Ca_$Zr6k zo35`!EL=wXlU}}^9){2X@D@%4OZAo@i!HUTG>Ydbhv;B8ZS|=lzuppR)txoYFl#;tuT$dUetNaj!1?*D6EY zS-~9Ik<8qF-lrY~L{UGZ_bG^+!@>=aUduM7lV;MCmXy`hOCI&-0e^zh>r0*%#&n2$ z&O+Jb^+MvAlqFYFQ!`~?VBlf%=2^}684$H^o;q6p!?)v >(({ alt, ...props }, ref) => ( - {alt} + {alt} )), loader: Loader, arrow: React.forwardRef>( diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx index 495da819..67eb57d2 100644 --- a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx +++ b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx @@ -172,8 +172,6 @@ export const ResetPassword = ({ methods, settings }: ResetPasswordProps) => { } > diff --git a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx index 426707d2..78299f56 100644 --- a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx +++ b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx @@ -193,8 +193,6 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => { } > @@ -236,8 +234,6 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => { } > From b7d5e87bef45e370c9e29fcb331cee42a03fd630 Mon Sep 17 00:00:00 2001 From: bunsy-0900 Date: Thu, 18 Jan 2024 14:11:07 +0700 Subject: [PATCH 8/8] fix: rename label popover to icon label popover for more specific name Signed-off-by: bunsy-0900 --- .../{label-popover.tsx => icon-label-popover.tsx} | 4 ++-- .../ResetPasswordPage/ResetPassword/ResetPassword.tsx | 6 +++--- .../src/pages/SignUpPage/AccountSetup/AccountSetup.tsx | 10 +++++----- 3 files changed, 10 insertions(+), 10 deletions(-) rename signup-ui/src/components/{label-popover.tsx => icon-label-popover.tsx} (88%) diff --git a/signup-ui/src/components/label-popover.tsx b/signup-ui/src/components/icon-label-popover.tsx similarity index 88% rename from signup-ui/src/components/label-popover.tsx rename to signup-ui/src/components/icon-label-popover.tsx index fdf0889b..d61cbb51 100644 --- a/signup-ui/src/components/label-popover.tsx +++ b/signup-ui/src/components/icon-label-popover.tsx @@ -5,12 +5,12 @@ import { PopoverTrigger, } from "./ui/popover"; -interface LabelPopoverProps { +interface IconLabelPopoverProps { icon: React.ReactNode; children: React.ReactNode; } -export const LabelPopover = ({ icon, children }: LabelPopoverProps) => { +export const IconLabelPopover = ({ icon, children }: IconLabelPopoverProps) => { return ( <>
    diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx index 67eb57d2..3abb1f60 100644 --- a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx +++ b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx @@ -3,7 +3,7 @@ import { useFormContext, UseFormReturn } from "react-hook-form"; import { Trans, useTranslation } from "react-i18next"; import { useLocation } from "react-router-dom"; -import { LabelPopover } from "~components/label-popover"; +import { IconLabelPopover } from "~components/icon-label-popover"; import { ActionMessage } from "~components/ui/action-message"; import { Button } from "~components/ui/button"; import { @@ -167,7 +167,7 @@ export const ResetPassword = ({ methods, settings }: ResetPasswordProps) => {
    {t("new_password")} - { li:
  • , }} /> - +
    • {
    {t("full_name")} - { } > {t("full_name_tooltip")} - +
    {
    {t("password")} - { li:
  • , }} /> - +