matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve style of UploadProgress

Browse Source
This commit is contained in:
Justin
2022-03-30 11:22:37 -04:00
parent a15697faef
commit 6ccc1f10ec
3 changed files with 18 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/soapbox/features/compose/components/upload-progress.tsx
View File

@ -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>
);
};