Revamp styles proposal

api/event_handlers/gradio_handler.py

@@ -8,7 +8,7 @@ from langchain_core.messages import BaseMessage
 TEAM_LOGO_BASE_URL = "https://huggingface.co/spaces/yamilsteven/ifx-assets/resolve/main/assets/team_logos/"
 
 image_base = """
-<div style="background-color: #2C2C2C; border-radius: 10px; padding: 25px; display: flex; align-items: center; width: 450px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);">
+<div style="background-color: #1f2937; border-radius: 10px; padding: 25px; display: flex; align-items: center; width: 450px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);">
   <div style="margin-right: 25px;">
     <img src="https://huggingface.co/spaces/ryanbalch/IFX-huge-league/resolve/main/assets/profiles/players_pics/{filename}" alt="{filename} Pic" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #444;">
   </div>
@@ -23,7 +23,7 @@ image_base = """
 """
 
 game_card_html = """
-<div style="text-align: center; padding: 20px; margin: 10px 0; border-radius: 8px; background-color: #3A3B3C; color: #FFFFFF; font-family: Arial, sans-serif; max-width: 500px; margin-left: auto; margin-right: auto;">
+<div style="text-align: center; padding: 20px; margin: 10px 0; border-radius: 8px; background-color: #1f2937; color: #FFFFFF; font-family: Arial, sans-serif; max-width: 500px; margin-left: auto; margin-right: auto;">
   <h3 style="margin-top: 0; margin-bottom: 10px; font-size: 20px; color: #E0E0E0;">{game_title}</h3>
   <div style="display: flex; justify-content: space-around; align-items: center; margin-bottom: 15px;">
     <div style="text-align: center; width: 40%;">
@@ -52,10 +52,10 @@ game_card_html = """
 """
 
 team_info_card_html = """
-<div style="text-align: center; padding: 50px; margin:10px 0; border-radius: 8px; background-color: #FFFFFF; color: #333333; font-family: Arial, sans-serif; max-width: 450px; margin-left: auto; margin-right: auto; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
+<div style="text-align: center; padding: 50px; margin:10px 0; border-radius: 8px; background-color: #1f2937; color: #333333; max-width: 450px; margin-left: auto; margin-right: auto; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
   <img src="{team_logo_url}" alt="{team_display_name} Logo" style="max-width: 80px; max-height: 80px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto; border-radius: 5px;" onerror="this.onerror=null; this.src='{default_logo_url}';">
-  <h3 style="margin-top: 0; margin-bottom: 8px; font-size: 22px; color: #000000;">{team_display_name}</h3>
-  <p style="font-size: 15px; color: #333333; margin-bottom: 15px;">{city_display}</p>
+  <h3 style="margin-top: 0; margin-bottom: 8px; font-size: 22px; color: #FFFFFF;">{team_display_name}</h3>
+  <p style="font-size: 15px; color: #FFFFFF; margin-bottom: 15px;">{city_display}</p>
   {team_page_cta_html}
 </div>
 """

api/server_gradio.py

@@ -125,76 +125,80 @@ def submit_helper(state, handler, user_query):
 
 ### Interface ###
 
-with gr.Blocks() as demo:
+with gr.Blocks(theme="soft") as demo:
     state = gr.State(AppState())
     handler = GradioEventHandler()
 
     gr.Markdown("# Huge League Soccer")
-    with gr.Row(scale=1):
+    with gr.Row():
         email = gr.Textbox(label="Email",
                            type="email",
                            interactive=True,
                            lines=1,
-                           value=state.value.email)
+                           value=state.value.email,
+                           scale=1)
         first_name = gr.Textbox(label="First Name",
                                 lines=1,
                                 interactive=True,
-                                value=state.value.first_name)
+                                value=state.value.first_name,
+                                scale=1)
         last_name = gr.Textbox(label="Last Name",
                                lines=1,
                                interactive=True,
-                               value=state.value.last_name)
+                               value=state.value.last_name,
+                               scale=1)
 
     with gr.Row():
-        llm_response = gr.Textbox(label="LLM Response", lines=15)
-        ots_box = gr.HTML(
-            label="OTS",
-            value=state.value.ots_content,
-        )
+        with gr.Column(scale=3):
+            llm_response = gr.Textbox(label="LLM Response", lines=15)
+        with gr.Column(scale=2):
+            ots_box = gr.HTML(
+                label="OTS",
+                value=state.value.ots_content,
+            )
 
-    with gr.Row(scale=1):
-        with gr.Column(scale=1):
+    with gr.Row():
+        with gr.Column(scale=1, min_width=200):
             persona = gr.Radio(
                 choices=["Casual Fan", "Super Fan"],
                 value="Casual Fan",
                 label="Select Persona",
             )
-        with gr.Column(scale=2):
+        with gr.Column(scale=3):
             user_query = gr.Textbox(
                 label="User Query",
                 placeholder="Ask me about Huge League Soccer...",
-                # lines=3,
                 autofocus=True,
                 show_label=False,
             )
-            submit_btn = gr.Button("Submit", variant="primary", scale=0)
-
-    clear_state_btn = gr.Button("Clear State", variant="stop", scale=1)
+            with gr.Row():
+                submit_btn = gr.Button("Submit", variant="primary", scale=1)
+                clear_state_btn = gr.Button("Clear State", scale=1)
 
-    with gr.Row(visible=show_state, variant="compact", scale=1):
+    with gr.Row(visible=show_state, variant="compact"):
         count_disp = gr.Number(
             label="Count",
             interactive=False,
             value=state.value.count,
-            scale=0,
+            scale=1,
         )
         persona_disp = gr.Text(
             label="Persona",
             interactive=False,
             value=state.value.persona,
-            scale=0
+            scale=1
         )
         zep_session_id_disp = gr.Text(
             label="Zep Session ID",
             interactive=False,
             value=state.value.zep_session_id,
-            scale=1
+            scale=2
         )
         freeplay_session_id_disp = gr.Text(
             label="Freeplay Session ID",
             interactive=False,
             value=state.value.freeplay_session_id,
-            scale=1
+            scale=2
         )
 
     ### Events