Patched (minor) site issue: scaling + UI

buridan_ui/buridan_ui.py

@@ -22,6 +22,7 @@
         rx.heading: {"font_family": "inter"},
         rx.text: {"font_family": "inter"},
     },
+    theme=rx.theme(scaling="95%", accent_color="blue"),
 )
 
 
@@ -56,7 +57,7 @@ def export_page() -> callable:
     # ... ex: working with X item Y -> set the ENV data as such:
     ENV = {
         "path": "/pantry/featured",
-        "name": "",
+        "name": "Featured",
         "dir": "featured",
         "config": pantry_exports_config,
     }

buridan_ui/pages/landing/features/feature.py

@@ -60,7 +60,7 @@
 )
 
 feature_item_description: Callable[[str], rx.Component] = lambda description: rx.hstack(
-    rx.text(description, weight="medium", size="3", color=rx.color("slate", 11))
+    rx.text(description, weight="medium", size="1", color=rx.color("slate", 11))
 )
 
 

buridan_ui/pages/landing/hero.py

@@ -114,20 +114,20 @@ def landing_page() -> rx.vstack:
                         button_with_key(
                             "github",
                             "X",
-                            "Reflex GitHub Page",
+                            "Reflex GitHub",
                             "surface",
                             rx.redirect("https://github.com/reflex-dev/reflex"),
                         ),
                         width="100%",
-                        max_width="30em",
+                        max_width="25em",
                         display="grid",
                         grid_template_columns=[
                             f"repeat({i}, minmax(0, 1fr))" for i in [1, 1, 2, 2, 2, 2]
                         ],
                     ),
                 ],
             ),
-            rx.divider(height="5em", opacity="0"),
+            rx.divider(height="8em", opacity="0"),
             footer(),
             rx.divider(height="2em", opacity="0"),
             **LandingPageStyle.content,

buridan_ui/pages/landing/items/credits.py

@@ -10,8 +10,8 @@ class CreditBannerStyle:
             "width": "100%",
             "justify": "center",
             "wrap": "wrap",
+            "padding": "0.5em",
             "bg": rx.color("blue", 3),
-            "padding": "14px",
             "border_top": f"1.5px solid {rx.color('blue')}",
             "border_bottom": f"1.5px solid {rx.color('blue')}",
         }

buridan_ui/pages/landing/items/pantry.py

@@ -8,9 +8,9 @@ def landing_page_pantry_items():
         *export_thumbnail,
         width="100%",
         display="grid",
-        gap="2rem",
+        gap="1em",
         grid_template_columns=[
-            f"repeat({i}, minmax(0, 1fr))" for i in [1, 2, 2, 2, 4, 4]
+            f"repeat({i}, minmax(0, 1fr))" for i in [1, 2, 2, 4, 4, 4]
         ],
         height="90vh",
         overflow="hidden",

buridan_ui/routes/routes.py

@@ -33,8 +33,6 @@ class Routes:
 
     interactive: List[Dict[str, str]] = field(
         default_factory=lambda: [
-            # ... dashboard may be removed in future
-            # {"name": "Dashboard", "path": "/interactive/dashboard", "is_beta": True},
             {
                 "name": "RAG Application",
                 "path": "/interactive/retrieval-augmented-generation",

buridan_ui/states/routing.py

@@ -1,6 +1,6 @@
 import asyncio
 import reflex as rx
-from reflex.constants.colors import Color
+from typing import Dict, List
 
 from ..routes.routes import (
     GettingStartedRoutes,
@@ -12,31 +12,41 @@
 )
 
 
-active: dict[str, Color] = {"color": rx.color("blue", 9)}
-passive: dict[str, Color] = {"color": rx.color("slate", 11)}
+active: Dict[str, str] = {
+    "border_left": f"2px solid {rx.color('blue')}",
+    "background": rx.color("blue", 3),
+}
+passive: Dict[str, str] = {
+    "border_left": f"1px solid {rx.color('gray', 6)}",
+    "background": "none",
+}
 
 
 class SiteRoutingState(rx.State):
-    NavigationRoutes: list[dict[str, str]] = [
+    NavigationRoutes: List[Dict[str, str]] = [
         {**route, **passive} for route in NavigationRoutes
     ]
-    GettingStartedRoutes: list[dict[str, str]] = [
+    GettingStartedRoutes: List[Dict[str, str]] = [
         {**route, **passive} for route in GettingStartedRoutes
     ]
-    InteractiveRoutes: list[dict[str, str]] = [
+    InteractiveRoutes: List[Dict[str, str]] = [
         {**route, **passive} for route in InteractiveRoutes
     ]
-    ChartRoutes: list[dict[str, str]] = [{**route, **passive} for route in ChartRoutes]
-    PantryRoutes: list[dict[str, str]] = [
+    ChartRoutes: List[Dict[str, str]] = [{**route, **passive} for route in ChartRoutes]
+    PantryRoutes: List[Dict[str, str]] = [
         {**route, **passive} for route in PantryRoutes
     ]
-    ResourcesRoutes: list[dict[str, str]] = [
+    ResourcesRoutes: List[Dict[str, str]] = [
         {**route, **passive} for route in ResourcesRoutes
     ]
 
     current_page: str
 
-    async def toggle_page_change(self, data: dict[str, str]):
+    on_page: str
+    on_page_item: str
+
+    @rx.event
+    async def toggle_page_change(self, data: Dict[str, str]) -> rx.event.redirect:
         if data is not None:
             # Special handling for Home path
             if data["path"] == "/":
@@ -45,6 +55,9 @@ async def toggle_page_change(self, data: dict[str, str]):
                 # Otherwise, extract the first part of the path for other routes
                 self.current_page = data["path"].strip("/").split("/")[0]
 
+                self.on_page = self.current_page.capitalize()
+                self.on_page_item = data["path"].strip("/").split("/")[1].capitalize()
+
             # Update the menu for all routes
             results = await asyncio.gather(
                 self.update_menu_link(self.GettingStartedRoutes, data),
@@ -61,25 +74,30 @@ async def toggle_page_change(self, data: dict[str, str]):
 
     async def update_menu_link(
         self,
-        menu: list[dict[str, str]],
-        item: dict[str, str],
-    ):
+        menu: List[Dict[str, str]],
+        item: Dict[str, str],
+    ) -> None:
         # Loop through each route and update its color
         for index in menu:
             if index["path"] == item["path"]:
                 if item["path"] == "/":  # Special case for the Home route
                     self.current_page = "home"
-                index["color"] = active["color"]
+                index["border_left"] = active["border_left"]
+                index["background"] = active["background"]
             else:
-                index["color"] = passive["color"]
+                index["border_left"] = passive["border_left"]
+                index["background"] = passive["background"]
 
-    async def update_navigation_route(self):
+    async def update_navigation_route(self) -> None:
         # Loop through the navigation routes to highlight the active page
         for index in self.NavigationRoutes:
             # Check if the current page is part of the route path
             if index["path"] == "/" and self.current_page == "home":
-                index["color"] = active["color"]
+                index["border_left"] = active["border_left"]
+                index["background"] = active["background"]
             elif index["path"].startswith(f"/{self.current_page}"):
-                index["color"] = active["color"]
+                index["border_left"] = active["border_left"]
+                index["background"] = active["background"]
             else:
-                index["color"] = passive["color"]
+                index["border_left"] = passive["border_left"]
+                index["background"] = passive["background"]

buridan_ui/templates/footer/footer.py

@@ -9,12 +9,7 @@ def item(data):
         return rx.hstack(
             rx.link(
                 rx.text(
-                    data["name"],
-                    size="2",
-                    weight="medium",
-                    color=data["color"],
-                    _hover={"color": rx.color("slate", 12)},
-                    transition="color 350ms ease",
+                    data["name"], size="1", weight="bold", color=rx.color("slate", 12)
                 ),
                 href=data["path"],
                 text_decoration="none",
@@ -34,10 +29,11 @@ def item(data):
         )
 
     return rx.vstack(
-        rx.text(title, weight="bold", size="3"),
+        rx.text(title, weight="bold", size="1", color=rx.color("gray", 11)),
         rx.hstack(rx.foreach(routes, item), **FooterStyle.footer_item),
         width="100%",
         padding="0.5em 0em",
+        spacing="2",
     )
 
 
@@ -52,11 +48,15 @@ def footer():
         create_footer_item("Resources", SiteRoutingState.ResourcesRoutes),
         rx.divider(height="2em", opacity="0"),
         rx.vstack(
-            rx.heading("buridan/ui", size="5", font_weight="900"),
+            rx.heading("buridan/ui", size="3", font_weight="900"),
             rx.text(
-                "© 2024 Ahmad Hakim. All rights reserved.", size="2", weight="bold"
+                "© 2024 Ahmad Hakim. All rights reserved.",
+                size="1",
+                weight="bold",
+                color=rx.color("gray", 11),
             ),
             width="100%",
+            spacing="2",
         ),
         **FooterStyle.base,
     )
@@ -65,10 +65,14 @@ def footer():
 def desktop_footer():
     return rx.vstack(
         rx.vstack(
-            rx.heading("buridan/ui", size="5", font_weight="900"),
+            rx.heading("buridan/ui", size="3", font_weight="900"),
             rx.text(
-                "© 2024 Ahmad Hakim. All rights reserved.", size="2", weight="bold"
+                "© 2024 Ahmad Hakim. All rights reserved.",
+                size="1",
+                weight="bold",
+                color=rx.color("gray", 11),
             ),
+            spacing="2",
             width="100%",
         ),
         **FooterStyle.base,

buridan_ui/wrappers/base.py

@@ -11,7 +11,7 @@
 from ..templates.sidemenu.sidemenu import sidemenu
 from ..templates.footer.footer import footer, desktop_footer
 from ..templates.wrapper.wrapper import base_header_wrapper
-from ..templates.navigation.navigation import navigation
+from ..templates.navigation.navigation import navigation, docs_navigation
 from ..templates.drawer.drawer import drawer
 
 
@@ -31,7 +31,8 @@ def template(*args, **kwargs):
             contents = content(*args, **kwargs)
             return rx.vstack(
                 drawer(),
-                navigation(),
+                # navigation(),
+                docs_navigation(),
                 rx.hstack(
                     sidemenu(),
                     rx.vstack(

buridan_ui/wrappers/component/utils/responsive.py

@@ -3,7 +3,7 @@
 from ..state import ComponentWrapperState
 from .style import ComponentWrapperUtilStyle
 
-IconMap = {"100%": "laptop", "60%": "tablet", "30%": "smartphone"}
+IconMap = {"100%": "monitor", "60%": "tablet", "30%": "smartphone"}
 PaddingMap = {0: "10px 0px 0px 10px", 1: "0px", 2: "0px 10px 10px 0px"}
 
 
@@ -13,7 +13,7 @@ def _(index: int, icon: str, resize: str, idd: int):
             rx.button(
                 rx.icon(
                     tag=icon,
-                    size=18,
+                    size=14,
                     color=rx.color("slate", 11),
                 ),
                 border_radius=PaddingMap[index],