Skip to content

Commit

Permalink
add warning on escrow dashboard (#352)
Browse files Browse the repository at this point in the history
  • Loading branch information
m00n620 authored Mar 24, 2023
1 parent a905cb9 commit c3aea94
Showing 1 changed file with 101 additions and 74 deletions.
175 changes: 101 additions & 74 deletions packages/apps/escrow-dashboard/src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@ import {
Search as SearchIcon,
} from '@mui/icons-material';
import {
Alert,
AppBar,
Box,
Collapse,
Drawer,
IconButton,
Link,
Expand Down Expand Up @@ -46,6 +48,8 @@ export const Header: FC = () => {
const isDownLg = useMediaQuery(theme.breakpoints.down('lg'));
const isDownMd = useMediaQuery(theme.breakpoints.down('md'));

const [showWarning, setShowWarning] = useState(true);

/**
* @TODO: Remove the flag once it's implemented
*/
Expand Down Expand Up @@ -86,82 +90,105 @@ export const Header: FC = () => {
}}
>
<Toolbar disableGutters>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
padding: {
xs: '30px 8px 26px',
sm: '30px 28px 26px',
md: '30px 52px 26px',
},
}}
>
{searchOpen ? (
<Box display="flex" alignItems="center" width="100%">
{showSearchBox && <SearchBox />}
<IconButton
color="primary"
sx={{ ml: 2 }}
onClick={toggleSearchBox}
>
<CloseIcon />
</IconButton>
</Box>
) : (
<>
<Link
href="/"
sx={{
display: 'flex',
alignItems: 'center',
textDecoration: 'none',
}}
>
<img src={logoSvg} alt="logo" />
<Typography variant="h6" color="primary" ml="10px">
Dashboard
</Typography>
</Link>
{!isDownLg && (
<Box sx={{ minWidth: '400px' }}>
{showSearchBox && <SearchBox />}
</Box>
)}
{!isDownMd && (
<Box display="flex" alignItems="center" gap={3}>
{isDownLg && (
<IconButton color="primary" onClick={toggleSearchBox}>
<Box sx={{ width: '100%' }}>
<Collapse in={showWarning}>
<Alert
severity="warning"
action={
<IconButton
aria-label="close"
color="inherit"
size="small"
onClick={() => {
setShowWarning(false);
}}
>
<CloseIcon fontSize="inherit" />
</IconButton>
}
sx={{ px: 5 }}
>
Beta Dashboard: minor inaccuracies may be present
</Alert>
</Collapse>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
boxSizing: 'border-box',
padding: {
xs: '30px 8px 26px',
sm: '30px 28px 26px',
md: '30px 52px 26px',
},
}}
>
{searchOpen ? (
<Box display="flex" alignItems="center" width="100%">
{showSearchBox && <SearchBox />}
<IconButton
color="primary"
sx={{ ml: 2 }}
onClick={toggleSearchBox}
>
<CloseIcon />
</IconButton>
</Box>
) : (
<>
<Link
href="/"
sx={{
display: 'flex',
alignItems: 'center',
textDecoration: 'none',
}}
>
<img src={logoSvg} alt="logo" />
<Typography variant="h6" color="primary" ml="10px">
Dashboard
</Typography>
</Link>
{!isDownLg && (
<Box sx={{ minWidth: '400px' }}>
{showSearchBox && <SearchBox />}
</Box>
)}
{!isDownMd && (
<Box display="flex" alignItems="center" gap={3}>
{isDownLg && (
<IconButton color="primary" onClick={toggleSearchBox}>
<SearchIcon />
</IconButton>
)}
{renderNavLinks()}
<ConnectButton />
</Box>
)}
{isDownMd && (
<Box>
<IconButton
color="primary"
sx={{ ml: 1 }}
onClick={toggleSearchBox}
>
<SearchIcon />
</IconButton>
)}
{renderNavLinks()}
<ConnectButton />
</Box>
)}
{isDownMd && (
<Box>
<IconButton
color="primary"
sx={{ ml: 1 }}
onClick={toggleSearchBox}
>
<SearchIcon />
</IconButton>
<IconButton
color="primary"
sx={{ ml: 1 }}
onClick={toggleDrawer}
>
<MenuIcon />
</IconButton>
</Box>
)}
</>
)}
<IconButton
color="primary"
sx={{ ml: 1 }}
onClick={toggleDrawer}
>
<MenuIcon />
</IconButton>
</Box>
)}
</>
)}
</Box>
</Box>
</Toolbar>
</AppBar>
Expand Down

9 comments on commit c3aea94

@vercel
Copy link

@vercel vercel bot commented on c3aea94 Mar 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

job-launcher-client – ./packages/examples/fortune/launcher/client

job-launcher-client-humanprotocol.vercel.app
job-launcher-client-git-main-humanprotocol.vercel.app
job-launcher-client.vercel.app

@vercel
Copy link

@vercel vercel bot commented on c3aea94 Mar 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

faucet-server – ./packages/apps/faucet-server/

faucet-server-humanprotocol.vercel.app
faucet-server.vercel.app
faucet-server-git-main-humanprotocol.vercel.app

@vercel
Copy link

@vercel vercel bot commented on c3aea94 Mar 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

human-protocol-escrow-dashboard – ./packages/apps/escrow-dashboard

human-protocol-escrow-dashboard-humanprotocol.vercel.app
dashboard.humanprotocol.org
human-protocol-escrow-dashboard-git-main-humanprotocol.vercel.app

@vercel
Copy link

@vercel vercel bot commented on c3aea94 Mar 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

recording-oracle – ./packages/examples/fortune/recording-oracle

recording-oracle-jade.vercel.app
recording-oracle-git-main-humanprotocol.vercel.app
recording-oracle-humanprotocol.vercel.app

@vercel
Copy link

@vercel vercel bot commented on c3aea94 Mar 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on c3aea94 Mar 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on c3aea94 Mar 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

job-launcher-server – ./packages/examples/fortune/launcher/server

job-launcher-server.vercel.app
job-launcher-server-git-main-humanprotocol.vercel.app
job-launcher-server-humanprotocol.vercel.app

@vercel
Copy link

@vercel vercel bot commented on c3aea94 Mar 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

fortune-reputation-oracle-mumbai – ./packages/examples/fortune/reputation-oracle

fortune-reputation-oracle-mumbai-git-main-humanprotocol.vercel.app
fortune-reputation-oracle-mumbai.vercel.app
fortune-reputation-oracle-mumbai-humanprotocol.vercel.app

@vercel
Copy link

@vercel vercel bot commented on c3aea94 Apr 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

escrow-dashboard – ./packages/apps/escrow-dashboard

escrow-dashboard-humanprotocol.vercel.app
escrow-dashboard-git-main-humanprotocol.vercel.app
dashboard.humanprotocol.org

Please sign in to comment.