diff --git a/src/App.css b/src/App.css index b9d355d..bc8ea09 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +1,67 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; +/* Ensure the app container takes full height */ +html, body, #root, .lm-chat-app-container { + height: 100% !important; + margin: 0 !important; + padding: 0 !important; + overflow: hidden !important; /* Prevent body scroll when chat is open */ } -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; +/* Apply consistent background to all chat headers */ +.lm-channel-header, +.lm-conversation-search, +.lm-channel-list-header, +.lm-chatroom-search { + background-color: #f0f2f5 !important; /* Light grey background for all headers */ + border-bottom: 1px solid #e0e0e0 !important; } -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); + +/* Style for the main chat layout containers */ +.lm-channel-block { + display: flex !important; + height: 100% !important; + width: 100% !important; } -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); + +.lm-right-panel { + flex: 1 !important; + display: flex !important; + flex-direction: column !important; + height: 100% !important; } -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.lm-chat-box { + flex: 1 !important; + display: flex !important; + flex-direction: column !important; + height: 100% !important; } -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } +/* Adjust header text and icons for consistency */ +.lm-channel-title, +.lm-channel-list-header .title, +.lm-conversation-search-input-field, +.lm-chatroom-search-input-field { + color: #333333 !important; + font-weight: 600 !important; } -.card { - padding: 2em; +.lm-header-left .back-icon, +.lm-header-right .lm-channel-icon, +.lm-chatroom-search-go-back-icon, +.lm-conversation-search-go-back-icon { + color: #555555 !important; } -.read-the-docs { - color: #888; +/* Ensure search input fields match header style */ +.lm-chatroom-search-input, +.lm-conversation-search-input { + background-color: #ffffff !important; + border-radius: 8px !important; + padding: 8px 12px !important; + border: 1px solid #e0e0e0 !important; } + +.lm-chatroom-search-input-field::placeholder, +.lm-conversation-search-input-field::placeholder { + color: #999999 !important; +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 3d7ded3..6495de3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,35 +1,44 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' +import { useState } from 'react'; +import { + LMClientOverlayProvider, + LMChannel, + initiateLMClient, + LMChatTheme, +} from '@likeminds.community/likeminds-chat-reactjs'; +import './App.css'; // Keep this import for component-specific styles +import { Routes, Route } from 'react-router-dom'; function App() { - const [count, setCount] = useState(0) + // IMPORTANT: Replace these placeholder values with your actual LikeMinds API Key, UUID, and Username. + // You can obtain these from your LikeMinds dashboard. + const [userDetails, setUserDetails] = useState<{ + apiKey?: string; + uuid?: string; + username?: string; + }>({ + apiKey: 'aca40392-f386-4c58-b9dd-7f59a50de207', // e.g., "lm_1234567890abcdef" + uuid: 'acfc57ff-5f52-4b0e-983a-7c692bedd6a9', // e.g., "user_12345" + username: 'TestUser', // e.g., "John Doe" + }); + + // Initialize the LikeMinds Chat Client + const lmChatClient = initiateLMClient(); return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- - ) +
+ + + {/* Set the LMChannel component as the default route */} + } /> + {/* Add other application routes here if needed */} + + +
+ ); } -export default App +export default App; diff --git a/src/index.css b/src/index.css index 08a3ac9..e69de29 100644 --- a/src/index.css +++ b/src/index.css @@ -1,68 +0,0 @@ -:root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/main.tsx b/src/main.tsx index 69071d2..14a1ec7 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,13 +1,13 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.tsx'; -import './index.css'; -import { BrowserRouter } from 'react-router-dom'; +import './index.css'; // Keep this import for global styles +import { BrowserRouter as Router } from 'react-router-dom'; ReactDOM.createRoot(document.getElementById('root')!).render( - + - + , );