feat(ott-276): matches slider changes (#83)

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 = () => (
-  <HeaderFiltersStore>
+  <Content>
-    <Content>
+    <Matches />
-      <Matches />
+  </Content>
-    </Content>
-  </HeaderFiltersStore>
 )

src/features/LanguageSelect/styled.tsx

@@ -16,6 +16,7 @@ export const WorldIcon = styled.button<WorldIconProps>`
   height: 18px;
   border: none;
   background: none;
+  outline: none;
   background-image: url(/images/worldIcon.svg);
   background-position-x: -1px;
   cursor: pointer;

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<Match>) => {
     setShowRigthArrow((targetScrollWidth - (targetScrollLeft + targetClientWidth)) > 1)
   }, [])
 
-  const slideLeft = useCallback(() => {
+  const slideLeft = useCallback(throttle(() => {
-    slidesRef.current!.scrollBy(-(MATCH_CARD_WIDTH + MATCH_CARD_GAP), 0)
+    slidesRef.current!.scrollBy(-((MATCH_CARD_WIDTH + MATCH_CARD_GAP) * MATCHES_TO_SCROLL), 0)
-  }, [])
+  }, SCROLLING_DELAY), [])
 
-  const slideRight = useCallback(() => {
+  const slideRight = useCallback(throttle(() => {
-    slidesRef.current!.scrollBy(MATCH_CARD_WIDTH + MATCH_CARD_GAP, 0)
+    slidesRef.current!.scrollBy((MATCH_CARD_WIDTH + MATCH_CARD_GAP) * MATCHES_TO_SCROLL, 0)
-  }, [])
+  }, SCROLLING_DELAY), [])
 
   return {
     onScroll,

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

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`