Merge pull request #2 from Permissionless-Software-Foundation/unstable

Update social feed and navbar styling

src/components/app-body/posts/index.js

@@ -47,7 +47,11 @@ function RecentPosts () {
 
       try {
         const memoDb = new MemoDb()
-        const data = await memoDb.getRecentPosts({ limit: PAGE_SIZE, offset })
+        const data = await memoDb.getRecentPosts({
+          limit: PAGE_SIZE,
+          offset
+        })
+
         const loadedPosts = data.posts || []
         const addrs = collectPostAddrs(loadedPosts)
         const profileMap = await loadThreadProfiles(addrs, memoDb)
@@ -80,31 +84,47 @@ function RecentPosts () {
   }
 
   return (
-    <Container>
-      <Row>
-        <Col>
-          <h1 className='mt-4'>Recent Posts</h1>
-          {pagination && posts.length > 0 && (
-            <p className='text-muted'>
-              Showing {pagination.offset + 1}–{pagination.offset + posts.length} of {pagination.total} posts
+    <Container className='recent-posts-page'>
+      <Row className='justify-content-center'>
+        <Col lg={8} md={10} xs={12}>
+          <header className='recent-posts-heading'>
+            <h1>BCH Memo Posts</h1>
+            <p>
+              Recent messages published through the Memo protocol on Bitcoin Cash.
+            </p>
+
+            {pagination && posts.length > 0 && (
+              <span className='recent-posts-count'>
+                Showing {pagination.offset + 1}–
+                {pagination.offset + posts.length} of {pagination.total}
+              </span>
+            )}
+
+            {pagination && posts.length === 0 && (
+              <span className='recent-posts-count'>
+                No posts on this page.
+              </span>
+            )}
+          </header>
+
+          {error && (
+            <p className='recent-posts-error'>
+              {error}
             </p>
           )}
-          {pagination && posts.length === 0 && (
-            <p className='text-muted'>No posts on this page.</p>
-          )}
-
-          {error && <p className='text-danger'>{error}</p>}
 
           {loading && (
             <div className='text-center my-5'>
-              <Spinner animation='border' role='status' variant='primary'>
-                <span className='visually-hidden'>Loading...</span>
+              <Spinner animation='border' role='status'>
+                <span className='visually-hidden'>
+                  Loading...
+                </span>
               </Spinner>
             </div>
           )}
 
           {!loading && !error && posts.length > 0 && (
-            <div className='posts-feed mt-3'>
+            <div className='posts-feed'>
               {posts.map((post) => (
                 <PostFeedItem
                   key={post.txid}
@@ -118,16 +138,17 @@ function RecentPosts () {
           )}
 
           {!loading && !error && (pagination || offset > 0) && (
-            <div className='d-flex justify-content-between mt-3 mb-4'>
+            <div className='recent-posts-pagination'>
               <Button
-                variant='outline-primary'
+                variant='outline-dark'
                 onClick={handlePrevious}
                 disabled={!canGoBack}
               >
                 Previous
               </Button>
+
               <Button
-                variant='outline-primary'
+                variant='outline-dark'
                 onClick={handleNext}
                 disabled={!canGoNext}
               >

src/components/post-feed/post-feed-item.js

@@ -1,5 +1,5 @@
 /*
-  Single post row for feed and thread views.
+  Instagram-style post card for feed and thread views.
 */
 
 import React from 'react'
@@ -30,32 +30,92 @@ function PostFeedItem ({
   if (!post) return null
 
   const displayName = getDisplayName(post.addr, profiles)
-  const hasCustomName = Boolean(profile.name ?? profiles?.[post.addr]?.name)
+
+  const hasCustomName = Boolean(
+    profile.name ?? profiles?.[post.addr]?.name
+  )
+
+  const profilePicUrl =
+    profile.profilePicUrl ??
+    profiles?.[post.addr]?.profilePicUrl
+
   const Wrapper = embedded ? 'div' : 'article'
 
+  const copyTxid = () => {
+    if (!post.txid) return
+    appUtil.copyToClipboard(post.txid)
+  }
+
   return (
-    <Wrapper className={`posts-feed-item${embedded ? ' posts-feed-item-embedded' : ''}`}>
-      <div className='posts-feed-item-header'>
-        <PostThreadAvatar
-          addr={post.addr}
-          profilePicUrl={profile.profilePicUrl ?? profiles?.[post.addr]?.profilePicUrl}
-        />
+    <Wrapper
+      className={[
+        'posts-feed-item',
+        embedded ? 'posts-feed-item-embedded' : ''
+      ].filter(Boolean).join(' ')}
+    >
+      <header className='posts-feed-item-header'>
+        <Link
+          to={`/profile/${encodeURIComponent(post.addr)}`}
+          className='posts-feed-item-avatar-link'
+          aria-label={`View ${displayName}'s profile`}
+        >
+          <PostThreadAvatar
+            addr={post.addr}
+            profilePicUrl={profilePicUrl}
+          />
+        </Link>
+
         <div className='posts-feed-item-meta'>
+          <div className='posts-feed-item-author-row'>
+            <Link
+              to={`/profile/${encodeURIComponent(post.addr)}`}
+              className={[
+                'posts-feed-item-author',
+                hasCustomName
+                  ? ''
+                  : 'posts-feed-item-author-address'
+              ].filter(Boolean).join(' ')}
+              title={post.addr}
+            >
+              {displayName}
+            </Link>
+
+            {showRepliedLabel && (
+              <span className='posts-feed-item-replied'>
+                replied
+              </span>
+            )}
+          </div>
+
+          <span className='posts-feed-item-seen'>
+            {formatRelativeSeen(post.seen)}
+          </span>
+        </div>
+
+        <button
+          type='button'
+          className='posts-feed-item-menu'
+          aria-label='Post options'
+          title='Post options'
+        >
+          <span aria-hidden='true'>•••</span>
+        </button>
+      </header>
+
+      <div className='posts-feed-item-content'>
+        <p className='posts-feed-item-text'>
           <Link
             to={`/profile/${encodeURIComponent(post.addr)}`}
-            className={`posts-feed-item-author${hasCustomName ? '' : ' posts-feed-item-author-address'}`}
-            title={post.addr}
+            className='posts-feed-item-inline-author'
           >
             {displayName}
           </Link>
-          {showRepliedLabel && (
-            <span className='posts-feed-item-replied'>replied</span>
-          )}
-          <span className='posts-feed-item-seen'>{formatRelativeSeen(post.seen)}</span>
-        </div>
-      </div>
 
-      <div className='posts-feed-item-text'>{post.text}</div>
+          {' '}
+
+          {post.text}
+        </p>
+      </div>
 
       {showReplyCount && (
         <div className='posts-feed-item-actions'>
@@ -67,25 +127,25 @@ function PostFeedItem ({
       )}
 
       {showFooterMeta && (
-        <div className='posts-feed-item-footer'>
+        <footer className='posts-feed-item-footer'>
           <span>Block {post.blockHeight}</span>
-          <span className='posts-feed-item-footer-separator'>·</span>
+
           <span
+            className='posts-feed-item-footer-separator'
+            aria-hidden='true'
+          >
+            ·
+          </span>
+
+          <button
+            type='button'
             className='posts-feed-item-txid'
             title={post.txid}
-            onClick={() => appUtil.copyToClipboard(post.txid)}
-            role='button'
-            tabIndex={0}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault()
-                appUtil.copyToClipboard(post.txid)
-              }
-            }}
+            onClick={copyTxid}
           >
             {truncateTxid(post.txid, 20)}
-          </span>
-        </div>
+          </button>
+        </footer>
       )}
     </Wrapper>
   )

src/components/post-feed/post-feed.css

@@ -1,109 +1,605 @@
-.posts-feed {
-  max-width: 720px;
-  background: #f5f5f5;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
+
+/*
+  Instagram-inspired post feed
+*/
+
+:root {
+  --ig-background: #fafafa;
+  --ig-surface: #ffffff;
+  --ig-border: #dbdbdb;
+  --ig-border-soft: #efefef;
+
+  --ig-text: #262626;
+  --ig-text-secondary: #737373;
+  --ig-text-muted: #a8a8a8;
+
+  --ig-link: #00376b;
+  --ig-blue: #0095f6;
+  --ig-blue-hover: #1877f2;
+
+  --ig-danger: #ed4956;
+
+  --ig-radius: 8px;
+  --ig-feed-width: 630px;
+}
+
+/* Feed wrapper */
+
+.posts-feed,
+.posts-feed-list,
+.posts-feed-container {
+  width: min(100%, var(--ig-feed-width));
+  margin: 0 auto;
+  padding: 24px 12px 60px;
+}
+
+/* Main post card */
+
+.posts-feed-item {
+  position: relative;
+  width: 100%;
+  margin: 0 0 20px;
+  padding: 0;
+
+  color: var(--ig-text);
+  background: var(--ig-surface);
+
+  border: 1px solid var(--ig-border);
+  border-radius: var(--ig-radius);
+
+  box-shadow: none;
   overflow: hidden;
 }
 
-.posts-feed-item {
-  background: #fff;
-  padding: 0.85rem 1rem;
-  border-bottom: 1px solid #e8e8e8;
+/* Remove the previous green accent */
+.posts-feed-item::before {
+  display: none;
 }
 
-.posts-feed-item:last-child {
-  border-bottom: none;
+/* No floating card animation */
+.posts-feed-item:hover {
+  transform: none;
+  border-color: var(--ig-border);
+  box-shadow: none;
 }
 
-.posts-feed-item-embedded {
-  background: transparent;
-  padding: 0;
-  border-bottom: none;
-  margin-bottom: 0.75rem;
-}
-
-.posts-feed-item-embedded:last-child {
-  margin-bottom: 0;
-}
+/* Post header */
 
 .posts-feed-item-header {
   display: flex;
   align-items: center;
-  gap: 0.6rem;
-  margin-bottom: 0.5rem;
+  gap: 12px;
+
+  min-height: 60px;
+  margin: 0;
+  padding: 12px 16px;
+
+  border-bottom: 1px solid var(--ig-border-soft);
 }
 
+/* Metadata */
+
 .posts-feed-item-meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0.35rem;
-  font-size: 0.85rem;
-  color: #6c757d;
   min-width: 0;
+  flex: 1;
+
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 7px;
+
+  padding: 0;
 }
 
+/* Author name */
+
 .posts-feed-item-author {
+  display: inline-block;
+  max-width: 100%;
+
+  color: var(--ig-text);
+  font-size: 14px;
   font-weight: 600;
-  color: #212529;
+  line-height: 18px;
+
   text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  transition: opacity 0.15s ease;
 }
 
 .posts-feed-item-author:hover {
-  text-decoration: underline;
-  color: #28a745;
+  color: var(--ig-text);
+  text-decoration: none;
+  opacity: 0.65;
 }
 
+/* Address-based usernames */
+
 .posts-feed-item-author-address {
-  font-family: monospace;
-  font-size: 0.8rem;
-  font-weight: 500;
+  max-width: 300px;
+
+  color: var(--ig-text);
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+
+  font-size: 14px;
+  font-weight: 600;
 }
 
+/* Replied badge */
+
 .posts-feed-item-replied {
-  font-style: italic;
+  display: inline-flex;
+  align-items: center;
+
+  padding: 0;
+
+  color: var(--ig-text-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
 }
 
+/* Timestamp */
+
 .posts-feed-item-seen {
-  white-space: nowrap;
+  color: var(--ig-text-secondary);
+  font-size: 12px;
+  line-height: 16px;
 }
 
+.posts-feed-item-seen::before {
+  content: "•";
+  margin-right: 7px;
+  color: var(--ig-text-muted);
+}
+
+/* Post body */
+
 .posts-feed-item-text {
+  margin: 0;
+  padding: 16px;
+
+  color: var(--ig-text);
+  font-size: 14px;
+  line-height: 20px;
+
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
   word-break: break-word;
-  font-size: 0.95rem;
-  line-height: 1.5;
 }
 
+/* Links inside posts */
+
+.posts-feed-item-text a {
+  color: var(--ig-link);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.posts-feed-item-text a:hover {
+  text-decoration: underline;
+}
+
+/* Actions */
+
 .posts-feed-item-actions {
-  margin-top: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  min-height: 46px;
+  margin: 0;
+  padding: 8px 16px;
+
+  border-top: 1px solid var(--ig-border-soft);
 }
 
-.posts-feed-item-actions .post-reply-count {
-  margin-top: 0.35rem;
+/* Reply-count buttons and links */
+
+.posts-feed-item-actions button,
+.posts-feed-item-actions a,
+.posts-feed-item-actions [role="button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+
+  min-height: 32px;
+  padding: 4px 0;
+
+  color: var(--ig-text);
+  background: transparent;
+
+  border: 0;
+  border-radius: 0;
+
+  box-shadow: none;
+
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  text-decoration: none;
+
+  cursor: pointer;
+
+  transition:
+    opacity 0.15s ease,
+    color 0.15s ease;
 }
 
+.posts-feed-item-actions button:hover,
+.posts-feed-item-actions a:hover,
+.posts-feed-item-actions [role="button"]:hover {
+  color: var(--ig-text);
+  background: transparent;
+  border: 0;
+
+  box-shadow: none;
+  transform: none;
+  opacity: 0.55;
+}
+
+/* Footer metadata */
+
 .posts-feed-item-footer {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 0.35rem;
-  margin-top: 0.5rem;
-  font-size: 0.75rem;
-  color: #adb5bd;
+  flex-wrap: wrap;
+  gap: 4px;
+
+  margin: 0;
+  padding: 0 16px 14px;
+
+  color: var(--ig-text-secondary);
+
+  border-top: 0;
+
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+
+  font-size: 11px;
+  line-height: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
 }
 
 .posts-feed-item-footer-separator {
-  color: #ced4da;
+  color: var(--ig-text-muted);
+}
+
+/* Transaction ID */
+
+.posts-feed-item-txid {
+  color: var(--ig-text-secondary);
+  cursor: pointer;
+
+  border: 0;
+  text-transform: none;
+
+  transition: color 0.15s ease;
+}
+
+.posts-feed-item-txid:hover {
+  color: var(--ig-text);
+  background: transparent;
+}
+
+.posts-feed-item-txid:focus-visible {
+  outline: 2px solid var(--ig-blue);
+  outline-offset: 3px;
+  border-radius: 2px;
+}
+
+/* Embedded replies */
+
+.posts-feed-item-embedded {
+  margin: 12px 0 0 44px;
+  padding: 0;
+
+  background: var(--ig-surface);
+  border: 1px solid var(--ig-border-soft);
+  border-radius: var(--ig-radius);
+
+  box-shadow: none;
+}
+
+.posts-feed-item-embedded .posts-feed-item-header {
+  min-height: 52px;
+  padding: 10px 12px;
+}
+
+.posts-feed-item-embedded .posts-feed-item-text {
+  padding: 12px;
+}
+
+.posts-feed-item-embedded .posts-feed-item-actions {
+  padding: 6px 12px;
+}
+
+.posts-feed-item-embedded .posts-feed-item-footer {
+  padding: 0 12px 12px;
+}
+
+/* Alternate posts should remain consistent */
+.posts-feed-item:nth-child(even) {
+  background: var(--ig-surface);
+}
+
+/* Common avatar overrides */
+
+.posts-feed-item-header img,
+.posts-feed-item-header .avatar,
+.posts-feed-item-header [class*="avatar"] {
+  width: 36px;
+  height: 36px;
+  flex: 0 0 36px;
+
+  object-fit: cover;
+
+  background: #efefef;
+  border: 1px solid var(--ig-border);
+  border-radius: 50%;
+}
+
+/* Optional Instagram-style profile ring */
+
+.posts-feed-item-header img,
+.posts-feed-item-header [class*="avatar"] img {
+  padding: 2px;
+  background:
+    linear-gradient(#ffffff, #ffffff) padding-box,
+    linear-gradient(
+      135deg,
+      #f9ce34,
+      #ee2a7b,
+      #6228d7
+    ) border-box;
+
+  border: 2px solid transparent;
+}
+
+/* Mobile */
+
+@media (max-width: 700px) {
+  .posts-feed,
+  .posts-feed-list,
+  .posts-feed-container {
+    width: 100%;
+    padding: 0 0 40px;
+  }
+
+  .posts-feed-item {
+    margin-bottom: 10px;
+
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+  }
+
+  .posts-feed-item-header {
+    padding: 10px 12px;
+  }
+
+  .posts-feed-item-text {
+    padding: 14px 12px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .posts-feed-item-actions {
+    padding: 7px 12px;
+  }
+
+  .posts-feed-item-footer {
+    padding: 0 12px 12px;
+  }
+
+  .posts-feed-item-author-address {
+    max-width: 190px;
+  }
+
+  .posts-feed-item-embedded {
+    margin-left: 24px;
+    margin-right: 10px;
+
+    border-left: 1px solid var(--ig-border-soft);
+    border-right: 1px solid var(--ig-border-soft);
+    border-radius: var(--ig-radius);
+  }
+}
+
+/* Accessibility */
+
+@media (prefers-reduced-motion: reduce) {
+  .posts-feed-item-author,
+  .posts-feed-item-actions button,
+  .posts-feed-item-actions a,
+  .posts-feed-item-actions [role="button"],
+  .posts-feed-item-txid {
+    transition: none;
+  }
+}
+
+.posts-feed-item-avatar-link {
+  display: inline-flex;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  text-decoration: none;
+}
+
+.posts-feed-item-meta {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+}
+
+.posts-feed-item-author-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.posts-feed-item-menu {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+
+  color: #262626;
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+  box-shadow: none;
+
+  font-size: 15px;
+  letter-spacing: 1px;
+  cursor: pointer;
+}
+
+.posts-feed-item-menu:hover {
+  color: #737373;
+  background: #f2f2f2;
+  border: 0;
+  box-shadow: none;
+  transform: none;
+}
+
+.posts-feed-item-content {
+  padding: 14px 16px 6px;
+}
+
+.posts-feed-item-text {
+  margin: 0;
+  padding: 0;
+  color: #262626;
+  font-size: 14px;
+  line-height: 20px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.posts-feed-item-inline-author {
+  color: #262626;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.posts-feed-item-inline-author:hover {
+  text-decoration: underline;
 }
 
 .posts-feed-item-txid {
-  font-family: monospace;
+  padding: 0;
+  color: #737373;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+
+  font-size: inherit;
+  font-weight: inherit;
+  text-transform: none;
   cursor: pointer;
 }
 
 .posts-feed-item-txid:hover {
-  color: #6c757d;
-  text-decoration: underline;
+  color: #262626;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  transform: none;
+}
+
+.recent-posts-page {
+  padding-top: 2.5rem;
+  padding-bottom: 4rem;
+}
+
+.recent-posts-heading {
+  margin-bottom: 1.75rem;
+  text-align: center;
+}
+
+.recent-posts-heading h1 {
+  margin: 0;
+  color: #262626;
+  font-size: clamp(2rem, 5vw, 2.8rem);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+
+.recent-posts-heading p {
+  max-width: 560px;
+  margin: 0.6rem auto 0;
+  color: #737373;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.recent-posts-count {
+  display: inline-block;
+  margin-top: 0.85rem;
+  color: #8e8e8e;
+  font-size: 0.78rem;
+  font-weight: 500;
+}
+
+.recent-posts-error {
+  padding: 0.85rem 1rem;
+  color: #c62828;
+  background: #fff1f1;
+  border: 1px solid #ffd2d2;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.recent-posts-pagination {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.recent-posts-pagination .btn {
+  min-width: 110px;
+  border-radius: 8px;
+}
+
+@media (max-width: 700px) {
+  .recent-posts-page {
+    padding-top: 1.5rem;
+  }
+
+  .recent-posts-heading {
+    padding: 0 0.75rem;
+  }
+
+  .recent-posts-heading h1 {
+    font-size: 2rem;
+  }
+
+  .recent-posts-heading p {
+    font-size: 0.9rem;
+  }
+
+  .recent-posts-pagination {
+    padding: 0 0.75rem;
+  }
 }