fix: fix truncated icons

Signed-off-by: bunsy-0900 <[email protected]>
mosip · Jan 17, 2024 · 0fc9947 · 0fc9947
1 parent 9e8ea0c
commit 0fc9947
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git 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 (
     <>
-      <div className="block sm:hidden">
+      <div className="flex items-center sm:hidden">
         <Popover>
-          <PopoverTrigger asChild>{icon}</PopoverTrigger>
+          <PopoverTrigger>{icon}</PopoverTrigger>
           <PopoverContent side="right" className="text-xs">
             {children}
             <PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
           </PopoverContent>
         </Popover>
       </div>
-      <div className="hidden sm:block">
+      <div className="hidden items-center sm:flex">
         <Popover>
-          <PopoverTrigger asChild>{icon}</PopoverTrigger>
+          <PopoverTrigger>{icon}</PopoverTrigger>
           <PopoverContent side="bottom" className="text-xs">
             {children}
             <PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />

diff --git 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<HTMLImageElement>
+  >(({ alt, ...props }, ref) => (
+    <img ref={ref} src={InfoSvg} alt={alt} {...props} />
+  )),
   loader: Loader,
   arrow: React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGSVGElement>>(
     (props, ref) => (

diff --git 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) => {
                         <FormLabel>{t("new_password")}</FormLabel>
                         <LabelPopover
                           icon={
-                            <Icons.info className="h-4 h-4 cursor-pointer sm:h-3 sm:w-3" />
+                            <Icons.info
+                              className="h-4 w-4 cursor-pointer sm:h-3 sm:w-3"
+                              alt="info icon"
+                            />
                           }
                         >
                           <Trans

diff --git a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx
@@ -190,7 +190,10 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
                       <FormLabel>{t("full_name")}</FormLabel>
                       <LabelPopover
                         icon={
-                          <Icons.info className="h-4 h-4 cursor-pointer sm:h-3 sm:w-3" />
+                          <Icons.info
+                            className="h-4 w-4 cursor-pointer sm:h-3 sm:w-3"
+                            alt="info icon"
+                          />
                         }
                       >
                         <span>{t("full_name_tooltip")}</span>
@@ -228,7 +231,10 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
                       <FormLabel>{t("password")}</FormLabel>
                       <LabelPopover
                         icon={
-                          <Icons.info className="h-4 h-4 cursor-pointer sm:h-3 sm:w-3" />
+                          <Icons.info
+                            className="h-4 w-4 cursor-pointer sm:h-3 sm:w-3"
+                            alt="info icon"
+                          />
                         }
                       >
                         <Trans