From d4d11690583ad0a22a235441530c0bb0e1e994d9 Mon Sep 17 00:00:00 2001
From: keyan <keyan.kousha+huumn@gmail.com>
Date: Wed, 5 May 2021 13:13:14 -0500
Subject: [PATCH] small ui stuff

---
 components/comment.js        |  8 ++-----
 components/comments.js       |  6 +-----
 components/header.js         | 29 +++++++++++++++++--------
 components/invoice.js        |  0
 components/upvote.module.css |  1 -
 fragments/comments.js        | 42 ++++++++++++++++++++++++++++++++++++
 package.json                 |  1 +
 pages/fund.js                |  9 ++++++++
 pages/items/[id].js          |  4 ++++
 styles/globals.scss          |  9 ++++++++
 styles/post.module.css       |  2 ++
 yarn.lock                    | 16 +++++++++++++-
 12 files changed, 105 insertions(+), 22 deletions(-)
 create mode 100644 components/invoice.js
 create mode 100644 pages/fund.js

diff --git a/components/comment.js b/components/comment.js
index cf455fef..54855144 100644
--- a/components/comment.js
+++ b/components/comment.js
@@ -106,8 +106,6 @@ export default function Comment ({ item, children, replyOpen, includeParent, cac
 }
 
 export function CommentSkeleton ({ skeletonChildren }) {
-  const comments = skeletonChildren > 0 ? new Array(skeletonChildren).fill(null) : []
-
   return (
     <div className={styles.comment}>
       <div className={`${itemStyles.item} ${itemStyles.skeleton} ${styles.item} ${styles.skeleton}`}>
@@ -127,10 +125,8 @@ export function CommentSkeleton ({ skeletonChildren }) {
           <div className={`${itemStyles.other} ${styles.reply} clouds`} />
         </div>
         <div className={`${styles.comments} ml-sm-1 ml-md-3`}>
-          {comments
-            ? comments.map((_, i) => (
-              <CommentSkeleton key={i} skeletonChildren={skeletonChildren - 1} />
-              ))
+          {skeletonChildren
+            ? <CommentSkeleton skeletonChildren={skeletonChildren - 1} />
             : null}
         </div>
       </div>
diff --git a/components/comments.js b/components/comments.js
index 233ddd0b..5b9cb8c3 100644
--- a/components/comments.js
+++ b/components/comments.js
@@ -8,11 +8,7 @@ export default function Comments ({ comments, ...props }) {
 }
 
 export function CommentsSkeleton () {
-  const comments = new Array(1).fill(null)
-
-  return comments.map((_, i) => (
-    <CommentSkeleton key={i} skeletonChildren={2} />
-  ))
+  return <CommentSkeleton skeletonChildren={7} />
 }
 
 export function CommentsQuery ({ query, ...props }) {
diff --git a/components/header.js b/components/header.js
index df00d546..f08d62c0 100644
--- a/components/header.js
+++ b/components/header.js
@@ -4,12 +4,13 @@ import Nav from 'react-bootstrap/Nav'
 import Link from 'next/link'
 import styles from './header.module.css'
 import { useRouter } from 'next/router'
-import { Container, NavDropdown } from 'react-bootstrap'
+import { Button, Container, NavDropdown } from 'react-bootstrap'
 import Price from './price'
 
 export default function Header () {
   const [session, loading] = useSession()
   const router = useRouter()
+  const path = router.asPath.split('?')[0]
 
   const Corner = () => {
     if (loading) {
@@ -18,15 +19,25 @@ export default function Header () {
 
     if (session) {
       return (
-        <NavDropdown title={`@${session.user.name}`} alignRight>
-          <Link href={'/' + session.user.name} passHref>
-            <NavDropdown.Item>profile</NavDropdown.Item>
-          </Link>
-          <NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>
-        </NavDropdown>
+        <div className='d-flex align-items-center'>
+          <NavDropdown title={`@${session.user.name}`} alignRight>
+            <Link href={'/' + session.user.name} passHref>
+              <NavDropdown.Item>profile</NavDropdown.Item>
+            </Link>
+            <Link href='/fund' passHref>
+              <NavDropdown.Item className='text-success'>fund [0,0]</NavDropdown.Item>
+            </Link>
+            <NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>
+          </NavDropdown>
+          <Nav.Item>
+            <Link href='/fund' passHref>
+              <Nav.Link className='text-success pl-0'>[0,0]</Nav.Link>
+            </Link>
+          </Nav.Item>
+        </div>
       )
     } else {
-      return <Nav.Link href='/login' onClick={signIn}>login</Nav.Link>
+      return path !== '/login' && <Button href='/login' onClick={signIn}>login</Button>
     }
   }
 
@@ -34,7 +45,7 @@ export default function Header () {
     <>
       <Container className='px-sm-0'>
         <Navbar className={styles.navbar}>
-          <Nav className='w-100 justify-content-between flex-wrap align-items-center' activeKey={router.asPath.split('?')[0]}>
+          <Nav className='w-100 justify-content-between flex-wrap align-items-center' activeKey={path}>
             <Link href='/' passHref>
               <Navbar.Brand className={`${styles.brand} mr-2 d-none d-sm-block`}>STACKER NEWS</Navbar.Brand>
             </Link>
diff --git a/components/invoice.js b/components/invoice.js
new file mode 100644
index 00000000..e69de29b
diff --git a/components/upvote.module.css b/components/upvote.module.css
index 10700574..dadd9cad 100644
--- a/components/upvote.module.css
+++ b/components/upvote.module.css
@@ -1,6 +1,5 @@
 .upvote {
     fill: grey;
-    min-width: fit-content;
     user-select: none;
 }
 
diff --git a/fragments/comments.js b/fragments/comments.js
index 2ecc357d..e28ed97e 100644
--- a/fragments/comments.js
+++ b/fragments/comments.js
@@ -43,6 +43,48 @@ export const COMMENTS = gql`
                         ...CommentFields
                         comments {
                           ...CommentFields
+                          comments {
+                            ...CommentFields
+                            comments {
+                              ...CommentFields
+                              comments {
+                                ...CommentFields
+                                comments {
+                                  ...CommentFields
+                                  comments {
+                                    ...CommentFields
+                                    comments {
+                                      ...CommentFields
+                                      comments {
+                                        ...CommentFields
+                                        comments {
+                                          ...CommentFields
+                                          comments {
+                                            ...CommentFields
+                                            comments {
+                                              ...CommentFields
+                                              comments {
+                                                ...CommentFields
+                                                comments {
+                                                  ...CommentFields
+                                                  comments {
+                                                    ...CommentFields
+                                                    comments {
+                                                      ...CommentFields
+                                                    }
+                                                  }
+                                                }
+                                              }
+                                            }
+                                          }
+                                        }
+                                      }
+                                    }
+                                  }
+                                }
+                              }
+                            }
+                          }
                         }
                       }
                     }
diff --git a/package.json b/package.json
index 45c62815..fe4a0de4 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "ln-service": "^51.7.0",
     "next": "10.0.9",
     "next-auth": "^3.13.3",
+    "qrcode.react": "^1.0.1",
     "react": "17.0.1",
     "react-bootstrap": "^1.5.2",
     "react-dom": "17.0.1",
diff --git a/pages/fund.js b/pages/fund.js
new file mode 100644
index 00000000..f4bc7b2c
--- /dev/null
+++ b/pages/fund.js
@@ -0,0 +1,9 @@
+import Layout from '../components/layout'
+
+export default function Fund () {
+  return (
+    <Layout>
+      <div>fund</div>
+    </Layout>
+  )
+}
diff --git a/pages/items/[id].js b/pages/items/[id].js
index 7a1ed425..4d7f6b78 100644
--- a/pages/items/[id].js
+++ b/pages/items/[id].js
@@ -8,6 +8,7 @@ import { COMMENTS } from '../../fragments/comments'
 import { ITEM_FIELDS } from '../../fragments/items'
 import { gql, useQuery } from '@apollo/client'
 import styles from '../../styles/item.module.css'
+import Head from 'next/head'
 
 export async function getServerSideProps ({ params: { id } }) {
   return {
@@ -63,6 +64,9 @@ function LoadItem ({ query }) {
         ? <Comment item={item} replyOpen includeParent noComments />
         : (
           <>
+            <Head>
+              <title>{item.title} \ stacker news</title>
+            </Head>
             <Item item={item}>
               {item.text && <Text>{item.text}</Text>}
               <Reply parentId={item.id} />
diff --git a/styles/globals.scss b/styles/globals.scss
index c1f3d266..6fa49430 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -52,6 +52,15 @@ $container-max-widths: (
   src: url(/Lightningvolt-xoqm.ttf);
 }
 
+body {
+  background-image: linear-gradient(180deg, #f5f5f5, #f5f5f5, white);
+  background-attachment:fixed;
+  min-height: 100vh;
+  height: 100%;
+  z-index: -2;
+  position: relative;
+}
+
 .form-label {
   font-size: 92%;
   font-weight: bold;
diff --git a/styles/post.module.css b/styles/post.module.css
index 941ba505..f64db6a5 100644
--- a/styles/post.module.css
+++ b/styles/post.module.css
@@ -7,6 +7,8 @@
     padding: 0;
     top: 0;
     z-index: -1;
+    padding-right: 15px;
+    padding-left: 15px
 }
 
 .post {
diff --git a/yarn.lock b/yarn.lock
index 1ddd28f1..517ec9fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4259,7 +4259,7 @@ prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -4346,6 +4346,20 @@ pushdata-bitcoin@1.0.1, pushdata-bitcoin@^1.0.1:
   dependencies:
     bitcoin-ops "^1.3.0"
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+
+qrcode.react@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-1.0.1.tgz#2834bb50e5e275ffe5af6906eff15391fe9e38a5"
+  integrity sha512-8d3Tackk8IRLXTo67Y+c1rpaiXjoz/Dd2HpcMdW//62/x8J1Nbho14Kh8x974t9prsLHN6XqVgcnRiBGFptQmg==
+  dependencies:
+    loose-envify "^1.4.0"
+    prop-types "^15.6.0"
+    qr.js "0.0.0"
+
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"