a number of style updates

components/comment.js

@@ -46,56 +46,53 @@ export default function Comment ({ item, children, replyOpen, includeParent, cac
   const [reply, setReply] = useState(replyOpen)
 
   return (
-    <>
+    <div className={includeParent ? '' : styles.comment}>
-      <div />
+      <div className={`${itemStyles.item} ${styles.item}`}>
-      <div>
+        <UpVote itemId={item.id} meSats={item.meSats} className={styles.upvote} />
-        <div className={`${itemStyles.item} ${styles.item}`}>
+        <div className={itemStyles.hunk}>
-          <UpVote itemId={item.id} meSats={item.meSats} className={styles.upvote} />
+          <div className={itemStyles.other}>
-          <div className={itemStyles.hunk}>
+            <span>{item.sats} sats</span>
-            <div className={itemStyles.other}>
+            <span> \ </span>
-              <Link href={`/${item.user.name}`} passHref>
+            <span>{item.boost} boost</span>
-                <a>@{item.user.name}</a>
+            <span> \ </span>
-              </Link>
+            <Link href={`/items/${item.id}`} passHref>
-              <span> </span>
+              <a className='text-reset'>{item.ncomments} replies</a>
-              <span>{timeSince(new Date(item.createdAt))}</span>
+            </Link>
-              <span> \ </span>
+            <span> \ </span>
-              <span>{item.sats} sats</span>
+            <Link href={`/${item.user.name}`} passHref>
-              {!!item.boost &&
+              <a>@{item.user.name}</a>
-                <>
+            </Link>
-                  <span> \ </span>
+            <span> </span>
-                  <span>{item.boost} boost</span>
+            <span>{timeSince(new Date(item.createdAt))}</span>
-                </>}
+            {includeParent && <Parent item={item} />}
-              <span> \ </span>
-              <Link href={`/items/${item.id}`} passHref>
-                <a className='text-reset'>{item.ncomments} replies</a>
-              </Link>
-              {includeParent && <Parent item={item} />}
-            </div>
-            <div className={styles.text}>
-              <Text>{item.text}</Text>
-            </div>
           </div>
-        </div>
+          <div className={styles.text}>
-        <div className={`${itemStyles.children} ${styles.children}`}>
+            <Text>{item.text}</Text>
-          {!noReply &&
-            <div
-              className={`${itemStyles.other} ${styles.reply}`}
-              onClick={() => setReply(!reply)}
-            >
-              {reply ? 'cancel' : 'reply'}
-            </div>}
-          {reply && <Reply parentId={item.id} onSuccess={() => setReply(replyOpen || false)} cacheId={cacheId} />}
-          {children}
-          <div className={styles.comments}>
-            {item.comments && !noComments
-              ? item.comments.map((item) => (
-                <Comment key={item.id} item={item} />
-                ))
-              : null}
           </div>
         </div>
       </div>
-    </>
+      <div className={`${itemStyles.children} ${styles.children}`}>
+        {!noReply &&
+          <div
+            className={`${itemStyles.other} ${styles.reply}`}
+            onClick={() => setReply(!reply)}
+          >
+            {reply ? 'cancel' : 'reply'}
+          </div>}
+        {reply &&
+          <div className='pb-2 pr-2'>
+            <Reply parentId={item.id} onSuccess={() => setReply(replyOpen || false)} cacheId={cacheId} />
+          </div>}
+        {children}
+        <div className={`${styles.comments} ml-sm-1 ml-md-3`}>
+          {item.comments && !noComments
+            ? item.comments.map((item) => (
+              <Comment key={item.id} item={item} />
+              ))
+            : null}
+        </div>
+      </div>
+    </div>
   )
 }
 

components/comment.module.css

@@ -3,7 +3,7 @@
 }
 
 .upvote {
-    margin-top: .3rem;
+    margin-top: 9px;
 }
 
 .text {
@@ -13,19 +13,17 @@
 .reply {
     font-weight: bold;
     cursor: pointer;
-    text-decoration: underline;
+    padding-bottom: .5rem;
 }
 
 .children {
-    margin-top: .4rem;
+    margin-top: .25rem;
 }
 
 .comments {
-    margin-left: 16px;
+    margin-left: -1rem;
-    margin-top: .5rem;
 }
 
-
 .skeleton .hunk {
     width: 100%;
 }
@@ -33,4 +31,22 @@
 .skeleton .text {
     height: 100px;
     border-radius: .4rem;
+}
+
+.comment {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-radius: .4rem;
+    padding-top: .5rem;
+    padding-left: .2rem;
+}
+
+.comment:not(:last-child) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.comment:not(:first-child) {
+    padding-top: .25rem;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
 }

components/comments.js

@@ -3,9 +3,7 @@ import Comment, { CommentSkeleton } from './comment'
 
 export default function Comments ({ comments, ...props }) {
   return comments.map(item => (
-    <div key={item.id} className='mt-2'>
+    <Comment key={item.id} item={item} {...props} />
-      <Comment item={item} {...props} />
-    </div>
   ))
 }
 
@@ -13,9 +11,7 @@ export function CommentsSkeleton () {
   const comments = new Array(3).fill(null)
 
   return comments.map((_, i) => (
-    <div key={i} className='mt-2'>
+    <CommentSkeleton key={i} skeletonChildren />
-      <CommentSkeleton skeletonChildren />
-    </div>
   ))
 }
 

components/header.js

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import styles from './header.module.css'
 import { useRouter } from 'next/router'
 import { Container } from 'react-bootstrap'
+import Price from './price'
 
 export default function Header () {
   const [session, loading] = useSession()
@@ -54,6 +55,9 @@ export default function Header () {
             <Nav.Item>
               <Nav.Link href='https://bitcoinerjobs.co' target='_blank' className={styles.navLink}>jobs</Nav.Link>
             </Nav.Item>
+            <Nav.Item style={{ fontFamily: 'monospace', opacity: '.5' }}>
+              <Price />
+            </Nav.Item>
             <Corner />
           </Nav>
         </Navbar>

components/item.js

@@ -57,7 +57,7 @@ export function ItemSkeleton ({ rank, children }) {
           {rank}
         </div>}
       <div className={`${styles.item} ${styles.skeleton}`}>
-        <UpVote />
+        <UpVote className={styles.upvote} />
         <div className={styles.hunk}>
           <div className={`${styles.main} flex-wrap flex-md-nowrap`}>
             <span className={`${styles.title} clouds text-reset flex-md-fill flex-md-shrink-0 mr-2`} />

components/item.module.css

@@ -4,6 +4,10 @@
     margin-right: .5rem;
 }
 
+.upvote {
+    margin-top: 9px;
+}
+
 .link {
     font-size: 80%;
     white-space: nowrap;
@@ -19,7 +23,6 @@
 .item {
     display: flex;
     justify-content: flex-start;
-    align-items: center;
     min-width: 0;
 }
 
@@ -40,7 +43,7 @@
 
 .rank {
     font-weight: 600;
-    align-items: center;
+    margin-top: 8px;
     display: flex;
     color: grey;
     font-size: 90%;

components/price.js

@@ -3,9 +3,14 @@ import useSWR from 'swr'
 const fetcher = url => fetch(url).then(res => res.json())
 
 export default function Price () {
-  const { data } = useSWR('https://api.coinbase.com/v2/prices/BTC-USD/spot', fetcher)
+  const { data } = useSWR(
+    'https://api.coinbase.com/v2/prices/BTC-USD/spot',
+    fetcher,
+    {
+      refreshInterval: 30000
+    })
 
   if (!data) return null
 
-  return data.data.amount
+  return '$' + data.data.amount
 }

components/reply.module.css

@@ -1,6 +1,5 @@
 .reply {
     max-width: 600px;
-    margin-top: 1rem;
 }
 
 .skeleton .input {

pages/items/[id].js

@@ -7,6 +7,7 @@ import Comments, { CommentsSkeleton } from '../../components/comments'
 import { COMMENTS } from '../../fragments/comments'
 import { ITEM_FIELDS } from '../../fragments/items'
 import { gql, useQuery } from '@apollo/client'
+import styles from '../../styles/item.module.css'
 
 export async function getServerSideProps ({ params: { id } }) {
   return {
@@ -68,7 +69,7 @@ function LoadItem ({ query }) {
             </Item>
           </>
           )}
-      <div className='mt-5'>
+      <div className={styles.comments}>
         <Comments comments={item.comments} />
       </div>
     </>

styles/item.module.css

@@ -0,0 +1,11 @@
+.comments {
+    margin-top: 3rem;
+}
+
+@media only screen and (max-width: 600px) {
+    .comments {
+        margin-top: 3rem;
+        margin-left: -15px;
+        margin-right: -15px;
+    }
+}