fix: textinput styling

app.py

@@ -61,7 +61,7 @@ EXAMPLES = [
 
 HEADER = """
 <div style="width: 100%; display: flex; flex-direction: column; gap: 24px; padding-top: 24px">
-    <img src="https://postimage.me/images/2024/12/19/ICONGLIDER.md.png" width="350" style="position: absolute; top: 0; right: -24px">
+    <img src="https://postimage.me/images/2024/12/19/ICONGLIDER.md.png" width="325" style="position: absolute; top: 0; right: -24px">
     <div style="display: flex; justify-content: space-between; z-index: 1;">
         <a href="https://www.patronus.ai">
             <img src="https://postimage.me/images/2024/12/19/patronuslogo-white.png" width="250">
@@ -97,6 +97,10 @@ EXAMPLES_HEADER = """
 """
 
 css = """
+.custom_textbox textarea {
+    background-color: #fff !important;
+    color: #000 !important;
+}
 .example-button {
     width: fit-content;
     font-size: 1rem;
@@ -173,20 +177,20 @@ with gr.Blocks(css=css, theme=theme) as demo:
     with gr.Row(equal_height=True):
         with gr.Column(scale=1):
             gr.Markdown("<div style='color: #fff !important; font-weight: 600'>Your Inputs</div>")
-            model_output = gr.Textbox(label="MODEL OUTPUT (required)")
-            user_input = gr.Textbox(label="USER INPUT (required)")
-            gold_answer = gr.Textbox(label="GOLD ANSWER")
-            retrieved_context = gr.Textbox(label="RETRIEVED CONTEXT")
-            pass_criteria = gr.Textbox(label="Pass Criteria (required)")
-            rubric = gr.Textbox(label="Rubric")
+            model_output = gr.Textbox(label="MODEL OUTPUT (required)", elem_classes="custom_textbox")
+            user_input = gr.Textbox(label="USER INPUT (required)", elem_classes="custom_textbox")
+            gold_answer = gr.Textbox(label="GOLD ANSWER", elem_classes="custom_textbox")
+            retrieved_context = gr.Textbox(label="RETRIEVED CONTEXT", elem_classes="custom_textbox")
+            pass_criteria = gr.Textbox(label="Pass Criteria (required)", elem_classes="custom_textbox")
+            rubric = gr.Textbox(label="Rubric", elem_classes="custom_textbox")
             with gr.Row():
                 clear_btn = gr.ClearButton([model_output, user_input, gold_answer, retrieved_context, pass_criteria, rubric])
                 submit_button = gr.Button("Submit", variant="primary")
         with gr.Column(scale=1):
             gr.Markdown("<div style='color: #fff !important; font-weight: 600'>GLIDER Output</div>")
-            score = gr.Textbox(label="Score")
-            reasoning = gr.Textbox(label="Reasoning")
-            highlights = gr.Textbox(label="Highlights")
+            score = gr.Textbox(label="Score", elem_classes="custom_textbox")
+            reasoning = gr.Textbox(label="Reasoning", elem_classes="custom_textbox")
+            highlights = gr.Textbox(label="Highlights", elem_classes="custom_textbox")
     gr.Markdown("&nbsp;")
     gr.Markdown(EXAMPLES_HEADER)
     with gr.Row():