From 78e030bc4b652b05b2a3e2f86799c9eb3658419d Mon Sep 17 00:00:00 2001
From: Andrei Dekterev <avdekterev@gmail.com>
Date: Wed, 6 Jul 2022 22:46:58 +0700
Subject: [PATCH] fix(#2526): fix style button get gighlights and priceinfo

---
 src/components/AudioPlayer/index.tsx                |  5 ++---
 src/features/UserAccount/styled.tsx                 |  5 ++---
 .../HighlightsPage/components/PriceInfo/styled.tsx  | 13 ++++++++++---
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/AudioPlayer/index.tsx b/src/components/AudioPlayer/index.tsx
index 97e869bd..604abb15 100644
--- a/src/components/AudioPlayer/index.tsx
+++ b/src/components/AudioPlayer/index.tsx
@@ -1,4 +1,3 @@
-import { memo } from 'react'
 import { Icon } from 'features/Icon'
 
 import { ScAudioContainer } from './styled'
@@ -9,7 +8,7 @@ type AudioPropsType = {
   asset: string,
 }
 
-export const AudioPlayer = memo(({ asset }: AudioPropsType) => {
+export const AudioPlayer = ({ asset }: AudioPropsType) => {
   const { playing, toggle } = useAudioPlayer(asset)
 
   return (
@@ -17,4 +16,4 @@ export const AudioPlayer = memo(({ asset }: AudioPropsType) => {
       <Icon refIcon='Sound' />
     </ScAudioContainer>
   )
-})
+}
diff --git a/src/features/UserAccount/styled.tsx b/src/features/UserAccount/styled.tsx
index 552c0bbb..809f9f98 100644
--- a/src/features/UserAccount/styled.tsx
+++ b/src/features/UserAccount/styled.tsx
@@ -260,9 +260,8 @@ export const InlineButton = styled.button<InlineButtonProps>`
 `
 
 export const ScButtonGetHighlight = styled(ButtonOutline)`
-  max-width: 200px; 
-  max-height: 50px;
-  margin: 15px 0;
+  padding: 0;
+  margin: 30px 0;
   border: 1px solid #FFFFFF;
   border-radius: 5px;
   filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
diff --git a/src/pages/HighlightsPage/components/PriceInfo/styled.tsx b/src/pages/HighlightsPage/components/PriceInfo/styled.tsx
index ec9ce29c..c5fb0ec4 100644
--- a/src/pages/HighlightsPage/components/PriceInfo/styled.tsx
+++ b/src/pages/HighlightsPage/components/PriceInfo/styled.tsx
@@ -2,8 +2,8 @@ import { isMobileDevice } from 'config/userAgent'
 import styled, { css } from 'styled-components/macro'
 
 export const ScPriceInfo = styled.div`
-  min-width: 106px;
   height: 186px;
+  min-width: 150px;
   border: 1px solid #FFFFFF;
   border-radius: 34px;
   display: flex;
@@ -18,10 +18,11 @@ export const ScPriceInfo = styled.div`
   line-height: 28px;
 
   > * {
-    margin: 10px 0;
+    margin: 15px 0;
 
     ${isMobileDevice
     ? css`
+        min-width: 100px;
         margin: 0;
       `
     : ''};
@@ -45,10 +46,12 @@ export const ScTitle = styled.span`
 
 export const ScPrice = styled.span`
   font-size: 80px;
+  margin-left: -22px;
   text-align: center;
 
   ${isMobileDevice
     ? css`
+        margin: 0;
         font-size: 32px;
       `
     : ''};
@@ -66,8 +69,12 @@ export const ScCurrency = styled.span`
 
 export const ScWatchDemo = styled.span`
   font-weight: 400;
+  width: 100%;
   text-align: center;
   text-decoration: underline;
-  cursor: pointer;
   flex-direction: row;
+
+  & :hover {
+    cursor: pointer;
+  }
 `