From 5c6a800b62e9d3f3eab4a25cf7635ae9847f884d Mon Sep 17 00:00:00 2001
From: Nikhil Rao <nikhil@reflex.dev>
Date: Tue, 13 Feb 2024 06:20:36 +0700
Subject: [PATCH] Update styles for progress (#2570)

---
 reflex/components/radix/primitives/progress.py  | 15 +++++++++------
 reflex/components/radix/primitives/progress.pyi |  1 +
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/reflex/components/radix/primitives/progress.py b/reflex/components/radix/primitives/progress.py
index eed28c651..486ad2148 100644
--- a/reflex/components/radix/primitives/progress.py
+++ b/reflex/components/radix/primitives/progress.py
@@ -6,6 +6,7 @@ from types import SimpleNamespace
 from typing import Optional
 
 from reflex.components.component import Component
+from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
 from reflex.style import Style
 from reflex.vars import Var
@@ -34,10 +35,11 @@ class ProgressRoot(ProgressComponent):
             {
                 "position": "relative",
                 "overflow": "hidden",
-                "background": "black",
+                "background": "var(--gray-a3)",
                 "border_radius": "99999px",
-                "width": "300px",
-                "height": "25px",
+                "width": "100%",
+                "height": "20px",
+                "boxShadow": "inset 0 0 0 1px var(--gray-a5)",
                 **self.style,
             }
         )
@@ -56,14 +58,15 @@ class ProgressIndicator(ProgressComponent):
     def _apply_theme(self, theme: Component):
         self.style = Style(
             {
-                "background-color": "white",
+                "background-color": "var(--accent-9)",
                 "width": "100%",
                 "height": "100%",
-                "transition": f"transform 660ms linear",
+                f"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
                 "&[data_state='loading']": {
-                    "transition": f"transform 660ms linear",
+                    "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
                 },
                 "transform": f"translateX(-{100 - self.value}%)",  # type: ignore
+                "boxShadow": "inset 0 0 0 1px var(--gray-a5)",
             }
         )
 
diff --git a/reflex/components/radix/primitives/progress.pyi b/reflex/components/radix/primitives/progress.pyi
index e34a297d3..bc4a82b3c 100644
--- a/reflex/components/radix/primitives/progress.pyi
+++ b/reflex/components/radix/primitives/progress.pyi
@@ -10,6 +10,7 @@ from reflex.style import Style
 from types import SimpleNamespace
 from typing import Optional
 from reflex.components.component import Component
+from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
 from reflex.style import Style
 from reflex.vars import Var