Skip to content

fix(rtl): physical → logical Tailwind props (9 files) #26

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

Open
abdout wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(rtl): physical → logical Tailwind props (9 files) #26

Show file tree
Hide file tree
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
2 changes: 1 addition & 1 deletion src/components/marketing/pricing/forms/billing-form-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export function BillingFormButton({
>
{isPending ? (
<>
<Icons.spinner className="mr-2 size-4 animate-spin" /> Loading...
<Icons.spinner className="me-2 size-4 animate-spin" /> Loading...
</>
) : (
<>
Expand Down
4 changes: 2 additions & 2 deletions src/components/marketing/pricing/mobile-compare-plans.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,8 @@ export function MobileComparePlans() {
{comparePlans.map((row: PlansRow, index: number) => (
<AccordionItem key={index} value={`item-${index}`} className="border-b border-border/10">
<AccordionTrigger className="py-3 text-sm hover:no-underline">
<div className="flex items-center justify-between w-full pr-2">
<span className="text-left">{getTranslatedFeature(row.feature)}</span>
<div className="flex items-center justify-between w-full pe-2">
<span className="text-start">{getTranslatedFeature(row.feature)}</span>
<div className="flex items-center gap-2">
{renderCell(row[planName])}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/marketing/pricing/pricing-faqs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function PricingFAQs() {
<section className="scroll-py-16 py-16 md:scroll-py-32 md:py-32">
<div className="flex w-full max-w-6xl">
<div className="grid gap-y-12 gap-x-32 px-2 lg:[grid-template-columns:1fr_auto]">
<div className="text-center lg:text-left">
<div className="text-center lg:text-start">
<h2 className="mb-4">
{t.marketing.pricing.faqs.title.split(' ').map((word, index) => (
<span key={index}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/marketing/pricing/shared/toc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ interface TreeProps {

function Tree({ tree, level = 1, activeItem }: TreeProps) {
return tree?.items?.length && level < 3 ? (
<ul className={cn("m-0 list-none", { "pl-4": level !== 1 })}>
<ul className={cn("m-0 list-none", { "ps-4": level !== 1 })}>
{tree.items.map((item, index) => {
return (
<li key={index} className={cn("mt-0 pt-1")}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/marketing/ready-to-build.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function ReadyToBuildSection() {

</div>
<div>
<OptimizedImage src="/marketing/site/build.png" alt="security" width={500} height={500} className="pr-5" />
<OptimizedImage src="/marketing/site/build.png" alt="security" width={500} height={500} className="pe-5" />
</div>
</section>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/marketing/service/layout-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ function MainLayoutCard({ title, description, rightSideImageUrl }: IProps) {
return (
<section className="flex justify-between gap-large md:gap-4 items-center mt-[5rem] flex-col md:flex-row">
<div>
<div className="leading-[4rem] md:leading-large text-white text-medium md:text-large font-[600] text-center md:text-left">
<div className="leading-[4rem] md:leading-large text-white text-medium md:text-large font-[600] text-center md:text-start">
{title()}
</div>
<p className="text-normal text-grey mt-4 mb-[4.5rem] text-center md:text-left">
<p className="text-normal text-grey mt-4 mb-[4.5rem] text-center md:text-start">
{description}
</p>
<div className="flex justify-center md:justify-start">
Expand Down
6 changes: 3 additions & 3 deletions src/components/template/wizard-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const WizardFooter = ({
onClick={onBack}
disabled={currentStep === 1}
>
{isRTL ? <ArrowRight className="mr-2 h-4 w-4" /> : <ArrowLeft className="mr-2 h-4 w-4" />}
{isRTL ? <ArrowRight className="me-2 h-4 w-4" /> : <ArrowLeft className="me-2 h-4 w-4" />}
{backText}
</Button>

Expand All @@ -53,14 +53,14 @@ export const WizardFooter = ({
disabled={!isStepValid}
>
{nextText}
{isRTL ? <ArrowLeft className="ml-2 h-4 w-4" /> : <ArrowRight className="ml-2 h-4 w-4" />}
{isRTL ? <ArrowLeft className="ms-2 h-4 w-4" /> : <ArrowRight className="ms-2 h-4 w-4" />}
</Button>
) : (
<Button
size="sm"
onClick={onFinish}
>
<Check className="mr-2 h-4 w-4" />
<Check className="me-2 h-4 w-4" />
{finishText}
</Button>
)}
Expand Down
10 changes: 5 additions & 5 deletions src/components/wizard/cutomizer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const CustomizerUI = () => {
className="flex flex-col space-y-4 md:space-y-6 -mt-14"
>
<div className="flex items-start pt-4 md:pt-0">
<div className="space-y-1 pr-2">
<div className="space-y-1 pe-2">
<div className="md:hidden font-semibold leading-none tracking-tight">
Theme Customizer
</div>
Expand All @@ -37,7 +37,7 @@ const CustomizerUI = () => {
<Button
variant="ghost"
size="icon"
className="ml-auto rounded-[0.5rem] md:hidden"
className="ms-auto rounded-[0.5rem] md:hidden"
onClick={() => {
setConfig({
...config,
Expand Down Expand Up @@ -88,7 +88,7 @@ const CustomizerUI = () => {
>
<span
className={cn(
"mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full"
"me-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full"
)}
style={{
backgroundColor: `hsl(${
Expand Down Expand Up @@ -145,7 +145,7 @@ const CustomizerUI = () => {
onClick={() => setMode("light")}
className={cn(mode === "light" && "border-2 border-primary")}
>
<Sun className="mr-1 -translate-x-1" />
<Sun className="me-1 -translate-x-1" />
Light
</Button>
<Button
Expand All @@ -154,7 +154,7 @@ const CustomizerUI = () => {
onClick={() => setMode("dark")}
className={cn(mode === "dark" && "border-2 border-primary")}
>
<Moon className="mr-1 -translate-x-1" />
<Moon className="me-1 -translate-x-1" />
Dark
</Button>
</>
Expand Down
4 changes: 2 additions & 2 deletions src/components/wizard/theme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,14 +107,14 @@ const ThemeSelector: React.FC<ThemeSelectorProps> = () => {
variant="outline"
className="rounded-[var(--theme-radius)]"
>
<Icons.gitHub className="mr-2 h-4 w-4" />
<Icons.gitHub className="me-2 h-4 w-4" />
GitHub
</Button>
<Button
variant="outline"
className="rounded-[var(--theme-radius)]"
>
<svg role="img" viewBox="0 0 24 24" className="mr-2 h-4 w-4">
<svg role="img" viewBox="0 0 24 24" className="me-2 h-4 w-4">
<path
fill="currentColor"
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
Expand Down