incorporate feedback from review

widgetti · Mar 8, 2024 · fa6c862 · fa6c862
1 parent ba35750
commit fa6c862
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 24 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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;
     }
     </style>