chore: css fixes, close button for login

src/components/AuthorProfile/AuthorProfile.css

@@ -13,7 +13,7 @@
   }
 
   .author-info a {
-    line-height: 1em;
+    line-height: .3em;
   }
   
   .author-info a svg {

src/components/AuthorProfile/AuthorProfile.tsx

@@ -7,6 +7,7 @@ import IconLink from '../Icons/IconLink';
 import FollowButton from '../FollowButton/FollowButton';
 import { nip19 } from 'nostr-tools';
 import { useGlobalState } from '../../utils/globalState';
+import React from 'react';
 
 type AvatarImageProps = {
   src?: string;

src/components/InfoPanel/InfoPanel.css

@@ -16,6 +16,7 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
+  padding-top: 8px;
 }
 
 .info-panel .link svg {
@@ -80,18 +81,19 @@
 .info-panel-author {
   display: flex;
   flex-direction: row;
+  padding-left: 1em;
+  padding-right: 1em;
+
 }
 
 .info-panel-author .link {
-  padding: 1em;
+  align-self: center;
 }
 
 .info-panel-author .author-info {
   position: relative;
   left: initial;
   bottom: initial;
-  padding-left: 1em;
-  padding-top: 1em;
   display: flex;
   flex-grow: 1;
   flex-direction: row;

src/components/InfoPanel/InfoPanel.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import uniq from 'lodash/uniq';
 import { NostrImage, urlFix } from '../nostrImageDownload';
 import useNav, { Settings } from '../../utils/useNav';

src/components/Layout/Layout.tsx

@@ -6,9 +6,8 @@ import Login from '../Login/Login';
 import { useGlobalState } from '../../utils/globalState';
 import IconUser from '../Icons/IconUser';
 import { createImgProxyUrl } from '../nostrImageDownload';
-import { Link, Outlet } from 'react-router-dom';
-import IconDots from '../Icons/IconDots';
-import IconPlay from '../Icons/IconPlay';
+import { Outlet } from 'react-router-dom';
+import React from 'react';
 
 const Layout = () => {
   const { disclaimerAccepted, setDisclaimerAccepted } = useDisclaimerState();

src/components/Login/Login.css

@@ -12,6 +12,10 @@
   gap: 24px;
 }
 
+.login-dialog h2 {
+  text-align: center;
+}
+
 .login-dialog input[type='text'] {
   min-width: 20em;
   display: block;
@@ -58,3 +62,10 @@
 .login-dialog .login-extension button {
   height: 3em;
 }
+
+.login-dialog .close-button {
+  cursor: pointer;
+  position: absolute;
+  right:1.2em;
+  top:1em;
+}

src/components/Login/Login.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import './Login.css';
 import { useBunkerLogin, useExtensionLogin } from '../../ngine/context';
 import { useGlobalState } from '../../utils/globalState';
+import React from 'react';
 
 type LoginProps = {
   onClose: () => void;
@@ -37,7 +38,6 @@ const Login = ({ onClose }: LoginProps) => {
     }
 
     setState({ userNPub: result.npub });
-
 };
 */
   const loginWithAddress = async () => {
@@ -63,6 +63,7 @@ const Login = ({ onClose }: LoginProps) => {
 
   return (
     <div className="login-dialog">
+      <div className="close-button" onClick={() => onClose()}>✕</div>
       <h2>Login</h2>
       <div className="login-address">
         <input

src/components/MasonryView/MasonryImage.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { MouseEventHandler, SyntheticEvent, useMemo, useState } from 'react';
 import { NostrImage, createImgProxyUrl, isVideo } from '../nostrImageDownload';
 import useProfile from '../../ngine/hooks/useProfile';

src/components/ScrollView/ScrollImage.tsx

@@ -1,10 +1,10 @@
+import React from 'react';
 import { SyntheticEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { NostrImage, createImgProxyUrl, isVideo } from '../nostrImageDownload';
 import './ScrollImage.css';
 import useOnScreen from '../../utils/useOnScreen';
 import IconMicMuted from '../Icons/IconMicMuted';
 import IconMicOn from '../Icons/IconMicOn';
-import useWindowSize from '@/utils/useWindowSize';
 
 interface ScrollImageProps {
   image: NostrImage;

src/components/SlideView/index.tsx

@@ -23,7 +23,7 @@ const SlideView = ({ settings, images, setViewMode }: SlideViewProps) => {
   const [paused, setPaused] = useState(false);
   const upcomingImage = useRef<NostrImage>();
   const [loading, setLoading] = useState(true);
-  const viewTimeoutHandle = useRef<NodeJS.Timeout>();
+  const viewTimeoutHandle = useRef<ReturnType<typeof setTimeout>>();
   const [activeNpub, setActiveNpub] = useState<string | undefined>(undefined);
   const [slideShowStarted, setSlideShowStarted] = useState(false);
   const [activeContent, setActiveContent] = useState<string | undefined>(undefined);

src/components/env.ts

@@ -256,7 +256,7 @@ export const blockedPublicKeys = blockedNPubs.map(npub => (nip19.decode(npub).da
 export const spamAccounts = [];
 
 export const defaultRelays = [
-  // 'ws://localhost:4869',
+  //'ws://localhost:4869',
   'wss://relay.damus.io',
   'wss://relay.nostr.band',
   'wss://relay.snort.social',

src/ngine/lnurl.ts

@@ -35,7 +35,7 @@ export function useLnurlVerify(lnurlVerifyUrl?: string) {
   const [isPaid, setIsPaid] = useState(false);
 
   useEffect(() => {
-    let pollingInterval: NodeJS.Timeout | undefined;
+    let pollingInterval: ReturnType<typeof setTimeout> | undefined;
 
     const pollLnurlPayment = async () => {
       try {

src/utils/useNav.ts

@@ -30,7 +30,7 @@ const useNav = () => {
       showReplies: replies,
       showReposts: reposts,
       followers,
-      list
+      list,
     };
   }, [tags, npub, searchParams, list]);