refactor all files and switch to tailwindcss

examples/web-chat/src/App.tsx

@@ -1,4 +1,3 @@
-import "./App.css";
 import handleCommand from "./command";
 import Room from "./Room";
 import { Message } from "./Message";

examples/web-chat/src/ChatList.tsx

@@ -1,9 +1,4 @@
 import { useEffect, useRef } from "react";
-import {
-  Message as LiveMessage,
-  MessageText,
-  MessageList,
-} from "@livechat/ui-kit";
 import { Message } from "./Message";
 
 interface Props {
@@ -12,25 +7,28 @@ interface Props {
 
 export default function ChatList(props: Props) {
   const renderedMessages = props.messages.map((message) => (
-    <LiveMessage
+    <div
       key={
         message.nick +
         message.payloadAsUtf8 +
         message.timestamp.valueOf() +
         message.sentTimestamp?.valueOf()
       }
-      authorName={message.nick}
-      date={formatDisplayDate(message)}
+      className="flex flex-col p-2 border-b border-gray-200"
     >
-      <MessageText>{message.payloadAsUtf8}</MessageText>
-    </LiveMessage>
+      <span className="text-sm text-gray-500">{message.nick}</span>
+      <span className="text-sm text-gray-500">
+        {formatDisplayDate(message)}
+      </span>
+      <p className="text-gray-700">{message.payloadAsUtf8}</p>
+    </div>
   ));
 
   return (
-    <MessageList active containScrollInSubtree>
+    <div className="overflow-y-auto h-full">
       {renderedMessages}
       <AlwaysScrollToBottom messages={props.messages} />
-    </MessageList>
+    </div>
   );
 }
 
@@ -45,13 +43,13 @@ function formatDisplayDate(message: Message): string {
 }
 
 const AlwaysScrollToBottom = (props: { messages: Message[] }) => {
-  const elementRef = useRef<HTMLDivElement>();
+  const elementRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    // @ts-ignore
-    elementRef.current.scrollIntoView();
+    if (elementRef.current) {
+      elementRef.current.scrollIntoView();
+    }
   }, [props.messages]);
 
-  // @ts-ignore
   return <div ref={elementRef} />;
 };

examples/web-chat/src/MessageInput.tsx

@@ -1,14 +1,6 @@
 import { ChangeEvent, KeyboardEvent, useEffect, useState } from "react";
 import { useWaku } from "@waku/react";
 import { LightNode } from "@waku/interfaces";
-import {
-  TextInput,
-  TextComposer,
-  Row,
-  Fill,
-  Fit,
-  SendButton,
-} from "@livechat/ui-kit";
 
 interface Props {
   hasLightPushPeers: boolean;
@@ -60,20 +52,24 @@ export default function MessageInput(props: Props) {
   }, [node, inputText, hasLightPushPeers]);
 
   return (
-    <TextComposer
-      onKeyDown={onKeyDown}
-      onChange={onChange}
-      active={isActive}
-      onButtonClick={onMessage}
-    >
-      <Row align="center">
-        <Fill>
-          <TextInput />
-        </Fill>
-        <Fit>
-          <SendButton />
-        </Fit>
-      </Row>
-    </TextComposer>
+    <div className="flex p-2">
+      <input
+        type="text"
+        value={inputText}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        className="flex-grow p-2 border border-gray-300 rounded-l-md"
+        placeholder="Type your message..."
+      />
+      <button
+        onClick={onMessage}
+        className={`flex-none px-4 py-2 text-white ${
+          isActive ? "bg-blue-500" : "bg-blue-300 cursor-not-allowed"
+        } rounded-r-md`}
+        disabled={!isActive}
+      >
+        Send
+      </button>
+    </div>
   );
 }

examples/web-chat/src/Room.tsx

@@ -2,7 +2,6 @@ import type { LightNode } from "@waku/interfaces";
 import ChatList from "./ChatList";
 import MessageInput from "./MessageInput";
 import { useWaku, useContentPair, useLightPush } from "@waku/react";
-import { TitleBar } from "@livechat/ui-kit";
 import { Message } from "./Message";
 import { ChatMessage } from "./chat_message";
 import { useNodePeers, usePeers } from "./hooks";
@@ -49,15 +48,11 @@ export default function Room(props: Props) {
   const bootstrapPeersMessage = `Bootstrap (DNS Discovery): ${bootstrapPeers.size}, Peer exchange: ${peerExchangePeers.size}. `;
 
   return (
-    <div
-      className="chat-container"
-      style={{ height: "98vh", display: "flex", flexDirection: "column" }}
-    >
-      <TitleBar
-        leftIcons={[peersMessage]}
-        rightIcons={[bootstrapPeersMessage, "View console for more details."]}
-        title="Waku v2 chat app"
-      />
+    <div className="h-screen flex flex-col">
+      <div className="flex justify-between items-center bg-gray-800 text-white p-4">
+        <div>{peersMessage}</div>
+        <div>{bootstrapPeersMessage} View console for more details.</div>
+      </div>
       <ChatList messages={props.messages} />
       <MessageInput hasLightPushPeers={!!lightPushPeers} sendMessage={onSend} />
     </div>

examples/web-chat/src/index.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { ThemeProvider } from "@livechat/ui-kit";
 import { LightNodeProvider, ContentPairProvider } from "@waku/react";
 import { wakuDnsDiscovery, enrTree } from "@waku/dns-discovery";
 import { wakuPeerExchangeDiscovery } from "@waku/peer-exchange";
-
 import "./index.css";
+
 import App from "./App";
 import { CONTENT_TOPIC, PROTOCOLS } from "./config";
 
@@ -22,44 +21,13 @@ const NODE_OPTIONS = {
   },
 };
 
-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>
-    <ThemeProvider theme={THEMES}>
-      <LightNodeProvider options={NODE_OPTIONS} protocols={PROTOCOLS}>
-        <ContentPairProvider contentTopic={CONTENT_TOPIC}>
-          <App />
-        </ContentPairProvider>
-      </LightNodeProvider>
-    </ThemeProvider>
+    <LightNodeProvider options={NODE_OPTIONS} protocols={PROTOCOLS}>
+      <ContentPairProvider contentTopic={CONTENT_TOPIC}>
+        <App />
+      </ContentPairProvider>
+    </LightNodeProvider>
   </React.StrictMode>,
   document.getElementById("root")
 );