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`