Update disabled backend component (#4747)

* Update disabled backend component

* fix test message

* it's ruff out there

---------

Co-authored-by: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>

reflex/components/core/banner.py

@@ -7,7 +7,6 @@ from typing import Optional
 from reflex import constants
 from reflex.components.component import Component
 from reflex.components.core.cond import cond
-from reflex.components.datadisplay.logo import svg_logo
 from reflex.components.el.elements.typography import Div
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.themes.components.dialog import (
@@ -330,36 +329,113 @@ class BackendDisabled(Div):
             rx.cond(
                 is_backend_disabled,
                 rx.box(
+                    rx.el.link(
+                        rel="preconnect",
+                        href="https://fonts.googleapis.com",
+                    ),
+                    rx.el.link(
+                        rel="preconnect",
+                        href="https://fonts.gstatic.com",
+                        crossorigin="",
+                    ),
+                    rx.el.link(
+                        href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,500;0,600&display=swap",
+                        rel="stylesheet",
+                    ),
                     rx.box(
-                        rx.card(
-                            rx.vstack(
-                                svg_logo(),
-                                rx.text(
-                                    "You ran out of compute credits.",
+                        rx.vstack(
+                            rx.text(
+                                "This app is paused",
+                                font_size="1.5rem",
+                                font_weight="600",
+                                line_height="1.25rem",
+                                letter_spacing="-0.0375rem",
+                            ),
+                            rx.hstack(
+                                rx.el.svg(
+                                    rx.el.svg.path(
+                                        d="M6.90816 1.34341C7.61776 1.10786 8.38256 1.10786 9.09216 1.34341C9.7989 1.57799 10.3538 2.13435 10.9112 2.91605C11.4668 3.69515 12.0807 4.78145 12.872 6.18175L12.9031 6.23672C13.6946 7.63721 14.3085 8.72348 14.6911 9.60441C15.0755 10.4896 15.267 11.2539 15.1142 11.9881C14.9604 12.7275 14.5811 13.3997 14.0287 13.9079C13.4776 14.4147 12.7273 14.6286 11.7826 14.7313C10.8432 14.8334 9.6143 14.8334 8.0327 14.8334H7.9677C6.38604 14.8334 5.15719 14.8334 4.21778 14.7313C3.27301 14.6286 2.52269 14.4147 1.97164 13.9079C1.41924 13.3997 1.03995 12.7275 0.88613 11.9881C0.733363 11.2539 0.92483 10.4896 1.30926 9.60441C1.69184 8.72348 2.30573 7.63721 3.09722 6.23671L3.12828 6.18175C3.91964 4.78146 4.53355 3.69515 5.08914 2.91605C5.64658 2.13435 6.20146 1.57799 6.90816 1.34341ZM7.3335 11.3334C7.3335 10.9652 7.63063 10.6667 7.99716 10.6667H8.00316C8.3697 10.6667 8.66683 10.9652 8.66683 11.3334C8.66683 11.7016 8.3697 12.0001 8.00316 12.0001H7.99716C7.63063 12.0001 7.3335 11.7016 7.3335 11.3334ZM7.3335 8.66675C7.3335 9.03495 7.63196 9.33341 8.00016 9.33341C8.36836 9.33341 8.66683 9.03495 8.66683 8.66675V6.00008C8.66683 5.63189 8.36836 5.33341 8.00016 5.33341C7.63196 5.33341 7.3335 5.63189 7.3335 6.00008V8.66675Z",
+                                        fill_rule="evenodd",
+                                        clip_rule="evenodd",
+                                        fill=rx.color("amber", 11),
+                                    ),
+                                    width="16",
+                                    height="16",
+                                    viewBox="0 0 16 16",
+                                    fill="none",
+                                    xmlns="http://www.w3.org/2000/svg",
+                                    margin_top="0.125rem",
+                                    flex_shrink="0",
                                 ),
-                                rx.callout(
-                                    rx.fragment(
-                                        "Please upgrade your plan or raise your compute credits at ",
-                                        rx.link(
-                                            "Reflex Cloud.",
-                                            href="https://cloud.reflex.dev/",
-                                        ),
+                                rx.text(
+                                    "If you are the owner of this app, visit ",
+                                    rx.link(
+                                        "Reflex Cloud",
+                                        color=rx.color("amber", 11),
+                                        underline="always",
+                                        _hover={
+                                            "color": rx.color("amber", 11),
+                                            "text_decoration_color": rx.color(
+                                                "amber", 11
+                                            ),
+                                        },
+                                        text_decoration_color=rx.color("amber", 10),
+                                        href="https://cloud.reflex.dev/",
+                                        font_weight="600",
+                                        is_external=True,
                                     ),
+                                    " for more information on how to resume your app.",
+                                    font_size="0.875rem",
+                                    font_weight="500",
+                                    line_height="1.25rem",
+                                    letter_spacing="-0.01094rem",
+                                    color=rx.color("amber", 11),
+                                ),
+                                align="start",
+                                gap="0.625rem",
+                                border_radius="0.75rem",
+                                border_width="1px",
+                                border_color=rx.color("amber", 5),
+                                background_color=rx.color("amber", 3),
+                                padding="0.625rem",
+                            ),
+                            rx.link(
+                                rx.el.button(
+                                    "Resume app",
+                                    color="rgba(252, 252, 253, 1)",
+                                    font_size="0.875rem",
+                                    font_weight="600",
+                                    line_height="1.25rem",
+                                    letter_spacing="-0.01094rem",
+                                    height="2.5rem",
+                                    padding="0rem 0.75rem",
                                     width="100%",
-                                    icon="info",
-                                    variant="surface",
+                                    border_radius="0.75rem",
+                                    background=f"linear-gradient(180deg, {rx.color('violet', 9)} 0%, {rx.color('violet', 10)} 100%)",
+                                    _hover={
+                                        "background": f"linear-gradient(180deg, {rx.color('violet', 10)} 0%, {rx.color('violet', 10)} 100%)",
+                                    },
                                 ),
+                                width="100%",
+                                underline="none",
+                                href="https://cloud.reflex.dev/",
+                                is_external=True,
                             ),
-                            font_size="20px",
-                            font_family='"Inter", "Helvetica", "Arial", sans-serif',
-                            variant="classic",
+                            gap="1rem",
                         ),
+                        font_family='"Instrument Sans", "Helvetica", "Arial", sans-serif',
                         position="fixed",
                         top="50%",
                         left="50%",
                         transform="translate(-50%, -50%)",
-                        width="40ch",
+                        width="60ch",
                         max_width="90vw",
+                        border_radius="0.75rem",
+                        border_width="1px",
+                        border_color=rx.color("slate", 4),
+                        padding="1.5rem",
+                        background_color=rx.color("slate", 1),
+                        box_shadow="0px 2px 5px 0px light-dark(rgba(28, 32, 36, 0.03), rgba(0, 0, 0, 0.00))",
                     ),
                     position="fixed",
                     z_index=9999,

tests/integration/test_connection_banner.py

@@ -119,9 +119,7 @@ def has_cloud_banner(driver: WebDriver) -> bool:
         True if the banner is displayed, False otherwise.
     """
     try:
-        driver.find_element(
-            By.XPATH, "//*[ contains(text(), 'You ran out of compute credits.') ]"
-        )
+        driver.find_element(By.XPATH, "//*[ contains(text(), 'This app is paused') ]")
     except NoSuchElementException:
         return False
     else: