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`