Extract TextButton component with blue underline.

web/components/following-button.tsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx'
 import { PencilIcon } from '@heroicons/react/outline'
 import { User } from 'common/user'
 import { useEffect, useState } from 'react'
@@ -9,31 +8,28 @@ import { Col } from './layout/col'
 import { Modal } from './layout/modal'
 import { Tabs } from './layout/tabs'
 import { useDiscoverUsers } from 'web/hooks/use-users'
+import { TextButton } from './text-button'
 
 export function FollowingButton(props: { user: User }) {
   const { user } = props
-  const [open, setOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
   const followingIds = useFollows(user.id)
   const followerIds = useFollowers(user.id)
 
   return (
     <>
-      <div
-        className="cursor-pointer gap-2 hover:underline focus:underline"
-        tabIndex={0}
-        onClick={() => setOpen(true)}
-      >
+      <TextButton onClick={() => setIsOpen(true)}>
         <span className="font-semibold">{followingIds?.length ?? ''}</span>{' '}
         Following
-      </div>
+      </TextButton>
 
       <FollowingFollowersDialog
         user={user}
         defaultTab="following"
         followingIds={followingIds ?? []}
         followerIds={followerIds ?? []}
-        isOpen={open}
-        setIsOpen={setOpen}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
       />
     </>
   )
@@ -41,18 +37,12 @@ export function FollowingButton(props: { user: User }) {
 
 export function EditFollowingButton(props: { user: User; className?: string }) {
   const { user, className } = props
-  const [open, setOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
   const followingIds = useFollows(user.id)
   const followerIds = useFollowers(user.id)
 
   return (
-    <div
-      className={clsx(
-        className,
-        'btn btn-sm btn-ghost cursor-pointer gap-2 whitespace-nowrap text-sm normal-case text-gray-700'
-      )}
-      onClick={() => setOpen(true)}
-    >
+    <TextButton className={className} onClick={() => setIsOpen(true)}>
       <PencilIcon className="inline h-4 w-4" />
       Following
       <FollowingFollowersDialog
@@ -60,10 +50,10 @@ export function EditFollowingButton(props: { user: User; className?: string }) {
         defaultTab="following"
         followingIds={followingIds ?? []}
         followerIds={followerIds ?? []}
-        isOpen={open}
-        setIsOpen={setOpen}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
       />
-    </div>
+    </TextButton>
   )
 }
 
@@ -75,14 +65,10 @@ export function FollowersButton(props: { user: User }) {
 
   return (
     <>
-      <div
-        className="cursor-pointer gap-2 hover:underline focus:underline"
-        tabIndex={0}
-        onClick={() => setIsOpen(true)}
-      >
+      <TextButton onClick={() => setIsOpen(true)}>
         <span className="font-semibold">{followerIds?.length ?? ''}</span>{' '}
         Followers
-      </div>
+      </TextButton>
 
       <FollowingFollowersDialog
         user={user}

web/components/text-button.tsx

@@ -0,0 +1,22 @@
+import clsx from 'clsx'
+
+export function TextButton(props: {
+  onClick: () => void
+  children: React.ReactNode
+  className?: string
+}) {
+  const { onClick, children, className } = props
+
+  return (
+    <div
+      className={clsx(
+        className,
+        'cursor-pointer gap-2 hover:underline hover:decoration-indigo-400 hover:decoration-2 focus:underline focus:decoration-indigo-400 focus:decoration-2'
+      )}
+      tabIndex={0}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  )
+}

web/components/user-page.tsx

@@ -161,7 +161,7 @@ export function UserPage(props: {
           </>
         )}
 
-        <Col className="sm:flex-row sm:gap-4">
+        <Col className="sm:flex-row sm:items-center sm:gap-4">
           <FollowingButton user={user} />
           <FollowersButton user={user} />