refactor: sync CSS variable name with stream-chat-css

Author: MartinCupela

src/components/Attachment/__tests__/WaveProgressBar.test.js

@@ -35,7 +35,7 @@ describe('WaveProgressBar', () => {
   it('renders with default number of bars', () => {
     render(<WaveProgressBar seek={jest.fn()} waveformData={originalSample} />);
     const root = screen.getByTestId(BAR_ROOT_TEST_ID);
-    expect(root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap')).toBe(
+    expect(root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap-width')).toBe(
       '1px',
     );
     const bars = screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID);
@@ -58,7 +58,7 @@ describe('WaveProgressBar', () => {
       />,
     );
     const root = screen.getByTestId(BAR_ROOT_TEST_ID);
-    expect(root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap')).toBe(
+    expect(root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap-width')).toBe(
       '5px',
     );
     const bars = screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID);
@@ -80,7 +80,7 @@ describe('WaveProgressBar', () => {
       activeObserver.cb([{ contentRect: { width: 21 } }]);
     });
     const root = screen.getByTestId(BAR_ROOT_TEST_ID);
-    expect(root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap')).toBe(
+    expect(root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap-width')).toBe(
       '1px',
     );
     const bars = screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID);

src/components/Attachment/__tests__/__snapshots__/WaveProgressBar.test.js.snap

@@ -6,7 +6,7 @@ exports[`WaveProgressBar is rendered with zero progress by default if waveform d
     class="str-chat__wave-progress-bar__track"
     data-testid="wave-progress-bar-track"
     role="progressbar"
-    style="--str-chat__voice-recording-amplitude-bar-gap: 8px;"
+    style="--str-chat__voice-recording-amplitude-bar-gap-width: 8px;"
   >
     <div
       class="str-chat__wave-progress-bar__amplitude-bar"

src/components/Attachment/components/WaveProgressBar.tsx

@@ -130,7 +130,7 @@ export const WaveProgressBar = ({
       role='progressbar'
       style={
         {
-          '--str-chat__voice-recording-amplitude-bar-gap': trackAxisX?.gap + 'px',
+          '--str-chat__voice-recording-amplitude-bar-gap-width': trackAxisX?.gap + 'px',
         } as React.CSSProperties
       }
     >

src/components/MediaRecorder/AudioRecorder/__tests__/__snapshots__/AudioRecorder.test.js.snap

@@ -382,7 +382,7 @@ exports[`AudioRecorder renders audio recording stopped UI with recording preview
           class="str-chat__wave-progress-bar__track"
           data-testid="wave-progress-bar-track"
           role="progressbar"
-          style="--str-chat__voice-recording-amplitude-bar-gap: 1px;"
+          style="--str-chat__voice-recording-amplitude-bar-gap-width: 1px;"
         >
           <div
             class="str-chat__wave-progress-bar__amplitude-bar"