fix: feedback from latest design review

Signed-off-by: Graham White <[email protected]>

src/app.css

@@ -11,15 +11,16 @@ textarea, .wrapper > label {
 }
 /* Make the chat label bold */
 .wrapper > label {
-    font-weight: bold;
+    font-weight: 600;
 }
 /* Limit the overall width of the demo */
 .gradio-container {
-    max-width: 1200px !important;
+    max-width: 1024px !important;
 }
 /* Theme anchor links with Carbon coloring */
-.gr_docs_link a {
+.gr_docs_link a, .gr_docs_link a > i {
     color: #78A9FF;
+    text-decoration: none;
 }
 /* Title alignment with the Granite icon */
 .gr_title {
@@ -35,6 +36,8 @@ textarea, .wrapper > label {
 }
 .gr_title h1 {
     margin: auto !important;
+    font-size: 36px;
+    font-weight: 600;
 }
 /* Color the Granite icon in white for dark mode */
 @media (prefers-color-scheme: dark) {

src/app.py

@@ -20,11 +20,10 @@ You are Granite, developed by IBM. You are a helpful AI assistant"""
 TITLE = "IBM Granite 3.1 8b Instruct"
 DESCRIPTION = """
 <p>Granite 3.1 is a general purpose large language model released in the open under an Apache 2.0 license. Granite
-models support a 128k context length.</p>
-
-<p>Try one of the sample prompts below or write your own. Remember, AI models can make mistakes.
+models support a 128k context length. Try one of the sample prompts below or write your own. Remember, AI models can
+make mistakes.  Note: This demo does not work on CPU.
 <span class="gr_docs_link">
-<a href="https://www.ibm.com/granite/docs/">View Documentation</a> <i class="fa fa-external-link"></i>
+<a href="https://www.ibm.com/granite/docs/">View Documentation <i class="fa fa-external-link"></i></a>
 </span>
 </p>
 """

src/themes/research_monochrome.py

@@ -51,7 +51,7 @@ theme = gr.themes.Base(
     ),
     spacing_size=sizes.spacing_md,  # change spacing to default size
     radius_size=sizes.radius_md,  # change spacing to default size and Keep Radius to make demo feel more playful
-    text_size=sizes.text_lg,  # change fontsize to default size
+    text_size=sizes.text_md,  # change fontsize to default size
     #   spacing_size: sizes.Size | str = sizes.spacing_md,  #change spacing to default size
     #         radius_size: sizes.Size | str = sizes.radius_md, #change spacing to default size and Keep Radius to make
     #                                                           demo feel more playful
@@ -78,7 +78,7 @@ theme = gr.themes.Base(
     block_label_text_color_dark="white",
     block_title_radius="*block_label_radius",
     block_title_background_fill="*block_label_background_fill",
-    block_title_text_weight="600",
+    block_title_text_weight="400",
     block_title_text_color="black",
     block_title_text_color_dark="white",
     block_label_margin="*spacing_md",