final ui of planner and writer

frontend/src/components/header/HeaderMetrics.tsx

@@ -11,6 +11,7 @@ export const HeaderMetrics: React.FC = () => {
   return (
     <div className="igny8-header-metrics flex">
       {metrics.map((metric, index) => {
+        const isCredits = metric.label.toLowerCase() === 'credits';
         const metricElement = (
           <div className={`igny8-header-metric ${metric.tooltip ? 'cursor-help' : ''}`}>
             <div className={`igny8-header-metric-accent ${metric.accentColor}`}></div>
@@ -20,7 +21,7 @@ export const HeaderMetrics: React.FC = () => {
                 <InfoIcon className="w-3 h-3 text-gray-400 dark:text-gray-500" />
               )}
             </span>
-            <span className="igny8-header-metric-value">
+            <span className={`igny8-header-metric-value ${isCredits ? 'igny8-header-metric-value-credits' : ''}`}>
               {typeof metric.value === 'number' ? metric.value.toLocaleString() : metric.value}
             </span>
           </div>