Styling

app.py

@@ -41,65 +41,114 @@ def respond(
         yield response
 
 
-# Custom CSS for Wix-like styling
+# Custom CSS for Plant Wisdom.AI styling
 custom_css = """
 .gradio-container {
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-    max-width: 800px;
+    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+    max-width: 1000px;
     margin: 0 auto;
+    background-color: #ffffff;
 }
 
 .contain {
     background-color: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+    padding: 20px;
 }
 
 .message {
-    padding: 12px 16px;
-    border-radius: 8px;
-    margin: 8px 0;
+    padding: 16px 20px;
+    border-radius: 12px;
+    margin: 12px 0;
+    font-size: 16px;
+    line-height: 1.5;
 }
 
 .message.user {
-    background-color: #f0f2f5;
-    margin-left: 20%;
+    background-color: #f5f7fa;
+    margin-left: 15%;
+    border: 1px solid #e8eef7;
 }
 
 .message.assistant {
-    background-color: #e3f2fd;
-    margin-right: 20%;
+    background-color: #f0f7f0;
+    margin-right: 15%;
+    border: 1px solid #e0ede0;
+    color: #2c3338;
 }
 
 .submit-btn {
-    background-color: #0078d4 !important;
+    background-color: #2e7d32 !important;
     color: white !important;
-    border-radius: 4px !important;
-    padding: 8px 16px !important;
-    font-weight: 500 !important;
+    border-radius: 8px !important;
+    padding: 12px 24px !important;
+    font-weight: 600 !important;
+    font-size: 16px !important;
+    transition: all 0.3s ease !important;
+    border: none !important;
 }
 
 .submit-btn:hover {
-    background-color: #106ebe !important;
+    background-color: #1b5e20 !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
+}
+
+.submit-btn:active {
+    transform: translateY(0) !important;
 }
 
 .slider-container {
-    background-color: #f8f9fa;
-    padding: 16px;
-    border-radius: 8px;
-    margin: 8px 0;
+    background-color: #f8faf8;
+    padding: 20px;
+    border-radius: 12px;
+    margin: 12px 0;
+    border: 1px solid #e0ede0;
 }
 
 .textbox {
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-    padding: 8px;
+    border: 2px solid #e0ede0 !important;
+    border-radius: 8px !important;
+    padding: 12px !important;
+    font-size: 16px !important;
+    transition: all 0.3s ease !important;
+    background-color: #ffffff !important;
 }
 
 .textbox:focus {
-    border-color: #0078d4;
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(0,120,212,0.1);
+    border-color: #2e7d32 !important;
+    outline: none !important;
+    box-shadow: 0 0 0 3px rgba(46,125,50,0.1) !important;
+}
+
+.title {
+    color: #2c3338 !important;
+    font-size: 32px !important;
+    font-weight: 700 !important;
+    margin-bottom: 16px !important;
+}
+
+.description {
+    color: #505a62 !important;
+    font-size: 18px !important;
+    line-height: 1.6 !important;
+    margin-bottom: 24px !important;
+}
+
+.additional-inputs {
+    background-color: #f8faf8;
+    border: 1px solid #e0ede0;
+    border-radius: 12px;
+    padding: 20px;
+    margin-top: 24px;
+}
+
+.chatbot {
+    height: 600px !important;
+    border: 1px solid #e0ede0;
+    border-radius: 12px;
+    background-color: #ffffff;
 }
 """
 
@@ -111,12 +160,34 @@ demo = gr.ChatInterface(
     title="AI Data Management Expert",
     description="Hello! I am your Data Management Expert, specialized in Microsoft 365. I'm here to help you with guidance on Data Management procedures. How can I assist you today?",
     theme=gr.themes.Base(
-        primary_hue="blue",
-        secondary_hue="blue",
+        primary_hue=gr.themes.Color(
+            c50="#f3f7f3",
+            c100="#e0ede0",
+            c200="#b5d4b5",
+            c300="#8abb8a",
+            c400="#5fa25f",
+            c500="#2e7d32",
+            c600="#1b5e20",
+            c700="#154a19",
+            c800="#0e3511",
+            c900="#082108",
+        ),
+        secondary_hue=gr.themes.Color(
+            c50="#f3f7f3",
+            c100="#e0ede0",
+            c200="#b5d4b5",
+            c300="#8abb8a",
+            c400="#5fa25f",
+            c500="#2e7d32",
+            c600="#1b5e20",
+            c700="#154a19",
+            c800="#0e3511",
+            c900="#082108",
+        ),
         neutral_hue="slate",
-        spacing_size="sm",
-        radius_size="md",
-        font=["Helvetica Neue", "Arial", "sans-serif"],
+        spacing_size="lg",
+        radius_size="lg",
+        font=["Source Sans Pro", "Helvetica Neue", "Arial", "sans-serif"],
     ),
     css=custom_css,
     additional_inputs=[