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

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 () => {

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};
+`;

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],