From a93b0fa7d66ba5b15303befcf403dbbdffea8325 Mon Sep 17 00:00:00 2001 From: Iisakki Rotko Date: Tue, 5 Mar 2024 14:49:47 +0100 Subject: [PATCH] incorporate feedback from review --- solara/components/applayout.py | 2 +- solara/website/assets/custom.css | 23 ++++++++-- solara/website/assets/images/logo_white.svg | 50 +++++++++++++++++++++ solara/website/assets/theme.js | 2 +- solara/website/components/header.py | 22 ++------- solara/website/templates/index.html.j2 | 19 +++++++- 6 files changed, 94 insertions(+), 24 deletions(-) create mode 100644 solara/website/assets/images/logo_white.svg diff --git a/solara/components/applayout.py b/solara/components/applayout.py index 1e6cb7dba..b83b096ac 100644 --- a/solara/components/applayout.py +++ b/solara/components/applayout.py @@ -306,7 +306,7 @@ def set_path(index): close_on_content_click=False, ): pass - v.Html(tag="div", children=children_sidebar, style_="background-color: white; padding: 12px; min-width: 400px") + v.Sheet(children=children_sidebar, style_="padding: 12px; min-width: 400px") if title or children_appbartitle: v.ToolbarTitle(children=children_appbartitle or [title]) v.Spacer() diff --git a/solara/website/assets/custom.css b/solara/website/assets/custom.css index 66b06e8ef..3243dbafa 100644 --- a/solara/website/assets/custom.css +++ b/solara/website/assets/custom.css @@ -21,8 +21,9 @@ --jp-content-font-size5: 2.25rem; --dark-color-primary-lightest: #26273D; - --dark-color-primary: #7A8AFF; - --dark-color-primary-darker: #262D69; + /* --dark-color-primary: #7A8AFF; */ + --dark-color-primary: #f77e14; + --dark-color-primary-darker: #303886; --dark-color-text: hsla(0,0%,100%,.7); --dark-color-grey: #ababab; --dark-color-grey-light: #202020; @@ -162,7 +163,8 @@ blockquote p:last-child { } .theme--dark .v-btn.homepage-button { - background-color: var(--dark-color-primary-darker) !important; + background-color: var(--dark-color-primary) !important; + color: var(--dark-color-grey-light); } .v-card.testimonial-card{ @@ -198,6 +200,21 @@ blockquote p:last-child { color: var(--dark-color-primary-darker) !important; } +/* header */ +.news { + background-color: var(--color-primary); + padding: 10px; + font-size: 20px; + display: flex; + justify-content: center; +} +.theme--dark .news { + background-color: var(--dark-color-primary); +} +.news a { + color: white !important; +} + /* hero */ .hero { background: var(--color-primary-lightest) url(https://dxhl76zpt6fap.cloudfront.net/public/hero.webp); diff --git a/solara/website/assets/images/logo_white.svg b/solara/website/assets/images/logo_white.svg new file mode 100644 index 000000000..dfcebc841 --- /dev/null +++ b/solara/website/assets/images/logo_white.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/solara/website/assets/theme.js b/solara/website/assets/theme.js index 95596c5e0..38dc82996 100644 --- a/solara/website/assets/theme.js +++ b/solara/website/assets/theme.js @@ -3,6 +3,6 @@ vuetifyThemes = { primary: '#ff991f', }, dark: { - primary: '#7A8AFF', + primary: '#f77e14', } } diff --git a/solara/website/components/header.py b/solara/website/components/header.py index 2fd8cfd30..3af55c979 100644 --- a/solara/website/components/header.py +++ b/solara/website/components/header.py @@ -5,6 +5,9 @@ from solara.alias import rv from solara.server import settings +# TODO: remove import once function is included in solara +from solara.website.pages.apps.scatter import use_dark_effective + @solara._component_vue("algolia.vue") def Algolia(app_id: str, index_name: str, api_key: str, debug=False): @@ -22,23 +25,6 @@ def Header( # set states for menu with solara.Column(gap="0px"): - solara.Style( - """ - .news { - background-color: var(--color-primary); - padding: 10px; - font-size: 20px; - display: flex; - justify-content: center; - } - .theme--dark .news { - background-color: var(--dark-color-primary-darker); - } - .news a { - color: white !important; - } - """ - ) with solara.Div(classes=["news"]): solara.HTML( "div", @@ -50,7 +36,7 @@ def Header( with solara.Button(icon=True, class_="hidden-md-and-up", on_click=lambda: on_toggle_left_menu and on_toggle_left_menu()): rv.Icon(children=["mdi-menu"]) with solara.Link(path_or_route="/"): - solara.Image(router.root_path + "/static/assets/images/logo.svg") + solara.Image(router.root_path + f"/static/assets/images/logo{'_white' if use_dark_effective() else ''}.svg") rv.Spacer() if settings.search.enabled: diff --git a/solara/website/templates/index.html.j2 b/solara/website/templates/index.html.j2 index 84c158ef9..7f0d0744e 100644 --- a/solara/website/templates/index.html.j2 +++ b/solara/website/templates/index.html.j2 @@ -38,8 +38,25 @@ color: #182026; } + .theme--dark .DocSearch-Button { + background-color: #26273D; + color: hsla(0,0%,100%,.7); + } + .DocSearch-Button:hover { - background-color: rgb(255, 247, 227); + background-color: rgba(150,150,200,0.15); + } + + .theme--dark .DocSearch-Button:hover { + background-color: rgba(255, 255, 255, 0.15); + } + + .DocSearch-Button .DocSearch-Search-Icon { + color: #26273D; + } + + .theme--dark .DocSearch-Button .DocSearch-Search-Icon { + color: #ff991f; }