fix(#493): go to home on logo click (#193)

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 = () => (
-  <Switch>
-    <Route path={PAGES.home} exact>
-      <HeaderMobileWrapper>
-        <HeaderMobileTop>
-          <ToggleScore />
-          <Logo width={52} height={12} />
-          <HeaderIconsWrapper>
-            <IconFavWrapper />
-            <Search />
-            <Menu />
-          </HeaderIconsWrapper>
-        </HeaderMobileTop>
-        <HeaderMobileMidle>
-          <DateFilter />
-        </HeaderMobileMidle>
-        <HeaderMobileBottom>
-          <MatchStatusFilter />
-        </HeaderMobileBottom>
-      </HeaderMobileWrapper>
-    </Route>
-
-    <HeaderMobileOnlyTop>
-      <ToggleScore />
+  <HeaderMobileWrapper>
+    <ToggleScore />
+    <Link to={PAGES.home}>
       <Logo width={52} height={12} />
-      <HeaderIconsWrapper>
-        <IconFavWrapper />
-        <Search />
-        <Menu />
-      </HeaderIconsWrapper>
-    </HeaderMobileOnlyTop>
-  </Switch>
+    </Link>
+    <HeaderIconsWrapper>
+      <IconFavWrapper />
+      <Search />
+      <Menu />
+    </HeaderIconsWrapper>
+  </HeaderMobileWrapper>
 )

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);
-`

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 (
-    <Content>
-      <Matches fetch={fetchMatches} />
-    </Content>
+    <Fragment>
+      {
+        isMobile
+          ? (
+            <Fragment>
+              <HeaderMobileMidle>
+                <DateFilter />
+              </HeaderMobileMidle>
+              <HeaderMobileBottom>
+                <MatchStatusFilter />
+              </HeaderMobileBottom>
+            </Fragment>
+          )
+          : null
+      }
+      <Content>
+        <Matches fetch={fetchMatches} />
+      </Content>
+    </Fragment>
   )
 }

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) => (
-  <PageTitleWrapper>
-    <Logo />
-    <TitleTextWrapper>
-      <BlockTitle>{titleText}</BlockTitle>
-    </TitleTextWrapper>
-  </PageTitleWrapper>
-)
+export const PageTitle = ({ titleText }: Props) => {
+  const location = useLocation()
+  return (
+    <PageTitleWrapper>
+      <Link to={`${PAGES.home}${location.search}`}>
+        <Logo />
+      </Link>
+      <TitleTextWrapper>
+        <BlockTitle>{titleText}</BlockTitle>
+      </TitleTextWrapper>
+    </PageTitleWrapper>
+  )
+}

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 (
     <UserSportFavWrapper>
-      <UserSportFavLogoWrapper width={52} />
+      <Link to={`${PAGES.home}${location.search}`}>
+        <UserSportFavLogoWrapper width={52} />
+      </Link>
       <UserSportFavStar />
       <ScrollWrapper>
         {

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`