From 52c5619b54f6b0c86cedf6fd15de3f35c1a738ce Mon Sep 17 00:00:00 2001
From: Farber Denis <dsnakez11@yandex.ru>
Date: Mon, 14 Nov 2022 12:11:46 +0300
Subject: [PATCH] style(#in177): audiotrack button arrow icon add

---
 src/features/AudioTracks/index.tsx  | 10 +++++++---
 src/features/AudioTracks/styled.tsx | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/features/AudioTracks/index.tsx b/src/features/AudioTracks/index.tsx
index c9901ad1..75b3a958 100644
--- a/src/features/AudioTracks/index.tsx
+++ b/src/features/AudioTracks/index.tsx
@@ -17,6 +17,7 @@ import {
   ScHeader,
   ScModal,
   SelectedAudioTrack,
+  IconArrow,
 } from './styled'
 
 export type AudioTracksProps = {
@@ -88,9 +89,12 @@ export const AudioTracks = ({
   return (
     <Fragment>
       {audioTracks?.length > 1 && (
-        <SelectedAudioTrack onClick={open}>
-          {selectedAudioTrack?.name}
-        </SelectedAudioTrack>
+        <Fragment>
+          <SelectedAudioTrack onClick={open}>
+            {selectedAudioTrack?.name}
+            <IconArrow active={isOpen} />
+          </SelectedAudioTrack>
+        </Fragment>
       )}
       {content}
     </Fragment>
diff --git a/src/features/AudioTracks/styled.tsx b/src/features/AudioTracks/styled.tsx
index e4b1d120..f41be963 100644
--- a/src/features/AudioTracks/styled.tsx
+++ b/src/features/AudioTracks/styled.tsx
@@ -12,6 +12,9 @@ export const SelectedAudioTrack = styled(ButtonBase)`
   font-size: 16px;
   color: rgba(255, 255, 255, 0.7);
   font-weight: 600;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   ${isMobileDevice ? css`
     width: 80px;
@@ -95,3 +98,16 @@ export const ScHeader = styled.div`
   font-weight: 700;
   text-transform: uppercase;
 `
+
+export const IconArrow = styled.div<{ active: boolean}>`
+  width: 13px;
+  height: 13px;
+  margin-left: 5px;
+  background: url(/images/boldArrowWhite.svg) no-repeat;
+  background-size: contain;
+  background-position: center;
+
+  ${({ active }) => (active ? css`
+    transform: rotate(180deg);
+  ` : '')}
+`