Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: RTL styling for ValuesMarquee #14020

Merged
merged 1 commit into from
Oct 2, 2024
Merged

fix: RTL styling for ValuesMarquee #14020

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 23 additions & 4 deletions src/components/Homepage/ValuesMarquee.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,15 @@ import {
} from "../ui/section"

import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion"
import { useRtlFlip } from "@/hooks/useRtlFlip"

type ItemProps = React.HTMLAttributes<HTMLButtonElement> & {
pairing: Pairing
separatorClass: string
container?: HTMLElement | null
label: string
eventCategory: string
direction: HTMLDivElement["dir"]
}

const Item = ({
Expand All @@ -36,6 +38,7 @@ const Item = ({
container,
label,
eventCategory,
direction,
}: ItemProps) => (
<>
<Tooltip
Expand Down Expand Up @@ -86,6 +89,7 @@ const Item = ({
"flex flex-nowrap items-center text-nowrap rounded-full px-4 py-1 font-bold uppercase",
className
)}
dir={direction}
>
{children}
</div>
Expand All @@ -98,6 +102,7 @@ const Item = ({
/>
</>
)
Item.displayName = "MarqueeItem"

type RowProps = React.HTMLAttributes<HTMLDivElement> & {
toRight?: boolean
Expand All @@ -106,12 +111,15 @@ type RowProps = React.HTMLAttributes<HTMLDivElement> & {
const Row = forwardRef<HTMLDivElement, RowProps>(
({ className, children, toRight }, ref) => {
const { prefersReducedMotion } = usePrefersReducedMotion()

const fadeEdges = {
mask: `linear-gradient(to right, transparent 1rem, white 15%, white 85%, transparent calc(100% - 1rem))`,
}

return (
<div ref={ref} className={cn("group", className)}>
// Note: dir="ltr" forced on parent to prevent "translateX" animation bugs
// Locale "direction" passed to marquee Item for correction
<div ref={ref} className={cn("group", className)} dir="ltr">
<div
className="flex max-w-full overflow-hidden motion-reduce:overflow-auto"
style={prefersReducedMotion ? {} : fadeEdges}
Expand All @@ -137,7 +145,7 @@ const Row = forwardRef<HTMLDivElement, RowProps>(
)
}
)
Row.displayName = "Row"
Row.displayName = "MarqueeRow"

const ValuesMarquee = () => {
const { t, pairings, eventCategory } = useValuesMarquee()
Expand All @@ -160,6 +168,8 @@ const ValuesMarquee = () => {
}
}, [])

const { direction, isRtl, twFlipForRtl } = useRtlFlip()

return (
<Section id="values" className="!sm:my-64 !my-48 scroll-m-48">
<SectionContent className="flex flex-col items-center text-center">
Expand All @@ -185,6 +195,7 @@ const ValuesMarquee = () => {
separatorClass="bg-accent-a"
className="group/item bg-blue-100 text-blue-600 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700"
eventCategory={eventCategory}
direction={direction}
>
<FaCheck className="me-1 text-success group-hover/item:text-white" />
{pairing.ethereum.label}
Expand All @@ -206,13 +217,19 @@ const ValuesMarquee = () => {
className="bg-gray-200/20 text-body-medium hover:bg-gray-600 hover:text-white dark:bg-gray-950 dark:text-body"
separatorClass="bg-gray-200 dark:bg-gray-950"
eventCategory={eventCategory}
direction={direction}
>
{pairing.legacy.label}
</Item>
))}
</Row>

<div className="absolute start-[50%] top-[50%] flex -translate-x-[50%] -translate-y-[50%] items-center overflow-hidden rounded-lg text-sm font-bold">
<div
className={cn(
"absolute start-[50%] top-[50%] flex -translate-y-[50%] items-center overflow-hidden rounded-lg text-sm font-bold",
isRtl ? "translate-x-[50%]" : "-translate-x-[50%]"
)}
>
<p className="bg-gray-50 px-4 py-1 text-body-medium dark:bg-gray-800 dark:text-gray-200">
{t("page-index-values-legacy")}
</p>
Expand All @@ -222,7 +239,8 @@ const ValuesMarquee = () => {
"border-t-[15px] border-t-blue-50 dark:border-t-blue-600",
"border-r-8 border-r-blue-50 dark:border-r-blue-600",
"border-b-[15px] border-b-gray-50 dark:border-b-gray-800",
"border-l-8 border-l-gray-50 dark:border-l-gray-800"
"border-l-8 border-l-gray-50 dark:border-l-gray-800",
twFlipForRtl
)}
/>

Expand All @@ -234,5 +252,6 @@ const ValuesMarquee = () => {
</Section>
)
}
ValuesMarquee.displayName = "ValuesMarquee"

export default ValuesMarquee
Loading