Style all follow/unfollow buttons blue
also get rid of highlight-blue button
This commit is contained in:
parent
c0c2934fe1
commit
f9b0f0c813
|
@ -7,13 +7,13 @@ export type ColorType =
|
||||||
| 'green'
|
| 'green'
|
||||||
| 'red'
|
| 'red'
|
||||||
| 'blue'
|
| 'blue'
|
||||||
|
| 'blue-outline'
|
||||||
| 'indigo'
|
| 'indigo'
|
||||||
| 'yellow'
|
| 'yellow'
|
||||||
| 'gray'
|
| 'gray'
|
||||||
| 'gray-outline'
|
| 'gray-outline'
|
||||||
| 'gradient'
|
| 'gradient'
|
||||||
| 'gray-white'
|
| 'gray-white'
|
||||||
| 'highlight-blue'
|
|
||||||
|
|
||||||
const sizeClasses = {
|
const sizeClasses = {
|
||||||
'2xs': 'px-2 py-1 text-xs',
|
'2xs': 'px-2 py-1 text-xs',
|
||||||
|
@ -27,7 +27,7 @@ const sizeClasses = {
|
||||||
|
|
||||||
export function buttonClass(size: SizeType, color: ColorType | 'override') {
|
export function buttonClass(size: SizeType, color: ColorType | 'override') {
|
||||||
return clsx(
|
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],
|
sizeClasses[size],
|
||||||
color === 'green' &&
|
color === 'green' &&
|
||||||
'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
|
'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',
|
'disabled:bg-greyscale-2 bg-yellow-400 text-white hover:bg-yellow-500',
|
||||||
color === 'blue' &&
|
color === 'blue' &&
|
||||||
'disabled:bg-greyscale-2 bg-blue-400 text-white hover:bg-blue-500',
|
'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' &&
|
color === 'indigo' &&
|
||||||
'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
|
'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
|
||||||
color === 'gray' &&
|
color === 'gray' &&
|
||||||
'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
|
'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
|
||||||
color === 'gray-outline' &&
|
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' &&
|
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' &&
|
color === 'gray-white' &&
|
||||||
'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
|
'text-greyscale-6 hover:bg-greyscale-2 shadow-none disabled:opacity-50'
|
||||||
color === 'highlight-blue' &&
|
|
||||||
'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -11,25 +11,19 @@ export function FollowButton(props: {
|
||||||
isFollowing: boolean | undefined
|
isFollowing: boolean | undefined
|
||||||
onFollow: () => void
|
onFollow: () => void
|
||||||
onUnfollow: () => void
|
onUnfollow: () => void
|
||||||
className?: string
|
|
||||||
}) {
|
}) {
|
||||||
const { isFollowing, onFollow, onUnfollow, className } = props
|
const { isFollowing, onFollow, onUnfollow } = props
|
||||||
|
|
||||||
const user = useUser()
|
const user = useUser()
|
||||||
|
|
||||||
if (!user || isFollowing === undefined)
|
if (!user || isFollowing === undefined) return <></>
|
||||||
return (
|
|
||||||
<Button size="sm" color="gray" className={clsx(className, 'invisible')}>
|
|
||||||
Follow
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
|
|
||||||
if (isFollowing) {
|
if (isFollowing) {
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
color="gray-outline"
|
color="gray-outline"
|
||||||
className={clsx('my-auto', className)}
|
className="my-auto"
|
||||||
onClick={withTracking(onUnfollow, 'unfollow')}
|
onClick={withTracking(onUnfollow, 'unfollow')}
|
||||||
>
|
>
|
||||||
Following
|
Following
|
||||||
|
@ -41,7 +35,7 @@ export function FollowButton(props: {
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
color="indigo"
|
color="indigo"
|
||||||
className={clsx(className, 'my-auto')}
|
className='my-auto'
|
||||||
onClick={withTracking(onFollow, 'follow')}
|
onClick={withTracking(onFollow, 'follow')}
|
||||||
>
|
>
|
||||||
Follow
|
Follow
|
||||||
|
|
|
@ -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 }) {
|
export function FollowersButton(props: { user: User; className?: string }) {
|
||||||
const { user, className } = props
|
const { user, className } = props
|
||||||
const [isOpen, setIsOpen] = useState(false)
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
|
|
@ -126,8 +126,8 @@ export function JoinOrLeaveGroupButton(props: {
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
size="xs"
|
size="xs"
|
||||||
color="gray-white"
|
color="blue-outline"
|
||||||
className={`${className} border-greyscale-4 border !border-solid`}
|
className={className}
|
||||||
onClick={withTracking(onLeaveGroup, 'leave group')}
|
onClick={withTracking(onLeaveGroup, 'leave group')}
|
||||||
>
|
>
|
||||||
Unfollow
|
Unfollow
|
||||||
|
|
|
@ -95,7 +95,7 @@ export function UserPage(props: { user: User }) {
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Col className="w-full gap-4 pl-5">
|
<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>
|
<Col>
|
||||||
<span className="break-anywhere text-lg font-bold sm:text-2xl">
|
<span className="break-anywhere text-lg font-bold sm:text-2xl">
|
||||||
{user.name}
|
{user.name}
|
||||||
|
|
|
@ -386,14 +386,9 @@ function JoinGroupButton(props: {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<button
|
<Button onClick={follow} color="blue">
|
||||||
onClick={follow}
|
|
||||||
className={
|
|
||||||
'btn-md btn-outline btn w-full whitespace-nowrap normal-case'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Follow
|
Follow
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user