fix(#2572): fix audio player and some layout

src/components/AudioPlayer/hooks.tsx

@@ -6,7 +6,7 @@ import {
 import { readToken } from 'helpers'
 
 export const useAudioPlayer = (asset: string) => {
-  const [audio, setAudio] = useState<HTMLAudioElement>()
+  const [audio, setAudio] = useState<HTMLAudioElement | null>(null)
   const [playing, setPlaying] = useState(false)
 
   const toggle = (e: SyntheticEvent) => {
@@ -16,15 +16,16 @@ export const useAudioPlayer = (asset: string) => {
   }
 
   useEffect(() => {
+    setPlaying(false)
+    audio?.pause()
     asset && setAudio(new Audio(`${asset}?access_token=${readToken()}`))
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [asset])
 
   useEffect(() => {
-    if (!audio) return
     playing ? audio?.play() : audio?.pause()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playing, audio])
+  }, [playing])
 
   useEffect(() => {
     audio?.addEventListener('ended', () => setPlaying(false))

src/features/AddCardForm/components/ElementContainer/index.tsx

@@ -32,13 +32,19 @@ const Label = styled.label<LabelProps>`
 
   ${isMobileDevice
     ? css`
-     height: 36px;
+     height: 27px;
      font-size: 12px;
      padding: 0 13px;
      align-items: center;
+
+     
      :nth-child(3){
       width: 48%;
      }
+     
+     /* & .test_class {
+      width: 48%;
+     } */
      :nth-child(4){
       width: 48%;
      }
@@ -74,6 +80,7 @@ const ElementWrapper = styled.div`
 type Props = {
   backgroundColor?: string,
   children: ReactNode,
+  className?: string,
   label?: string,
   width?: string,
 }
@@ -81,10 +88,11 @@ type Props = {
 export const ElementContainer = ({
   backgroundColor,
   children,
+  className,
   label,
   width,
 }: Props) => (
-  <Label width={width} backgroundColor={backgroundColor}>
+  <Label width={width} backgroundColor={backgroundColor} className={className}>
     {label && <Text t={label} />}
     <ElementWrapper>
       {children}

src/features/AddCardForm/components/Form/index.tsx

@@ -120,6 +120,7 @@ export const AddCardFormInner = (props: Props) => {
         <ElementContainer
           label={isLabelVisible(ElementTypes.CardExpiry) ? 'form_card_expiration' : ''}
           width='275px'
+          className='test_class'
           backgroundColor={inputsBackground}
         >
           <CardExpiryElement
@@ -161,7 +162,7 @@ export const AddCardFormInner = (props: Props) => {
         </CountryWrapper>
         <ElementContainer
           label={isLabelVisible(ElementTypes.CardCity) ? 'city' : ''}
-          width='275px'
+          width={isMobileDevice ? '100%' : '275px'}
           backgroundColor={inputsBackground}
         >
           <Input
@@ -175,6 +176,7 @@ export const AddCardFormInner = (props: Props) => {
         </ElementContainer>
         <ElementContainer
           label={isLabelVisible(ElementTypes.CardAddress) ? 'address' : ''}
+          width='100%'
           backgroundColor={inputsBackground}
         >
           <Input
@@ -184,6 +186,7 @@ export const AddCardFormInner = (props: Props) => {
             onChange={onAddressChange}
             onFocus={onInputsFocus(ElementTypes.CardAddress)}
             onBlur={onInputsBlur(ElementTypes.CardAddress)}
+            className='ChangeCard__Form__Address'
           />
         </ElementContainer>
       </Column>

src/features/AddCardForm/styled.tsx

@@ -90,7 +90,6 @@ export const SectionTitle = styled.span`
       }
     `
     : ''};
-
 `
 
 export const CountryWrapper = styled.div`
@@ -101,10 +100,22 @@ export const CustomCombobox = styled(Combobox)`
   ${InputWrapper}{
     height: 50px;
     margin-top: 0;
+
+  ${isMobileDevice
+    ? css`
+      height: 27px;
+    `
+    : ''};
   }
   ${LabelTitle}{
     line-height:45px;
     font-size: 16px;
+
+    ${isMobileDevice
+    ? css`
+      font-size: 12px;
+    `
+    : ''};
   }
   ${InputStyled}{
     height: 50px;

src/features/BuyMatchPopup/components/CardsList/index.tsx

@@ -31,7 +31,7 @@ const Item = styled.li`
     ? css`
       width: 100%;
       height: 21px;
-      margin-bottom: 14px;
+      /* margin-bottom: 14px; */
     `
     : ''}
 `
@@ -53,7 +53,7 @@ const Radio = styled(RadioBase)`
     margin-right: 12px;
     ${isMobileDevice
     ? css`
-      margin-right: 18px;
+      /* margin-right: 18px; */
       width: 16px;
       height: 16px;
     `

src/features/BuyMatchPopup/styled.tsx

@@ -103,7 +103,7 @@ export const Wrapper = styled.div<WrapperProps>`
 
       @media (max-width: 1370px) {
        max-width: 743px;
-       max-height: 650px;
+       /* max-height: 650px; */
 
       }
       @media (max-width: 650px){

src/features/Combobox/index.tsx

@@ -117,7 +117,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
           <WrapperIcon>
             <Icon refIcon={iconName} />
           </WrapperIcon>
-        ) : (
+        ) : !disabled && (
           <Arrow isExpanded={isOpen} toggle={toggle} />
         )}
         {isOpen && !isEmpty(options) && (

src/features/ProfileCard/styled.tsx

@@ -104,7 +104,7 @@ ${isMobileDevice
     ? css`
       @media (max-width: 650px),(orientation: landscape){
         width: 100px;
-        height: 22px;
+        min-height: 17px;
         font-size: 10px;
         border-radius: 7px;
         border: 0.7px solid #fff;
@@ -172,6 +172,12 @@ export const StyledLink = styled(ProfileLink)`
 export const SсBtnWrapper = styled.div`
   display: flex;
   flex-direction: row;
+
+  ${isMobileDevice
+    ? css`
+      flex-direction: column;
+    `
+    : ''};
 `
 
 export const SсGetHighlightBtn = styled(ButtonSolid)`
@@ -186,4 +192,17 @@ export const SсGetHighlightBtn = styled(ButtonSolid)`
   height: 1.95rem;
   border-radius: 13px;
   margin-left: 5px;
+
+  ${isMobileDevice
+    ? css`
+      width: 100%;
+      min-height: 17px;
+      font-size: 10px;
+      border-radius: 7px;
+      margin: 0;
+      border: 0.7px solid #fff;
+      font-size: 10px;
+      line-height: 24px;
+    `
+    : ''};
 `

src/pages/HighlightsPage/components/FormHighlights/hooks.tsx

@@ -329,6 +329,10 @@ export const useHighlightsForm = () => {
           ...player,
           name: `${player?.firstname_eng} ${player?.lastname_eng}`,
         })))
+        setPlayers(state?.map((player: Player) => ({
+          ...player,
+          name: `${player?.firstname_eng} ${player?.lastname_eng}`,
+        })))
       })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [formState?.selectedTeam, playerHighlight])

src/pages/HighlightsPage/components/FormHighlights/index.tsx

@@ -141,7 +141,8 @@ export const FormHighlights = ({ price }: PriceInfoType) => {
             withError={false}
             wrapperHeight={wrapperHeight}
             labelBefore={selectedSound?.asset}
-            className='FormHighlights__input__sound'
+            className={selectedSound?.asset
+              ? 'FormHighlights__input__sound' : ''}
           />
           <Combobox
             disabled

src/pages/HighlightsPage/components/FormHighlights/styled.tsx

@@ -95,6 +95,18 @@ export const ScForm = styled.form`
       }
     }
 
+    .FormHighlights__input__sound {
+      & input {
+        margin-left: 33px;
+
+      ${isMobileDevice
+    ? css`
+        margin-left: 20px;
+      `
+    : ''};
+      }
+    }
+
     ${isMobileDevice
     ? css`
         max-width: 100%;

src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx

@@ -152,6 +152,12 @@ export const ScLoaderWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+
+  ${isMobileDevice
+    ? css`
+      left: 15%;
+    `
+    : ''};
 `
 
 export const ScCountMatches = styled.span`

src/pages/HighlightsPage/components/PriceInfo/styled.tsx

@@ -3,7 +3,6 @@ import styled, { css } from 'styled-components/macro'
 
 export const ScPriceInfo = styled.div`
   height: 186px;
-  min-width: 150px;
   border: 1px solid #FFFFFF;
   border-radius: 34px;
   display: flex;
@@ -11,7 +10,7 @@ export const ScPriceInfo = styled.div`
   justify-content: center;
   align-content: center;
   color: #FFFFFF;
-  padding: 21px;
+  padding: 21px 21px 21px 40px;
 
   font-weight: 600;
   font-size: 20px;

src/pages/HighlightsPage/components/ThanksPopup/styled.tsx

@@ -18,7 +18,7 @@ export const ScModal = styled(BaseModal)`
     flex-direction: column;
     padding: 50px;
     width: 497px;
-    height: 430px;
+    height: 470px;
 
     > * {
       margin-bottom: 25px;
@@ -61,6 +61,7 @@ export const ScText = styled.span`
 export const ScButton = styled(ButtonSolid)`
   width: 194px;
   height: 50px;
+  min-height: 50px;
   font-weight: 600;
   font-size: 20px;
   line-height: 50px;