Align progress bar with design guide

Author: buberdds

src/components/progress/index.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react'
+import { Progress as BaseProgress } from '../ui/progress'
+import { cn } from '../../lib/utils'
+
+export const Progress = ({ className, ...props }: React.ComponentProps<typeof BaseProgress>) => {
+  return <BaseProgress className={cn('h-4 bg-secondary', className)} {...props} />
+}

src/stories/Progress/Progress.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj } from '@storybook/react-vite'
-import { Progress } from '../../components/ui/progress.tsx'
+import { Progress } from '../../components/progress'
 import { expect, within } from 'storybook/test'
 
 const meta = {

src/styles/global.css

@@ -54,7 +54,7 @@
   --card-foreground: hsl(0 0% 98%);
   --popover: hsl(240 10% 4%);
   --popover-foreground: hsl(0 0% 98%);
-  --primary: hsl(209 100% 81%);
+  --primary: hsl(180 100% 50.59%);
   --primary-foreground: hsl(240 10% 4%);
   --secondary: hsl(240 4% 16%);
   --secondary-foreground: hsl(0 0% 98%);