44
55from reflex .components .component import Component
66from reflex .components .datadisplay .logo import svg_logo
7- from reflex .components .el import a , button , details , div , h2 , hr , p , pre , summary
7+ from reflex .components .el import a , button , div , h2 , hr , p , pre , svg
88from reflex .event import EventHandler , set_clipboard
99from reflex .state import FrontendEventExceptionState
1010from reflex .vars .base import Var
@@ -65,53 +65,67 @@ def create(cls, *children, **props):
6565 div (
6666 div (
6767 div (
68+ svg (
69+ svg .circle (cx = "12" , cy = "12" , r = "10" ),
70+ svg .path (d = "M16 16s-1.5-2-4-2-4 2-4 2" ),
71+ svg .line (x1 = "9" , x2 = "9.01" , y1 = "9" , y2 = "9" ),
72+ svg .line (x1 = "15" , x2 = "15.01" , y1 = "9" , y2 = "9" ),
73+ xmlns = "http://www.w3.org/2000/svg" ,
74+ width = "25vmin" ,
75+ view_box = "0 0 24 24" ,
76+ class_name = "lucide lucide-frown-icon lucide-frown" ,
77+ custom_attrs = {
78+ "fill" : "none" ,
79+ "stroke" : "currentColor" ,
80+ "stroke-width" : "2" ,
81+ "stroke-linecap" : "round" ,
82+ "stroke-linejoin" : "round" ,
83+ },
84+ ),
6885 h2 (
6986 "An error occurred while rendering this page." ,
70- font_size = "1.25rem " ,
87+ font_size = "5vmin " ,
7188 font_weight = "bold" ,
7289 ),
73- p (
74- "This is an error with the application itself." ,
75- opacity = "0.75" ,
76- ),
77- details (
78- summary ("Error message" , padding = "0.5rem" ),
79- div (
80- div (
81- pre (
82- Var (_js_expr = _ERROR_DISPLAY ),
83- ),
84- padding = "0.5rem" ,
85- width = "fit-content" ,
86- ),
87- width = "100%" ,
88- max_height = "50vh" ,
89- overflow = "auto" ,
90- background = "#000" ,
91- color = "#fff" ,
92- border_radius = "0.25rem" ,
93- ),
94- button (
95- "Copy" ,
96- on_click = set_clipboard (
97- Var (_js_expr = _ERROR_DISPLAY )
98- ),
99- padding = "0.35rem 0.75rem" ,
100- margin = "0.5rem" ,
101- background = "#fff" ,
102- color = "#000" ,
103- border = "1px solid #000" ,
104- border_radius = "0.25rem" ,
105- font_weight = "bold" ,
90+ opacity = "0.5" ,
91+ display = "flex" ,
92+ gap = "4vmin" ,
93+ align_items = "center" ,
94+ ),
95+ p (
96+ "This is an error with the application itself. Refreshing the page might help." ,
97+ opacity = "0.75" ,
98+ margin_block = "1rem" ,
99+ ),
100+ div (
101+ div (
102+ pre (
103+ Var (_js_expr = _ERROR_DISPLAY ),
106104 ),
105+ padding = "0.5rem" ,
106+ width = "fit-content" ,
107107 ),
108- display = "flex" ,
109- flex_direction = "column" ,
110- gap = "1rem" ,
111- max_width = "50ch" ,
112- border = "1px solid #888888" ,
113- border_radius = "0.25rem" ,
114- padding = "1rem" ,
108+ width = "100%" ,
109+ background = "color-mix(in srgb, currentColor 5%, transparent)" ,
110+ max_height = "15rem" ,
111+ overflow = "auto" ,
112+ border_radius = "0.4rem" ,
113+ ),
114+ button (
115+ "Copy" ,
116+ on_click = set_clipboard (Var (_js_expr = _ERROR_DISPLAY )),
117+ padding = "0.35rem 1.35rem" ,
118+ margin_block = "0.5rem" ,
119+ margin_inline_start = "auto" ,
120+ background = "color-mix(in srgb, currentColor 15%, transparent)" ,
121+ border_radius = "0.4rem" ,
122+ width = "fit-content" ,
123+ _hover = {
124+ "background" : "color-mix(in srgb, currentColor 25%, transparent)"
125+ },
126+ _active = {
127+ "background" : "color-mix(in srgb, currentColor 35%, transparent)"
128+ },
115129 ),
116130 hr (
117131 border_color = "currentColor" ,
@@ -131,7 +145,10 @@ def create(cls, *children, **props):
131145 ),
132146 display = "flex" ,
133147 flex_direction = "column" ,
134- gap = "1rem" ,
148+ gap = "0.5rem" ,
149+ max_width = "min(80ch, 90vw)" ,
150+ border_radius = "0.25rem" ,
151+ padding = "1rem" ,
135152 ),
136153 height = "100%" ,
137154 width = "100%" ,
0 commit comments