move ThemeProvider

examples/web-chat/src/App.tsx

@@ -5,7 +5,6 @@ import "./App.css";
 import handleCommand from "./command";
 import Room from "./Room";
 import { WakuContext } from "./WakuContext";
-import { ThemeProvider } from "@livechat/ui-kit";
 import { generate } from "server-name-generator";
 import { Message } from "./Message";
 import { LightNode } from "@waku/interfaces";
@@ -14,35 +13,6 @@ import { PageDirection } from "@waku/interfaces";
 
 import { useWaku, useFilterMessages, useStoreMessages } from "@waku/react";
 
-const themes = {
-  AuthorName: {
-    css: {
-      fontSize: "1.1em",
-    },
-  },
-  Message: {
-    css: {
-      margin: "0em",
-      padding: "0em",
-      fontSize: "0.83em",
-    },
-  },
-  MessageText: {
-    css: {
-      margin: "0em",
-      padding: "0.1em",
-      paddingLeft: "1em",
-      fontSize: "1.1em",
-    },
-  },
-  MessageGroup: {
-    css: {
-      margin: "0em",
-      padding: "0.2em",
-    },
-  },
-};
-
 export const ChatContentTopic = "/toy-chat/2/huilong/proto";
 const ChatDecoder = new Decoder(ChatContentTopic);
 
@@ -96,22 +66,20 @@ export default function App() {
       style={{ height: "100vh", width: "100vw", overflow: "hidden" }}
     >
       <WakuContext.Provider value={{ waku: node }}>
-        <ThemeProvider theme={themes}>
-          <Room
-            nick={nick}
-            messages={[]}
-            commandHandler={(input: string) => {
-              handleCommand(input, node, setNick).then(
-                ({ command, response }) => {
-                  const commandMessages = response.map((msg) => {
-                    return Message.fromUtf8String(command, msg);
-                  });
-                  console.log("trying to send", commandMessages);
-                }
-              );
-            }}
-          />
-        </ThemeProvider>
+        <Room
+          nick={nick}
+          messages={[]}
+          commandHandler={(input: string) => {
+            handleCommand(input, node, setNick).then(
+              ({ command, response }) => {
+                const commandMessages = response.map((msg) => {
+                  return Message.fromUtf8String(command, msg);
+                });
+                console.log("trying to send", commandMessages);
+              }
+            );
+          }}
+        />
       </WakuContext.Provider>
     </div>
   );

examples/web-chat/src/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { ThemeProvider } from "@livechat/ui-kit";
 import { LightNodeProvider } from "@waku/react";
 import { wakuDnsDiscovery } from "@waku/dns-discovery";
 import { Protocols } from "@waku/interfaces";
@@ -26,11 +27,42 @@ const options = {
 
 const protocols = [Protocols.Filter, Protocols.Store, Protocols.LightPush];
 
+const THEMES = {
+  AuthorName: {
+    css: {
+      fontSize: "1.1em",
+    },
+  },
+  Message: {
+    css: {
+      margin: "0em",
+      padding: "0em",
+      fontSize: "0.83em",
+    },
+  },
+  MessageText: {
+    css: {
+      margin: "0em",
+      padding: "0.1em",
+      paddingLeft: "1em",
+      fontSize: "1.1em",
+    },
+  },
+  MessageGroup: {
+    css: {
+      margin: "0em",
+      padding: "0.2em",
+    },
+  },
+};
+
 ReactDOM.render(
   <React.StrictMode>
-    <LightNodeProvider options={options} protocols={protocols}>
-      <App />
-    </LightNodeProvider>
+    <ThemeProvider theme={THEMES}>
+      <LightNodeProvider options={options} protocols={protocols}>
+        <App />
+      </LightNodeProvider>
+    </ThemeProvider>
   </React.StrictMode>,
   document.getElementById("root")
 );