Improve style of UploadProgress

app/soapbox/features/compose/components/upload-progress.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import spring from 'react-motion/lib/spring';
+import { spring } from 'react-motion';
 
-import Icon from 'soapbox/components/icon';
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
 import Motion from '../../ui/util/optional_motion';
@@ -16,23 +16,29 @@ const UploadProgress = () => {
   }
 
   return (
-    <div className='upload-progress'>
-      <div className='upload-progress__icon'>
-        <Icon id='upload' />
-      </div>
+    <HStack alignItems='center' space={2}>
+      <Icon
+        src={require('@tabler/icons/icons/cloud-upload.svg')}
+        className='w-7 h-7 text-gray-500'
+      />
 
-      <div className='upload-progress__message'>
-        <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />
+      <Stack space={1}>
+        <Text theme='muted'>
+          <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />
+        </Text>
 
-        <div className='upload-progress__backdrop'>
+        <div className='w-full h-1.5 rounded-lg bg-gray-200 relative'>
           <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
             {({ width }) =>
-              <div className='upload-progress__tracker' style={{ width: `${width}%` }} />
+              (<div
+                className='absolute left-0 top-0 h-1.5 bg-primary-600 rounded-lg'
+                style={{ width: `${width}%` }}
+              />)
             }
           </Motion>
         </div>
-      </div>
-    </div>
+      </Stack>
+    </HStack>
   );
 };
 

app/styles/chats.scss

@@ -280,26 +280,6 @@
 }
 
 .chat-box {
-  .upload-progress {
-    padding: 0 10px;
-    align-items: center;
-    height: 25px;
-
-    .fa {
-      font-size: 22px;
-    }
-
-    &__message {
-      font-size: 13px;
-      flex: 1;
-      align-items: center;
-    }
-
-    &__backdrop {
-      margin-top: 2px;
-    }
-  }
-
   &__attachment {
     display: flex;
     align-items: center;

app/styles/components/compose-form.scss

@@ -320,47 +320,6 @@
   transform: translateY(1px);
 }
 
-.upload-progress {
-  padding: 10px;
-  color: var(--highlight-text-color);
-  overflow: hidden;
-  display: flex;
-
-  .fa {
-    font-size: 34px;
-    margin-right: 10px;
-  }
-
-  span {
-    font-size: 12px;
-    text-transform: uppercase;
-    font-weight: 500;
-    display: block;
-  }
-}
-
-.upload-progess__message {
-  flex: 1 1 auto;
-}
-
-.upload-progress__backdrop {
-  width: 100%;
-  height: 6px;
-  border-radius: 6px;
-  background: var(--brand-color--med);
-  position: relative;
-  margin-top: 5px;
-}
-
-.upload-progress__tracker {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 6px;
-  background: var(--brand-color);
-  border-radius: 6px;
-}
-
 .privacy-dropdown__dropdown {
   @apply absolute bg-white dark:bg-slate-900 z-40 rounded-md shadow-lg ml-10 text-sm;