Update label styles on iOS and MacOS

apple/OmnivoreKit/Sources/Views/FeedItem/LabelsFlowLayout.swift

@@ -31,8 +31,8 @@ struct LabelsFlowLayout: View {
     return ZStack(alignment: .topLeading) {
       ForEach(self.labelItems, id: \.self) { label in
         self.item(for: label)
-          .padding(.horizontal, 1)
-          .padding(.vertical, 1)
+          .padding(.horizontal, 2)
+          .padding(.vertical, 2)
           .alignmentGuide(.leading, computeValue: { dim in
             if abs(width - dim.width) > geom.size.width {
               width = 0

apple/OmnivoreKit/Sources/Views/FeedItem/LibraryItemLabelView.swift

@@ -12,14 +12,15 @@ public struct LibraryItemLabelView: View {
   }
 
   public var body: some View {
-    HStack {
+    HStack(spacing: 5) {
       Circle()
         .fill(color)
+        .frame(width: 11, height: 11)
 
       Text(text)
         .font(.appCaptionTwo)
     }
-    .padding(.horizontal, 8)
+    .padding(.horizontal, 10)
     .padding(.vertical, 6)
     .lineLimit(1)
     .foregroundColor(Color.themeLabelForeground)

packages/web/components/elements/LabelChip.tsx

@@ -1,15 +1,19 @@
 import { getLuminance, lighten, parseToRgba, toHsla } from 'color2k'
 import { useRouter } from 'next/router'
 import { Button } from './Button'
-import { SpanBox } from './LayoutPrimitives'
+import { SpanBox, HStack } from './LayoutPrimitives'
+import { Circle } from 'phosphor-react'
+import { isDarkTheme } from '../../lib/themeUpdater'
 
 type LabelChipProps = {
   text: string
   color: string // expected to be a RGB hex color string
+  useAppAppearance?: boolean
 }
 
 export function LabelChip(props: LabelChipProps): JSX.Element {
   const router = useRouter()
+  const isDark = isDarkTheme()
 
   const hexToRgb = (hex: string) => {
     const bigint = parseInt(hex.substring(1), 16)
@@ -31,6 +35,35 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
   const backgroundColor = hexToRgb(props.color)
   const textColor = luminance > 0.5 ? '#000000' : '#ffffff'
 
+  if (props.useAppAppearance) {
+    return (
+      <SpanBox
+        css={{
+          display: 'inline-table',
+          margin: '2px',
+          fontSize: '11px',
+          fontWeight: '500',
+          fontFamily: '$inter',
+          padding: '4px 10px',
+          whiteSpace: 'nowrap',
+          cursor: 'pointer',
+          backgroundClip: 'padding-box',
+          borderRadius: '5px',
+          borderWidth: '1px',
+          borderStyle: 'solid',
+          color: isDark ? '#EBEBEB' : '#2A2A2A',
+          borderColor: isDark ? '#6A6968' : '#D9D9D9',
+          backgroundColor: isDark ? '#2A2A2A' : '#F5F5F5',
+        }}
+      >
+        <HStack alignment="center" css={{ gap: '5px' }}>
+          <Circle size={14} color={props.color} weight="fill" />
+          <SpanBox css={{ pt: '1px' }}>{props.text}</SpanBox>
+        </HStack>
+      </SpanBox>
+    )
+  }
+
   return (
     <Button
       style="plainIcon"

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

@@ -118,16 +118,21 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     props.highlightOnRelease
   )
   // iOS app embed can overide the original margin and line height
-  const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] =
-    useState<number | null>(null)
-  const [lineHeightOverride, setLineHeightOverride] =
-    useState<number | null>(null)
-  const [fontFamilyOverride, setFontFamilyOverride] =
-    useState<string | null>(null)
-  const [highContrastTextOverride, setHighContrastTextOverride] =
-    useState<boolean | undefined>(undefined)
-  const [justifyTextOverride, setJustifyTextOverride] =
-    useState<boolean | undefined>(undefined)
+  const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] = useState<
+    number | null
+  >(null)
+  const [lineHeightOverride, setLineHeightOverride] = useState<number | null>(
+    null
+  )
+  const [fontFamilyOverride, setFontFamilyOverride] = useState<string | null>(
+    null
+  )
+  const [highContrastTextOverride, setHighContrastTextOverride] = useState<
+    boolean | undefined
+  >(undefined)
+  const [justifyTextOverride, setJustifyTextOverride] = useState<
+    boolean | undefined
+  >(undefined)
   const highlightHref = useRef(
     window.location.hash ? window.location.hash.split('#')[1] : null
   )
@@ -429,6 +434,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
                   key={label.id}
                   text={label.name}
                   color={label.color}
+                  useAppAppearance={props.isAppleAppEmbed}
                 />
               ))}
             </SpanBox>