Update sidebar template (#2959)

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.button(
-                rx.image(
+                rx.icon("github"),
-                    src="/github.svg",
+                color_scheme="gray",
-                    height="3em",
+                variant="soft",
-                    padding="0.5em",
-                ),
-                box_shadow=styles.box_shadow,
-                bg="transparent",
-                border_radius=styles.border_radius,
-                _hover={
-                    "bg": styles.accent_color,
-                },
             ),
             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()

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.
 

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"),

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()

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('gray', 6)}"
-border = f"1px solid {rx.color('accent', 12)}"
 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,
-        },
     ),
 }

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(
+                rx.button(
-                    "menu",
+                    rx.icon("menu"),
-                    size=36,
+                    variant="soft",
-                    color=styles.accent_text_color,
+                )
-                ),
-                background_color=styles.accent_color,
             ),
             rx.menu.content(
                 *[
@@ -61,8 +59,8 @@ def menu_button() -> rx.Component:
             ),
         ),
         position="fixed",
-        right="1.5em",
+        right="2em",
-        top="1.5em",
+        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