[feat] Use ui kit v2 component for the audio player buttons

aimhubio · Jul 11, 2023 · 49c7ff3 · 49c7ff3
1 parent 1569fcc
commit 49c7ff3
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 48 deletions.
diff --git 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
@@ -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,20 +76,22 @@ 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}
                   color='#414b6d'
                   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
@@ -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
@@ -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