Merge pull request #169 from omnivore-app/label-tweaks

Add labels to library items query, improve design of labels

packages/web/components/elements/Label.tsx

@@ -22,8 +22,8 @@ export function Label(props: LabelProps): JSX.Element {
         borderRadius: '32px',
         color: props.color,
         padding: '4px 8px 4px 8px',
-        border: `1px solid ${props.color}`,
-        backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.3)`,
+        border: `1px solid rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.40)`,
+        backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.20)`,
       }}
     >
       {props.text}

packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx

@@ -7,6 +7,7 @@ import { setLinkArchivedMutation } from '../mutations/setLinkArchivedMutation'
 import { deleteLinkMutation } from '../mutations/deleteLinkMutation'
 import { articleReadingProgressMutation } from '../mutations/articleReadingProgressMutation'
 import { labelFragment } from '../fragments/labelFragment'
+import { Label } from './useGetLabelsQuery'
 
 export type LibraryItemsQueryInput = {
   limit: number
@@ -54,6 +55,7 @@ export type LibraryItemNode = ArticleFragmentData & {
   hasContent: boolean
   originalArticleUrl: string
   sharedComment?: string
+  labels?: Label[]
 }
 
 export type PageInfo = {