feat: new icon image for title

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

src/app.css

@@ -11,7 +11,14 @@ footer {
     align-items: center;
 }
 .gr_title img {
-    max-height: 40px;
+    height: 40px;
+    width: 40px;
     margin-right: 1rem;
     margin-bottom: -10px;
+    filter: invert(0%) sepia(0%) saturate(7459%) hue-rotate(154deg) brightness(96%) contrast(100%);
 }
+@media (prefers-color-scheme: dark) {
+    .gr_title img {
+        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(162deg) brightness(101%) contrast(104%);
+    }
+  }

src/app.py

@@ -94,7 +94,7 @@ with gr.Blocks(
     fill_height=True, css_paths=css_file_path, head_paths=head_file_path, theme=carbon_theme, title=TITLE
 ) as demo:
     gr.HTML(
-        f"<img src='https://www.ibm.com/granite/docs/images/granite-cubes-352x368.webp'/><h1>{TITLE}</h1>",
+        f"<img src='https://www.ibm.com/granite/docs/images/granite-pictogram.svg'/><h1>{TITLE}</h1>",
         elem_classes=["gr_title"],
     )
     gr.HTML(DESCRIPTION)