Skip to content

Commit

Permalink
Merge pull request #12 from bunsy-0900/bug/ES-659-v2
Browse files Browse the repository at this point in the history 
ES-659/ES-661: fix truncated icons and popover content
  • Loading branch information
@ase-101
ase-101 authored Jan 19, 2024
2 parents 8e28fcc + b7d5e87 commit 59137ed
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 55 deletions.
Binary file added signup-ui/src/assets/png/info-38-2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions signup-ui/src/components/icon-label-popover.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import {
Popover,
PopoverArrow,
PopoverContent,
PopoverTrigger,
} from "./ui/popover";

interface IconLabelPopoverProps {
icon: React.ReactNode;
children: React.ReactNode;
}

export const IconLabelPopover = ({ icon, children }: IconLabelPopoverProps) => {
return (
<>
<div className="flex items-center sm:hidden">
<Popover>
<PopoverTrigger>{icon}</PopoverTrigger>
<PopoverContent side="right" className="text-xs">
{children}
<PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
</PopoverContent>
</Popover>
</div>
<div className="hidden items-center sm:flex">
<Popover>
<PopoverTrigger>{icon}</PopoverTrigger>
<PopoverContent side="bottom" className="text-xs">
{children}
<PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
</PopoverContent>
</Popover>
</div>
</>
);
};
9 changes: 7 additions & 2 deletions signup-ui/src/components/ui/icons.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from "react";

import InfoPng from "~assets/png/info-38-2.png";
import { ReactComponent as ArrowLeft } from "~assets/svg/arrow-left.svg";
import { ReactComponent as Check } from "~assets/svg/check.svg";
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 { ReactComponent as Loader } from "~assets/svg/loader.svg";
import { ReactComponent as X } from "~assets/svg/x.svg";

Expand All @@ -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={InfoPng} alt={alt} {...props} />
)),
loader: Loader,
arrow: React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGSVGElement>>(
(props, ref) => (
Expand Down
6 changes: 4 additions & 2 deletions signup-ui/src/components/ui/popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<
Expand All @@ -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}
Expand All @@ -37,4 +39,4 @@ const PopoverArrow = React.forwardRef<
/>
));

export { Popover, PopoverTrigger, PopoverArrow, PopoverContent };
export { Popover, PopoverAnchor, PopoverTrigger, PopoverArrow, PopoverContent };
36 changes: 16 additions & 20 deletions signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useFormContext, UseFormReturn } from "react-hook-form";
import { Trans, useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";

import { IconLabelPopover } from "~components/icon-label-popover";
import { ActionMessage } from "~components/ui/action-message";
import { Button } from "~components/ui/button";
import {
Expand All @@ -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,
Expand Down Expand Up @@ -172,21 +167,22 @@ export const ResetPassword = ({ methods, settings }: ResetPasswordProps) => {
<div className="space-y-2">
<div className="flex items-center gap-1">
<FormLabel>{t("new_password")}</FormLabel>
<Popover>
<PopoverTrigger asChild>
<Icons.info className="h-4 w-4 cursor-pointer" />
</PopoverTrigger>
<PopoverContent side="right" className="w-full">
<Trans
i18nKey="password_rules"
components={{
ul: <ul className="list-inside list-disc" />,
li: <li />,
}}
<IconLabelPopover
icon={
<Icons.info
className="m-1 h-4 w-4 cursor-pointer sm:h-3 sm:w-3"
alt="info icon"
/>
<PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
</PopoverContent>
</Popover>
}
>
<Trans
i18nKey="password_rules"
components={{
ul: <ul className="list-inside list-disc" />,
li: <li />,
}}
/>
</IconLabelPopover>
</div>
<FormControl>
<Input
Expand Down
6 changes: 0 additions & 6 deletions signup-ui/src/pages/ResetPasswordPage/UserInfo/UserInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,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,
Expand Down
51 changes: 26 additions & 25 deletions signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { KeyboardEvent, useCallback, useMemo, useState } from "react";
import { PopoverTrigger } from "@radix-ui/react-popover";
import { UseFormReturn } from "react-hook-form";
import { Trans, useTranslation } from "react-i18next";

import { IconLabelPopover } from "~components/icon-label-popover";
import { Button } from "~components/ui/button";
import { Checkbox } from "~components/ui/checkbox";
import {
Expand All @@ -14,7 +14,6 @@ import {
} from "~components/ui/form";
import { Icons } from "~components/ui/icons";
import { Input } from "~components/ui/input";
import { Popover, PopoverArrow, PopoverContent } from "~components/ui/popover";
import {
Step,
StepContent,
Expand Down Expand Up @@ -189,15 +188,16 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
<div className="space-y-2">
<div className="flex items-center gap-1">
<FormLabel>{t("full_name")}</FormLabel>
<Popover>
<PopoverTrigger asChild>
<Icons.info className="h-4 w-4 cursor-pointer" />
</PopoverTrigger>
<PopoverContent side="right">
{t("full_name_tooltip")}
<PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
</PopoverContent>
</Popover>
<IconLabelPopover
icon={
<Icons.info
className="m-1 h-4 w-4 cursor-pointer sm:h-3 sm:w-3"
alt="info icon"
/>
}
>
<span>{t("full_name_tooltip")}</span>
</IconLabelPopover>
</div>
<FormControl>
<Input
Expand Down Expand Up @@ -229,21 +229,22 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
<div className="space-y-2">
<div className="flex items-center gap-1">
<FormLabel>{t("password")}</FormLabel>
<Popover>
<PopoverTrigger asChild>
<Icons.info className="h-4 w-4 cursor-pointer" />
</PopoverTrigger>
<PopoverContent side="right" className="w-full">
<Trans
i18nKey="password_rules"
components={{
ul: <ul className="list-inside list-disc" />,
li: <li />,
}}
<IconLabelPopover
icon={
<Icons.info
className="m-1 h-4 w-4 cursor-pointer sm:h-3 sm:w-3"
alt="info icon"
/>
<PopoverArrow className="fill-[#FFFFFF] stroke-[#BCBCBC]" />
</PopoverContent>
</Popover>
}
>
<Trans
i18nKey="password_rules"
components={{
ul: <ul className="list-inside list-disc" />,
li: <li />,
}}
/>
</IconLabelPopover>
</div>
<FormControl>
<Input
Expand Down

0 comments on commit 59137ed

Please sign in to comment.