From a15697faef83f19258e0031d2b2790927ab40d8d Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 30 Mar 2022 10:51:07 -0400
Subject: [PATCH 1/2] Convert UploadProgress to TSX

---
 .../features/chats/components/chat_box.js     |  2 +-
 .../compose/components/upload-progress.tsx    | 39 ++++++++++++++++
 .../compose/components/upload_form.js         |  4 +-
 .../compose/components/upload_progress.js     | 45 -------------------
 .../containers/upload_progress_container.js   |  2 +-
 5 files changed, 43 insertions(+), 49 deletions(-)
 create mode 100644 app/soapbox/features/compose/components/upload-progress.tsx
 delete mode 100644 app/soapbox/features/compose/components/upload_progress.js

diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js
index 8a3569221..4467c9656 100644
--- a/app/soapbox/features/chats/components/chat_box.js
+++ b/app/soapbox/features/chats/components/chat_box.js
@@ -12,8 +12,8 @@ import {
 } from 'soapbox/actions/chats';
 import { uploadMedia } from 'soapbox/actions/media';
 import IconButton from 'soapbox/components/icon_button';
+import UploadProgress from 'soapbox/features/compose/components/upload-progress';
 import UploadButton from 'soapbox/features/compose/components/upload_button';
-import UploadProgress from 'soapbox/features/compose/components/upload_progress';
 import { truncateFilename } from 'soapbox/utils/media';
 
 import ChatMessageList from './chat_message_list';
diff --git a/app/soapbox/features/compose/components/upload-progress.tsx b/app/soapbox/features/compose/components/upload-progress.tsx
new file mode 100644
index 000000000..fd292eb29
--- /dev/null
+++ b/app/soapbox/features/compose/components/upload-progress.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import spring from 'react-motion/lib/spring';
+
+import Icon from 'soapbox/components/icon';
+import { useAppSelector } from 'soapbox/hooks';
+
+import Motion from '../../ui/util/optional_motion';
+
+const UploadProgress = () => {
+  const active = useAppSelector((state) => state.compose.get('is_uploading'));
+  const progress = useAppSelector((state) => state.compose.get('progress'));
+
+  if (!active) {
+    return null;
+  }
+
+  return (
+    <div className='upload-progress'>
+      <div className='upload-progress__icon'>
+        <Icon id='upload' />
+      </div>
+
+      <div className='upload-progress__message'>
+        <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />
+
+        <div className='upload-progress__backdrop'>
+          <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
+            {({ width }) =>
+              <div className='upload-progress__tracker' style={{ width: `${width}%` }} />
+            }
+          </Motion>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UploadProgress;
diff --git a/app/soapbox/features/compose/components/upload_form.js b/app/soapbox/features/compose/components/upload_form.js
index f78203866..71e89517a 100644
--- a/app/soapbox/features/compose/components/upload_form.js
+++ b/app/soapbox/features/compose/components/upload_form.js
@@ -4,8 +4,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 // import SensitiveButtonContainer from '../containers/sensitive_button_container';
+import UploadProgress from '../components/upload-progress';
 import UploadContainer from '../containers/upload_container';
-import UploadProgressContainer from '../containers/upload_progress_container';
 
 export default class UploadForm extends ImmutablePureComponent {
 
@@ -21,7 +21,7 @@ export default class UploadForm extends ImmutablePureComponent {
 
     return (
       <div className='compose-form__upload-wrapper'>
-        <UploadProgressContainer />
+        <UploadProgress />
 
         <div className={classes}>
           {mediaIds.map(id => (
diff --git a/app/soapbox/features/compose/components/upload_progress.js b/app/soapbox/features/compose/components/upload_progress.js
deleted file mode 100644
index 2a66a67ed..000000000
--- a/app/soapbox/features/compose/components/upload_progress.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import spring from 'react-motion/lib/spring';
-
-import Icon from 'soapbox/components/icon';
-
-import Motion from '../../ui/util/optional_motion';
-
-export default class UploadProgress extends React.PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    progress: PropTypes.number,
-  };
-
-  render() {
-    const { active, progress } = this.props;
-
-    if (!active) {
-      return null;
-    }
-
-    return (
-      <div className='upload-progress'>
-        <div className='upload-progress__icon'>
-          <Icon id='upload' />
-        </div>
-
-        <div className='upload-progress__message'>
-          <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />
-
-          <div className='upload-progress__backdrop'>
-            <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
-              {({ width }) =>
-                <div className='upload-progress__tracker' style={{ width: `${width}%` }} />
-              }
-            </Motion>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/containers/upload_progress_container.js b/app/soapbox/features/compose/containers/upload_progress_container.js
index 593ff3d3b..8113aadb6 100644
--- a/app/soapbox/features/compose/containers/upload_progress_container.js
+++ b/app/soapbox/features/compose/containers/upload_progress_container.js
@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 
-import UploadProgress from '../components/upload_progress';
+import UploadProgress from '../components/upload-progress';
 
 const mapStateToProps = state => ({
   active: state.getIn(['compose', 'is_uploading']),

From 6ccc1f10ece9b5c1e1373880ae89fc255463f00a Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 30 Mar 2022 11:22:37 -0400
Subject: [PATCH 2/2] Improve style of UploadProgress

---
 .../compose/components/upload-progress.tsx    | 30 ++++++++------
 app/styles/chats.scss                         | 20 ---------
 app/styles/components/compose-form.scss       | 41 -------------------
 3 files changed, 18 insertions(+), 73 deletions(-)

diff --git a/app/soapbox/features/compose/components/upload-progress.tsx b/app/soapbox/features/compose/components/upload-progress.tsx
index fd292eb29..1c891653e 100644
--- a/app/soapbox/features/compose/components/upload-progress.tsx
+++ b/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>
   );
 };
 
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 6060e882f..aefb0cc98 100644
--- a/app/styles/chats.scss
+++ b/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;
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index 7fca9a08a..46745ead1 100644
--- a/app/styles/components/compose-form.scss
+++ b/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;