From b56dce119dcc67a7d891bf7b48c1608129a19c6d Mon Sep 17 00:00:00 2001
From: Ruslan Khayrullin <ruslfm08@gmail.com>
Date: Tue, 28 Feb 2023 16:38:18 +0500
Subject: [PATCH] feat(in-354): fix styles for empty params

---
 .../MatchSidePlaylists/components/PlayersTable/Cell.tsx  | 3 +++
 .../MatchSidePlaylists/components/PlayersTable/index.tsx | 1 +
 .../components/PlayersTable/styled.tsx                   | 9 ++++++++-
 .../components/TeamsStatsTable/Cell.tsx                  | 2 ++
 .../components/TeamsStatsTable/styled.tsx                | 9 ++++++++-
 5 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/Cell.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/Cell.tsx
index 360a000d..6a8437b4 100644
--- a/src/features/MatchSidePlaylists/components/PlayersTable/Cell.tsx
+++ b/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',
diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx
index 59907ff1..3a8f9b9c 100644
--- a/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx
+++ b/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
diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx
index caf2403a..84d1721b 100644
--- a/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx
+++ b/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`
diff --git a/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx b/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx
index 04a32f37..a8ff7b9d 100644
--- a/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx
+++ b/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>
diff --git a/src/features/MatchSidePlaylists/components/TeamsStatsTable/styled.tsx b/src/features/MatchSidePlaylists/components/TeamsStatsTable/styled.tsx
index 55df9a57..42b6713c 100644
--- a/src/features/MatchSidePlaylists/components/TeamsStatsTable/styled.tsx
+++ b/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`