From 49c7ff3fa6afe76a3f704ea0862fa804b45db4b3 Mon Sep 17 00:00:00 2001
From: Arsen Alkamyan <alkamyan97@gmail.com>
Date: Tue, 11 Jul 2023 16:09:24 +0400
Subject: [PATCH] [feat] Use ui kit v2 component for the audio player buttons

---
 .../components/AudioPlayer/AudioPlayer.scss   |  6 --
 .../components/AudioPlayer/AudioPlayer.tsx    | 62 +++++++++++--------
 .../AudioPlayerVolume/AudioPlayerVolume.tsx   | 16 ++---
 .../components/BoxWrapper/BoxWithStacking.tsx | 17 ++---
 4 files changed, 53 insertions(+), 48 deletions(-)

diff --git a/src/aimcore/web/ui/src/components/AudioPlayer/AudioPlayer.scss b/src/aimcore/web/ui/src/components/AudioPlayer/AudioPlayer.scss
index 1d3aab135d..ddce74ef9c 100644
--- a/src/aimcore/web/ui/src/components/AudioPlayer/AudioPlayer.scss
+++ b/src/aimcore/web/ui/src/components/AudioPlayer/AudioPlayer.scss
@@ -11,13 +11,7 @@
     border-radius: $border-radius-main;
     width: toRem(268px);
     height: toRem(40px);
-    &__download {
-      min-width: 1.5rem;
-    }
     &__player {
-      min-width: 1.5rem;
-      height: 1.5rem;
-      border-radius: $radius-main;
       position: relative;
       display: flex;
       align-items: center;
diff --git a/src/aimcore/web/ui/src/components/AudioPlayer/AudioPlayer.tsx b/src/aimcore/web/ui/src/components/AudioPlayer/AudioPlayer.tsx
index 8b2fa44676..8d2940b278 100644
--- a/src/aimcore/web/ui/src/components/AudioPlayer/AudioPlayer.tsx
+++ b/src/aimcore/web/ui/src/components/AudioPlayer/AudioPlayer.tsx
@@ -1,9 +1,13 @@
-import React from 'react';
+import {
+  IconDownload,
+  IconPlayerPauseFilled,
+  IconPlayerPlayFilled,
+} from '@tabler/icons-react';
 
 import ErrorBoundary from 'components/ErrorBoundary';
-import { Tooltip, Text } from 'components/kit_v2';
+import { Tooltip, Text, IconButton } from 'components/kit_v2';
 
-import { Button, Icon, Spinner } from '../kit';
+import { Spinner } from '../kit';
 
 import { AudioPlayerProps, AudioPlayerProgress, AudioPlayerVolume } from '.';
 
@@ -44,23 +48,25 @@ function AudioPlayer(props: AudioPlayerProps) {
               onPause={onPause}
             />
             <>
-              {processing ? (
-                <Spinner
-                  className='Icon__container'
-                  size={12}
-                  color='#414b6d'
-                  thickness={2}
-                />
-              ) : (
-                <Button
-                  onClick={isPlaying ? onPause : onPlay}
-                  color='secondary'
-                  withOnlyIcon
-                  size='xSmall'
-                >
-                  <Icon name={isPlaying ? 'pause' : 'play'} />
-                </Button>
-              )}
+              <IconButton
+                variant='ghost'
+                icon={
+                  processing ? (
+                    <Spinner
+                      className='Icon__container'
+                      size={12}
+                      color='#414b6d'
+                      thickness={2}
+                    />
+                  ) : isPlaying ? (
+                    <IconPlayerPauseFilled />
+                  ) : (
+                    <IconPlayerPlayFilled />
+                  )
+                }
+                onClick={isPlaying ? onPause : onPlay}
+                color='secondary'
+              />
             </>
           </div>
           <AudioPlayerProgress
@@ -70,9 +76,10 @@ function AudioPlayer(props: AudioPlayerProps) {
             disabled={!readyToPlay}
           />
           <AudioPlayerVolume audio={audioRef.current} />
-          <div className='AudioPlayer__controllers__download'>
-            <Button withOnlyIcon size='xSmall' onClick={onDownload}>
-              {processing ? (
+          <IconButton
+            variant='ghost'
+            icon={
+              processing ? (
                 <Spinner
                   className='Icon__container'
                   size={12}
@@ -80,10 +87,11 @@ function AudioPlayer(props: AudioPlayerProps) {
                   thickness={2}
                 />
               ) : (
-                <Icon name='download' />
-              )}
-            </Button>
-          </div>
+                <IconDownload />
+              )
+            }
+            onClick={onDownload}
+          />
         </div>
         {caption ? (
           <Tooltip content={caption} contentProps={{ side: 'bottom' }}>
diff --git a/src/aimcore/web/ui/src/components/AudioPlayer/AudioPlayerVolume/AudioPlayerVolume.tsx b/src/aimcore/web/ui/src/components/AudioPlayer/AudioPlayerVolume/AudioPlayerVolume.tsx
index 92d781d028..a9209f3d7b 100644
--- a/src/aimcore/web/ui/src/components/AudioPlayer/AudioPlayerVolume/AudioPlayerVolume.tsx
+++ b/src/aimcore/web/ui/src/components/AudioPlayer/AudioPlayerVolume/AudioPlayerVolume.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 
+import { IconVolume, IconVolumeOff } from '@tabler/icons-react';
+
 import ErrorBoundary from 'components/ErrorBoundary';
-import { Button, Icon, Slider } from 'components/kit';
+import { Slider } from 'components/kit';
+import { IconButton } from 'components/kit_v2';
 
 import { AudioPlayerVolumeProps } from './AudioPlayerVolume.d';
 
@@ -36,14 +39,13 @@ function AudioPlayerVolume({ audio }: AudioPlayerVolumeProps) {
   return (
     <ErrorBoundary>
       <div className='AudioPlayerVolume'>
-        <Button
+        <IconButton
+          variant='ghost'
+          icon={isMuted || volume === 0 ? <IconVolumeOff /> : <IconVolume />}
           className='AudioPlayerVolume__button'
           onClick={onVolumeToggle}
-          withOnlyIcon
-          size='xSmall'
-        >
-          <Icon name={isMuted || volume === 0 ? 'voice-off' : 'voice-on'} />
-        </Button>
+        />
+
         <div className='AudioPlayerVolume__slider'>
           <Slider
             onChange={onVolumeChange}
diff --git a/src/aimcore/web/ui/src/modules/BaseExplorer/components/BoxWrapper/BoxWithStacking.tsx b/src/aimcore/web/ui/src/modules/BaseExplorer/components/BoxWrapper/BoxWithStacking.tsx
index 4e7ad00931..aa969e5510 100644
--- a/src/aimcore/web/ui/src/modules/BaseExplorer/components/BoxWrapper/BoxWithStacking.tsx
+++ b/src/aimcore/web/ui/src/modules/BaseExplorer/components/BoxWrapper/BoxWithStacking.tsx
@@ -1,8 +1,11 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
 
+import { IconMaximize } from '@tabler/icons-react';
+
 import DepthSlider, { IDepthSliderProps } from 'components/DepthSlider';
-import { Button, Icon, Text } from 'components/kit';
+import { Text } from 'components/kit';
+import { IconButton } from 'components/kit_v2';
 
 import { SequenceType } from 'types/core/enums';
 import { AimFlatObjectBase } from 'types/core/AimObjects';
@@ -87,14 +90,12 @@ function BoxWithStacking(props: IBoxWithStackingProps<AimFlatObjectBase>) {
 
   return currentItem ? (
     <div className='BoxWrapper' style={{ ...boxConfig, ...currentItem.style }}>
-      <Button
-        onClick={() => setFullView(true)}
-        size='xSmall'
-        withOnlyIcon
+      <IconButton
         className='BoxWrapper__fullScreen'
-      >
-        <Icon name='full-screen' />
-      </Button>
+        variant='ghost'
+        icon={<IconMaximize />}
+        onClick={() => setFullView(true)}
+      />
       <div className='BoxWrapper__box'>
         {BoxContent && (
           <BoxContent