From c6ed0b6f8a0d88e8d1bd7700298b2a4438658d7a Mon Sep 17 00:00:00 2001
From: Farber Denis <dsnakez11@yandex.ru>
Date: Fri, 16 Sep 2022 10:00:39 +0300
Subject: [PATCH] style(#ott2821): min style fixes

---
 .../components/FiltersPopup/index.tsx         | 139 +++++++++---------
 .../components/FiltersPopup/styled.tsx        |  15 +-
 .../components/TabEvents/styled.tsx           |  10 +-
 3 files changed, 88 insertions(+), 76 deletions(-)

diff --git a/src/features/MatchSidePlaylists/components/FiltersPopup/index.tsx b/src/features/MatchSidePlaylists/components/FiltersPopup/index.tsx
index 2e92ec24..e5106500 100644
--- a/src/features/MatchSidePlaylists/components/FiltersPopup/index.tsx
+++ b/src/features/MatchSidePlaylists/components/FiltersPopup/index.tsx
@@ -20,6 +20,7 @@ import {
   ItemText,
   MainCheckboxContainer,
   PopupContainer,
+  PopupInner,
   PopupHeader,
   Button,
   ButtonConatiner,
@@ -67,74 +68,76 @@ export const FiltersPopup = () => {
 
   return (
     <PopupContainer>
-      <CloseButtonContainer>
-        <CloseButton onClick={closePopup} />
-      </CloseButtonContainer>
-      <PopupHeader>
-        <HeaderText>
-          <T9n t='filter' />
-        </HeaderText>
-      </PopupHeader>
-      <PartBlock>
-        <MainCheckboxContainer>
-          <Checkbox
-            onChange={resetEvents}
-            checked={isEmpty(activeEvents)}
-            labelLexic='all_actions'
-          />
-        </MainCheckboxContainer>
-        <ItemsContainer>
-          {map(uniqEvents, ((event) => (
-            <ItemBlock key={event}>
-              <Checkbox
-                checked={includes(activeEvents, event)}
-                onChange={toggleActiveEvents(event)}
-                labelLexic={event}
-              />
-            </ItemBlock>
-          )))}
-        </ItemsContainer>
-      </PartBlock>
-      <PartBlock>
-        <MainCheckboxContainer>
-          <Checkbox
-            checked={isEmpty(activeFirstTeamPlayers)}
-            label={team1Name}
-            onChange={resetPlayers('team1')}
-          />
-        </MainCheckboxContainer>
-        <ItemsContainer>
-          {map(matchPlaylists.players.team1, ((player) => (
-            <ItemBlock key={player.id}>
-              <Checkbox
-                onChange={toggleActivePlayers({ id: player.id, team: 'team1' })}
-                checked={includes(activeFirstTeamPlayers, player.id)}
-                label={(<Label player={player} />)}
-              />
-            </ItemBlock>
-          )))}
-        </ItemsContainer>
-      </PartBlock>
-      <PartBlock>
-        <MainCheckboxContainer>
-          <Checkbox
-            checked={isEmpty(activeSecondTeamPlayers)}
-            label={team2Name}
-            onChange={resetPlayers('team2')}
-          />
-        </MainCheckboxContainer>
-        <ItemsContainer>
-          {map(matchPlaylists.players.team2, ((player) => (
-            <ItemBlock key={player.id}>
-              <Checkbox
-                onChange={toggleActivePlayers({ id: player.id, team: 'team2' })}
-                checked={includes(activeSecondTeamPlayers, player.id)}
-                label={(<Label player={player} />)}
-              />
-            </ItemBlock>
-          )))}
-        </ItemsContainer>
-      </PartBlock>
+      <PopupInner>
+        <CloseButtonContainer>
+          <CloseButton onClick={closePopup} />
+        </CloseButtonContainer>
+        <PopupHeader>
+          <HeaderText>
+            <T9n t='filter' />
+          </HeaderText>
+        </PopupHeader>
+        <PartBlock>
+          <MainCheckboxContainer>
+            <Checkbox
+              onChange={resetEvents}
+              checked={isEmpty(activeEvents)}
+              labelLexic='all_actions'
+            />
+          </MainCheckboxContainer>
+          <ItemsContainer>
+            {map(uniqEvents, ((event) => (
+              <ItemBlock key={event}>
+                <Checkbox
+                  checked={includes(activeEvents, event)}
+                  onChange={toggleActiveEvents(event)}
+                  labelLexic={event}
+                />
+              </ItemBlock>
+            )))}
+          </ItemsContainer>
+        </PartBlock>
+        <PartBlock>
+          <MainCheckboxContainer>
+            <Checkbox
+              checked={isEmpty(activeFirstTeamPlayers)}
+              label={team1Name}
+              onChange={resetPlayers('team1')}
+            />
+          </MainCheckboxContainer>
+          <ItemsContainer>
+            {map(matchPlaylists.players.team1, ((player) => (
+              <ItemBlock key={player.id}>
+                <Checkbox
+                  onChange={toggleActivePlayers({ id: player.id, team: 'team1' })}
+                  checked={includes(activeFirstTeamPlayers, player.id)}
+                  label={(<Label player={player} />)}
+                />
+              </ItemBlock>
+            )))}
+          </ItemsContainer>
+        </PartBlock>
+        <PartBlock>
+          <MainCheckboxContainer>
+            <Checkbox
+              checked={isEmpty(activeSecondTeamPlayers)}
+              label={team2Name}
+              onChange={resetPlayers('team2')}
+            />
+          </MainCheckboxContainer>
+          <ItemsContainer>
+            {map(matchPlaylists.players.team2, ((player) => (
+              <ItemBlock key={player.id}>
+                <Checkbox
+                  onChange={toggleActivePlayers({ id: player.id, team: 'team2' })}
+                  checked={includes(activeSecondTeamPlayers, player.id)}
+                  label={(<Label player={player} />)}
+                />
+              </ItemBlock>
+            )))}
+          </ItemsContainer>
+        </PartBlock>
+      </PopupInner>
       <ButtonConatiner>
         <Button onClick={applyFilters}>
           <T9n t='apply_filter' />
diff --git a/src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx b/src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx
index 68af236d..ad46b460 100644
--- a/src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx
+++ b/src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx
@@ -15,14 +15,11 @@ export const PopupContainer = styled.div`
   display: flex;
   flex-direction: column;
   position: absolute;
-  overflow-y: auto;
   z-index: 1000;
   height: 100%;
   right: 0;
   top: 0;
 
-  ${customScrollbar}
-
   ${isMobileDevice
     ? css`
       position: fixed;
@@ -34,6 +31,13 @@ export const PopupContainer = styled.div`
       width: 651px;`}
 `
 
+export const PopupInner = styled.div`
+  max-height: 100%;
+  height: 100%;
+  overflow-y: auto;
+  ${customScrollbar}
+`
+
 export const PopupHeader = styled.div`
   flex: 0 0 auto;
   ${isMobileDevice
@@ -62,8 +66,8 @@ export const HeaderText = styled.div`
   font-style: normal;
   font-weight: 700;
   text-transform: uppercase;
+  color: #fff;
 
-  color: #FFFFFF;
   ${isMobileDevice
     ? css`
     font-size: 12px;
@@ -192,6 +196,9 @@ export const Button = styled.button`
     width: 167px;`}
 `
 export const PlayerNumber = styled.span`
+  /* color: #ADADAD; */
+  color: rgba(255, 255, 255,  0.7);
+  /* letter-spacing: -0.078px; */
   margin-right: 8px;
   font-size: 11px;
   line-height: 16px;
diff --git a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
index 995af978..b850e4b7 100644
--- a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
+++ b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
@@ -240,12 +240,11 @@ export const ButtonsBlock = styled.div`
 
 export const HoverTooltip = styled.span`
   display: flex;
-  background: #FFFFFF;
+  background: #fff;
   border-radius: 6px;
   left: 8px;
   top: 30px;
   transform: translate(-100%, -50%);
-  font-weight: 600;
   font-size: 15px;
   text-align: center;
   flex-direction: column;
@@ -253,9 +252,11 @@ export const HoverTooltip = styled.span`
   justify-content: center;
   align-items: center;
   min-width: 160px;
-  height: 21px;
+  width: max-content;
+  line-height: 21px;
+  padding: 0 9px;
   text-decoration: none;
-  color: #000000;
+  color: #000;
   opacity: 0;
   transition: all 0.1s ease;
   pointer-events: none;
@@ -289,6 +290,7 @@ export const Filters = styled.span<TFilters>`
 
 export const SelectedEpisodes = styled.div`
   display: flex;
+  align-items: center;
   gap: 18px;
 `