FIX: QA fixes + text colors changes (#1277)

* fix: QA fixes + text colors changes

Author: Djauron

packages/app-builder/src/components/Analytics/Decisions.tsx

@@ -440,12 +440,10 @@ export function Decisions({ data, scenarioVersions, isLoading = false }: Decisio
                 );
               }}
               theme={{
-                grid: { line: { stroke: '#E5E7EB', strokeWidth: 1, strokeDasharray: '4 4' } },
-                tooltip: {
-                  container: {
-                    transform: 'translateX(16px)',
-                  },
-                },
+                text: { fill: 'var(--color-grey-secondary)' },
+                axis: { ticks: { text: { fill: 'var(--color-grey-secondary)' } } },
+                legends: { text: { fill: 'var(--color-grey-secondary)' } },
+                grid: { line: { stroke: 'var(--color-grey-border)', strokeWidth: 1, strokeDasharray: '4 4' } },
               }}
               layout="vertical"
               motionConfig={{

packages/app-builder/src/components/Analytics/DecisionsScoreDistribution.tsx

@@ -177,14 +177,10 @@ const DecisionsScoreDistributionGraph = ({ data }: { data: DecisionsScoreDistrib
           enablePoints={false}
           useMesh={true}
           theme={{
-            grid: { line: { stroke: '#E5E7EB', strokeWidth: 1, strokeDasharray: '4 4' } },
-            axis: {
-              legend: {
-                text: {
-                  fontSize: '14px',
-                },
-              },
-            },
+            text: { fill: 'var(--color-grey-secondary)' },
+            axis: { ticks: { text: { fill: 'var(--color-grey-secondary)' } } },
+            legends: { text: { fill: 'var(--color-grey-secondary)' } },
+            grid: { line: { stroke: 'var(--color-grey-border)', strokeWidth: 1, strokeDasharray: '4 4' } },
           }}
           axisLeft={{
             format: (value: number) => `${value} %`,

packages/app-builder/src/components/Analytics/OutcomeFilter.tsx

@@ -81,13 +81,13 @@ const FilterItem = ({
         {highlight && !hasHighlightedRef.current ? (
           <Icon
             icon={checked ? 'eye' : 'eye-slash'}
-            className={cn('absolute size-4 animate-ping-once', checked ? 'text-blue-58' : 'text-grey-placeholder')}
+            className={cn('absolute size-4 animate-ping-once', checked ? 'text-blue-58' : 'text-grey-secondary')}
           />
         ) : null}
         {highlight || !checked ? (
           <Icon
             icon={checked ? 'eye' : 'eye-slash'}
-            className={cn('relative size-4', checked ? 'text-blue-58' : 'text-grey-placeholder')}
+            className={cn('relative size-4', checked ? 'text-blue-58' : 'text-grey-secondary')}
           />
         ) : null}
       </div>

packages/app-builder/src/components/Analytics/Tooltip.tsx

@@ -9,7 +9,7 @@ export function AnalyticsTooltip({ className, content }: { className: string; co
           <Icon
             icon="tip"
             className={cn(
-              'text-grey-60 text-purple-primary hover:text-grey-placeholder cursor-pointer ml-v2-sm',
+              'text-grey-60 text-purple-primary hover:text-grey-secondary cursor-pointer ml-v2-sm',
               className,
             )}
           />

packages/app-builder/src/components/Annotations/ClientDocumentsPopover.tsx

@@ -86,7 +86,7 @@ export function ClientDocumentsPopover({
               <button type="button" className="flex items-center justify-between gap-9 text-left" {...getRootProps()}>
                 <div className="flex flex-col">
                   <div className="text-r flex items-center gap-2">{t('cases:annotations.documents.add_file')}</div>
-                  <span className="text-grey-placeholder">
+                  <span className="text-grey-secondary">
                     {t('cases:annotations.documents.upload_file')}: jpg, png, pdf, zip, doc, docx, xls, xlsx
                   </span>
                 </div>
@@ -103,7 +103,7 @@ export function ClientDocumentsPopover({
                         <span className="truncate text-xs font-medium">{file.name}</span>
                         <Icon
                           icon="cross"
-                          className="text-grey-placeholder hover:text-grey-primary size-5 shrink-0 cursor-pointer"
+                          className="text-grey-secondary hover:text-grey-primary size-5 shrink-0 cursor-pointer"
                           onClick={(e) => {
                             e.preventDefault();
                             field.handleChange((prev) => toggle(prev, file));
@@ -141,7 +141,7 @@ export function ClientDocumentsPopover({
                   <div className="has-[button[data-delete]:hover]:bg-red-background relative z-0 flex flex-col rounded-sm">
                     {files.map((file, idx) => (
                       <div key={file.id} className="z-10 grid grid-cols-[auto_1fr_auto_20px] gap-2 p-2">
-                        <Icon icon="attachment" className="text-grey-placeholder size-5" />
+                        <Icon icon="attachment" className="text-grey-secondary size-5" />
                         <span className="truncate">{file.filename}</span>
                         <AnnotationFileDownload annotationId={document.id} fileId={file.id} />
                         {idx === 0 ? (

packages/app-builder/src/components/AstBuilder/OperandInfos.tsx

@@ -129,7 +129,7 @@ function OperandDescription({ node }: OperandDescriptionProps) {
 
 function Description({ description }: { description: string }) {
   return description ? (
-    <p className="text-grey-placeholder max-w-[300px] text-xs font-normal first-letter:capitalize">{description}</p>
+    <p className="text-grey-secondary max-w-[300px] text-xs font-normal first-letter:capitalize">{description}</p>
   ) : null;
 }
 
@@ -225,7 +225,7 @@ function DataAccessorDescription({ node, dataModel, triggerObjectTable }: DataAc
     <>
       <Description description={field.description} />
       {field.isEnum && field.values && field.values.length > 0 ? (
-        <div className="text-grey-placeholder flex max-w-[300px] flex-col gap-1">
+        <div className="text-grey-secondary flex max-w-[300px] flex-col gap-1">
           <p className="text-s">{t('scenarios:enum_options')}</p>
           <ul className="flex flex-col">
             {field.values

packages/app-builder/src/components/AstBuilder/edition/EditModal/modals/Aggregation/Aggregation.tsx

@@ -56,7 +56,7 @@ export function EditAggregation(props: Omit<OperandEditModalProps, 'node'>) {
           {t('scenarios:edit_aggregation.title')}
           <div className="flex flex-row items-center justify-center gap-1">
             <Logo logo="logo" className="size-4" />
-            <span className="text-grey-placeholder text-xs font-light">{t('scenarios:edit_aggregation.subtitle')}</span>
+            <span className="text-grey-secondary text-xs font-light">{t('scenarios:edit_aggregation.subtitle')}</span>
           </div>
         </div>
       }

packages/app-builder/src/components/AstBuilder/edition/EditModal/modals/Aggregation/EditDataModelField.tsx

@@ -104,7 +104,7 @@ export const EditDataModelFieldTableMenu = ({ tableName, fields, onChange }: Edi
     <MenuCommand.List>
       <MenuCommand.Group
         heading={
-          <div className="text-grey-placeholder mb-2 items-center px-2 pb-2 text-xs">
+          <div className="text-grey-secondary mb-2 items-center px-2 pb-2 text-xs">
             <Trans t={t} i18nKey="scenarios:edit_aggregation.available_fields" values={{ tableName }} />
           </div>
         }

packages/app-builder/src/components/AstBuilder/edition/EditModal/modals/Aggregation/EditFilters.tsx

@@ -102,7 +102,7 @@ export function EditFilters({ aggregatedField, dataModel }: EditFiltersProps) {
               <Fragment key={filterIndex}>
                 <div className="border-grey-border flex flex-col gap-4 rounded-md border-[0.5px] p-4">
                   <div className="flex items-center justify-between">
-                    <div className="text-grey-placeholder flex items-center gap-2 pl-2 text-xs">
+                    <div className="text-grey-secondary flex items-center gap-2 pl-2 text-xs">
                       <span>{t('scenarios:edit_aggregation.filter_field_label')}</span>
                       <FieldSelect
                         tableName={tableName}
@@ -243,7 +243,7 @@ export function EditFilters({ aggregatedField, dataModel }: EditFiltersProps) {
                   <EditionEvaluationErrors id={filter.id} />
                 </div>
                 {!isLastFilter ? (
-                  <div className="text-grey-placeholder text-xs">{t('scenarios:logical_operator.and')}</div>
+                  <div className="text-grey-secondary text-xs">{t('scenarios:logical_operator.and')}</div>
                 ) : null}
               </Fragment>
             );

packages/app-builder/src/components/AstBuilder/edition/EditModal/modals/FuzzyMatchComparator/EditAlgorithm.tsx

@@ -52,7 +52,7 @@ export function EditAlgorithm({ fuzzyMatchConfig, algorithm, onChange }: EditAlg
                         fuzzyMatchAlgorithm={fuzzyMatchAlgorithm}
                       />
                     </Select.ItemText>
-                    <p className="text-s text-grey-placeholder">
+                    <p className="text-s text-grey-secondary">
                       {t(`scenarios:edit_fuzzy_match.algorithm.description.${fuzzyMatchAlgorithm}`)}
                     </p>
                   </Select.Item>