style(#in177): audiotrack button arrow icon add

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>

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);
+  ` : '')}
+`