Rework default ui for upload

pynecone/pynecone.py

@@ -0,0 +1,39 @@
+"""Welcome to Reflex! This file outlines the steps to create a basic app."""
+
+import reflex as rx
+
+from rxconfig import config
+
+
+class State(rx.State):
+    """The app state."""
+
+    ...
+
+
+def index() -> rx.Component:
+    # Welcome Page (Index)
+    return rx.container(
+        rx.color_mode.button(position="top-right"),
+        rx.vstack(
+            rx.heading("Welcome to Reflex!", size="9"),
+            rx.text(
+                "Get started by editing ",
+                rx.code(f"{config.app_name}/{config.app_name}.py"),
+                size="5",
+            ),
+            rx.link(
+                rx.button("Check out our docs!"),
+                href="https://reflex.dev/docs/getting-started/introduction/",
+                is_external=True,
+            ),
+            spacing="5",
+            justify="center",
+            min_height="85vh",
+        ),
+        rx.logo(),
+    )
+
+
+app = rx.App()
+app.add_page(index)

reflex/components/core/upload.py

@@ -23,6 +23,8 @@ from reflex.utils.imports import ImportVar
 from reflex.vars import VarData
 from reflex.vars.base import CallableVar, LiteralVar, Var
 from reflex.vars.sequence import LiteralStringVar
+from reflex.components.radix.themes.components.button import button
+from reflex.components.lucide import icon
 
 DEFAULT_UPLOAD_ID: str = "default"
 
@@ -324,9 +326,8 @@ class StyledUpload(Upload):
             The styled upload component.
         """
         # Set default props.
-        props.setdefault("border", "1px dashed var(--accent-12)")
-        props.setdefault("padding", "5em")
-        props.setdefault("textAlign", "center")
+        if not children:
+            children = [button("Upload Files", icon("upload", size=12), align_items="center")]
 
         # Mark the Upload component as used in the app.
         Upload.is_used = True

rxconfig.py

@@ -0,0 +1,5 @@
+import reflex as rx
+
+config = rx.Config(
+    app_name="pynecone",
+)