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

Switch to feed "lollipops"

Browse Source 
Doubt anyone else cares. Ideally these are also disconnected on top but it's hard to get the spacing to look right with variably-sized avatars.

Options:
- Keep as-is (lollipops)
- Revert to hardcoded `ring-gray-50`
- Fix icons to the same size
- Switch between `ring-gray-50` and `ring-white`
- Rewrite the CSS
This commit is contained in:
Austin Chen 2022-01-19 03:15:09 -05:00
parent ed7902f77f
commit f9780a2f69
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/components/contract-feed.tsx
View File

@ -45,7 +45,7 @@ function AvatarWithIcon(props: { username: string; avatarUrl: string }) {
return ( return (
<SiteLink className="relative" href={`/${username}`}> <SiteLink className="relative" href={`/${username}`}>
<img <img
className="h-10 w-10 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-gray-50" className="h-10 w-10 rounded-full bg-gray-400 flex items-center justify-center"
src={avatarUrl} src={avatarUrl}
alt="" alt=""
/> />
@ -117,7 +117,7 @@ function FeedBet(props: { activityItem: any }) {
<> <>
<div> <div>
<div className="relative px-1"> <div className="relative px-1">
<div className="h-8 w-8 bg-gray-200 rounded-full ring-8 ring-gray-50 flex items-center justify-center"> <div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
<UserIcon className="h-5 w-5 text-gray-500" aria-hidden="true" /> <UserIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
</div> </div>
</div> </div>
@ -257,7 +257,7 @@ function FeedQuestion(props: { contract: Contract }) {
) : ( ) : (
// TODO: After 2022-03-01, can just assume that all contracts have an avatarUrl // TODO: After 2022-03-01, can just assume that all contracts have an avatarUrl
<div className="relative px-1"> <div className="relative px-1">
<div className="h-8 w-8 bg-gray-200 rounded-full ring-8 ring-gray-50 flex items-center justify-center"> <div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
<StarIcon className="h-5 w-5 text-gray-500" aria-hidden="true" /> <StarIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
</div> </div>
</div> </div>
@ -308,7 +308,7 @@ function FeedDescription(props: { contract: Contract }) {
<> <>
<div> <div>
<div className="relative px-1"> <div className="relative px-1">
<div className="h-8 w-8 bg-gray-200 rounded-full ring-8 ring-gray-50 flex items-center justify-center"> <div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
<StarIcon className="h-5 w-5 text-gray-500" aria-hidden="true" /> <StarIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
</div> </div>
</div> </div>
@ -350,7 +350,7 @@ function FeedResolve(props: { contract: Contract }) {
<> <>
<div> <div>
<div className="relative px-1"> <div className="relative px-1">
<div className="h-8 w-8 bg-gray-200 rounded-full ring-8 ring-gray-50 flex items-center justify-center"> <div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
<OutcomeIcon outcome={resolution} /> <OutcomeIcon outcome={resolution} />
</div> </div>
</div> </div>
@ -377,7 +377,7 @@ function FeedClose(props: { contract: Contract }) {
<> <>
<div> <div>
<div className="relative px-1"> <div className="relative px-1">
<div className="h-8 w-8 bg-gray-200 rounded-full ring-8 ring-gray-50 flex items-center justify-center"> <div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
<LockClosedIcon <LockClosedIcon
className="h-5 w-5 text-gray-500" className="h-5 w-5 text-gray-500"
aria-hidden="true" aria-hidden="true"
@ -519,7 +519,7 @@ function FeedBetGroup(props: { activityItem: any }) {
<> <>
<div> <div>
<div className="relative px-1"> <div className="relative px-1">
<div className="h-8 w-8 bg-gray-200 rounded-full ring-8 ring-gray-50 flex items-center justify-center"> <div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
<UsersIcon className="h-5 w-5 text-gray-500" aria-hidden="true" /> <UsersIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
</div> </div>
</div> </div>
@ -580,7 +580,7 @@ export function ContractFeed(props: {
<div className="relative pb-8"> <div className="relative pb-8">
{activityItemIdx !== allItems.length - 1 ? ( {activityItemIdx !== allItems.length - 1 ? (
<span <span
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200" className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
aria-hidden="true" aria-hidden="true"
/> />
) : null} ) : null}