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 = () => (