FE: Topic analysis: Updated style for percentage of completion (#4123)

pradyumnad · web-flow · commit 0d6f293ab977 · 2023-08-29T17:53:13.000+04:00
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Statistics/Metrics.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Statistics/Metrics.tsx
@@ -44,9 +44,11 @@ const Metrics: React.FC = () => {
   if (data.progress) {
     return (
       <S.ProgressContainer>
+        <S.ProgressPct>
+          {Math.floor(data.progress.completenessPercent || 0)}%
+        </S.ProgressPct>
         <S.ProgressBarWrapper>
           <ProgressBar completed={data.progress.completenessPercent || 0} />
-          <span> {Math.floor(data.progress.completenessPercent || 0)} %</span>
         </S.ProgressBarWrapper>
         <ActionButton
           onClick={async () => {
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Statistics/Statistics.styles.ts b/kafka-ui-react-app/src/components/Topics/Topic/Statistics/Statistics.styles.ts
@@ -42,3 +42,10 @@ export const ProgressBarWrapper = styled.div`
   align-items: center;
   width: 280px;
 `;
+
+export const ProgressPct = styled.span`
+  font-size: 15px;
+  font-weight: bold;
+  line-height: 1.5;
+  color: ${({ theme }) => theme.statictics.progressPctColor};
+`;
diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts
@@ -291,6 +291,7 @@ const baseTheme = {
   },
   statictics: {
     createdAtColor: Colors.neutral[50],
+    progressPctColor: Colors.neutral[100],
   },
   progressBar: {
     backgroundColor: Colors.neutral[3],
