From 5def7c8b9a1bf5f4caea95206faa1b380b97a29f Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Sun, 29 Jan 2023 23:11:04 +0100 Subject: [PATCH] qr on profile --- src/Element/IconButton.tsx | 22 +++++++++++ src/Element/QrCode.tsx | 5 ++- src/Icons/Qr.tsx | 11 ++++++ src/Icons/Search.tsx | 2 +- src/Pages/ProfilePage.css | 33 +++++++++++++---- src/Pages/ProfilePage.tsx | 75 ++++++++++++++++++++++---------------- src/index.css | 14 ++++--- 7 files changed, 114 insertions(+), 48 deletions(-) create mode 100644 src/Element/IconButton.tsx create mode 100644 src/Icons/Qr.tsx diff --git a/src/Element/IconButton.tsx b/src/Element/IconButton.tsx new file mode 100644 index 0000000..69dee2f --- /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 09d3a07..b72c397 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 0000000..dd4cc1c --- /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 7d0b947..a781f49 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 ac74391..53c54e1 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 fb3ca50..81f997b 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(false); const [tab, setTab] = useState(ProfileTab.Notes); + const [showProfileQr, setShowProfileQr] = useState(false); const aboutText = user?.about || '' - const about = Text({ content: user?.about || '', tags: [], users: new Map() }) + const about = Text({ content: aboutText, tags: [], users: new Map() }) const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || ""); useEffect(() => { @@ -132,41 +137,49 @@ export default function ProfilePage() { ) } + function renderIcons() { + return ( +
+ setShowProfileQr(true)}> + + + {showProfileQr && ( + setShowProfileQr(false)}> + + + )} + {isMe ? ( + <> + + + + ) : ( + <> + setShowLnQr(true)}> + + + {!loggedOut && ( + <> + navigate(`/messages/${hexToBech32("npub", id)}`)}> + + + + )} + + )} +
+ ) + } + function userDetails() { return (
{username()}
- {isMe ? ( - <> - - - - ) : ( - <> - - {!loggedOut && ( - <> - - - - )} - - )} + {renderIcons()} + {!isMe && }
{bio()}
diff --git a/src/index.css b/src/index.css index 52a8d06..419060e 100644 --- a/src/index.css +++ b/src/index.css @@ -171,11 +171,17 @@ button.icon { border: none; background: none; color: var(--font-color); + min-height: 28px; +} + +button.icon .icon-wrapper { + display: flex; + align-items: center; + justify-content: center; } button.icon:hover { - color: white; - background: var(--highlight); + color: var(--highlight); } .btn { @@ -420,11 +426,7 @@ body.scroll-lock { } .tabs>div { - margin-right: 10px; cursor: pointer; -} - -.tabs>div:last-child { margin: 0; }