diff --git a/components/header.js b/components/header.js index c581d9e9..b68d88fe 100644 --- a/components/header.js +++ b/components/header.js @@ -12,11 +12,12 @@ import { useLightning } from './lightning' import { useEffect, useState } from 'react' import { randInRange } from '../lib/rand' import { formatSats } from '../lib/format' +import NoteIcon from '../svgs/notification-4-fill.svg' function WalletSummary ({ me }) { if (!me) return null - return `${formatSats(me.sats)} \\ ${formatSats(me.stacked)}` + return `${formatSats(me.sats)}` } export default function Header ({ sub }) { @@ -33,6 +34,15 @@ export default function Header ({ sub }) { + + + + {me?.hasNewNotes && + + {' '} + } + +
@@ -44,18 +54,12 @@ export default function Header ({ sub }) {
} - - - notifications - {me?.hasNewNotes && -
- {' '} -
} -
- wallet + + satistics + invites @@ -74,12 +78,8 @@ export default function Header ({ sub }) { signOut({ callbackUrl: '/' })}>logout - {me?.hasNewNotes && - - {' '} - } {me && !me.bio && - + {' '} } diff --git a/components/header.module.css b/components/header.module.css index 83b28015..b3a38dbf 100644 --- a/components/header.module.css +++ b/components/header.module.css @@ -27,6 +27,15 @@ padding-left: 0 !important; } +.notification { + position: absolute; + padding: .25rem; + background-color: var(--danger); + top: 3px; + right: 8px; + border: 1px solid var(--theme-body); +} + .navLink:last-child { padding-right: 0 !important; } diff --git a/styles/globals.scss b/styles/globals.scss index 717e1f46..107230ca 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -375,6 +375,10 @@ textarea.form-control { fill: var(--theme-grey); } +.fill-lgrey { + fill: #a5a5a5; +} + .fill-secondary { fill: var(--secondary); } diff --git a/svgs/notification-4-fill.svg b/svgs/notification-4-fill.svg new file mode 100644 index 00000000..c787f06e --- /dev/null +++ b/svgs/notification-4-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file