Ott 288 match hover (#84)

* style(#288 #290): filterwrapper sizes fix and match card border on hover added

* style(#288): drop down list style fix

src/features/Header/index.tsx

@@ -48,7 +48,7 @@ export const Header = () => {
             </FilterWrapper>
 
             {isOnHome && (
-              <FilterWrapper>
+              <FilterWrapper size='400px'>
                 <SportTypeFilter />
                 <TournamentFilter />
               </FilterWrapper>

src/features/HeaderFilters/components/TournamentFilter/styled.tsx

@@ -4,7 +4,7 @@ import { customScrollbar } from 'features/Common'
 
 export const ListWrapper = styled.div`
   position: absolute;
-  left: -100%;
+  left: 0;
   top: calc(100% + 8px);
   width: 448px;
   height: 456px;

src/features/MatchCard/styled.tsx

@@ -11,11 +11,17 @@ export const CardWrapper = styled.li.attrs({
   flex: 0 0 auto;
   width: ${MATCH_CARD_WIDTH}px;
   margin-right: ${MATCH_CARD_GAP}px;
-  padding-bottom: 22px;
+  padding-bottom: 18px;
   border-radius: 2px;
+  border: 2px solid transparent;
   background-color: #3F3F3F;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
   cursor: pointer;
+  transition: border 0.5s ease-out;
+
+  &:hover {
+    border: 2px solid #A4A4A4
+  }
 `
 
 export const PreviewWrapper = styled.div`