diff --git a/src/features/HeaderMobile/index.tsx b/src/features/HeaderMobile/index.tsx
index 9b8e191b..db10991b 100644
--- a/src/features/HeaderMobile/index.tsx
+++ b/src/features/HeaderMobile/index.tsx
@@ -1,56 +1,29 @@
import React from 'react'
-import { Route, Switch } from 'react-router-dom'
+import { Link } from 'react-router-dom'
+
+import { PAGES } from 'config'
import { ToggleScore } from 'features/ToggleScore'
import { Logo } from 'features/Logo'
import { Menu } from 'features/Menu'
import { Search } from 'features/Search'
-import {
- DateFilter,
- MatchStatusFilter,
-} from 'features/HeaderFilters'
-import { PAGES } from 'config'
import {
HeaderMobileWrapper,
- HeaderMobileTop,
- HeaderMobileOnlyTop,
- HeaderMobileMidle,
- HeaderMobileBottom,
HeaderIconsWrapper,
IconFavWrapper,
} from './styled'
export const HeaderMobile = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
)
diff --git a/src/features/HeaderMobile/styled.tsx b/src/features/HeaderMobile/styled.tsx
index 05515a25..1ab410fc 100644
--- a/src/features/HeaderMobile/styled.tsx
+++ b/src/features/HeaderMobile/styled.tsx
@@ -3,13 +3,6 @@ import styled from 'styled-components/macro'
import { Wrapper } from 'features/Menu/styled'
export const HeaderMobileWrapper = styled.div`
- width: 100%;
- top: 0;
- left: 0;
- display: flex;
- flex-direction: column;
-`
-export const HeaderMobileTop = styled.div`
width: 100%;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
@@ -18,9 +11,6 @@ export const HeaderMobileTop = styled.div`
justify-content: space-between;
padding: 12px 18px;
`
-export const HeaderMobileOnlyTop = styled(HeaderMobileTop)`
- margin-bottom: 25px;
-`
export const HeaderMobileMidle = styled.div`
width: 100%;
@@ -31,6 +21,7 @@ export const HeaderMobileMidle = styled.div`
padding: 12px 18px;
margin-top: 6px
`
+
export const HeaderMobileBottom = styled.div`
width: 100%;
display: flex;
@@ -50,28 +41,8 @@ export const HeaderIconsWrapper = styled.div`
}
`
-export const IconSearchWrapper = styled.div`
- width: 20px;
- height: 20px;
- margin-left: 23px;
- background-image: url(/images/search-mobile.svg);
-`
export const IconFavWrapper = styled.div`
width: 20px;
height: 20px;
background-image: url(/images/star-white.svg);
`
-export const DateFilterMobileWrapper = styled.div`
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
-`
-export const BottomMenuWrapper = styled.div`
- width: 100%;
- position: fixed;
- bottom: 0;
- display: flex;
- height: 40px;
- background: radial-gradient( 49.07% 49.07% at 50% 29.54%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 100% ), rgba(0,0,0,0.95);
-`
diff --git a/src/features/HomePage/index.tsx b/src/features/HomePage/index.tsx
index 9ce6cf00..8b969735 100644
--- a/src/features/HomePage/index.tsx
+++ b/src/features/HomePage/index.tsx
@@ -1,15 +1,43 @@
-import React from 'react'
+import React, { Fragment } from 'react'
+import { useMediaQuery } from 'react-responsive'
+
+import { devices } from 'config'
import { Matches } from 'features/Matches'
+import {
+ DateFilter,
+ MatchStatusFilter,
+} from 'features/HeaderFilters'
+import {
+ HeaderMobileMidle,
+ HeaderMobileBottom,
+} from 'features/HeaderMobile/styled'
import { useHomePage } from './hooks'
import { Content } from './styled'
export const HomePage = () => {
+ const isMobile = useMediaQuery({ query: devices.tablet })
const { fetchMatches } = useHomePage()
return (
-
-
-
+
+ {
+ isMobile
+ ? (
+
+
+
+
+
+
+
+
+ )
+ : null
+ }
+
+
+
+
)
}
diff --git a/src/features/UserAccount/components/PageTitle/index.tsx b/src/features/UserAccount/components/PageTitle/index.tsx
index 6f73eae8..ad12b2ad 100644
--- a/src/features/UserAccount/components/PageTitle/index.tsx
+++ b/src/features/UserAccount/components/PageTitle/index.tsx
@@ -1,4 +1,7 @@
import React from 'react'
+import { Link, useLocation } from 'react-router-dom'
+
+import { PAGES } from 'config'
import { Logo } from 'features/Logo'
import { BlockTitle } from 'features/Login/styled'
@@ -9,11 +12,16 @@ type Props = {
titleText: string,
}
-export const PageTitle = ({ titleText }: Props) => (
-
-
-
- {titleText}
-
-
-)
+export const PageTitle = ({ titleText }: Props) => {
+ const location = useLocation()
+ return (
+
+
+
+
+
+ {titleText}
+
+
+ )
+}
diff --git a/src/features/UserFavorites/index.tsx b/src/features/UserFavorites/index.tsx
index 1712f59b..7af501e5 100644
--- a/src/features/UserFavorites/index.tsx
+++ b/src/features/UserFavorites/index.tsx
@@ -1,9 +1,13 @@
import type { MouseEvent, FocusEvent } from 'react'
import React, { useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
import map from 'lodash/map'
+
import { FavoritesActions } from 'requests'
+import { PAGES } from 'config'
+
import { Modal } from 'features/Modal'
import { TooltipBlock } from './TooltipBlock'
@@ -23,6 +27,7 @@ import {
} from './styled'
export const UserFavorites = () => {
+ const location = useLocation()
const {
addRemoveFavorite,
close,
@@ -40,7 +45,9 @@ export const UserFavorites = () => {
return (
-
+
+
+
{
diff --git a/src/features/UserFavorites/styled.tsx b/src/features/UserFavorites/styled.tsx
index 11dcbc76..03f610bf 100644
--- a/src/features/UserFavorites/styled.tsx
+++ b/src/features/UserFavorites/styled.tsx
@@ -36,7 +36,6 @@ export const ScrollWrapper = styled.div`
export const UserSportFavLogoWrapper = styled(Logo)`
margin-top: 35px;
- margin-bottom: 120px;
@media ${devices.laptop} {
margin-top: 30px;
@@ -98,6 +97,7 @@ export const UserSportFavStar = styled.div`
border-radius: 50%;
background: #3f3f3f url('/images/sportFavStar.png') no-repeat center;
margin-bottom: 16px;
+ margin-top: 120px;
`
export const FavoriteModal = styled.div`