Skip to content

Annex to #6138#6226

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

Merged
rickhanlonii merged 9 commits into from
Aug 15, 2023
Merged

Annex to #6138 #6226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
91bbbda
fix: wronge styles when applying RTL
AhmedBaset Aug 14, 2023
1d58c08
fix wrong styles
AhmedBaset Aug 14, 2023
1dc8fe0
fix wrong styles
AhmedBaset Aug 14, 2023
4c408c0
style canary icon with RTL-friendly styles
AhmedBaset Aug 14, 2023
69ce466
chore: utilize mx-* instead of me-* & ms-*
AhmedBaset Aug 14, 2023
e22817c
utilize relative styles
AhmedBaset Aug 14, 2023
71db2eb
chore: use mx-* instead of me-* & ms-*
AhmedBaset Aug 14, 2023
1ac3feb
style canary icon with RTL-frindly styles
AhmedBaset Aug 14, 2023
c35f7b3
Update OpenInTypeScriptPlayground.tsx
AhmedBaset Aug 14, 2023
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/Layout/HomeContent.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -849,7 +849,7 @@ function ExampleLayout({
{overlayStyles.map((styles, i) => (
<div
key={i}
className="inset-x-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"

@AhmedBasetAhmedBasetAug 14, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was top-0 left-0

className="top-0 start-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
style={styles}
/>
))}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/Sidebar/SidebarButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,7 +31,7 @@ export function SidebarButton({
})}>
<button
className={cn(
'p-2 pe-2 ps-5 w-full rounded-s-lg text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',

@AhmedBasetAhmedBasetAug 14, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was rounded-r-lg

'p-2 pe-2 ps-5 w-full rounded-e-lg text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
{
'p-2 text-base': level > 1,
'text-link bg-highlight dark:bg-highlight-dark text-base font-bold hover:bg-highlight dark:hover:bg-highlight-dark hover:text-link dark:hover:text-link-dark':
Expand Down
4 changes: 2 additions & 2 deletions src/components/Layout/Sidebar/SidebarLink.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ export function SidebarLink({
passHref
aria-current={selected ? 'page' : undefined}
className={cn(
'p-2 pe-2 w-full rounded-none lg:rounded-s-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
'p-2 pe-2 w-full rounded-none lg:rounded-e-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',

@AhmedBasetAhmedBasetAug 14, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was lg:rounded-r-2xl

{
'text-sm ps-6': level > 0,
'ps-5': level < 2,
Expand All@@ -78,7 +78,7 @@ export function SidebarLink({
{canary && (
<IconCanary
title="This feature is available in the latest Canary"
className="ml-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"

@AhmedBasetAhmedBasetAug 14, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New component

/>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,7 +11,7 @@ export const OpenInCodeSandboxButton = () => {
className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ms-2 md:ms-1"
title="Open in CodeSandbox">
<IconNewPage
className="inline ms-1 me-1 relative top-[1px]"
className="inline mx-1 relative top-[1px]"
width="1em"
height="1em"
/>
Expand Down
2 changes: 1 addition & 1 deletion src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ export const OpenInTypeScriptPlaygroundButton = (props: {content: string}) => {
target="_blank"
rel="noreferrer">
<IconNewPage
className="inline ml-1 mr-1 relative top-[1px]"
className="inline mx-1 relative top-[1px]"

@AhmedBasetAhmedBasetAug 14, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New component

width="1em"
height="1em"
/>
Expand Down
2 changes: 1 addition & 1 deletion src/components/MDX/Sandpack/ResetButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,7 @@ export function ResetButton({onReset}: ResetButtonProps) {
onClick={onReset}
title="Reset Sandbox"
type="button">
<IconRestart className="inline ms-1 me-1 relative" /> Reset
<IconRestart className="inline mx-1 relative" /> Reset
</button>
);
}
4 changes: 2 additions & 2 deletions src/components/PageHeading.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -35,13 +35,13 @@ function PageHeading({
{canary && (
<IconCanary
title="This feature is available in the latest Canary"
className="ml-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"

@AhmedBasetAhmedBasetAug 14, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New component

/>
)}
{status ? <em>—{status}</em> : ''}
</H1>
{description && (
<p className="mt-4 mb-6 dark:text-primary-dark text-xl text-gray-90 leading-large">
<p className="mt-4 mb-6 dark:text-primary-dark text-xl text-primary leading-large">

@AhmedBasetAhmedBasetAug 14, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before #6138, there were two conflict classes text-primary text-gray-90.

{description}
</p>
)}
Expand Down