feat: PreviewChallengeView styling

src/components/ui/progress/Progress.vue

@@ -10,6 +10,7 @@ const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
   class: { type: null, required: false },
+  textLabel: { type: String, default: "" },
 });
 
 const delegatedProps = computed(() => {
@@ -24,13 +25,18 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'relative h-4 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800',
+        'relative h-4 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800 border-solid border-2 border-slate-300',
         props.class
       )
     "
   >
+    <div
+      class="absolute inset-0 flex items-center justify-center font-medium text-2xl z-50 text-black"
+    >
+      <strong>{{ textLabel }}</strong>
+    </div>
     <ProgressIndicator
-      class="rounded-full h-full w-full flex-1 bg-secondary transition-all dark:bg-slate-50"
+      class="rounded-full h-full w-full flex-1 bg-primary-dark transition-all dark:bg-slate-50"
       :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
     />
   </ProgressRoot>