open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make follow & unfollow buttons same size

Browse Source
This commit is contained in:
Sinclair Chen 2022-10-04 16:42:17 -07:00
parent 7b9aeea0bd
commit 40b07329bd
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/components/groups/groups-button.tsx
View File

@ -13,6 +13,7 @@ import { joinGroup, leaveGroup } from 'web/lib/firebase/groups'
import { firebaseLogin } from 'web/lib/firebase/users' import { firebaseLogin } from 'web/lib/firebase/users'
import { GroupLinkItem } from 'web/pages/groups' import { GroupLinkItem } from 'web/pages/groups'
import toast from 'react-hot-toast' import toast from 'react-hot-toast'
import { Button } from '../button'
export function GroupsButton(props: { user: User; className?: string }) { export function GroupsButton(props: { user: User; className?: string }) {
const { user, className } = props const { user, className } = props
@ -92,23 +93,22 @@ export function JoinOrLeaveGroupButton(props: {
group: Group group: Group
isMember: boolean isMember: boolean
user: User | undefined | null user: User | undefined | null
small?: boolean
className?: string className?: string
}) { }) {
const { group, small, className, isMember, user } = props const { group, className, isMember, user } = props
const smallStyle =
'btn !btn-xs border-2 border-gray-500 bg-white normal-case text-gray-500 hover:border-gray-500 hover:bg-white hover:text-gray-500'
if (!user) { if (!user) {
if (!group.anyoneCanJoin) if (!group.anyoneCanJoin)
return <div className={clsx(className, 'text-gray-500')}>Closed</div> return <div className={clsx(className, 'text-gray-500')}>Closed</div>
return ( return (
<button <Button
size="xs"
color="blue"
onClick={firebaseLogin} onClick={firebaseLogin}
className={clsx('btn btn-sm', small && smallStyle, className)} className={className}
> >
Login to follow Login to follow
</button> </Button>
) )
} }
const onJoinGroup = () => { const onJoinGroup = () => {
@ -124,27 +124,27 @@ export function JoinOrLeaveGroupButton(props: {
if (isMember) { if (isMember) {
return ( return (
<button <Button
className={clsx( size="xs"
'btn btn-outline btn-xs', color="gray-white"
small && smallStyle, className={`${className} border-greyscale-4 border !border-solid`}
className
)}
onClick={withTracking(onLeaveGroup, 'leave group')} onClick={withTracking(onLeaveGroup, 'leave group')}
> >
Unfollow Unfollow
</button> </Button>
) )
} }
if (!group.anyoneCanJoin) if (!group.anyoneCanJoin)
return <div className={clsx(className, 'text-gray-500')}>Closed</div> return <div className={clsx(className, 'text-gray-500')}>Closed</div>
return ( return (
<button <Button
className={clsx('btn btn-sm', small && smallStyle, className)} size="xs"
color="blue"
className={className}
onClick={withTracking(onJoinGroup, 'join group')} onClick={withTracking(onJoinGroup, 'join group')}
> >
Follow Follow
</button> </Button>
) )
} }