feat(in-354): fix styles for empty params

src/features/MatchSidePlaylists/components/PlayersTable/Cell.tsx

@@ -18,6 +18,7 @@ type CellProps = {
   as?: 'td' | 'th',
   clickable?: boolean,
   columnWidth?: number,
+  hasValue?: boolean,
   sorted?: boolean,
   tooltipText?: string,
 } & HTMLProps<HTMLTableCellElement>
@@ -28,6 +29,7 @@ const CellFC = ({
   children,
   clickable,
   columnWidth,
+  hasValue,
   onClick,
   sorted,
   tooltipText,
@@ -62,6 +64,7 @@ const CellFC = ({
       clickable={clickable}
       columnWidth={columnWidth}
       sorted={sorted}
+      hasValue={hasValue}
       onMouseOver={tooltipText && !isMobileDevice ? onMouseOver({
         anchorId,
         horizontalPosition: 'right',

src/features/MatchSidePlaylists/components/PlayersTable/index.tsx

@@ -174,6 +174,7 @@ export const PlayersTable = (props: PlayersTableProps) => {
                             clickable={clickable}
                             sorted={sorted}
                             onClick={onClick}
+                            hasValue={value !== '-'}
                           >
                             {watchAllEpisodesTimer
                               && param.id === playingData.player.paramId

src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx

@@ -130,6 +130,7 @@ type CellContainerProps = {
   as?: 'td' | 'th',
   clickable?: boolean,
   columnWidth?: number,
+  hasValue?: boolean,
   sorted?: boolean,
 }
 
@@ -144,7 +145,7 @@ export const CellContainer = styled.td.attrs(({ clickable }: CellContainerProps)
   width: ${({ columnWidth }) => (columnWidth ? `${columnWidth}px` : 'auto')};
   min-width: 30px;
   font-size: 11px;
-  font-weight: ${({ clickable }) => (clickable ? 600 : 400)};
+  font-weight: ${({ clickable }) => (clickable ? 700 : 400)};
   color: ${({ clickable, theme }) => (clickable ? '#5EB2FF' : theme.colors.white)};
   white-space: nowrap;
   background-color: var(--bgColor);
@@ -171,6 +172,12 @@ export const CellContainer = styled.td.attrs(({ clickable }: CellContainerProps)
         font-size: ${sorted ? 13 : 11}px;
       `
     : '')}
+
+  ${({ hasValue }) => (!hasValue
+    ? css`
+        color: rgba(255, 255, 255, 0.5);
+      `
+    : '')}
 `
 
 export const Row = styled.tr`

src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx

@@ -125,6 +125,7 @@ export const Cell = ({
               clickable={isClickable(teamStatItem.param1)}
               onClick={() => onParamClick(teamStatItem.param1)}
               data-param-id={teamStatItem.param1.id}
+              hasValue={Boolean(teamStatItem.param1.val)}
             >
               {getDisplayedValue(teamStatItem.param1.val)}
             </ParamValue>
@@ -150,6 +151,7 @@ export const Cell = ({
                     clickable={isClickable(teamStatItem.param2)}
                     onClick={() => onParamClick(teamStatItem.param2!)}
                     data-param-id={teamStatItem.param2.id}
+                    hasValue={Boolean(teamStatItem.param2.val)}
                   >
                     {getDisplayedValue(teamStatItem.param2.val)}
                   </ParamValue>

src/features/MatchSidePlaylists/components/TeamsStatsTable/styled.tsx

@@ -84,6 +84,7 @@ export const ParamValueContainer = styled.div``
 
 type TParamValue = {
   clickable?: boolean,
+  hasValue?: boolean,
 }
 
 export const ParamValue = styled.span.attrs(({ clickable }: TParamValue) => ({
@@ -94,7 +95,7 @@ export const ParamValue = styled.span.attrs(({ clickable }: TParamValue) => ({
   height: 15px;
   text-align: center;
   position: relative;
-  font-weight: ${({ clickable }) => (clickable ? 600 : 400)};
+  font-weight: ${({ clickable }) => (clickable ? 700 : 400)};
   color: ${({ clickable, theme }) => (clickable ? '#5EB2FF' : theme.colors.white)};
 
   ${({ clickable }) => (clickable
@@ -102,6 +103,12 @@ export const ParamValue = styled.span.attrs(({ clickable }: TParamValue) => ({
          cursor: pointer;
       `
     : '')}
+
+  ${({ hasValue }) => (!hasValue
+    ? css`
+        color: rgba(255, 255, 255, 0.5);
+      `
+    : '')}
 `
 
 export const StatItemTitle = styled.span`