From 8a95b050eb05426799478598a2d9aa1108a11b7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 9 Mar 2026 22:56:40 +0100
Subject: [PATCH] nicolium: migrate progress bar component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../src/components/ui/progress-bar.tsx        |  7 +------
 .../nicolium/src/styles/new/components.scss   | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/nicolium/src/components/ui/progress-bar.tsx b/packages/nicolium/src/components/ui/progress-bar.tsx
index 524e87b97..89c959511 100644
--- a/packages/nicolium/src/components/ui/progress-bar.tsx
+++ b/packages/nicolium/src/components/ui/progress-bar.tsx
@@ -23,12 +23,7 @@ const ProgressBar: React.FC<IProgressBar> = ({ progress, size = 'md' }) => {
   });
 
   return (
-    <div
-      className={clsx('h-2.5 w-full overflow-hidden rounded-lg bg-gray-300 dark:bg-primary-800', {
-        'h-2.5': size === 'md',
-        'h-[6px]': size === 'sm',
-      })}
-    >
+    <div className={clsx('⁂-progress-bar', { '⁂-progress-bar--sm': size === 'sm' })}>
       <animated.div className='h-full bg-secondary-500' style={styles} />
     </div>
   );
diff --git a/packages/nicolium/src/styles/new/components.scss b/packages/nicolium/src/styles/new/components.scss
index c0b3bfd95..df22b0cbf 100644
--- a/packages/nicolium/src/styles/new/components.scss
+++ b/packages/nicolium/src/styles/new/components.scss
@@ -1211,3 +1211,24 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
   padding: 0.25rem;
   color: white;
 }
+
+.⁂-progress-bar {
+  height: 0.625rem;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  background-color: rgb(var(--color-gray-300));
+
+  .dark & {
+    background-color: rgb(var(--color-primary-800));
+  }
+
+  &--sm {
+    height: 6px;
+  }
+
+  > div {
+    height: 100%;
+    background-color: rgb(var(--color-secondary-500));
+  }
+}