refactor(#315): added selected tournament clear button (#94)

public/images/clear.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M10 1L9 0L5 4L1 0L0 1L4 5L0 9L1 10L5 6L9 10L10 9L6 5L10 1Z" fill="white" fill-opacity="0.5"/>
+</svg>

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

@@ -1,4 +1,4 @@
-import type { BaseSyntheticEvent } from 'react'
+import type { BaseSyntheticEvent, MouseEvent } from 'react'
 import { useEffect, useState } from 'react'
 
 import find from 'lodash/find'
@@ -60,10 +60,16 @@ export const useTournamentFilter = () => {
     close()
   }
 
+  const onResetSelectedTournament = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    setSelectedTournamentId(null)
+  }
+
   return {
     close,
     handleScroll,
     isOpen,
+    onResetSelectedTournament,
     onTournamentSelect,
     open,
     selectedTournament,

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

@@ -11,6 +11,7 @@ import {
   DropdownButton,
   ButtonTitle,
   Arrows,
+  ClearButton,
 } from './styled'
 
 export const TournamentFilter = () => {
@@ -18,6 +19,7 @@ export const TournamentFilter = () => {
     close,
     handleScroll,
     isOpen,
+    onResetSelectedTournament,
     onTournamentSelect,
     open,
     selectedTournament,
@@ -38,6 +40,11 @@ export const TournamentFilter = () => {
               : <T9n t='tournament' />
           }
         </ButtonTitle>
+        {
+          selectedTournament && (
+            <ClearButton onClick={onResetSelectedTournament} />
+          )
+        }
         <Arrows active={isOpen} />
       </DropdownButton>
       {

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

@@ -22,6 +22,7 @@ export const DropdownButton = styled.button<Props>`
   position: relative;
   height: 100%;
   width: 100%;
+  padding-right: 45px;
   outline: none;
   border: none;
   display: flex;
@@ -52,7 +53,7 @@ export const DropdownButton = styled.button<Props>`
 
 export const ButtonTitle = styled.span`
   display: inline-block;
-  width: 80%;
+  flex-grow: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -86,3 +87,16 @@ export const Wrapper = styled.div`
     border-bottom-right-radius: 2px;
   }
 `
+
+export const ClearButton = styled.button`
+  outline: none;
+  border: none;
+  cursor: pointer;
+  width: 10px;
+  height: 10px;
+  margin-left: 10px;
+  background-color: transparent;
+  background-image: url(/images/clear.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+`