From 0b185065e35726c7b70186284c198d89fe9db5fc Mon Sep 17 00:00:00 2001
From: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>
Date: Wed, 29 Jul 2026 13:22:26 +0100
Subject: [PATCH 1/2] fix(sdks): correct SDK card styling in dark mode

Give SDK cards a dark surface (dark:bg-neutral-1200) so the auto-flipped
light-on-dark card text is legible, and drop the redundant
text-charcoal-grey on the intro paragraph so the ui-text-p1 dark override
governs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/SDKsPage/Card/index.tsx        | 2 +-
 src/components/SDKsPage/MainSection/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SDKsPage/Card/index.tsx b/src/components/SDKsPage/Card/index.tsx
index 9001a53d98..2a87e9e254 100644
--- a/src/components/SDKsPage/Card/index.tsx
+++ b/src/components/SDKsPage/Card/index.tsx
@@ -19,7 +19,7 @@ export type CardProps = {
 
 const Card = ({ githubRepoURL, setupLink, title, image, text }: CardProps) => {
   return (
-    <section className="p-6 bg-extra-light-grey rounded-lg flex-1">
+    <section className="p-6 bg-extra-light-grey dark:bg-neutral-1200 rounded-lg flex-1">
       <div className="flex items-center justify-between">
         <h3 className="ui-text-h3">{title}</h3>
         <img key={image.src} src={image.src} height="40px" width={`${image.isWide ? '68px' : '40px'}`} />
diff --git a/src/components/SDKsPage/MainSection/index.tsx b/src/components/SDKsPage/MainSection/index.tsx
index ed8b835dd3..962ae8d654 100644
--- a/src/components/SDKsPage/MainSection/index.tsx
+++ b/src/components/SDKsPage/MainSection/index.tsx
@@ -82,7 +82,7 @@ const MainSection = ({ tab }: { tab: Tab }) => {
         <hr />
       </div>
       <div className={`${container}`}>
-        <p className="ui-text-p1 text-charcoal-grey py-[4.5rem]">{data.tabs[activeTab].text}</p>
+        <p className="ui-text-p1 py-[4.5rem]">{data.tabs[activeTab].text}</p>
       </div>
       <CardGrid currentProduct={data.tabs[activeTab].cards} />
     </div>

From c6f81dfaff30012b221a318f1aa87e1eeb9d99ba Mon Sep 17 00:00:00 2001
From: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>
Date: Wed, 29 Jul 2026 13:22:32 +0100
Subject: [PATCH 2/2] fix(sdks): remove duplicate React Native card in Pub/Sub

The Pub/Sub SDK list contained two React Native entries. Remove the
duplicate and use the badged react.svg logo so React Native matches the
React card and the tiled logo style of the other SDKs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/SDKsPage/data.ts | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/SDKsPage/data.ts b/src/components/SDKsPage/data.ts
index 2f365d831d..21a1ff9665 100644
--- a/src/components/SDKsPage/data.ts
+++ b/src/components/SDKsPage/data.ts
@@ -2,7 +2,6 @@ import js from './images/js.svg';
 import java from './images/java.svg';
 import python from './images/python.svg';
 import react from './images/react.svg';
-import reactnative from './images/reactnative.svg';
 import csharp from './images/csharp.svg';
 import go from './images/go.svg';
 import nodejs from './images/nodejs.svg';
@@ -57,7 +56,7 @@ export const data = {
         {
           title: 'React Native',
           text: 'Ably React Native SDK.',
-          image: { src: reactnative, isWide: false },
+          image: { src: react, isWide: false },
           setupLink: 'getting-started/react-native',
         },
         {
@@ -144,12 +143,6 @@ export const data = {
           image: { src: nativescript, isWide: false },
           setupLink: 'https://github.com/ably/ably-js-nativescript#how-to-use-this-library',
         },
-        {
-          title: 'React Native',
-          text: 'Ably SDK for React Native.',
-          image: { src: react, isWide: false },
-          setupLink: 'getting-started/react-native',
-        },
         {
           title: 'Cordova',
           text: 'Ably SDK for Cordova.',