optimize images and other things

docs/styling/custom-stylesheets.md

@@ -137,12 +137,12 @@ This package is included in the default Reflex installation, so you typically do
 
 You can take advantage of Reflex's support for custom stylesheets to add custom fonts to your app.
 
-In this example, we will use the [IBM Plex Mono]({"https://fonts.google.com/specimen/IBM+Plex+Mono"}) font from Google Fonts. First, add the stylesheet with the font to your app. You can get this link from the "Get embed code" section of the Google font page.
+In this example, we will use the [JetBrains Mono]({"https://fonts.google.com/specimen/JetBrains+Mono"}) font from Google Fonts. First, add the stylesheet with the font to your app. You can get this link from the "Get embed code" section of the Google font page.
 
 ```python
 app = rx.App(
     stylesheets=[
-        "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap",
+        "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap",
     ],
 )
 ```
@@ -152,7 +152,7 @@ Then you can use the font in your component by setting the `font_family` prop.
 ```python demo
 rx.text(
     "Check out my font",
-    font_family="IBM Plex Mono",
+    font_family="JetBrains Mono",
     font_size="1.5em",
 )
 ```

pcweb/components/code_card.py

@@ -1,7 +1,7 @@
 import reflex as rx
+import reflex_ui as ui
 from reflex.experimental.client_state import ClientStateVar
 
-from pcweb.components.icons.hugeicons import hi
 from pcweb.components.icons.icons import get_icon
 
 
@@ -14,12 +14,12 @@ def install_command(
     return rx.el.button(
         rx.cond(
             copied.value,
-            hi(
-                "tick-02",
+            ui.icon(
+                "Tick02Icon",
                 size=14,
                 class_name="ml-[5px] shrink-0",
             ),
-            hi("copy-01", size=14, class_name="shrink-0 ml-[5px]"),
+            ui.icon("Copy01Icon", size=14, class_name="shrink-0 ml-[5px]"),
         ),
         rx.text(
             rx.cond(

pcweb/components/docpage/navbar/buttons/sidebar.py

@@ -154,6 +154,7 @@ def navbar_sidebar_button() -> rx.Component:
                     },
                     class_name="!text-slate-9 shrink-0",
                 ),
+                custom_attrs={"aria-label": "Open sidebar"},
             ),
         ),
         class_name="flex justify-center items-center size-8",

pcweb/components/docpage/navbar/navbar.py

@@ -25,10 +25,10 @@
 def resource_item(text: str, url: str, icon: str, index):
     return rx.el.a(
         rx.box(
-            ui.icon(icon, size=16, class_name="flex-shrink-0 text-slate-9"),
+            ui.icon(icon, size=16, class_name="flex-shrink-0 text-secondary-11"),
             rx.text(
                 text,
-                class_name="font-small text-slate-9 truncate text-start w-[150px]",
+                class_name="font-small text-secondary-11 truncate text-start w-[150px]",
             ),
             rx.icon(
                 tag="chevron_right",
@@ -38,7 +38,7 @@ def resource_item(text: str, url: str, icon: str, index):
             ),
             class_name="flex flex-row flex-nowrap items-center gap-4 hover:bg-secondary-3 px-[1.125rem] py-2 rounded-md w-full transition-colors",
         ),
-        class_name="w-full text-slate-9 hover:text-slate-9",
+        class_name="w-full text-secondary-11 hover:text-secondary-11",
         to=url,
         on_click=SidebarState.set_sidebar_index(index),
     )
@@ -104,7 +104,7 @@ def blog_section_item(date: str, title: str, url: str) -> rx.Component:
             rx.moment(
                 date,
                 format="MMM DD, YYYY",
-                class_name="font-medium font-size-[0.8125rem] text-slate-9 truncate leading-[1.25rem] tracking-[-0.01013rem]",
+                class_name="font-medium font-size-[0.8125rem] text-secondary-11 truncate leading-[1.25rem] tracking-[-0.01013rem]",
             ),
             rx.box(
                 rx.text(
@@ -167,7 +167,7 @@ def blog_section() -> rx.Component:
                         rx.box(
                             rx.text(
                                 "View all",
-                                class_name="font-small text-slate-9 truncate",
+                                class_name="font-small text-secondary-11 truncate",
                             ),
                             rx.icon(
                                 tag="chevron-right",
@@ -218,12 +218,12 @@ def grid_card(
         rx.box(
             rx.text(title, class_name="text-slate-12 text-base font-semibold"),
             rx.el.button(
-                rx.icon("chevron-right", class_name="text-slate-9 size-4"),
+                rx.icon("chevron-right", class_name="text-secondary-11 size-4"),
                 class_name="size-6 group-hover:bg-secondary-3 transition-colors rounded-md flex items-center justify-center",
             ),
             class_name="flex flex-row items-center gap-2 justify-between",
         ),
-        rx.text(description, class_name="text-slate-9 text-sm font-medium"),
+        rx.text(description, class_name="text-secondary-11 text-sm font-medium"),
         rx.image(
             src=image,
             class_name=image_style,
@@ -238,12 +238,12 @@ def grid_card_unique(title: str, description: str, url: str, component) -> rx.Co
         rx.box(
             rx.text(title, class_name="text-slate-12 text-base font-semibold"),
             rx.el.button(
-                rx.icon("chevron-right", class_name="text-slate-9 size-4"),
+                rx.icon("chevron-right", class_name="text-secondary-11 size-4"),
                 class_name="size-6 group-hover:bg-slate-3 transition-bg rounded-md flex items-center justify-center",
             ),
             class_name="flex flex-row items-center gap-2 justify-between",
         ),
-        rx.text(description, class_name="text-slate-9 text-sm font-medium"),
+        rx.text(description, class_name="text-secondary-11 text-sm font-medium"),
         component,
         href=url,
         is_external=True,
@@ -359,6 +359,7 @@ def new_menu_trigger(
             rx.icon(
                 "chevron-down",
                 class_name="chevron size-5 !text-secondary-11 group-hover:!text-secondary-12 py-1 mr-0 transition-all ease-out",
+                aria_hidden="true",
             ),
             class_name="flex-row items-center gap-x-1 group user-select-none cursor-pointer xl:flex hidden",
             on_click=rx.stop_propagation,
@@ -368,6 +369,7 @@ def new_menu_trigger(
                 "transform": "rotate(180deg)",
             },
         },
+        aria_label=f"{title} menu",
         unstyled=True,
     )
 
@@ -449,7 +451,7 @@ def new_component_section() -> rx.Component:
                 rx.State.router.page.path.contains("docs")
                 | rx.State.router.page.path.contains("ai-builder")
                 | rx.State.router.page.path.contains("cloud"),
-                rx.el.div(
+                ui.navigation_menu.list(
                     ui.navigation_menu.item(
                         render_=link_item(
                             "AI Builder",
@@ -475,7 +477,7 @@ def new_component_section() -> rx.Component:
                     ),
                     class_name="xl:flex hidden flex-row items-center gap-0 lg:gap-5 2xl:gap-7 m-0 h-full list-none",
                 ),
-                rx.el.div(
+                ui.navigation_menu.list(
                     ui.navigation_menu.item(
                         render_=link_item(
                             "AI Builder",
@@ -528,6 +530,7 @@ def new_component_section() -> rx.Component:
                 unstyled=True,
             ),
             class_name="flex flex-row items-center gap-0 lg:gap-5 2xl:gap-7 m-0 h-full list-none",
+            custom_attrs={"role": "menubar"},
         ),
         ui.navigation_menu.list(
             ui.navigation_menu.item(search_bar()),
@@ -565,6 +568,7 @@ def new_component_section() -> rx.Component:
                 unstyled=True,
             ),
             class_name="flex flex-row gap-2 m-0 h-full list-none items-center",
+            custom_attrs={"role": "menubar"},
         ),
         ui.navigation_menu.portal(
             ui.navigation_menu.positioner(

pcweb/components/docpage/navbar/typesense.py

@@ -333,6 +333,8 @@ def search_trigger() -> rx.Component:
         variant="outline",
         size="sm",
         class_name="md:w-full text-secondary-11",
+        id="search-trigger",
+        custom_attrs={"aria-label": "Search documentation"},
     )