Edit title and description modal

packages/web/components/elements/Button.tsx

@@ -19,16 +19,40 @@ export const Button = styled('button', {
         },
       },
       ctaDarkYellow: {
-        border: 0,
-        fontSize: '14px',
+        border: '1px solid transparent',
+        fontSize: '10px',
         fontWeight: 500,
-        fontStyle: 'normal',
         fontFamily: 'Inter',
-        borderRadius: '8px',
+        borderRadius: '5px',
         cursor: 'pointer',
-        color: '$omnivoreGray',
-        bg: '$omnivoreCtaYellow',
-        p: '10px 13px',
+        color: '#3D3D3D',
+        bg: '#FFEA9F',
+        p: '10px 15px',
+        '&:hover': {
+          bg: '$omnivoreCtaYellow',
+        },
+        '&:focus': {
+          outline: 'none !important',
+          border: '1px solid $omnivoreCtaYellow',
+        },
+      },
+      cancelGeneric: {
+        fontSize: '10px',
+        fontWeight: 500,
+        fontFamily: 'Inter',
+        cursor: 'pointer',
+        color: '#6A6968',
+        borderRadius: '5px',
+        border: '1px solid transparent',
+        p: '10px 15px',
+        bg: '$grayBg',
+        '&:hover': {
+          bg: '#EBEBEB',
+        },
+        '&:focus': {
+          outline: 'none !important',
+          border: '1px solid $omnivoreCtaYellow',
+        },
       },
       ctaOutlineYellow: {
         boxSizing: 'border-box',
@@ -65,7 +89,7 @@ export const Button = styled('button', {
         },
         '.ctaButtonIcon': {
           visibility: 'hidden',
-        }
+        },
       },
       ctaGray: {
         border: 0,
@@ -211,7 +235,7 @@ export const Button = styled('button', {
         },
         '&[data-state="selected"]': {
           border: '2px solid #F9D354',
-        }
+        },
       },
     },
   },
@@ -237,4 +261,4 @@ export const IconButton = styled(Button, {
       },
     },
   },
-})
+})

packages/web/components/elements/StyledText.tsx

@@ -67,9 +67,10 @@ const textVariants = {
       margin: 0,
     },
     modalHeadline: {
-      fontWeight: '500',
-      fontSize: '24px',
-      lineHeight: '1',
+      fontFamily: 'SF Pro Display',
+      fontWeight: '600',
+      fontSize: '16px',
+      lineHeight: '20px',
       color: '$grayText',
       margin: 0,
     },

packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx

@@ -83,8 +83,6 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
     props.item.siteName ||
     siteName(props.item.originalArticleUrl, props.item.url)
 
-  console.log(props.item.title, 'menuOpen: ', menuOpen, 'isHovered', isHovered)
-
   return (
     <VStack
       css={{

packages/web/components/templates/article/ArticleActionsMenu.tsx

@@ -2,6 +2,7 @@ import { Separator } from '@radix-ui/react-separator'
 import {
   ArchiveBox,
   HighlighterCircle,
+  Info,
   TagSimple,
   Trash,
   Tray,
@@ -159,6 +160,18 @@ export function ArticleActionsMenu(
           </TooltipWrapped>
         </Button>
 
+        <Button
+          style="articleActionIcon"
+          onClick={() => props.articleActionHandler('showEditModal')}
+        >
+          <TooltipWrapped
+            tooltipContent="Edit title & description"
+            tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+          >
+            <Info size={24} color={theme.colors.readerFont.toString()} />
+          </TooltipWrapped>
+        </Button>
+
         <MenuSeparator layout={props.layout} />
 
         <Button

packages/web/components/tokens/stitches.config.ts

@@ -126,7 +126,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         grayBgHover: 'hsl(0 0% 93.0%)',
         grayLine: 'hsl(0 0% 88.7%)',
         grayBorderHover: 'hsl(0 0% 78.0%)',
-        grayText: '#3B3938',
+        grayText: '#6A6968',
         graySeparator: '#DADADA',
         grayProgressBackground: '#FFFFFF',
 

packages/web/lib/hooks/useReaderSettings.tsx

@@ -165,12 +165,19 @@ export const useReaderSettings = (): ReaderSettings => {
         perform: () => actionHandler('decrementMarginWidth'),
       },
       {
-        id: 'edit_a',
+        id: 'edit_labels',
         section: 'Article',
         name: 'Edit labels',
         shortcut: ['l'],
         perform: () => setShowSetLabelsModal(true),
       },
+      {
+        id: 'display_settings',
+        section: 'Article',
+        name: 'Display settings',
+        shortcut: ['d'],
+        perform: () => setShowEditDisplaySettingsModal(true),
+      },
     ],
     [actionHandler]
   )

packages/web/lib/keyboardShortcuts/navigationShortcuts.ts

@@ -183,7 +183,7 @@ export function libraryListCommands(
       actionDescription: 'Move cursor to the previous row',
       shortcutKeyDescription: 'Arrow Up',
       callback: () => actionHandler('moveFocusToPreviousRowItem'),
-    }
+    },
   ]
 }
 
@@ -267,12 +267,12 @@ export function articleKeyboardCommands(
     //   shortcutKeyDescription: '[',
     //   callback: () => actionHandler('decrementMarginWidth'),
     // },
-    {
-      shortcutKeys: ['d'],
-      actionDescription: 'Edit Display Settings',
-      shortcutKeyDescription: 'd',
-      callback: () => actionHandler('editDisplaySettings'),
-    },
+    // {
+    //   shortcutKeys: ['d'],
+    //   actionDescription: 'Edit Display Settings',
+    //   shortcutKeyDescription: 'd',
+    //   callback: () => actionHandler('editDisplaySettings'),
+    // },
     // {
     //   shortcutKeys: ['l'],
     //   actionDescription: 'Edit labels',

packages/web/pages/[username]/[slug]/index.tsx

@@ -39,7 +39,10 @@ import { deleteLinkMutation } from '../../../lib/networking/mutations/deleteLink
 import { ConfirmationModal } from '../../../components/patterns/ConfirmationModal'
 import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
 import { ReaderHeader } from '../../../components/templates/reader/ReaderHeader'
-import { EditLibraryItemModal } from '../../../components/templates/homeFeed/EditItemModals'
+import {
+  EditArticleModal,
+  EditLibraryItemModal,
+} from '../../../components/templates/homeFeed/EditItemModals'
 
 const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
   () => import('./../../../components/templates/article/PdfArticleContainer'),
@@ -51,6 +54,8 @@ export default function Home(): JSX.Element {
   const { cache, mutate } = useSWRConfig()
   const scrollRef = useRef<HTMLDivElement | null>(null)
   const { slug } = router.query
+
+  const [showEditModal, setShowEditModal] = useState(false)
   const [showHighlightsModal, setShowHighlightsModal] = useState(false)
   const { viewerData } = useGetViewerQuery()
   const readerSettings = useReaderSettings()
@@ -134,6 +139,9 @@ export default function Home(): JSX.Element {
         case 'showHighlights':
           setShowHighlightsModal(true)
           break
+        case 'showEditModal':
+          setShowEditModal(true)
+          break
         default:
           readerSettings.actionHandler(action, arg)
           break
@@ -258,6 +266,13 @@ export default function Home(): JSX.Element {
           setShowHighlightsModal(true)
         },
       },
+      {
+        id: 'edit_title',
+        section: 'Article',
+        name: 'Edit title and description',
+        shortcut: ['i'],
+        perform: () => setShowEditModal(true),
+      },
     ],
     []
   )
@@ -403,13 +418,19 @@ export default function Home(): JSX.Element {
           onOpenChange={() => readerSettings.setShowDeleteConfirmation(false)}
         />
       )}
-      {/* {article && readerSettings.showDeleteConfirmation && (
-        <EditTitleModal
-          item={article}
-          updateItem={async (item) => {}}
-          onOpenChange={() => readerSettings.setShowDeleteConfirmation(false)}
+      {article && showEditModal && (
+        <EditArticleModal
+          article={article}
+          onOpenChange={() => setShowEditModal(false)}
+          updateArticle={(title, author, description, savedAt, publishedAt) => {
+            article.title = title
+            article.author = author
+            article.description = description
+            article.savedAt = savedAt
+            article.publishedAt = publishedAt
+          }}
         />
-      )} */}
+      )}
     </PrimaryLayout>
   )
 }