change favicon when there are notifications and make notification icon square

This commit is contained in:
keyan 2021-07-08 14:52:11 -05:00
parent b31e4e5b05
commit 46a4402bb6
2 changed files with 7 additions and 2 deletions

View File

@ -8,6 +8,7 @@ import { Button, Container, NavDropdown } from 'react-bootstrap'
import Price from './price' import Price from './price'
import { useMe } from './me' import { useMe } from './me'
import { useApolloClient } from '@apollo/client' import { useApolloClient } from '@apollo/client'
import Head from 'next/head'
function WalletSummary ({ me }) { function WalletSummary ({ me }) {
return `[${me.stacked},${me.sats}]` return `[${me.stacked},${me.sats}]`
@ -28,6 +29,10 @@ export default function Header () {
if (session) { if (session) {
return ( return (
<div className='d-flex align-items-center'> <div className='d-flex align-items-center'>
{me && me.hasNewNotes &&
<Head>
<link rel='shortcut icon' href='/favicon-notify.png' />
</Head>}
<div className='position-relative'> <div className='position-relative'>
<NavDropdown className='pl-0' title={`@${session.user.name}`} alignRight> <NavDropdown className='pl-0' title={`@${session.user.name}`} alignRight>
<Link href={'/' + session.user.name} passHref> <Link href={'/' + session.user.name} passHref>
@ -42,7 +47,7 @@ export default function Header () {
> >
notifications notifications
{me && me.hasNewNotes && {me && me.hasNewNotes &&
<div className='p-1 d-inline-block bg-danger rounded-circle ml-1'> <div className='p-1 d-inline-block bg-danger ml-1'>
<span className='invisible'>{' '}</span> <span className='invisible'>{' '}</span>
</div>} </div>}
</NavDropdown.Item> </NavDropdown.Item>
@ -68,7 +73,7 @@ export default function Header () {
<NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item> <NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>
</NavDropdown> </NavDropdown>
{me && me.hasNewNotes && {me && me.hasNewNotes &&
<span className='position-absolute p-1 bg-danger rounded-circle' style={{ top: '5px', right: '0px' }}> <span className='position-absolute p-1 bg-danger' style={{ top: '5px', right: '0px' }}>
<span className='invisible'>{' '}</span> <span className='invisible'>{' '}</span>
</span>} </span>}
</div> </div>

BIN
public/favicon-notify.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB