Merge pull request #12 from All-Hands-AI/feature/tailwind-conversion

Convert example app to use Tailwind CSS

Author: rbren

example/package-lock.json

@@ -21,10 +21,13 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.21",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.18",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }
-}
+}

example/package.json

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

example/postcss.config.js

@@ -1,5 +1,3 @@
-import './App.css'
-
 // Import settings components
 import { SettingsModal } from './components/SettingsModal'
 import { ConversationManager } from './components/ConversationManager'
@@ -10,18 +8,21 @@ function App() {
   const { settings, updateSettings, isModalOpen, openModal, closeModal, isFirstVisit } = useSettings()
 
   return (
-    <div className="App">
-      <div>
-        <div className="app-header">
-          <h1>OpenHands Conversation Manager</h1>
-          <button className="settings-button" onClick={openModal}>
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+      <div className="max-w-7xl mx-auto p-8 text-center">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white m-0">OpenHands Conversation Manager</h1>
+          <button 
+            className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-3 rounded-md font-medium transition-colors duration-200"
+            onClick={openModal}
+          >
             ⚙️ Settings
           </button>
         </div>
 
         {isFirstVisit && (
-          <div className="welcome-message">
-            <p>👋 Welcome! Please configure your settings to get started.</p>
+          <div className="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-md p-4 mb-4 text-center">
+            <p className="text-blue-700 dark:text-blue-300 font-medium m-0">👋 Welcome! Please configure your settings to get started.</p>
           </div>
         )}