refactor: remover wrapper div from UploadProgressIndicator

Author: szuperaz

src/components/Loading/UploadProgressIndicator.tsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import React from 'react';
 
 import { useComponentContext } from '../../context';
@@ -21,9 +20,5 @@ export const UploadProgressIndicator = ({
     return <LoadingIndicator data-testid='loading-indicator' />;
   }
 
-  return (
-    <div className={clsx('str-chat__attachment-upload-progress')}>
-      <ProgressIndicator percent={uploadProgress} />
-    </div>
-  );
+  return <ProgressIndicator percent={uploadProgress} />;
 };

src/components/Loading/progress-indicators.tsx

@@ -16,7 +16,7 @@ export const CircularProgressIndicator = ({ percent }: ProgressIndicatorProps) =
   const dashOffset = RING_CIRCUMFERENCE * (1 - percent / 100);
 
   return (
-    <div className='str-chat__circular-progress-indicator'>
+    <div className='str-chat__circular-progress-indicator str-chat__progress-indicator'>
       <svg
         aria-label={t('aria/Percent complete', { percent })}
         aria-valuemax={100}

src/components/MessageComposer/styling/AttachmentPreview.scss

@@ -211,7 +211,7 @@
     }
 
     .str-chat__loading-indicator,
-    .str-chat__attachment-upload-progress {
+    .str-chat__progress-indicator {
       width: var(--icon-size-sm);
       height: var(--icon-size-sm);
       position: absolute;
@@ -284,7 +284,7 @@
       line-height: var(--typography-line-height-tight);
 
       .str-chat__loading-indicator,
-      .str-chat__attachment-upload-progress {
+      .str-chat__progress-indicator {
         width: var(--icon-size-sm);
         height: var(--icon-size-sm);
         color: var(--accent-primary);