Restyle tags

web/components/create-fold-button.tsx

@@ -111,7 +111,7 @@ export function CreateFoldButton() {
         <label className="label">
           <span className="mb-1">Primary tag</span>
         </label>
-        <TagsList noLink tags={[`#${toCamelCase(name)}`]} />
+        <TagsList noLink noLabel tags={[`#${toCamelCase(name)}`]} />
 
         <Spacer h={4} />
 
@@ -134,6 +134,7 @@ export function CreateFoldButton() {
         <TagsList
           tags={parseWordsAsTags(otherTags).map((tag) => `#${tag}`)}
           noLink
+          noLabel
         />
       </div>
     </ConfirmationButton>

web/components/edit-fold-button.tsx

@@ -105,7 +105,7 @@ export function EditFoldButton(props: { fold: Fold; className?: string }) {
           </div>
 
           <Spacer h={4} />
-          <TagsList tags={tags.map((tag) => `#${tag}`)} noLink />
+          <TagsList tags={tags.map((tag) => `#${tag}`)} noLink noLabel />
           <Spacer h={4} />
 
           <div className="modal-action">

web/components/tags-input.tsx

@@ -4,7 +4,7 @@ import { parseWordsAsTags } from '../../common/util/parse'
 import { Contract, updateContract } from '../lib/firebase/contracts'
 import { Col } from './layout/col'
 import { Row } from './layout/row'
-import { CompactTagsList } from './tags-list'
+import { TagsList } from './tags-list'
 
 export function TagsInput(props: { contract: Contract; className?: string }) {
   const { contract, className } = props
@@ -27,7 +27,7 @@ export function TagsInput(props: { contract: Contract; className?: string }) {
 
   return (
     <Col className={clsx('gap-4', className)}>
-      <CompactTagsList tags={newTags.map((tag) => `#${tag}`)} />
+      <TagsList tags={newTags.map((tag) => `#${tag}`)} />
 
       <Row className="items-center gap-4">
         <input

web/components/tags-list.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx'
 import { Row } from './layout/row'
-import { Linkify } from './linkify'
 import { SiteLink } from './site-link'
 import { Fold } from '../../common/fold'
 
@@ -9,11 +8,11 @@ export function Hashtag(props: { tag: string; noLink?: boolean }) {
   const body = (
     <div
       className={clsx(
-        'bg-white hover:bg-gray-100 px-4 py-2 rounded-full shadow-md',
+        'bg-gray-100 border-2 px-3 py-1 rounded-full shadow-md',
         !noLink && 'cursor-pointer'
       )}
     >
-      <span className="text-gray-500">{tag}</span>
+      <span className="text-gray-600 text-sm">{tag}</span>
     </div>
   )
 
@@ -29,10 +28,12 @@ export function TagsList(props: {
   tags: string[]
   className?: string
   noLink?: boolean
+  noLabel?: boolean
 }) {
-  const { tags, className, noLink } = props
+  const { tags, className, noLink, noLabel } = props
   return (
-    <Row className={clsx('flex-wrap gap-2', className)}>
+    <Row className={clsx('items-center flex-wrap gap-2', className)}>
+      {!noLabel && <div className="text-gray-500 mr-1">Tags</div>}
       {tags.map((tag) => (
         <Hashtag key={tag} tag={tag} noLink={noLink} />
       ))}
@@ -40,19 +41,6 @@ export function TagsList(props: {
   )
 }
 
-export function CompactTagsList(props: { tags: string[] }) {
-  const { tags } = props
-  return (
-    <Row className="gap-2 flex-wrap text-sm text-gray-500">
-      {tags.map((tag) => (
-        <div key={tag} className="bg-gray-100 px-1">
-          <Linkify text={tag} gray />
-        </div>
-      ))}
-    </Row>
-  )
-}
-
 export function FoldTag(props: { fold: Fold }) {
   const { fold } = props
   const { name } = fold
@@ -60,7 +48,7 @@ export function FoldTag(props: { fold: Fold }) {
     <SiteLink href={`/fold/${fold.slug}`} className="flex items-center">
       <div
         className={clsx(
-          'bg-indigo-50 px-4 py-2 rounded-full shadow-md',
+          'bg-white border-2 px-4 py-1 rounded-full shadow-md',
           'cursor-pointer'
         )}
       >