From f69a120c220ec6be6ccb978ccb45ce730a88bb77 Mon Sep 17 00:00:00 2001 From: hzrd149 Date: Tue, 7 Feb 2023 17:04:19 -0600 Subject: [PATCH] make login more fancy --- src/components/icons.tsx | 16 ++- src/components/note/index.tsx | 31 +++--- src/components/note/note-menu.tsx | 10 +- src/components/note/note-relays.tsx | 39 ++++---- src/components/page.tsx | 147 +++++++++++++--------------- src/views/login.tsx | 7 +- 6 files changed, 124 insertions(+), 126 deletions(-) diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 91d462fac..aabbd83ea 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -20,9 +20,9 @@ export const GlobalIcon = createIcon({ defaultProps, }); -export const HomeIcon = createIcon({ - displayName: "home-line", - d: "M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.222a1 1 0 0 1 1.228 0l8 6.222a1 1 0 0 1 .386.79V20zm-2-1V9.978l-7-5.444-7 5.444V19h14z", +export const FeedIcon = createIcon({ + displayName: "feed-icon", + d: "M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z", defaultProps, }); @@ -117,13 +117,19 @@ export const RelayIcon = createIcon({ }); export const ExternalLinkIcon = createIcon({ - displayName: "eternal-link-icon", + displayName: "external-link-icon", d: "M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z", defaultProps, }); export const SearchIcon = createIcon({ - displayName: "eternal-link-icon", + displayName: "search-icon", d: "M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z", defaultProps, }); + +export const ShareIcon = createIcon({ + displayName: "share-icon", + d: "M13.12 17.023l-4.199-2.29a4 4 0 1 1 0-5.465l4.2-2.29a4 4 0 1 1 .959 1.755l-4.2 2.29a4.008 4.008 0 0 1 0 1.954l4.199 2.29a4 4 0 1 1-.959 1.755zM6 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm11-6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4z", + defaultProps, +}); diff --git a/src/components/note/index.tsx b/src/components/note/index.tsx index d3bd658e8..f8ba3122a 100644 --- a/src/components/note/index.tsx +++ b/src/components/note/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Link as RouterLink } from "react-router-dom"; import moment from "moment"; -import { Box, Card, CardBody, CardHeader, Flex, Heading, Link } from "@chakra-ui/react"; +import { Box, Card, CardBody, CardFooter, CardHeader, Flex, Heading, Link } from "@chakra-ui/react"; import { NostrEvent } from "../../types/nostr-event"; import { UserAvatarLink } from "../user-avatar-link"; import { Bech32Prefix, normalizeToBech32 } from "../../helpers/nip-19"; @@ -29,23 +29,15 @@ export const Note = React.memo(({ event }: NoteProps) => { return ( - - - + + - - - - - - - {moment(event.created_at * 1000).fromNow()} - - - - - - + + + + + {moment(event.created_at * 1000).fromNow()} + @@ -53,6 +45,11 @@ export const Note = React.memo(({ event }: NoteProps) => { + + + + + ); }); diff --git a/src/components/note/note-menu.tsx b/src/components/note/note-menu.tsx index 783dd8ff9..7ccc532ac 100644 --- a/src/components/note/note-menu.tsx +++ b/src/components/note/note-menu.tsx @@ -15,7 +15,7 @@ import { Bech32Prefix, normalizeToBech32 } from "../../helpers/nip-19"; import { NostrEvent } from "../../types/nostr-event"; import { MenuIconButton } from "../menu-icon-button"; -import { ClipboardIcon, CodeIcon, IMAGE_ICONS } from "../icons"; +import { ClipboardIcon, CodeIcon, IMAGE_ICONS, ShareIcon } from "../icons"; import { getReferences } from "../../helpers/nostr-event"; export const NoteMenu = ({ event }: { event: NostrEvent }) => { @@ -26,6 +26,10 @@ export const NoteMenu = ({ event }: { event: NostrEvent }) => { return ( <> + {/* TODO: should open the post modal and mention the note/relay */} + {/* } onClick={() => console.log("Share Note", event)}> + Repost + */} } @@ -73,8 +77,10 @@ export const NoteMenu = ({ event }: { event: NostrEvent }) => { Raw Event - + + Raw JSON: 
{JSON.stringify(event, null, 2)}
+ Parsed Refs: 
{JSON.stringify(getReferences(event), null, 2)}
 diff --git a/src/components/note/note-relays.tsx b/src/components/note/note-relays.tsx index 3c6a2ccef..0410105bf 100644 --- a/src/components/note/note-relays.tsx +++ b/src/components/note/note-relays.tsx @@ -10,7 +10,6 @@ import { PopoverTrigger, Text, Flex, - Portal, PopoverFooter, } from "@chakra-ui/react"; import { nostrPostAction } from "../../classes/nostr-post-action"; @@ -68,26 +67,24 @@ export const NoteRelays = memo(({ event, ...props }: NoteRelaysProps) => { } size={props.size ?? "sm"} aria-label="Note Relays" /> - - - - - {relays.map((url) => ( - {url} - ))} - - - - - - - - - + + + + {relays.map((url) => ( + {url} + ))} + + + + + + + + ); }); diff --git a/src/components/page.tsx b/src/components/page.tsx index adae765f5..8519e305d 100644 --- a/src/components/page.tsx +++ b/src/components/page.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Avatar, Button, Container, Flex, Heading, IconButton, LinkOverlay, VStack } from "@chakra-ui/react"; import { Link, useNavigate } from "react-router-dom"; -import { HomeIcon, LogoutIcon, ProfileIcon, SettingsIcon } from "./icons"; +import { FeedIcon, LogoutIcon, ProfileIcon, SettingsIcon } from "./icons"; import { ErrorBoundary } from "./error-boundary"; import { ConnectedRelays } from "./connected-relays"; @@ -10,84 +10,75 @@ import identity from "../services/identity"; import { FollowingList } from "./following-list"; import { ReloadPrompt } from "./reload-prompt"; -const MobileLayout = ({ children }: { children: React.ReactNode }) => { - const navigate = useNavigate(); - - return ( - - - - {children} - - - } aria-label="Home" onClick={() => navigate("/")} flexGrow="1" size="lg" /> - } - aria-label="Profile" - onClick={() => navigate(`/profile`)} - flexGrow="1" - size="lg" - /> - } - aria-label="Settings" - onClick={() => navigate("/settings")} - flexGrow="1" - size="lg" - /> - - - ); -}; -const DesktopLayout = ({ children }: { children: React.ReactNode }) => { - const navigate = useNavigate(); - - return ( - <> - - - - - - - - noStrudel - - - - - - - - {children} - - - Following - - - - - - ); -}; - export const Page = ({ children }: { children: React.ReactNode }) => { + const navigate = useNavigate(); const isMobile = useIsMobile(); - const Layout = isMobile ? MobileLayout : DesktopLayout; - return {children}; + if (isMobile) { + return ( + + + + {children} + + + } aria-label="Home" onClick={() => navigate("/")} flexGrow="1" size="lg" /> + } + aria-label="Profile" + onClick={() => navigate(`/profile`)} + flexGrow="1" + size="lg" + /> + } + aria-label="Settings" + onClick={() => navigate("/settings")} + flexGrow="1" + size="lg" + /> + + + ); + } + + return ( + + + + + + + + noStrudel + + + + + + + + {children} + + + Following + + + + + ); }; diff --git a/src/views/login.tsx b/src/views/login.tsx index 2583c4d5b..6da7b7bd6 100644 --- a/src/views/login.tsx +++ b/src/views/login.tsx @@ -1,4 +1,4 @@ -import { Button, Flex, Heading, Spinner } from "@chakra-ui/react"; +import { Avatar, Button, Flex, Heading, Spinner } from "@chakra-ui/react"; import { Navigate, useLocation } from "react-router-dom"; import useSubject from "../hooks/use-subject"; import identity from "../services/identity"; @@ -12,8 +12,9 @@ export const LoginView = () => { if (setup) return ; return ( - - Login + + + noStrudel );