From 19e3af66d5a06861ea426b7a4ae4a98462a0ae18 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 8 Apr 2022 10:01:14 -0700
Subject: [PATCH] Encapsulate the article actions menu, standardize header
 height at 48px

---
 packages/web/components/elements/Button.tsx   |  8 ++++
 .../web/components/patterns/PrimaryHeader.tsx | 46 ++-----------------
 .../components/templates/PrimaryLayout.tsx    |  5 +-
 .../components/templates/SettingsLayout.tsx   |  3 +-
 .../web/pages/[username]/[slug]/index.tsx     | 36 ++-------------
 5 files changed, 17 insertions(+), 81 deletions(-)

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index b3ccce06d..ccd3b0131 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -153,6 +153,14 @@ export const Button = styled('button', {
           opacity: 0.8,
         },
       },
+      articleActionIcon: {
+        bg: 'transparent',
+        border: 'none',
+        cursor: 'pointer',
+        '&:hover': {
+          opacity: 0.8,
+        },
+      },
       ghost: {
         color: 'transparent',
         border: 'none',
diff --git a/packages/web/components/patterns/PrimaryHeader.tsx b/packages/web/components/patterns/PrimaryHeader.tsx
index 9e40bf6f7..2d62089c7 100644
--- a/packages/web/components/patterns/PrimaryHeader.tsx
+++ b/packages/web/components/patterns/PrimaryHeader.tsx
@@ -18,6 +18,7 @@ import { setupAnalytics } from '../../lib/analytics'
 import { Button } from '../elements/Button'
 import Link from 'next/link'
 import { ArchiveBox, ArrowSquareOut, DotsThree, HighlighterCircle, TagSimple, TextAa } from 'phosphor-react'
+import { ArticleActionsMenu } from '../templates/article/ArticleActionsMenu'
 
 type HeaderProps = {
   user?: UserBasicData
@@ -160,11 +161,10 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
           width: '100%',
           boxShadow: props.isDisplayingShadow ? '$panelShadow' : 'unset',
           p: '0px $3 0px $3',
-          height: '68px',
+          height: '48px',
           position: 'fixed',
           bg: 'transparent',
           '@smDown': {
-            height: '48px',
             p: '0px 18px 0px 16px',
           },
           '@lgDown': {
@@ -195,33 +195,8 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
   mr: '16px',
   }}
 >
-        <HStack distribution="end" alignment="center" css={{
-  gap: '4px',
-  // background: 'red',
-  height: '100%',
-  width: '100%',
-  m: '0px',
-  }}
->
-          <Button style='plainIcon'>
-            <TextAa size={24} color='#5D5C5B' />
-          </Button>
+        <ArticleActionsMenu layout='horizontal' />
 
-          <Button style='plainIcon'>
-            <TagSimple size={24} color='#5D5C5B' />
-          </Button>
-          <Button style='plainIcon'>
-            <HighlighterCircle size={24} color='#5D5C5B' />
-          </Button>
-
-          <Button style='plainIcon'>
-            <ArchiveBox size={24} color='#5D5C5B' />
-          </Button>
-
-          <Button style='plainIcon'>
-            <DotsThree size={24} color='#5D5C5B' />
-          </Button>
-        </HStack>
       </HStack>
 
 
@@ -230,21 +205,6 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
             alignment="center"
             css={{ display: 'flex', alignItems: 'center' }}
           >
-            {/* <Box css={{ '@smDown': { visibility: 'collapse' } }}>
-              <a href="https://github.com/omnivore-app/omnivore" target='_blank' rel="noreferrer">
-                <Button style="ctaLightGray" css={{ background: 'unset', mr: '32px' }}>
-                  <HStack css={{ height: '100%' }}>
-                    <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
-                      <path fill={theme.colors.grayTextContrast.toString()} fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
-                    </svg>
-                    <SpanBox css={{ pl: '8px', color: '$grayTextContrast' }}>Follow us on GitHub</SpanBox>
-                    <Box className='ctaButtonIcon' css={{ ml: '4px' }}>
-                      <ArrowSquareOut size={16} />
-                    </Box>
-                  </HStack>
-                </Button>
-              </a>
-            </Box> */}
             <DropdownMenu
               username={props.username}
               triggerElement={
diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx
index 3c7764c90..e3447aa39 100644
--- a/packages/web/components/templates/PrimaryLayout.tsx
+++ b/packages/web/components/templates/PrimaryLayout.tsx
@@ -84,8 +84,6 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
         <Box
           ref={props.scrollElementRef}
           css={{
-            // top: '68px',
-            // '@smDown': { top: '48px' },
             position: 'fixed',
             overflowY: 'auto',
             height: '100%',
@@ -96,9 +94,8 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
                   <Box
           ref={props.scrollElementRef}
           css={{
-            height: '68px',
+            height: '48px',
             bg: '$grayBase',
-            '@smDown': { height: '48px' },
           }}
         ></Box>
           {props.children}
diff --git a/packages/web/components/templates/SettingsLayout.tsx b/packages/web/components/templates/SettingsLayout.tsx
index 7f8f09f26..c2df14f0d 100644
--- a/packages/web/components/templates/SettingsLayout.tsx
+++ b/packages/web/components/templates/SettingsLayout.tsx
@@ -54,8 +54,7 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
         />
         <Box
           css={{
-            top: '68px',
-            '@smDown': { top: '48px' },
+            top: '48px',
             position: 'fixed',
             overflowY: 'auto',
             height: '100%',
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 0a0711f70..14b61bcb2 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -27,6 +27,8 @@ import { styled, theme } from '../../../components/tokens/stitches.config'
 import { Button } from '../../../components/elements/Button'
 import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa } from 'phosphor-react'
 import { Separator } from '@radix-ui/react-separator'
+import { Article } from '../../../components/templates/article/Article'
+import { ArticleActionsMenu } from '../../../components/templates/article/ArticleActionsMenu'
 
 const MenuSeparator = styled(Separator, {
   width: '100%',
@@ -124,7 +126,7 @@ export default function Home(): JSX.Element {
         <VStack distribution="between" alignment="center" css={{
   position: 'fixed',
   flexDirection: 'row-reverse',
-  top: '-68px',
+  top: '-120px',
   left: 8,
   height: '100%',
   width: '48px',
@@ -133,38 +135,8 @@ export default function Home(): JSX.Element {
   },
   }}
 >
-        <VStack distribution="start" alignment="center" css={{
-  gap: '4px',
-  // background: 'red',
-  height: '200px',
-  width: '100%',
-  m: '0px',
-  }}
->
-          <Button style='plainIcon'>
-            <TextAa size={24} color='#5D5C5B' />
-          </Button>
-          <MenuSeparator />
-
-          <Button style='plainIcon'>
-            <TagSimple size={24} color='#5D5C5B' />
-          </Button>
-          <Button style='plainIcon'>
-            <HighlighterCircle size={24} color='#5D5C5B' />
-          </Button>
-          <MenuSeparator />
-
-          <Button style='plainIcon'>
-            <ArchiveBox size={24} color='#5D5C5B' />
-          </Button>
-          <MenuSeparator />
-
-          <Button style='plainIcon'>
-            <DotsThree size={24} color='#5D5C5B' />
-          </Button>
-        </VStack>
+        <ArticleActionsMenu layout='vertical' />
       </VStack>
-
           {article.contentReader == 'PDF' ? (
             <PdfArticleContainerNoSSR
               article={article}