From 6b61cd490d87c620533a3a79210c7c0ca96fdf56 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
Date: Wed, 16 Aug 2023 01:24:46 +0300
Subject: [PATCH 1/2] Annex to #6138 (#6226)

* fix: wronge styles when applying RTL

it was `top-0 left-0 ...` by wrong I made it `inset-x-0`.

* fix wrong styles

* fix wrong styles

* style canary icon with RTL-friendly styles

* chore: utilize mx-* instead of me-* & ms-*

* utilize relative styles

* chore: use mx-* instead of me-* & ms-*

* style canary icon with RTL-frindly styles

* Update OpenInTypeScriptPlayground.tsx
---
 src/components/Layout/HomeContent.js                       | 2 +-
 src/components/Layout/Sidebar/SidebarButton.tsx            | 2 +-
 src/components/Layout/Sidebar/SidebarLink.tsx              | 4 ++--
 src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx    | 2 +-
 src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx | 2 +-
 src/components/MDX/Sandpack/ResetButton.tsx                | 2 +-
 src/components/PageHeading.tsx                             | 4 ++--
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index d395ff38..924b66f4 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -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"
+                  className="top-0 start-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
                   style={styles}
                 />
               ))}
diff --git a/src/components/Layout/Sidebar/SidebarButton.tsx b/src/components/Layout/Sidebar/SidebarButton.tsx
index 7b9f027a..dc1f29a8 100644
--- a/src/components/Layout/Sidebar/SidebarButton.tsx
+++ b/src/components/Layout/Sidebar/SidebarButton.tsx
@@ -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',
+          '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':
diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx
index 1b961e9c..180ded86 100644
--- a/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -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',
         {
           'text-sm ps-6': level > 0,
           'ps-5': level < 2,
@@ -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]"
           />
         )}
       </div>
diff --git a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
index f943ee6f..78286aea 100644
--- a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
+++ b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
@@ -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"
       />
diff --git a/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx b/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
index f4b7ba77..7284912e 100644
--- a/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
+++ b/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
@@ -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]"
         width="1em"
         height="1em"
       />
diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/src/components/MDX/Sandpack/ResetButton.tsx
index 243ce234..0d1e22c8 100644
--- a/src/components/MDX/Sandpack/ResetButton.tsx
+++ b/src/components/MDX/Sandpack/ResetButton.tsx
@@ -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>
   );
 }
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
index b6437b46..076a38be 100644
--- a/src/components/PageHeading.tsx
+++ b/src/components/PageHeading.tsx
@@ -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]"
             />
           )}
           {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">
             {description}
           </p>
         )}

From 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3 Mon Sep 17 00:00:00 2001
From: Thomas Charuel <ThomasCharuel@users.noreply.github.com>
Date: Thu, 17 Aug 2023 04:17:59 +0200
Subject: [PATCH 2/2] Fix broken link for Typescript Discord invite (#6224)

---
 src/content/learn/typescript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index d437096e..5695b755 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -460,4 +460,4 @@ We recommend the following resources:
 
  - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document.
 
- - [TypeScript Community Discord](discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.
\ No newline at end of file
+ - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.
\ No newline at end of file