feat: Moments: your personal photo journal, now available in Labs (#2079)

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx

@@ -1,3 +1,4 @@
+import { ButtonStyle, getColorsForPrimaryVariant } from '@/Components/Button/Button'
 import { classNames } from '@standardnotes/utils'
 import { FunctionComponent, MouseEventHandler, ReactNode } from 'react'
 
@@ -37,3 +38,14 @@ export const LinkButton: FunctionComponent<{
     {label}
   </a>
 )
+
+type PillProps = Props & {
+  style: ButtonStyle
+}
+
+export const Pill: FunctionComponent<PillProps> = ({ children, className, style }) => {
+  const colorClass = getColorsForPrimaryVariant(style)
+  return (
+    <div className={classNames('ml-2 rounded px-2 py-1 text-[10px] font-bold', className, colorClass)}>{children}</div>
+  )
+}