Skip to content

Commit

Permalink
fix ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@YongZL
YongZL committed Jan 26, 2024
1 parent a5d9bd9 commit 6721464
Show file tree
Hide file tree
Showing 6 changed files with 27 additions and 9 deletions.
20 changes: 14 additions & 6 deletions app/blobtx/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ const BlobTX = () => {
if (!isConnected) {
setLoading({ loading: false, success: false, error: false, errorMsg: '', uploadImageError: '' })
}
return () => {
setLoading({ loading: false, success: false, error: false, errorMsg: '', uploadImageError: '' })
}
}, [isConnected])

const handleBlobClick = (blob: boolean) => {
Expand Down Expand Up @@ -125,11 +128,14 @@ const BlobTX = () => {
useEffect(() => {
if (loading.loading || loading.success || loading.error || shownettip) {
document.body.classList.add('overflow-hidden')
document.documentElement.classList.add('overflow-hidden')
} else {
document.body.classList.remove('overflow-hidden')
document.documentElement.classList.remove('overflow-hidden')
}
return () => {
document.body.classList.remove('overflow-hidden')
document.documentElement.classList.remove('overflow-hidden')
}
}, [loading])
const handleFileSelect = () => {
Expand Down Expand Up @@ -322,6 +328,7 @@ const BlobTX = () => {
if (isConnected && refState.current.isClickShowModal) {
setShowNetTip(true)
document.body.classList.add('overflow-hidden')
document.documentElement.classList.add('overflow-hidden')
}
}, [isConnected])
return (
Expand Down Expand Up @@ -402,7 +409,7 @@ const BlobTX = () => {
Gas Faucet
</button>
</div>
<div className=' text-2xl font-normal mo:mt-10'>Input</div>
<div className=' text-2xl font-medium mo:mt-10'>Input</div>
<div className=' mt-[36px] md:mt-[40px] mo:mt-5 font-medium mo:text-base md:text-sm mb-5'>Type text here</div>

<DivBox className=' w-full h-[68px] px-2'>
Expand Down Expand Up @@ -470,7 +477,7 @@ const BlobTX = () => {
</div>
</div>
<div className='w-0 flex-1 h-full mo:mt-[-70px]'>
<div className=' text-2xl '> Blob Data</div>
<div className=' text-2xl font-medium '> Blob Data</div>
<div className='flex gap-[14px] mo:gap-[5px] '>
<button
onClick={() => handleBlobClick(true)}
Expand Down Expand Up @@ -564,12 +571,12 @@ const BlobTX = () => {
<Fragment>
<img src='success.svg' />
<div className='font-medium text-xl text-[#FC7823] mt-[-30px]'>Success</div>
<div className='flex gap-[15px] mt-5 mb-5 mo:mt-[10px] mo:mb-10 mo:flex-wrap justify-center'>
<div className='flex gap-[15px] mt-5 mb-5 mo:mt-[20px] mo:mb-10 '>
<button
onClick={() => {
window.open(`https://blobscan-devnet.ethda.io/address/${account?.address}`, '_blank')
}}
className=' w-[140px] border h-[36px] rounded-lg border-[#000000] px-[10px] font-medium text-base'
className=' w-[120px] border h-[36px] rounded-lg border-[#000000] px-[10px] font-medium text-base mo:text-sm'
>
View History
</button>
Expand All @@ -582,7 +589,7 @@ const BlobTX = () => {
scrollToTop()
setPreviewUrl(null)
}}
className='w-[140px] mo:wa h-[36px] text-[#FFFFFF] rounded-lg bg-[#FC7823] px-[10px] font-medium text-base'
className='w-[120px] mo:wa h-[36px] text-[#FFFFFF] rounded-lg bg-[#FC7823] px-[10px] font-medium text-base mo:text-sm'
>
Send More
</button>
Expand Down Expand Up @@ -648,6 +655,7 @@ const BlobTX = () => {
refState.current.isClickShowModal = false
setShowNetTip(false)
document.body.classList.remove('overflow-hidden')
document.documentElement.classList.remove('overflow-hidden')
}}
className='w-[160px] mo:wa h-[36px] text-[#FFFFFF] rounded-lg bg-[#FC7823] px-[10px] font-medium text-base'
>
Expand Down Expand Up @@ -687,7 +695,7 @@ const BlobTX = () => {

{isModalOpen && (
<AToastFull
contentClassName={'w-auto h-auto max-h-[80vh]'}
contentClassName={' h-auto max-h-[80vh] w-auto'}
chilren={
<Fragment>
<CrossCircledIcon
Expand Down
5 changes: 5 additions & 0 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,5 +173,10 @@ input {
}


#modal{
background-color: rgba(26, 26, 26, 0.20);
backdrop-filter: blur(5px);
}



2 changes: 1 addition & 1 deletion components/ALoading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FC } from 'react'

export const ALoading: FC<{ className: any }> = ({ className, ...other }) => {
return (
<div {...other} className={classNames('text-black w-full h-full flex items-center justify-center', className)}>
<div id='modal' {...other} className={classNames('text-black w-full h-full flex items-center justify-center', className)}>
<div className=' w-[420px] bg-white flex justify-center h-[340px] rounded-xl'>
<div className=' flex flex-col items-center w-full justify-center bg-[#FFFAF6] mx-[10px] my-[10px] border-dashed border rounded-xl border-[#FC7823]'>
<img src='loading.svg' className='animate-spin' />
Expand Down
3 changes: 2 additions & 1 deletion components/AToast.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ type ToastType = {
export const AToastFull: FC<ToastType> = ({ onLeftButton, className, contentClassName, onRightButton, chilren, size = '', ...other }) => {
return (
<div
id='modal'
{...other}
className={classNames(
'text-black w-full h-full flex items-center justify-center fixed z-50 left-0 top-0 bg-black/25 px-10',
'text-black w-full h-full flex items-center justify-center fixed z-50 left-0 top-0 bg-black/25 px-10 ',
className,
)}
>
Expand Down
3 changes: 2 additions & 1 deletion components/FullModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ const FullModal: FC<FullModalProps> = ({ menus, keys = 'text', onChooseItem, cho

return (
<div
style={{ background: 'rgba(255, 255, 255, 0.90)', backdropFilter: 'blur(15px)' }}
id='modal'
style={{ background: 'rgba(255, 255, 255, 0.90)' }}
className={classNames('fixed inset-0 mt-[81px] flex ', wrapperClassName)}
>
<div className='p-8 rounded-md mo:w-full'>
Expand Down
3 changes: 3 additions & 0 deletions components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,13 @@ export const Header: FC<HeaderType> = ({
const onChooseItem = (e: string) => {
setChooseValue(e)
setIsShow(false)
document.documentElement.classList.remove('overflow-hidden')
document.body.classList.remove('overflow-hidden')
}

useEffect(() => {
if (!isShow) {
document.documentElement.classList.remove('overflow-hidden')
document.body.classList.remove('overflow-hidden')
}
}, [isShow])
Expand Down Expand Up @@ -99,6 +101,7 @@ export const Header: FC<HeaderType> = ({
<button
onClick={() => {
setIsShow(!isShow)
document.documentElement.classList.add('overflow-hidden')
document.body.classList.add('overflow-hidden')
}}
>
Expand Down

0 comments on commit 6721464

Please sign in to comment.