diff --git a/src/Element/IconButton.tsx b/src/Element/IconButton.tsx new file mode 100644 index 000000000..69dee2ff1 --- /dev/null +++ b/src/Element/IconButton.tsx @@ -0,0 +1,22 @@ +import type { ReactNode } from "react"; + +interface IconButtonProps { + onClick(): void + children: ReactNode +} + +const IconButton = ({ onClick, children }: IconButtonProps) => { + return ( + + ) +} + +export default IconButton diff --git a/src/Element/QrCode.tsx b/src/Element/QrCode.tsx index 09d3a078e..b72c397b2 100644 --- a/src/Element/QrCode.tsx +++ b/src/Element/QrCode.tsx @@ -6,7 +6,8 @@ export interface QrCodeProps { link?: string, avatar?: string, height?: number, - width?: number + width?: number, + className?: string } export default function QrCode(props: QrCodeProps) { @@ -46,6 +47,6 @@ export default function QrCode(props: QrCodeProps) { }, [props.data, props.link]); return ( -
+ ); } \ No newline at end of file diff --git a/src/Icons/Qr.tsx b/src/Icons/Qr.tsx new file mode 100644 index 000000000..dd4cc1cc4 --- /dev/null +++ b/src/Icons/Qr.tsx @@ -0,0 +1,11 @@ +import IconProps from './IconProps'; + +const Qr = (props: IconProps) => { + return ( + + ) +} + +export default Qr diff --git a/src/Icons/Search.tsx b/src/Icons/Search.tsx index 7d0b9477e..a781f4907 100644 --- a/src/Icons/Search.tsx +++ b/src/Icons/Search.tsx @@ -1,7 +1,7 @@ const Search = () => { return ( ) } diff --git a/src/Pages/ProfilePage.css b/src/Pages/ProfilePage.css index ac7439117..53c54e1ed 100644 --- a/src/Pages/ProfilePage.css +++ b/src/Pages/ProfilePage.css @@ -46,10 +46,6 @@ color: var(--gray-light); } -.profile .name .copy { - margin-bottom: 8px; -} - .profile .avatar-wrapper { z-index: 1; } @@ -103,10 +99,6 @@ font-size: 14px; } -.tabs > div { - margin-right: 0; -} - .profile .links { margin-top: 4px; margin-left: 2px; @@ -175,6 +167,15 @@ position: absolute; top: 80px; right: 0; + display: flex; + flex-direction: row; + align-items: center; +} + +.profile .icon-actions { + display: flex; + flex-direction: row; + align-items: center; } @media (min-width: 520px) { @@ -187,6 +188,10 @@ margin-right: 8px; } +.profile .profile-actions button.icon:not(:last-child) { + margin-right: 0; +} + @media (min-width: 520px) { .profile .banner { width: 100%; @@ -194,5 +199,17 @@ height: 300px; margin-bottom: -100px; } + .profile .profile-actions button.icon:not(:last-child) { + margin-right: 2px; + } } +.profile .npub { + display: flex; + flex-direction: row; + align-items: center; +} + +.qr-modal .modal-body { + width: unset; +} diff --git a/src/Pages/ProfilePage.tsx b/src/Pages/ProfilePage.tsx index fb3ca50d8..81f997b31 100644 --- a/src/Pages/ProfilePage.tsx +++ b/src/Pages/ProfilePage.tsx @@ -5,6 +5,7 @@ import { useSelector } from "react-redux"; import { useNavigate, useParams } from "react-router-dom"; import Link from "Icons/Link"; +import Qr from "Icons/Qr"; import Zap from "Icons/Zap"; import Envelope from "Icons/Envelope"; import { useUserProfile } from "Feed/ProfileFeed"; @@ -22,9 +23,12 @@ import FollowersList from "Element/FollowersList"; import BlockList from "Element/BlockList"; import MutedList from "Element/MutedList"; import FollowsList from "Element/FollowsList"; +import IconButton from "Element/IconButton"; import { RootState } from "State/Store"; import { HexKey } from "Nostr"; import FollowsYou from "Element/FollowsYou" +import QrCode from "Element/QrCode"; +import Modal from "Element/Modal"; enum ProfileTab { Notes = "Notes", @@ -46,8 +50,9 @@ export default function ProfilePage() { const isMe = loginPubKey === id; const [showLnQr, setShowLnQr] = useState