Adds a classname to override the value in the filters

Author: samejr

apps/webapp/app/components/primitives/AppliedFilter.tsx

@@ -27,6 +27,7 @@ type AppliedFilterProps = {
   onRemove?: () => void;
   variant?: Variant;
   className?: string;
+  valueClassName?: string;
 };
 
 export function AppliedFilter({
@@ -37,6 +38,7 @@ export function AppliedFilter({
   onRemove,
   variant = "secondary/small",
   className,
+  valueClassName,
 }: AppliedFilterProps) {
   const variantClassName = variants[variant];
   return (
@@ -48,14 +50,18 @@ export function AppliedFilter({
         className
       )}
     >
-      <div className={cn("flex items-start leading-4", label === undefined ? "gap-1.5" : "gap-0.5")}>
+      <div
+        className={cn("flex items-start leading-4", label === undefined ? "gap-1.5" : "gap-0.5")}
+      >
         <div className="-mt-[0.5px] flex items-center gap-1">
           {icon}
-          {label && <div className="text-text-bright">
-            <span>{label}</span>:
-          </div>}
+          {label && (
+            <div className="text-text-bright">
+              <span>{label}</span>:
+            </div>
+          )}
         </div>
-        <div className="text-text-dimmed">
+        <div className={cn("text-text-dimmed", valueClassName)}>
           <div>{value}</div>
         </div>
       </div>

apps/webapp/app/components/runs/v3/SharedFilters.tsx

@@ -348,6 +348,8 @@ export interface TimeFilterProps {
   onValueChange?: (values: TimeFilterApplyValues) => void;
   /** When set an upgrade message will be shown if you select a period further back than this number of days */
   maxPeriodDays?: number;
+  /** Optional className override for the value text in the filter pill */
+  valueClassName?: string;
 }
 
 export function TimeFilter({
@@ -360,6 +362,7 @@ export function TimeFilter({
   applyShortcut,
   onValueChange,
   maxPeriodDays,
+  valueClassName,
 }: TimeFilterProps = {}) {
   const { value } = useSearchParams();
   const periodValue = period ?? value("period");
@@ -386,6 +389,7 @@ export function TimeFilter({
                 value={constrained.valueLabel}
                 removable={false}
                 variant="secondary/small"
+                valueClassName={valueClassName}
               />
             </Ariakit.Select>
           }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.$dashboardKey/route.tsx

@@ -164,6 +164,7 @@ export function MetricDashboard({
           labelName="Period"
           hideLabel
           maxPeriodDays={maxPeriodDays}
+          valueClassName="text-text-bright"
         />
       </div>
       <div