update README and add components object to theme

Author: jeff-bruemmer

README.md

@@ -1,20 +1,25 @@
-# Metabase Embedding SDK for React sample
+# Metabase embedding SDK for React sample application
 
 You'll need a Pro or Enterprise version of Metabase 50 up and running. If you're not sure where to start, sign up for [Pro Cloud](https://www.metabase.com/pricing).
 
-> [!IMPORTANT]  
-> The SDK is currently only compatible with Metabase 50
+> [!IMPORTANT]
+> The SDK is currently only compatible with Metabase v1.50 or higher
+
+## Create `.env` file
 
-## Create .env file
 ```sh
 cp .env.example .env
 ```
 
 ## Adjust URLs
+
 In `.env`, make sure `REACT_APP_METABASE_INSTANCE_URL` and `METABASE_INSTANCE_URL` point to your Metabase instance URL, e.g. `http://localhost:3000`.
 
 ## Set up your Metabase
 
+- [Run Metabase Pro on a Cloud plan (with a free trial)](https://www.metabase.com/pricing)
+- Run Metabase Enterprise Edition locally. This sample app is compatible with [Metabase version v1.50 or higher](https://www.metabase.com/docs/latest/releases). When running locally, you'll need to [activate your license](https://www.metabase.com/docs/latest/paid-features/activating-the-enterprise-edition) to enable SSO with JWT.
+
 ### Enable SSO with JWT
 
 From any Metabase page, click on the **gear** icon in the upper right and select **Admin Settings** > **Settings** > **Authentication**.
@@ -23,56 +28,57 @@ On the card that says **JWT**, click the **Setup** button.
 
 ### JWT Identity provider URI
 
-In **JWT IDENTITY PROVIDER URI** field, paste  `localhost:9090/sso/metabase`.
+In **JWT IDENTITY PROVIDER URI** field, paste  `localhost:9090/sso/metabase` (or substitute your Cloud URL for localhost).
 
 ### String used by the JWT signing key
 
-Click the **Generate key** button. Copy the key and paste it in your `.env` file into the env var `METABASE_JWT_SHARED_SECRET`. 
+Click the **Generate key** button. Copy the key and paste it in your `.env` file into the env var `METABASE_JWT_SHARED_SECRET`.
 
 ## Running the server
 
-### Move into the directory
+Change into the `server` directory:
 
 ```sh
 cd server
 ```
 
-### Install packages
+Install packages:
 
 ```sh
 npm install
 ```
 
-### Starting the server
+Start the server:
 
 ```sh
 npm start
 ```
 
 ## Start the client
 
-### Move into the directory
+In a different terminal, change into the `client` directory:
 
-In a different terminal
 ```sh
 cd client
 ```
-### Install dependencies
+
+Install dependencies:
 
 ```sh
 npm install
 ```
 
-### Start the app
+Start the client app:
 
 ```sh
 npm start
 ```
-Your browser should automatically open the app. By default, it runs on [http://localhost:3100](localhost:3100).
+
+Your browser should automatically open the app. By default, the app runs on [http://localhost:3100](localhost:3100).
 
 ## Set up groups and data sandboxing
 
-Check out our [quick start guide](https://www.metabase.com/learn/customer-facing-analytics/interactive-embedding-quick-start) to set up interactive embedding with JWT and data sandboxing.
+To set up interactive embedding with JWT and data sandboxing, check out our [quick start guide](https://www.metabase.com/learn/customer-facing-analytics/interactive-embedding-quick-start).
 
 ## Reporting issues
 

client/src/App.js

@@ -1,10 +1,13 @@
-import { MetabaseProvider, InteractiveQuestion } from "@metabase/embedding-sdk-react";
+import {
+  MetabaseProvider,
+  InteractiveQuestion,
+} from "@metabase/embedding-sdk-react";
 
 // Configuration
 const config = {
   metabaseInstanceUrl: process.env.REACT_APP_METABASE_INSTANCE_URL,
-  jwtProviderUri: process.env.REACT_APP_JWT_PROVIDER_URI
-}
+  jwtProviderUri: process.env.REACT_APP_JWT_PROVIDER_URI,
+};
 
 const questionId = 14;
 
@@ -36,18 +39,25 @@ const theme = {
     shadow: "rgba(0,0,0,0.08)",
   },
 
-  table: {
-    cell: {
-      textColor: "#4C5773",
+  components: {
+    question: {
       backgroundColor: "#FFFFFF",
+      textColor: "#4C5773",
     },
 
-    idColumn: {
-      textColor: "#9B5966",
-      backgroundColor: "#F5E9EB",
+    table: {
+      cell: {
+        textColor: "#4C5773",
+        backgroundColor: "#FFFFFF",
+      },
+
+      idColumn: {
+        textColor: "#9B5966",
+        backgroundColor: "#F5E9EB",
+      },
     },
   },
-}
+};
 
 function App() {
   return (