Style all follow/unfollow buttons blue

also get rid of highlight-blue button

web/components/button.tsx

@@ -7,13 +7,13 @@ export type ColorType =
   | 'green'
   | 'red'
   | 'blue'
+  | 'blue-outline'
   | 'indigo'
   | 'yellow'
   | 'gray'
   | 'gray-outline'
   | 'gradient'
   | 'gray-white'
-  | 'highlight-blue'
 
 const sizeClasses = {
   '2xs': 'px-2 py-1 text-xs',
@@ -27,7 +27,7 @@ const sizeClasses = {
 
 export function buttonClass(size: SizeType, color: ColorType | 'override') {
   return clsx(
-    'font-md inline-flex items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
+    'font-md inline-flex items-center justify-center rounded-md ring-inset shadow-sm transition-colors disabled:cursor-not-allowed',
     sizeClasses[size],
     color === 'green' &&
       'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
@@ -37,18 +37,18 @@ export function buttonClass(size: SizeType, color: ColorType | 'override') {
       'disabled:bg-greyscale-2 bg-yellow-400 text-white hover:bg-yellow-500',
     color === 'blue' &&
       'disabled:bg-greyscale-2 bg-blue-400 text-white hover:bg-blue-500',
+    color === 'blue-outline' &&
+      'ring-2  ring-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white disabled:opacity-50',
     color === 'indigo' &&
       'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
     color === 'gray' &&
       'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
     color === 'gray-outline' &&
-      'border-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 border-2 hover:text-white disabled:opacity-50',
+      'ring-2 ring-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 hover:text-white disabled:opacity-50',
     color === 'gradient' &&
-      'disabled:bg-greyscale-2 border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
+      'disabled:bg-greyscale-2 bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
     color === 'gray-white' &&
-      'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
-    color === 'highlight-blue' &&
-      'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
+      'text-greyscale-6 hover:bg-greyscale-2 shadow-none disabled:opacity-50'
   )
 }
 

web/components/follow-button.tsx

@@ -11,25 +11,19 @@ export function FollowButton(props: {
   isFollowing: boolean | undefined
   onFollow: () => void
   onUnfollow: () => void
-  className?: string
 }) {
-  const { isFollowing, onFollow, onUnfollow, className } = props
+  const { isFollowing, onFollow, onUnfollow } = props
 
   const user = useUser()
 
-  if (!user || isFollowing === undefined)
-    return (
-      <Button size="sm" color="gray" className={clsx(className, 'invisible')}>
-        Follow
-      </Button>
-    )
+  if (!user || isFollowing === undefined) return <></>
 
   if (isFollowing) {
     return (
       <Button
         size="sm"
         color="gray-outline"
-        className={clsx('my-auto', className)}
+        className="my-auto"
         onClick={withTracking(onUnfollow, 'unfollow')}
       >
         Following
@@ -41,7 +35,7 @@ export function FollowButton(props: {
     <Button
       size="sm"
       color="indigo"
-      className={clsx(className, 'my-auto')}
+      className='my-auto'
       onClick={withTracking(onFollow, 'follow')}
     >
       Follow

web/components/following-button.tsx

@@ -40,37 +40,6 @@ export function FollowingButton(props: { user: User; className?: string }) {
   )
 }
 
-export function EditFollowingButton(props: { user: User; className?: string }) {
-  const { user, className } = props
-  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={() => {
-        setIsOpen(true)
-        track('edit following button')
-      }}
-    >
-      <PencilIcon className="inline h-4 w-4" />
-      Following
-      <FollowsDialog
-        user={user}
-        defaultTab="following"
-        followingIds={followingIds ?? []}
-        followerIds={followerIds ?? []}
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-      />
-    </div>
-  )
-}
-
 export function FollowersButton(props: { user: User; className?: string }) {
   const { user, className } = props
   const [isOpen, setIsOpen] = useState(false)

web/components/groups/groups-button.tsx

@@ -126,8 +126,8 @@ export function JoinOrLeaveGroupButton(props: {
     return (
       <Button
         size="xs"
-        color="gray-white"
-        className={`${className}  border-greyscale-4 border !border-solid`}
+        color="blue-outline"
+        className={className}
         onClick={withTracking(onLeaveGroup, 'leave group')}
       >
         Unfollow

web/components/user-page.tsx

@@ -95,7 +95,7 @@ export function UserPage(props: { user: User }) {
           )}
 
           <Col className="w-full gap-4 pl-5">
-            <div className="flex flex-col gap-2 sm:flex-row sm:justify-between">
+            <div className="flex flex-col gap-2 sm:flex-row sm:justify-between items-start">
               <Col>
                 <span className="break-anywhere text-lg font-bold sm:text-2xl">
                   {user.name}

web/pages/group/[...slugs]/index.tsx

@@ -386,14 +386,9 @@ function JoinGroupButton(props: {
 
   return (
     <div>
-      <button
-        onClick={follow}
-        className={
-          'btn-md btn-outline btn w-full whitespace-nowrap normal-case'
-        }
-      >
+      <Button onClick={follow} color="blue">
         Follow
-      </button>
+      </Button>
     </div>
   )
 }