From a23bc28e6a83374ab0e24f6f84354028331c9b85 Mon Sep 17 00:00:00 2001
From: Piotr Pasza Storozenko <piotr@appsilon.com>
Date: Tue, 26 Mar 2024 13:40:52 +0100
Subject: [PATCH] feat: improve app content and add css

---
 app.py                                 | 18 ++++++++++++++----
 pyshiny_template/view/root/__init__.py |  2 +-
 pyshiny_template/view/root/ui.py       | 16 +++++++++++-----
 tests/playwirght/test_ui.py            |  4 ++--
 www/style.css                          | 11 +++++++++++
 5 files changed, 39 insertions(+), 12 deletions(-)
 create mode 100644 www/style.css

diff --git a/app.py b/app.py
index d6ab0ae..e84cc60 100644
--- a/app.py
+++ b/app.py
@@ -1,16 +1,26 @@
 import sys
+from pathlib import Path
 
 from loguru import logger
-from shiny import App
+from shiny import App, ui
 
 from pyshiny_template.settings import AppSettings
-from pyshiny_template.view.root import get_ui, server
+from pyshiny_template.view.root import get_dashboard_ui, server
 
+# Setup settings and logger
 app_settings = AppSettings()
 logger.remove()
 logger.add(sys.stderr, level=app_settings.log_level)
 
+# External resources, like CSS and JS files
+# Can be moved to a separate file
+google_fonts_tag = ui.TagList(
+    ui.tags.link(rel="stylesheet", href="https://fonts.googleapis.com/css2?family=Roboto"),
+    ui.tags.link(rel="stylesheet", href="https://fonts.googleapis.com/css2?family=Maven+Pro"),
+)
 
-app_ui = get_ui()
+# Combine clean shiny UI with CSS and external resources
+ui_with_css = ui.TagList(ui.tags.link(href="style.css", rel="stylesheet"), google_fonts_tag, get_dashboard_ui())
 
-app = App(app_ui, server)
+app_dir = Path(__file__).parent
+app = App(ui_with_css, server, static_assets=app_dir / "www")
diff --git a/pyshiny_template/view/root/__init__.py b/pyshiny_template/view/root/__init__.py
index 1ebb4e3..2a99138 100644
--- a/pyshiny_template/view/root/__init__.py
+++ b/pyshiny_template/view/root/__init__.py
@@ -1,2 +1,2 @@
-from .ui import get_ui  # noqa F401
+from .ui import get_dashboard_ui  # noqa F401
 from .server import server  # noqa F401
diff --git a/pyshiny_template/view/root/ui.py b/pyshiny_template/view/root/ui.py
index e041a76..7c4f76f 100644
--- a/pyshiny_template/view/root/ui.py
+++ b/pyshiny_template/view/root/ui.py
@@ -1,11 +1,17 @@
 from shiny import ui
 
 
-def get_ui():
+def get_dashboard_ui() -> ui.Tag:
     return ui.page_fluid(
-        ui.panel_title("Hello world!"),
-        ui.div(
-            ui.p("This is a simple Shiny app."),
-            data_testid="main",
+        # We can't use styles with ui.panel_title hance the use of ui.h1 and ui.tags.title
+        ui.head_content(ui.tags.title("Tapyr by Appsilon")),
+        ui.h1(
+            ui.span("Tapyr", style="color: #0099f9;"),
+            " | PyShiny Template by ",
+            ui.span("Appsilon", style="color: #0099f9;"),
         ),
+        ui.card(
+            ui.p("Check out the ", ui.a("documentation", href=""), " for quick start guide."),
+        ),
+        ui.card_footer("By Appsilon with 💙", data_testid="footer"),
     )
diff --git a/tests/playwirght/test_ui.py b/tests/playwirght/test_ui.py
index effcaf4..2c5fe9c 100644
--- a/tests/playwirght/test_ui.py
+++ b/tests/playwirght/test_ui.py
@@ -2,6 +2,6 @@
 from playwright.sync_api import Page, expect
 
 
-def test_div_main(page: Page):
+def test_footer(page: Page):
     page.goto(APP_URL)
-    expect(page.get_by_test_id("main")).to_contain_text("This is a simple Shiny app.")
+    expect(page.get_by_test_id("footer")).to_contain_text("By Appsilon")
diff --git a/www/style.css b/www/style.css
new file mode 100644
index 0000000..1bfe221
--- /dev/null
+++ b/www/style.css
@@ -0,0 +1,11 @@
+body {
+  font-family: 'Roboto', sans-serif;
+  background-color: #f0f6ff;
+  color: #333333;
+}
+h1 {
+  font-family: 'Maven Pro', sans-serif;
+  color: #333333;
+  font-size: 1.9rem;
+  font-weight: 600;
+}