diff --git a/src/components/header/account-bar/account-bar.module.css b/src/components/header/account-bar/account-bar.module.css new file mode 100644 index 00000000..22e4f8c6 --- /dev/null +++ b/src/components/header/account-bar/account-bar.module.css @@ -0,0 +1,36 @@ +.header { + position: absolute; + right: 0; + top: 0px; + bottom: unset; + border-bottom-left-radius: 7px; + border-top-left-radius: 0; + background-color: var(--background3); + padding: 4px; + line-height: 12px; +} + +.user { + color: var(--border2); + + a { + text-decoration: none; + color: var(--text1); + } +} + +.separator { + color: var(--border2); + margin: 0px .7ex 0px .7ex; + cursor: default; +} + +.preferences { + text-decoration: none; + font-weight: bold; + color: var(--text1); +} + +.preferences:hover { + text-decoration: underline !important; +} \ No newline at end of file diff --git a/src/components/header/account-bar/account-bar.tsx b/src/components/header/account-bar/account-bar.tsx new file mode 100644 index 00000000..93412a4d --- /dev/null +++ b/src/components/header/account-bar/account-bar.tsx @@ -0,0 +1,23 @@ +import { Link } from 'react-router-dom'; +import styles from './account-bar.module.css'; +import { useAccount } from '@plebbit/plebbit-react-hooks'; + +const AccountBar = () => { + const account = useAccount(); + + return ( +