frontend
/
spa_instat_tv
1
0
Fork 0
Code Pull Requests 1 Releases Wiki Activity

style(#ott2821): min style fixes

Browse Source
keep-around/b214ac7012ef42593bee62c207888a2593bc5a38
Farber Denis 3 years ago
parent 9084cf588b
commit c6ed0b6f8a
3 changed files with 88 additions and 76 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 139
      src/features/MatchSidePlaylists/components/FiltersPopup/index.tsx
  2. 15
      src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx
  3. 10
      src/features/MatchSidePlaylists/components/TabEvents/styled.tsx

139
src/features/MatchSidePlaylists/components/FiltersPopup/index.tsx
Unescape View File

@ -20,6 +20,7 @@ import {
ItemText, ItemText,
MainCheckboxContainer, MainCheckboxContainer,
PopupContainer, PopupContainer,
PopupInner,
PopupHeader, PopupHeader,
Button, Button,
ButtonConatiner, ButtonConatiner,
@ -67,74 +68,76 @@ export const FiltersPopup = () => {
return ( return (
<PopupContainer> <PopupContainer>
<CloseButtonContainer> <PopupInner>
<CloseButton onClick={closePopup} /> <CloseButtonContainer>
</CloseButtonContainer> <CloseButton onClick={closePopup} />
<PopupHeader> </CloseButtonContainer>
<HeaderText> <PopupHeader>
<T9n t='filter' /> <HeaderText>
</HeaderText> <T9n t='filter' />
</PopupHeader> </HeaderText>
<PartBlock> </PopupHeader>
<MainCheckboxContainer> <PartBlock>
<Checkbox <MainCheckboxContainer>
onChange={resetEvents} <Checkbox
checked={isEmpty(activeEvents)} onChange={resetEvents}
labelLexic='all_actions' checked={isEmpty(activeEvents)}
/> labelLexic='all_actions'
</MainCheckboxContainer> />
<ItemsContainer> </MainCheckboxContainer>
{map(uniqEvents, ((event) => ( <ItemsContainer>
<ItemBlock key={event}> {map(uniqEvents, ((event) => (
<Checkbox <ItemBlock key={event}>
checked={includes(activeEvents, event)} <Checkbox
onChange={toggleActiveEvents(event)} checked={includes(activeEvents, event)}
labelLexic={event} onChange={toggleActiveEvents(event)}
/> labelLexic={event}
</ItemBlock> />
)))} </ItemBlock>
</ItemsContainer> )))}
</PartBlock> </ItemsContainer>
<PartBlock> </PartBlock>
<MainCheckboxContainer> <PartBlock>
<Checkbox <MainCheckboxContainer>
checked={isEmpty(activeFirstTeamPlayers)} <Checkbox
label={team1Name} checked={isEmpty(activeFirstTeamPlayers)}
onChange={resetPlayers('team1')} label={team1Name}
/> onChange={resetPlayers('team1')}
</MainCheckboxContainer> />
<ItemsContainer> </MainCheckboxContainer>
{map(matchPlaylists.players.team1, ((player) => ( <ItemsContainer>
<ItemBlock key={player.id}> {map(matchPlaylists.players.team1, ((player) => (
<Checkbox <ItemBlock key={player.id}>
onChange={toggleActivePlayers({ id: player.id, team: 'team1' })} <Checkbox
checked={includes(activeFirstTeamPlayers, player.id)} onChange={toggleActivePlayers({ id: player.id, team: 'team1' })}
label={(<Label player={player} />)} checked={includes(activeFirstTeamPlayers, player.id)}
/> label={(<Label player={player} />)}
</ItemBlock> />
)))} </ItemBlock>
</ItemsContainer> )))}
</PartBlock> </ItemsContainer>
<PartBlock> </PartBlock>
<MainCheckboxContainer> <PartBlock>
<Checkbox <MainCheckboxContainer>
checked={isEmpty(activeSecondTeamPlayers)} <Checkbox
label={team2Name} checked={isEmpty(activeSecondTeamPlayers)}
onChange={resetPlayers('team2')} label={team2Name}
/> onChange={resetPlayers('team2')}
</MainCheckboxContainer> />
<ItemsContainer> </MainCheckboxContainer>
{map(matchPlaylists.players.team2, ((player) => ( <ItemsContainer>
<ItemBlock key={player.id}> {map(matchPlaylists.players.team2, ((player) => (
<Checkbox <ItemBlock key={player.id}>
onChange={toggleActivePlayers({ id: player.id, team: 'team2' })} <Checkbox
checked={includes(activeSecondTeamPlayers, player.id)} onChange={toggleActivePlayers({ id: player.id, team: 'team2' })}
label={(<Label player={player} />)} checked={includes(activeSecondTeamPlayers, player.id)}
/> label={(<Label player={player} />)}
</ItemBlock> />
)))} </ItemBlock>
</ItemsContainer> )))}
</PartBlock> </ItemsContainer>
</PartBlock>
</PopupInner>
<ButtonConatiner> <ButtonConatiner>
<Button onClick={applyFilters}> <Button onClick={applyFilters}>
<T9n t='apply_filter' /> <T9n t='apply_filter' />

15
src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx
Unescape View File

@ -15,14 +15,11 @@ export const PopupContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
overflow-y: auto;
z-index: 1000; z-index: 1000;
height: 100%; height: 100%;
right: 0; right: 0;
top: 0; top: 0;
${customScrollbar}
${isMobileDevice ${isMobileDevice
? css` ? css`
position: fixed; position: fixed;
@ -34,6 +31,13 @@ export const PopupContainer = styled.div`
width: 651px;`} width: 651px;`}
` `
export const PopupInner = styled.div`
max-height: 100%;
height: 100%;
overflow-y: auto;
${customScrollbar}
`
export const PopupHeader = styled.div` export const PopupHeader = styled.div`
flex: 0 0 auto; flex: 0 0 auto;
${isMobileDevice ${isMobileDevice
@ -62,8 +66,8 @@ export const HeaderText = styled.div`
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
color: #fff;
color: #FFFFFF;
${isMobileDevice ${isMobileDevice
? css` ? css`
font-size: 12px; font-size: 12px;
@ -192,6 +196,9 @@ export const Button = styled.button`
width: 167px;`} width: 167px;`}
` `
export const PlayerNumber = styled.span` export const PlayerNumber = styled.span`
/* color: #ADADAD; */
color: rgba(255, 255, 255, 0.7);
/* letter-spacing: -0.078px; */
margin-right: 8px; margin-right: 8px;
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;

10
src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
Unescape View File

@ -240,12 +240,11 @@ export const ButtonsBlock = styled.div`
export const HoverTooltip = styled.span` export const HoverTooltip = styled.span`
display: flex; display: flex;
background: #FFFFFF; background: #fff;
border-radius: 6px; border-radius: 6px;
left: 8px; left: 8px;
top: 30px; top: 30px;
transform: translate(-100%, -50%); transform: translate(-100%, -50%);
font-weight: 600;
font-size: 15px; font-size: 15px;
text-align: center; text-align: center;
flex-direction: column; flex-direction: column;
@ -253,9 +252,11 @@ export const HoverTooltip = styled.span`
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-width: 160px; min-width: 160px;
height: 21px; width: max-content;
line-height: 21px;
padding: 0 9px;
text-decoration: none; text-decoration: none;
color: #000000; color: #000;
opacity: 0; opacity: 0;
transition: all 0.1s ease; transition: all 0.1s ease;
pointer-events: none; pointer-events: none;
@ -289,6 +290,7 @@ export const Filters = styled.span<TFilters>`
export const SelectedEpisodes = styled.div` export const SelectedEpisodes = styled.div`
display: flex; display: flex;
align-items: center;
gap: 18px; gap: 18px;
` `

Write Preview
Loading…
Cancel
Save