fix: adjust redpacket ui (#12001)

* fix: mf-6521 adjust texts in custom cover view

* fix: mf-6522 limit select file types

* fix: mf-6525 redpacket message wrap

* fix: mf-6525 redpacket message wrap

* fix: mf-6524 max button color

* fixup! fix: mf-6521 adjust texts in custom cover view

* fix: progress bar

* fix: increase max file size to 1.5MB

Author: swkatmask

packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketEnvelope.tsx

@@ -50,6 +50,8 @@ const useStyles = makeStyles()((theme) => ({
         color: theme.palette.maskColor.white,
         background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(102, 102, 102, 0.10) 100%)',
         backdropFilter: 'blur(5px)',
+        wordBreak: 'break-all',
+        whiteSpace: 'normal',
         display: 'flex',
         alignItems: 'center',
         overflow: 'hidden',
@@ -98,21 +100,29 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
     },
     bar: {
-        width: 78,
-        height: 7,
+        width: 80,
+        height: 9,
         borderRadius: 999,
-        border: '1px solid  rgba(255, 255, 255, 0.28)',
         position: 'relative',
+        overflow: 'hidden',
+    },
+    outline: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        borderRadius: 999,
+        border: '1px solid  rgba(255, 255, 255, 0.28)',
     },
     progress: {
         position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
         backgroundColor: 'rgba(255, 255, 255, 0.78)',
-        borderRadius: '999px 0 0 999px',
-        left: -1,
-        top: -1,
-        bottom: -1,
         '&[data-fulfilled]': {
-            right: -1,
             borderRadius: '999px',
         },
     },
@@ -221,6 +231,7 @@ export function RedPacketEnvelope({
                             </Typography>
                         :   <>
                                 <div className={classes.bar}>
+                                    <div className={classes.outline}></div>
                                     <div
                                         className={classes.progress}
                                         style={{ width: `${Math.min(1, claimed / shares) * 100}%` }}

packages/plugins/RedPacket/src/SiteAdaptor/components/RouterDialog.tsx

@@ -87,6 +87,7 @@ export function RouterDialog(props: InjectedDialogProps) {
         [RoutePaths.History]: <Trans>History</Trans>,
         [RoutePaths.HistoryDetail]: <Trans>Claim Details</Trans>,
         [RoutePaths.NftHistory]: <Trans>History</Trans>,
+        [RoutePaths.CustomCover]: <Trans>Add a Custom Cover</Trans>,
     }
     const titleTailMap: Record<string, ReactNode> = {
         [RoutePaths.CreateErc20RedPacket]: (

packages/plugins/RedPacket/src/SiteAdaptor/views/CustomCover.tsx

@@ -1,14 +1,14 @@
-import { ImageEditorModal, UploadDropArea, useUnmountedRef } from '@masknet/shared'
+import { t, Trans } from '@lingui/macro'
+import { Icons } from '@masknet/icons'
+import { formatFileSize, ImageEditorModal, UploadDropArea, useUnmountedRef } from '@masknet/shared'
+import { makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { FireflyConfig, FireflyRedPacket } from '@masknet/web3-providers'
 import { Box, Button, DialogActions, Typography } from '@mui/material'
 import { useEffect, useMemo, useState } from 'react'
-import { MAX_FILE_SIZE } from '../../constants.js'
-import { makeStyles, useCustomSnackbar } from '@masknet/theme'
-import { Icons } from '@masknet/icons'
-import { t, Trans } from '@lingui/macro'
 import { useNavigate } from 'react-router-dom'
-import { FireflyConfig, FireflyRedPacket } from '@masknet/web3-providers'
-import { useRedPacket } from '../contexts/RedPacketContext.js'
 import { useAsyncFn } from 'react-use'
+import { MAX_FILE_SIZE } from '../../constants.js'
+import { useRedPacket } from '../contexts/RedPacketContext.js'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -136,12 +136,18 @@ export function CustomCover() {
                 :   <UploadDropArea
                         maxFileSize={MAX_FILE_SIZE}
                         onSelectFile={setBlob}
+                        accept="image/png, image/jpeg, image/gif, image/bmp, image/webp"
                         subtitle={
                             <>
                                 <Typography className={classes.tips}>
-                                    Supported formats: JPEG, PNG, GIF Size limit: 1MB
+                                    <Trans>
+                                        Supported formats: JPEG, PNG, GIF
+                                        <br /> Size limit: {formatFileSize(MAX_FILE_SIZE)}
+                                    </Trans>
+                                </Typography>
+                                <Typography className={classes.tips}>
+                                    <Trans>Recommended dimensions: 1016 × 672 px</Trans>
                                 </Typography>
-                                <Typography className={classes.tips}>Recommended dimensions: 1016 × 672 px</Typography>
                             </>
                         }
                     />
@@ -154,7 +160,7 @@ export function CustomCover() {
                 <Button variant="contained" disabled={!blob || saving} fullWidth onClick={save}>
                     {saving ?
                         <Trans>Saving</Trans>
-                    :   <Trans>Save</Trans>}
+                    :   <Trans>Confirm</Trans>}
                 </Button>
             </DialogActions>
         </>

packages/plugins/RedPacket/src/SiteAdaptor/views/Erc20RedPacketConfirm.tsx

@@ -25,6 +25,14 @@ import { useCreateFTRedpacketCallback } from '../hooks/useCreateFTRedpacketCallb
 import { useHandleCreateOrSelect } from '../hooks/useHandleCreateOrSelect.js'
 
 const useStyles = makeStyles()((theme) => ({
+    message: {
+        fontSize: 24,
+        fontWeight: 700,
+        overflow: 'hidden',
+        display: '-webkit-box',
+        WebkitBoxOrient: 'vertical',
+        WebkitLineClamp: 2,
+    },
     link: {
         display: 'inline-flex',
         marginLeft: theme.spacing(0.5),
@@ -67,13 +75,6 @@ const useStyles = makeStyles()((theme) => ({
         color: theme.palette.text.primary,
         padding: 12,
     },
-    ellipsis: {
-        fontSize: 24,
-        fontWeight: 700,
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-    },
     controller: {
         position: 'sticky',
         bottom: 0,
@@ -137,7 +138,7 @@ export function Erc20RedPacketConfirm() {
     return (
         <>
             <div className={classes.settings}>
-                <Typography variant="h4" color="textPrimary" align="center" className={classes.ellipsis}>
+                <Typography variant="h4" color="textPrimary" align="center" className={classes.message}>
                     {settings?.message}
                 </Typography>
                 <div className={classes.field}>

packages/plugins/RedPacket/src/constants.ts

@@ -38,7 +38,7 @@ export const enum RoutePaths {
     Terms = '/terms',
 }
 
-export const MAX_FILE_SIZE = 1 * 1024 * 1024
+export const MAX_FILE_SIZE = 1.5 * 1024 * 1024
 export const DURATION = 60 * 60 * 24
 
 export const nftDefaultChains = [ChainId.Mainnet, ChainId.BSC, ChainId.Polygon]