From 0981ac675bf0c31e4186ba88bce5aac0ccfd1d3e Mon Sep 17 00:00:00 2001 From: Alek Petuskey Date: Tue, 2 Apr 2024 11:48:34 -0700 Subject: [PATCH] Update sidebar template (#2959) --- .../apps/sidebar/code/components/sidebar.py | 43 +++++++------------ .../apps/sidebar/code/pages/index.py | 2 +- .../apps/sidebar/code/pages/settings.py | 17 +++++++- .../.templates/apps/sidebar/code/sidebar.py | 4 +- reflex/.templates/apps/sidebar/code/styles.py | 21 ++------- .../apps/sidebar/code/templates/template.py | 23 +++++----- 6 files changed, 48 insertions(+), 62 deletions(-) diff --git a/reflex/.templates/apps/sidebar/code/components/sidebar.py b/reflex/.templates/apps/sidebar/code/components/sidebar.py index 02b418054..fbdc56db4 100644 --- a/reflex/.templates/apps/sidebar/code/components/sidebar.py +++ b/reflex/.templates/apps/sidebar/code/components/sidebar.py @@ -18,27 +18,19 @@ def sidebar_header() -> rx.Component: rx.image(src="/reflex_white.svg", height="2em"), ), rx.spacer(), - # Link to Reflex GitHub repo. rx.link( - rx.center( - rx.image( - src="/github.svg", - height="3em", - padding="0.5em", - ), - box_shadow=styles.box_shadow, - bg="transparent", - border_radius=styles.border_radius, - _hover={ - "bg": styles.accent_color, - }, + rx.button( + rx.icon("github"), + color_scheme="gray", + variant="soft", ), href="https://github.com/reflex-dev/reflex", ), align="center", width="100%", border_bottom=styles.border, - padding="1em", + padding_x="1em", + padding_y="2em", ) @@ -53,12 +45,12 @@ def sidebar_footer() -> rx.Component: rx.link( rx.text("Docs"), href="https://reflex.dev/docs/getting-started/introduction/", - style=styles.link_style, + color_scheme="gray", ), rx.link( rx.text("Blog"), href="https://reflex.dev/blog/", - style=styles.link_style, + color_scheme="gray", ), width="100%", border_top=styles.border, @@ -66,12 +58,11 @@ def sidebar_footer() -> rx.Component: ) -def sidebar_item(text: str, icon: str, url: str) -> rx.Component: +def sidebar_item(text: str, url: str) -> rx.Component: """Sidebar item. Args: text: The text of the item. - icon: The icon of the item. url: The URL of the item. Returns: @@ -84,19 +75,19 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component: return rx.link( rx.hstack( - rx.image( - src=icon, - height="2.5em", - padding="0.5em", - ), rx.text( text, ), bg=rx.cond( active, - styles.accent_color, + rx.color("accent", 2), "transparent", ), + border=rx.cond( + active, + f"1px solid {rx.color('accent', 6)}", + f"1px solid {rx.color('gray', 6)}", + ), color=rx.cond( active, styles.accent_text_color, @@ -104,9 +95,8 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component: ), align="center", border_radius=styles.border_radius, - box_shadow=styles.box_shadow, width="100%", - padding_x="1em", + padding="1em", ), href=url, width="100%", @@ -129,7 +119,6 @@ def sidebar() -> rx.Component: *[ sidebar_item( text=page.get("title", page["route"].strip("/").capitalize()), - icon=page.get("image", "/github.svg"), url=page["route"], ) for page in get_decorated_pages() diff --git a/reflex/.templates/apps/sidebar/code/pages/index.py b/reflex/.templates/apps/sidebar/code/pages/index.py index aa3b4725b..e79ab75c2 100644 --- a/reflex/.templates/apps/sidebar/code/pages/index.py +++ b/reflex/.templates/apps/sidebar/code/pages/index.py @@ -6,7 +6,7 @@ from code.templates import template import reflex as rx -@template(route="/", title="Home", image="/github.svg") +@template(route="/", title="Home") def index() -> rx.Component: """The home page. diff --git a/reflex/.templates/apps/sidebar/code/pages/settings.py b/reflex/.templates/apps/sidebar/code/pages/settings.py index 29fdb4b57..1272c8fe7 100644 --- a/reflex/.templates/apps/sidebar/code/pages/settings.py +++ b/reflex/.templates/apps/sidebar/code/pages/settings.py @@ -19,7 +19,7 @@ def settings() -> rx.Component: rx.color_mode.switch(), ), rx.hstack( - rx.text("Theme color: "), + rx.text("Primary color: "), rx.select( [ "tomato", @@ -53,6 +53,21 @@ def settings() -> rx.Component: on_change=ThemeState.set_accent_color, ), ), + rx.hstack( + rx.text("Secondary color: "), + rx.select( + [ + "gray", + "mauve", + "slate", + "sage", + "olive", + "sand", + ], + value=ThemeState.gray_color, + on_change=ThemeState.set_gray_color, + ), + ), rx.text( "You can edit this page in ", rx.code("{your_app}/pages/settings.py"), diff --git a/reflex/.templates/apps/sidebar/code/sidebar.py b/reflex/.templates/apps/sidebar/code/sidebar.py index 1ef475d0f..8b1e2c224 100644 --- a/reflex/.templates/apps/sidebar/code/sidebar.py +++ b/reflex/.templates/apps/sidebar/code/sidebar.py @@ -1,7 +1,5 @@ """Welcome to Reflex!.""" -from code import styles - # Import all the pages. from code.pages import * @@ -13,4 +11,4 @@ class State(rx.State): # Create the app. -app = rx.App(style=styles.base_style) +app = rx.App() diff --git a/reflex/.templates/apps/sidebar/code/styles.py b/reflex/.templates/apps/sidebar/code/styles.py index 924cc7113..e999c8845 100644 --- a/reflex/.templates/apps/sidebar/code/styles.py +++ b/reflex/.templates/apps/sidebar/code/styles.py @@ -3,8 +3,7 @@ import reflex as rx border_radius = "0.375rem" -box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)" -border = f"1px solid {rx.color('accent', 12)}" +border = f"1px solid {rx.color('gray', 6)}" text_color = rx.color("gray", 11) accent_text_color = rx.color("accent", 10) accent_color = rx.color("accent", 1) @@ -17,7 +16,6 @@ template_page_style = {"padding_top": "5em", "padding_x": ["auto", "2em"], "flex template_content_style = { "align_items": "flex-start", - "box_shadow": box_shadow, "border_radius": border_radius, "padding": "1em", "margin_bottom": "2em", @@ -31,30 +29,17 @@ link_style = { overlapping_button_style = { "background_color": "white", - "border": border, "border_radius": border_radius, } -base_style = { - rx.menu.trigger: { - **overlapping_button_style, - }, - rx.menu.item: hover_accent_bg, -} - markdown_style = { - "code": lambda text: rx.code(text, color=accent_text_color, bg=accent_color), + "code": lambda text: rx.code(text, color_scheme="gray"), + "codeblock": lambda text, **props: rx.code_block(text, **props, margin_y="1em"), "a": lambda text, **props: rx.link( text, **props, font_weight="bold", - color=accent_text_color, text_decoration="underline", text_decoration_color=accent_text_color, - _hover={ - "color": accent_color, - "text_decoration": "underline", - "text_decoration_color": accent_color, - }, ), } diff --git a/reflex/.templates/apps/sidebar/code/templates/template.py b/reflex/.templates/apps/sidebar/code/templates/template.py index 67dc02052..c1c3acf63 100644 --- a/reflex/.templates/apps/sidebar/code/templates/template.py +++ b/reflex/.templates/apps/sidebar/code/templates/template.py @@ -43,12 +43,10 @@ def menu_button() -> rx.Component: return rx.box( rx.menu.root( rx.menu.trigger( - rx.icon( - "menu", - size=36, - color=styles.accent_text_color, - ), - background_color=styles.accent_color, + rx.button( + rx.icon("menu"), + variant="soft", + ) ), rx.menu.content( *[ @@ -61,8 +59,8 @@ def menu_button() -> rx.Component: ), ), position="fixed", - right="1.5em", - top="1.5em", + right="2em", + top="2em", z_index="500", ) @@ -72,11 +70,12 @@ class ThemeState(rx.State): accent_color: str = "crimson" + gray_color: str = "gray" + def template( route: str | None = None, title: str | None = None, - image: str | None = None, description: str | None = None, meta: str | None = None, script_tags: list[rx.Component] | None = None, @@ -87,7 +86,6 @@ def template( Args: route: The route to reach the page. title: The title of the page. - image: The favicon of the page. description: The description of the page. meta: Additionnal meta to add to the page. on_load: The event handler(s) called when the page load. @@ -121,14 +119,13 @@ def template( ), menu_button(), align="start", - transition="left 0.5s, width 0.5s", + background=f"radial-gradient(circle at top right, {rx.color('accent', 2)}, {rx.color('mauve', 1)});", position="relative", ) @rx.page( route=route, title=title, - image=image, description=description, meta=all_meta, script_tags=script_tags, @@ -137,7 +134,9 @@ def template( def theme_wrap(): return rx.theme( templated_page(), + has_background=True, accent_color=ThemeState.accent_color, + gray_color=ThemeState.gray_color, ) return theme_wrap