From d8e03c090688d5ceab78b3f3a844246b186664bd Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sun, 10 Apr 2022 09:42:38 -0700
Subject: [PATCH] Make arrow styles more closely match design

---
 packages/web/components/elements/DropdownElements.tsx       | 6 +++---
 .../web/components/templates/article/ArticleActionsMenu.tsx | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx
index d5f3b78c6..853bc71bc 100644
--- a/packages/web/components/elements/DropdownElements.tsx
+++ b/packages/web/components/elements/DropdownElements.tsx
@@ -49,12 +49,12 @@ export const DropdownContent = styled(Content, {
   backgroundColor: '$grayBg',
   borderRadius: '0.5em',
   padding: 5,
-  border: '1px solid $grayBorder',
+  outline: '1px solid $grayBorder',
   boxShadow: '$cardBoxShadow',
 })
 
 const StyledArrow = styled(Arrow, {
-  fill: '$grayBase',
+  fill: '$grayBg',
 })
 
 const StyledLabel = styled(Label, {
@@ -131,7 +131,7 @@ export function Dropdown({
       >
         {labelText && <StyledLabel>{labelText}</StyledLabel>}
         {children}
-        {showArrow && <StyledArrow offset={20} />}
+        {showArrow && <StyledArrow offset={20} width={20} height={10} />}
       </DropdownContent>
     </Root>
   )
diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index cd5ea9071..72e5417e2 100644
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -48,6 +48,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
       }}
     >
       <Dropdown
+        showArrow={true}
         side={props.layout == 'vertical' ? 'right' : 'bottom'}
         sideOffset={props.layout == 'vertical' ? 8 : 0}
         align={props.layout == 'vertical' ? 'start' : 'center'}