input prompt - primary color border added + change in label text

gradio_runner.py

@@ -13,6 +13,7 @@
 import requests
 import tabulate
 
+from gradio_ui.css import get_css
 from gradio_ui.prompt_form import make_prompt_form
 
 # This is a hack to prevent Gradio from phoning home when it gets imported
@@ -105,23 +106,7 @@ def go_gradio(**kwargs):
     else:
         task_info_md = ''
 
-    if kwargs['h2ocolors']:
-        css_code = """footer {visibility: hidden;}
-    body{background:linear-gradient(#f5f5f5,#e5e5e5);}
-    body.dark{background:linear-gradient(#000000,#0d0d0d);}
-    """
-    else:
-        css_code = """footer {visibility: hidden}"""
-    css_code += """
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
-body.dark{#warning {background-color: #555555};}
-#small_btn {
-    margin: 0.6em 0em 0.55em 0;
-    max-width: 20em;
-    min-width: 5em !important;
-    height: 5em;
-    font-size: 14px !important
-}"""
+    css_code = get_css(kwargs)
 
     if kwargs['gradio_avoid_processing_markdown']:
         from gradio_client import utils as client_utils

gradio_ui/css.py

@@ -0,0 +1,51 @@
+def get_css(kwargs) -> str:
+    if kwargs['h2ocolors']:
+        css_code = """footer {visibility: hidden;}
+        body{background:linear-gradient(#f5f5f5,#e5e5e5);}
+        body.dark{background:linear-gradient(#000000,#0d0d0d);}
+        """
+    else:
+        css_code = """footer {visibility: hidden}"""
+
+    css_code += make_css_base()
+    return css_code
+
+def make_css_base() -> str:
+    return """
+    @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
+
+    body.dark{#warning {background-color: #555555};}
+
+    #small_btn {
+        margin: 0.6em 0em 0.55em 0;
+        max-width: 20em;
+        min-width: 5em !important;
+        height: 5em;
+        font-size: 14px !important;
+    }
+
+    #prompt-form {
+        border: 1px solid var(--primary-500) !important;
+    }
+
+    #prompt-form.block {
+        border-radius: var(--block-radius) !important;
+    }
+
+    #prompt-form textarea {
+        border: 1px solid rgb(209, 213, 219);
+    }
+
+    #prompt-form label > div {
+        margin-top: 4px;
+    }
+
+    button.primary:hover {
+        background-color: var(--primary-600) !important;
+        transition: .2s;
+    }
+
+    #prompt-form-area {
+        margin-bottom: 2.5rem;
+    }
+    """

gradio_ui/prompt_form.py

@@ -3,19 +3,22 @@
 
 def make_prompt_form(kwargs):
     if kwargs['input_lines'] > 1:
-        instruction_label = "You (Shift-Enter or push Submit to send message, use Enter for multiple input lines)"
+        instruction_label = "press Shift-Enter or click Submit to send message, press Enter for multiple input lines"
     else:
-        instruction_label = "You (Enter or push Submit to send message, shift-enter for more lines)"
+        instruction_label = "press Enter or click Submit to send message, press Shift-Enter for more lines"
 
-    with gr.Row():
+    with gr.Row(elem_id='prompt-form-area'):
         with gr.Column(scale=50):
             instruction = gr.Textbox(
                 lines=kwargs['input_lines'],
-                label=instruction_label,
+                label='Ask anything',
                 placeholder=kwargs['placeholder_instruction'],
+                info=instruction_label,
+                elem_id='prompt-form'
             )
+            instruction.style(container=True)
         with gr.Row():
-            submit = gr.Button(value='Submit').style(full_width=False, size='sm')
-            stop_btn = gr.Button(value="Stop").style(full_width=False, size='sm')
+            submit = gr.Button(value='Submit', variant='primary').style(full_width=False, size='sm')
+            stop_btn = gr.Button(value="Stop", variant='secondary').style(full_width=False, size='sm')
 
     return instruction, submit, stop_btn