From e7c7ec2d7dd60c403accd3a15a2f1e197dd28e1f Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 8 Jul 2025 14:45:36 -0600
Subject: [PATCH] Update minor cosmetic changes

---
 .../features/sheets/MessageAssumptions.tsx    | 23 ++++++---
 .../src/components/ui/pills/Pill.stories.tsx  | 50 +++++++++++++++++++
 apps/web/src/components/ui/pills/Pill.tsx     | 25 +++++++---
 3 files changed, 83 insertions(+), 15 deletions(-)
 create mode 100644 apps/web/src/components/ui/pills/Pill.stories.tsx

diff --git a/apps/web/src/components/features/sheets/MessageAssumptions.tsx b/apps/web/src/components/features/sheets/MessageAssumptions.tsx
index 16c8210a7..e54e4482f 100644
--- a/apps/web/src/components/features/sheets/MessageAssumptions.tsx
+++ b/apps/web/src/components/features/sheets/MessageAssumptions.tsx
@@ -12,7 +12,7 @@ import {
   assumptionLabelTranslations
 } from '@/lib/messages/confidence-translations';
 import { ArrowUpRight } from '@/components/ui/icons';
-import { CircleCheck, CircleWarning, OctagonWarning } from '@/components/ui/icons/NucleoIconFilled';
+import { CircleCheck, OctagonWarning } from '@/components/ui/icons/NucleoIconFilled';
 import { Pill } from '@/components/ui/pills/Pill';
 import { cn } from '@/lib/classMerge';
 
@@ -162,7 +162,9 @@ const AssumptionSummary = ({
           {summary_title}
         </Title>
       </div>
-      <Paragraph className="mt-2">{summary_message}</Paragraph>
+      <Paragraph className="mt-2" variant={'secondary'}>
+        {summary_message}
+      </Paragraph>
 
       <Button
         onClick={onClickAskDataTeam}
@@ -178,7 +180,7 @@ const AssumptionSummary = ({
 const ConfidenceIndicator = ({ confidence_score }: { confidence_score: ConfidenceScore }) => {
   const variant: ButtonProps['variant'] = confidence_score === 'high' ? 'success' : 'danger';
   const label = confidenceTranslations[confidence_score];
-  const icon = confidence_score === 'high' ? <CircleCheck /> : <CircleWarning />;
+  const icon = confidence_score === 'high' ? <CircleCheck /> : <OctagonWarning />;
 
   return (
     <div className="flex flex-col gap-y-0.5">
@@ -243,10 +245,12 @@ const AssumptionList = React.memo(
     return (
       <div className="flex flex-col gap-y-4">
         <div className="flex flex-col gap-y-0.5">
-          <Text variant="secondary" size={'sm'}>
+          <Title as={'h4'} className="text-lg">
             {title}
-          </Text>
-          <Paragraph className="mt-2">{description}</Paragraph>
+          </Title>
+          <Paragraph className="mt-2" variant={'secondary'}>
+            {description}
+          </Paragraph>
         </div>
 
         <div className="flex flex-col gap-y-3">
@@ -278,6 +282,7 @@ const AssumptionCard = ({
   const explanation = assumption.explanation;
   const classification = assumptionClassificationTranslations[assumption.classification];
   const label = assumptionLabelTranslations[assumption.label];
+  const isMajor = assumption.label === 'major';
 
   return (
     <div className="flex flex-col rounded border shadow">
@@ -285,12 +290,14 @@ const AssumptionCard = ({
         <Title as={'h4'} className="text-base">
           {title}
         </Title>
-        <Paragraph size={'sm'}>{explanation}</Paragraph>
+        <Paragraph size={'sm'} variant={'secondary'}>
+          {explanation}
+        </Paragraph>
       </div>
 
       <div className="flex items-center justify-between border-t px-3.5 py-2">
         <Text variant="secondary">{classification}</Text>
-        <Pill>{label}</Pill>
+        <Pill variant={isMajor ? 'danger' : 'gray'}>{label}</Pill>
       </div>
     </div>
   );
diff --git a/apps/web/src/components/ui/pills/Pill.stories.tsx b/apps/web/src/components/ui/pills/Pill.stories.tsx
new file mode 100644
index 000000000..a36dabfac
--- /dev/null
+++ b/apps/web/src/components/ui/pills/Pill.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Pill } from './Pill';
+
+const meta: Meta<typeof Pill> = {
+  title: 'UI/pills/Pill',
+  component: Pill,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['gray', 'danger', 'success'],
+      description: 'The visual variant of the pill'
+    },
+    children: {
+      control: { type: 'text' },
+      description: 'The content of the pill'
+    },
+    className: {
+      control: { type: 'text' },
+      description: 'Additional CSS classes'
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Gray: Story = {
+  args: {
+    variant: 'gray',
+    children: 'Gray Pill'
+  }
+};
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+    children: 'Danger Pill'
+  }
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    children: 'Success Pill'
+  }
+};
diff --git a/apps/web/src/components/ui/pills/Pill.tsx b/apps/web/src/components/ui/pills/Pill.tsx
index 737d757ee..f9bb59935 100644
--- a/apps/web/src/components/ui/pills/Pill.tsx
+++ b/apps/web/src/components/ui/pills/Pill.tsx
@@ -1,14 +1,25 @@
 import React from 'react';
 import { cn } from '@/lib/classMerge';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-export const Pill: React.FC<React.ComponentProps<'div'>> = ({ children, className, ...props }) => {
+const pillVariants = cva('rounded-sm border px-1 py-0.5 text-xs', {
+  variants: {
+    variant: {
+      gray: 'bg-item-select text-gray-dark',
+      danger: 'bg-danger-background text-danger-foreground border-none',
+      success: 'bg-success-background text-success-foreground border-none'
+    }
+  },
+  defaultVariants: {
+    variant: 'gray'
+  }
+});
+
+export interface PillProps extends React.ComponentProps<'div'>, VariantProps<typeof pillVariants> {}
+
+export const Pill: React.FC<PillProps> = ({ children, className, variant, ...props }) => {
   return (
-    <div
-      className={cn(
-        'bg-item-select text-gray-dark rounded-sm border px-1 py-0.5 text-xs',
-        className
-      )}
-      {...props}>
+    <div className={cn(pillVariants({ variant }), className)} {...props}>
       {children}
     </div>
   );