diff --git a/src/components/SportIcon/SportIcon.tsx b/src/components/SportIcon/SportIcon.tsx index ce735a89..03113004 100644 --- a/src/components/SportIcon/SportIcon.tsx +++ b/src/components/SportIcon/SportIcon.tsx @@ -7,8 +7,6 @@ import { Icon } from 'features/Icon' const IconWrap = styled.div` display: flex; - height: 10px; - min-width: 10px; color: white; align-items: center; ` @@ -59,7 +57,7 @@ export const SportIcon = ({ ) diff --git a/src/features/Background/styled.tsx b/src/features/Background/styled.tsx index 515d6de6..9abd87cf 100644 --- a/src/features/Background/styled.tsx +++ b/src/features/Background/styled.tsx @@ -19,7 +19,7 @@ const Container = styled.div` export const ImageBackground = styled(Container)` ${client.styles.background} - background-size: 12px; + background-size: 6px; ` export const GradientBackground = styled(Container)` diff --git a/src/features/FavoritesMobilePopup/styled.tsx b/src/features/FavoritesMobilePopup/styled.tsx index 8d65922a..d8c23303 100644 --- a/src/features/FavoritesMobilePopup/styled.tsx +++ b/src/features/FavoritesMobilePopup/styled.tsx @@ -10,7 +10,7 @@ import { Icon } from 'features/Menu/styled' export const FavoritesPopup = styled(ModalContainer)` background-color: black; background-image: url(/images/Checker.png); - background-size: 12px; + background-size: 13px; ` export const MainLogo = styled(Logo)` diff --git a/src/features/HeaderFilters/components/DateFilter/styled.tsx b/src/features/HeaderFilters/components/DateFilter/styled.tsx index e7cd87e7..fbd04833 100644 --- a/src/features/HeaderFilters/components/DateFilter/styled.tsx +++ b/src/features/HeaderFilters/components/DateFilter/styled.tsx @@ -26,7 +26,7 @@ export const Wrapper = styled.div` ${isMobileDevice ? css` /* padding-top: 4px; */ - /* min-height: 84px; */ + min-height: 84px; justify-content: space-between; @media (max-width: 450px){ @@ -114,7 +114,7 @@ export const WeekDaysWrapper = styled.div` display: flex; justify-content: center; align-items: center; - /* margin-top: 0.567rem; */ + margin-top: 0.567rem; ${isMobileDevice ? css` padding: 0 5px; @@ -165,7 +165,8 @@ export const WeekName = styled.span` line-height: 1.5rem; ${isMobileDevice ? css` - font-size: 14px; + font-weight: 600; + font-size: 10px; line-height: 13px; padding-top: 6px; ` @@ -210,7 +211,6 @@ export const Arrow = styled.span` border-bottom: 0.15rem solid #fff; top: 50%; left: 50%; - transform: translate(-50%, -50%); ${({ direction }) => ( direction === 'left' @@ -220,11 +220,11 @@ export const Arrow = styled.span` ${isMobileDevice ? css` - padding: 5px; - border-left: 0.3rem solid #fff; - border-left: 0.3rem solid #fff; - width: 10px; - height: 10px; + padding: 4px; + border-left: 0.4rem solid rgba(255, 255, 255, 0.5); + border-bottom: 0.4rem solid rgba(255, 255, 255, 0.5); + width: 8px; + height: 8px; ` : ''}; ` diff --git a/src/features/HeaderMobile/index.tsx b/src/features/HeaderMobile/index.tsx index 130ed368..47a4512c 100644 --- a/src/features/HeaderMobile/index.tsx +++ b/src/features/HeaderMobile/index.tsx @@ -54,7 +54,7 @@ export const HeaderMobile = () => { /> - + diff --git a/src/features/HeaderMobile/styled.tsx b/src/features/HeaderMobile/styled.tsx index 44aa0157..93f5883b 100644 --- a/src/features/HeaderMobile/styled.tsx +++ b/src/features/HeaderMobile/styled.tsx @@ -32,9 +32,9 @@ export const defaultHeaderStyles = ( } return client.name === 'facr' ? client.styles.homePageHeader : css` background: linear-gradient( - 187deg, + 236deg, ${color} -4.49%, - #000000 68.29%), + #000000 98.29%), #000000; z-index: 10; ` @@ -162,7 +162,7 @@ export const ScModal = styled(BaseModal)` ${isMobileDevice ? css` height: auto; - top: -15vh; + top: -140px; ` : ''}; } @@ -205,7 +205,7 @@ export const ScHeaderGroup = styled.div` export const ScBody = styled.div` display: flex; flex-direction: column; - padding: 0 15px 15px 15px; + padding: 0 15px 23px 15px; ` type SportProps = { diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx index d253f88d..cf4e0318 100644 --- a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx +++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx @@ -175,7 +175,7 @@ export const Info = styled.div` left: 45%; */ width: 60%; height: 100%; - padding: 9px; + padding: 9px 9px 9px 19px; ` : ''}; ` @@ -218,6 +218,7 @@ export const FavoriteSign = styled.span` ${isMobileDevice ? css` display: flex; + transform: translateY(25%); justify-content: center; align-items: center; width: 8px; diff --git a/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx b/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx index 335a8e26..97c8fbe2 100644 --- a/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx +++ b/src/features/MatchPopup/components/SimplePlaylistButton/styled.tsx @@ -14,6 +14,7 @@ export const StyledLink = styled(Link)` display: flex; flex-direction: row; justify-content: space-between; + justify-content: center; align-items: center; width: 100%; height: 100%; @@ -29,10 +30,6 @@ export const StyledLink = styled(Link)` :hover { background-color: #555555; } - - @media ${devices.mobile} { - justify-content: center; - } ` export const Title = styled.span` @@ -69,6 +66,7 @@ export const LiveSign = styled(MatchDate)` font-size: 0.32rem; display: flex; align-items: center; + margin-left: 5px; ${isMobileDevice ? css` diff --git a/src/features/MatchSwitches/styled.tsx b/src/features/MatchSwitches/styled.tsx index 4f581d3e..aa69750a 100644 --- a/src/features/MatchSwitches/styled.tsx +++ b/src/features/MatchSwitches/styled.tsx @@ -12,7 +12,7 @@ export const Switch = styled.div` ? css` justify-content: flex-end; width: 100%; - height: 100%; + /* height: 100%; */ text-transform: uppercase; ` : ''}; @@ -29,7 +29,7 @@ export const Title = styled(T9n)` ? css` font-size: 10px; line-height: 22px; - letter-spacing: -0.408px; + letter-spacing: 0.15rem; text-transform: uppercase; font-weight: 700; ` @@ -64,7 +64,8 @@ export const Icon = styled.div` ${isMobileDevice ? css` width: 36px; - height: 18px; + height: 22px; + background-size: cover; margin-left: 1.5rem; ` : ''} diff --git a/src/features/Menu/styled.tsx b/src/features/Menu/styled.tsx index c6b42b57..9546c829 100644 --- a/src/features/Menu/styled.tsx +++ b/src/features/Menu/styled.tsx @@ -50,7 +50,6 @@ export const Icon = styled.div` opacity: 0.8; ${isMobileDevice ? css` - width: 13px; height: 13px; background-size: contain; /* margin: 0 4px; */ diff --git a/src/features/Modal/index.tsx b/src/features/Modal/index.tsx index 2fe884f0..f08029a3 100644 --- a/src/features/Modal/index.tsx +++ b/src/features/Modal/index.tsx @@ -17,6 +17,7 @@ type Props = { children: ReactNode, className?: string, close?: () => void, + closeSize?: number, isOpen: boolean, withCloseButton?: boolean, } @@ -25,6 +26,7 @@ export const Modal = ({ children, className, close = defaultCloseHandler, + closeSize, isOpen, withCloseButton = true, }: Props) => { @@ -40,7 +42,7 @@ export const Modal = ({ {withCloseButton && ( - + )} {children} diff --git a/src/features/Modal/styled.tsx b/src/features/Modal/styled.tsx index bb373c05..1d62fdfd 100644 --- a/src/features/Modal/styled.tsx +++ b/src/features/Modal/styled.tsx @@ -48,4 +48,11 @@ export const ModalCloseButton = styled.button.attrs({ cursor: pointer; color: rgba(255, 255, 255, 1); background-color: transparent; + + ${isMobileDevice + ? css` + padding: 15px 14px 15px 15px; + + ` + : ''}; ` diff --git a/src/features/SportsFilter/styled.tsx b/src/features/SportsFilter/styled.tsx index a184de7a..f8d01241 100644 --- a/src/features/SportsFilter/styled.tsx +++ b/src/features/SportsFilter/styled.tsx @@ -15,6 +15,7 @@ export const ScSportsFilter = styled.div` ${isMobileDevice ? css` + letter-spacing: 0.15rem; font-size: 10px; ` : ''}; diff --git a/src/features/TournamentList/components/Tournament/styled.tsx b/src/features/TournamentList/components/Tournament/styled.tsx index 4f4185ce..2b5464ff 100644 --- a/src/features/TournamentList/components/Tournament/styled.tsx +++ b/src/features/TournamentList/components/Tournament/styled.tsx @@ -24,7 +24,6 @@ export const CardWrapperOuter = styled.li.attrs({ export const CardWrapper = styled.div<{ open: boolean }>` display: flex; align-items: center; - border-radius: 2px; background-color: ${({ open }) => (open ? '#294FC3' : '#3f3f3f')}; cursor: pointer; @@ -54,8 +53,8 @@ export const CountMatches = styled.span<{ color?: string }>` line-height: 16px; color: ${({ color }) => color}; width: 20px; - text-align: center; - margin-left: 20px; + text-align: end; + margin: 0 9px 0 20px; ` export const ScFirstInfo = styled.div` diff --git a/src/features/TournamentList/hooks.tsx b/src/features/TournamentList/hooks.tsx index 7f1412f4..0c4a8854 100644 --- a/src/features/TournamentList/hooks.tsx +++ b/src/features/TournamentList/hooks.tsx @@ -18,8 +18,10 @@ export const useTournaments = (matches: Array) => { return sport === sportName } - const tournaments = matches.reduce((acc: Array | [], match: Match) => { - if (matches.length === 0) return [] + const tournamentSort: Array = [] + + const tournaments = matches.reduce((acc: TournamentListProps, match: Match) => { + if (matches.length === 0) return {} if (!acc[match.tournament.id] && compareSport(match, selectedSport)) { const tournament = { ...match.tournament, @@ -34,6 +36,7 @@ export const useTournaments = (matches: Array) => { }, tournamentMatches: [match], } + tournamentSort.push(match.tournament.id) } else if (compareSport(match, selectedSport)) { acc[match.tournament.id] = { ...acc[match.tournament.id], @@ -47,9 +50,10 @@ export const useTournaments = (matches: Array) => { } } return acc - }, []) + }, {}) return { + tournamentSort, tournaments, } } diff --git a/src/features/TournamentList/index.tsx b/src/features/TournamentList/index.tsx index 9724e255..d9181699 100644 --- a/src/features/TournamentList/index.tsx +++ b/src/features/TournamentList/index.tsx @@ -10,24 +10,25 @@ type TournamentTypeProps = { } export type TournamentListProps = { - tournament: TournamentType & { + [key: number]:{tournament: TournamentType & { countryId: number, live: boolean, sportType: number, }, tournamentMatches: Array, + }, } export const TournamentList = ({ matches }: TournamentTypeProps) => { - const { tournaments } = useTournaments(matches) + const { tournaments, tournamentSort } = useTournaments(matches) return ( <> - {tournaments?.map(({ tournament, tournamentMatches }: TournamentListProps) => ( + {tournamentSort?.map((id) => ( ))} diff --git a/src/libs/objects/Hockey.tsx b/src/libs/objects/Hockey.tsx index 21bb2f09..eef0fc57 100644 --- a/src/libs/objects/Hockey.tsx +++ b/src/libs/objects/Hockey.tsx @@ -1,6 +1,8 @@ export const Hockey = () => (