diff --git a/src/features/HomePage/index.tsx b/src/features/HomePage/index.tsx index 0ac28cf4..9f80b657 100644 --- a/src/features/HomePage/index.tsx +++ b/src/features/HomePage/index.tsx @@ -1,16 +1,11 @@ import React from 'react' -import { - HeaderFiltersStore, -} from 'features/HeaderFilters' import { Matches } from 'features/Matches' import { Content } from './styled' export const HomePage = () => ( - - - - - + + + ) diff --git a/src/features/LanguageSelect/styled.tsx b/src/features/LanguageSelect/styled.tsx index eaa685c6..ed2213d0 100644 --- a/src/features/LanguageSelect/styled.tsx +++ b/src/features/LanguageSelect/styled.tsx @@ -16,6 +16,7 @@ export const WorldIcon = styled.button` height: 18px; border: none; background: none; + outline: none; background-image: url(/images/worldIcon.svg); background-position-x: -1px; cursor: pointer; diff --git a/src/features/MatchesSlider/hooks.tsx b/src/features/MatchesSlider/hooks.tsx index ff130b72..bce44cf7 100644 --- a/src/features/MatchesSlider/hooks.tsx +++ b/src/features/MatchesSlider/hooks.tsx @@ -6,10 +6,16 @@ import { useCallback, } from 'react' +import throttle from 'lodash/throttle' + import type { Match } from 'features/HeaderFilters' import { MATCH_CARD_WIDTH, MATCH_CARD_GAP } from 'features/MatchCard/config' import { useToggle } from 'hooks' +const MATCHES_TO_SCROLL = 6 + +const SCROLLING_DELAY = 750 + export const useCard = () => { const { close, @@ -59,13 +65,13 @@ export const useMatchesSlider = (matches: Array) => { setShowRigthArrow((targetScrollWidth - (targetScrollLeft + targetClientWidth)) > 1) }, []) - const slideLeft = useCallback(() => { - slidesRef.current!.scrollBy(-(MATCH_CARD_WIDTH + MATCH_CARD_GAP), 0) - }, []) + const slideLeft = useCallback(throttle(() => { + slidesRef.current!.scrollBy(-((MATCH_CARD_WIDTH + MATCH_CARD_GAP) * MATCHES_TO_SCROLL), 0) + }, SCROLLING_DELAY), []) - const slideRight = useCallback(() => { - slidesRef.current!.scrollBy(MATCH_CARD_WIDTH + MATCH_CARD_GAP, 0) - }, []) + const slideRight = useCallback(throttle(() => { + slidesRef.current!.scrollBy((MATCH_CARD_WIDTH + MATCH_CARD_GAP) * MATCHES_TO_SCROLL, 0) + }, SCROLLING_DELAY), []) return { onScroll, diff --git a/src/features/Menu/styled.tsx b/src/features/Menu/styled.tsx index 38b799cf..11b6e771 100644 --- a/src/features/Menu/styled.tsx +++ b/src/features/Menu/styled.tsx @@ -25,7 +25,8 @@ export const ToggleButton = styled.button` ` export const MenuList = styled.ul` position: absolute; - top: 45px; + top: 50px; + left: -73px; width: 288px; border-radius: 2px; background-color: #666; @@ -35,7 +36,7 @@ export const MenuList = styled.ul` content: ''; position: absolute; top: 0; - left: 50%; + left: 82px; width: 12px; height: 12px; transform: translate(-50%, -50%) rotate(45deg); diff --git a/src/features/ProfileCard/styled.tsx b/src/features/ProfileCard/styled.tsx index 23f05273..079b3210 100644 --- a/src/features/ProfileCard/styled.tsx +++ b/src/features/ProfileCard/styled.tsx @@ -4,8 +4,6 @@ import { ProfileTypes } from 'config' export const Wrapper = styled.div` display: flex; - max-width: 815px; - margin-right: 100px; ` export const Name = styled.h1`