diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index a4f5ba24..8a57ed2c 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -37,6 +37,7 @@ export const indexLexics = { select_language: 1005, sport: 12993, team: 658, + to_home: 13376, tournament: 1009, user_account: 12928, watch_from_beginning: 13021, diff --git a/src/features/App/AuthenticatedApp.tsx b/src/features/App/AuthenticatedApp.tsx index 24213b1f..8c44a720 100644 --- a/src/features/App/AuthenticatedApp.tsx +++ b/src/features/App/AuthenticatedApp.tsx @@ -3,7 +3,6 @@ import { Route, Redirect, Switch, - useRouteMatch, } from 'react-router-dom' import { indexLexics } from 'config/lexics/indexLexics' @@ -16,9 +15,8 @@ import { MatchPage } from 'features/MatchPage' import { PlayerPage } from 'features/PlayerPage' import { TournamentPage } from 'features/TournamentPage' import { ExtendedSearchStore, ExtendedSearchPage } from 'features/ExtendedSearchPage' -import { LanguageSelect } from 'features/LanguageSelect' import { UserAccount } from 'features/UserAccount' -import { ScoreStore, ToggleScore } from 'features/ToggleScore' +import { ScoreStore } from 'features/ToggleScore' import { MainWrapper } from 'features/MainWrapper' import { UserFavorites } from 'features/UserFavorites' @@ -29,17 +27,9 @@ import { FormStore } from 'features/FormStore' export const AuthenticatedApp = () => { useLexicsConfig(indexLexics) const isMobile = useMediaQuery({ query: devices.tablet }) - const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.isExact || false - const isExtendedSearchPage = useRouteMatch(PAGES.extendedSearch)?.isExact || false return ( - { - isMobile || isUserAccountPage - ? null - : - } - {isExtendedSearchPage ? null : } diff --git a/src/features/App/UnauthenticatedApp.tsx b/src/features/App/UnauthenticatedApp.tsx index d982fe5e..1e704e83 100644 --- a/src/features/App/UnauthenticatedApp.tsx +++ b/src/features/App/UnauthenticatedApp.tsx @@ -1,10 +1,12 @@ -import React, { Fragment } from 'react' +import React from 'react' import { Route, Redirect, Switch, } from 'react-router-dom' +import styled from 'styled-components/macro' + import { PAGES } from 'config' import { publicLexics } from 'config/lexics/public' @@ -12,13 +14,23 @@ import { useLexicsConfig } from 'features/LexicsStore' import { Login } from 'features/Login' import { Register } from 'features/Register' import { LanguageSelect } from 'features/LanguageSelect' +import { HeaderStyled, HeaderGroup } from 'features/ProfileHeader/styled' + +const Main = styled.main` + width: 100%; +` export const UnauthenticatedApp = () => { useLexicsConfig(publicLexics) return ( - - +
+ + + + + + @@ -30,6 +42,6 @@ export const UnauthenticatedApp = () => { - +
) } diff --git a/src/features/Burger/index.tsx b/src/features/Burger/index.tsx deleted file mode 100644 index 181e81f9..00000000 --- a/src/features/Burger/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react' - -import { - RowOne, - RowTwo, - RowThree, - StyledBurger, -} from './styled' - -type Props = { - isOpen: boolean, - toggle: () => void, -} - -export const Burger = ( - { isOpen, toggle }: Props, -) => ( - - - - - -) diff --git a/src/features/Burger/styled.tsx b/src/features/Burger/styled.tsx deleted file mode 100644 index 278f2aba..00000000 --- a/src/features/Burger/styled.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import styled from 'styled-components' - -import { devices } from 'config/devices' - -const BurgerRow = styled.div` - width: 19px; - height: 2px; - border-radius: 10px; - transition: all 0.3s linear; - position: relative; - transform-origin: 1px; - background: #666666; - - @media ${devices.tablet} { - display: none; - } -` - -export const RowOne = styled(BurgerRow)`` - -export const RowTwo = styled(BurgerRow)`` - -export const RowThree = styled(BurgerRow)`` - -export const StyledBurger = styled.div<{open: boolean}>` - display: flex; - flex-direction: column; - justify-content: space-around; - width: 22px; - height: 22px; - background: transparent; - border: none; - cursor: pointer; - padding: 2px; - z-index: 10; - - ${RowOne}{ - transform: ${({ open }) => (open ? 'rotate(45deg)' : 'rotate(0)')}; - } - - ${RowTwo}{ - opacity: ${({ open }) => (open ? '0' : '1')}; - } - - ${RowThree}{ - transform: ${({ open }) => (open ? 'rotate(-45deg)' : 'rotate(0)')}; - } - - @media ${devices.tablet} { - background-size: 100%; - background-image: url(/images/userAccount.svg); - } -` diff --git a/src/features/ExtendedSearchPage/components/DesktopHeader/index.tsx b/src/features/ExtendedSearchPage/components/DesktopHeader/index.tsx index 49ac8fbb..936d00da 100644 --- a/src/features/ExtendedSearchPage/components/DesktopHeader/index.tsx +++ b/src/features/ExtendedSearchPage/components/DesktopHeader/index.tsx @@ -1,23 +1,26 @@ import React from 'react' -import { PAGES } from 'config' - import { Menu } from 'features/Menu' +import { LanguageSelect } from 'features/LanguageSelect' import { - Wrapper, + HeaderStyled, + HeaderGroup, MenuWrapper, - HomeButtonLink, } from 'features/ProfileHeader/styled' import { Filters } from '../Filters' export const DesktopHeader = () => ( - - - - - + + + + - - + + + + + + + ) diff --git a/src/features/HeaderMobile/styled.tsx b/src/features/HeaderMobile/styled.tsx index 1ab410fc..2f399f7f 100644 --- a/src/features/HeaderMobile/styled.tsx +++ b/src/features/HeaderMobile/styled.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components/macro' -import { Wrapper } from 'features/Menu/styled' +import { Nav } from 'features/Menu/styled' export const HeaderMobileWrapper = styled.div` width: 100%; @@ -36,13 +36,14 @@ export const HeaderIconsWrapper = styled.div` justify-content: space-around; min-width: 100px; - ${Wrapper} { + ${Nav} { margin-right: 0; } ` export const IconFavWrapper = styled.div` - width: 20px; + width: 24px; height: 20px; background-image: url(/images/star-white.svg); + background-repeat: no-repeat; ` diff --git a/src/features/HomePage/components/Header/index.tsx b/src/features/HomePage/components/Header/index.tsx index 4ae4c626..d017ce19 100644 --- a/src/features/HomePage/components/Header/index.tsx +++ b/src/features/HomePage/components/Header/index.tsx @@ -1,8 +1,9 @@ import React from 'react' import { Menu } from 'features/Menu' +import { LanguageSelect } from 'features/LanguageSelect' +import { ToggleScore } from 'features/ToggleScore' import { Search } from 'features/Search' - import { DateFilter, MatchStatusFilter, @@ -11,7 +12,8 @@ import { } from 'features/HeaderFilters' import { - Wrapper, + HeaderStyled, + HeaderGroup, FilterWrapper, SearchWrapper, SportFilterWrapper, @@ -19,26 +21,32 @@ import { } from 'features/ProfileHeader/styled' export const Header = () => ( - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) diff --git a/src/features/LanguageSelect/index.tsx b/src/features/LanguageSelect/index.tsx index 3bbcf194..8848dea3 100644 --- a/src/features/LanguageSelect/index.tsx +++ b/src/features/LanguageSelect/index.tsx @@ -31,16 +31,16 @@ export const LanguageSelect = () => { } return ( - - - - {isOpen && ( + + + {isOpen && ( + { map( @@ -67,8 +67,8 @@ export const LanguageSelect = () => { ) } - )} - - + + )} + ) } diff --git a/src/features/LanguageSelect/styled.tsx b/src/features/LanguageSelect/styled.tsx index ed2213d0..7952dab0 100644 --- a/src/features/LanguageSelect/styled.tsx +++ b/src/features/LanguageSelect/styled.tsx @@ -1,9 +1,9 @@ import styled from 'styled-components/macro' export const Wrapper = styled.div` - position: absolute; - right: 31px; - top: 31px; + position: relative; + display: flex; + align-items: center; ` type WorldIconProps = { @@ -40,8 +40,8 @@ export const LangsList = styled.ul` background-color: #666666; box-shadow: 0 2px 5px rgba(0,0,0,.5); border-radius: 2px; - right: -16px; - top: 36px; + right: -92%; + top: calc(100% + 4px); :before { content: ''; diff --git a/src/features/Login/styled.tsx b/src/features/Login/styled.tsx index 106dcf2f..2f1bdfa2 100644 --- a/src/features/Login/styled.tsx +++ b/src/features/Login/styled.tsx @@ -11,7 +11,7 @@ export const CenterBlock = styled.div` flex-direction: column; align-items: center; justify-content: flex-start; - margin-top: 140px; + margin-top: 76px; @media ${devices.laptop} { margin-top: 177px; @@ -32,8 +32,6 @@ export const Form = styled.form<{forRegPage?: boolean}>` @media ${devices.laptop} { margin: ${({ forRegPage }) => (forRegPage ? '75px 0 140px 0' : '80px 0 140px 0')}; } - - @media ${devices.mobile} { width: auto; diff --git a/src/features/Menu/index.tsx b/src/features/Menu/index.tsx index 1e7202c6..8f747531 100644 --- a/src/features/Menu/index.tsx +++ b/src/features/Menu/index.tsx @@ -1,56 +1,49 @@ import React from 'react' +import { Link, useRouteMatch } from 'react-router-dom' import { PAGES } from 'config' -import { useToggle } from 'hooks' - import { useAuthStore } from 'features/AuthStore' -import { T9n } from 'features/T9n' -import { OutsideClick } from 'features/OutsideClick' -import { Burger } from 'features/Burger' +import { Tooltip } from 'features/Tooltip' import { - Wrapper, + Nav, MenuList, MenuItem, Icon, - StyledLink, - Title, } from './styled' export const Menu = () => { - const { - close, - isOpen, - toggle, - } = useToggle() const { logout } = useAuthStore() + const isHomePage = useRouteMatch(PAGES.home)?.isExact return ( - - - - {isOpen && ( - +