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

Fix down triangle & padding

Browse Source
This commit is contained in:
Austin Chen 2022-05-21 15:48:47 -07:00
parent ba9411161d
commit 1cfbd86bd0
3 changed files with 41 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/components/contract/contract-card.tsx
View File

@ -27,8 +27,8 @@ import {
import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
import { AvatarDetails, MiscDetails } from './contract-details'
import { getExpectedValue, getValueFromBucket } from 'common/calculate-dpm'
import TriangleIcon from 'web/lib/icons/triangle-icon'
import TriangleFillIcon from 'web/lib/icons/triangle-fill-icon'
import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
// Return a number from 0 to 1 for this contract
// Resolved contracts are set to 1, for coloring purposes (even if NO)
@ -94,7 +94,7 @@ export function ContractCard(props: {
<div>
<Col
className={clsx(
'relative gap-3 rounded-lg bg-white py-4 pl-6 pr-7 shadow-md hover:cursor-pointer hover:bg-gray-100',
'relative gap-3 rounded-lg bg-white py-4 pl-6 pr-7 shadow-md hover:bg-gray-100',
className
)}
>
@ -126,6 +126,7 @@ export function ContractCard(props: {
</Col>
<Col className="relative -my-4 justify-center gap-2">
<div className="mt-4">
<div
className="peer absolute top-0 -left-4 -right-7 h-[50%]"
onClick={(e) => {
@ -142,6 +143,7 @@ export function ContractCard(props: {
) : (
<TriangleFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" />
)}
</div>
{outcomeType === 'BINARY' && (
<BinaryResolutionOrChance
@ -165,23 +167,22 @@ export function ContractCard(props: {
/>
)}
<div>
<div className="mb-4">
<div
className="peer absolute bottom-0 -left-4 -right-7 h-[50%]"
onClick={(e) => {
// console.log('e2', e)
}}
></div>
{/* Note: Something about rotate-180 screws with the hitbox. Rotate the SVG instead. */}
{contract.createdTime % 3 == 2 ? (
<TriangleFillIcon
<TriangleDownFillIcon
className={clsx(
'mx-auto h-5 w-5 rotate-180 peer-hover:text-opacity-60',
'mx-auto h-5 w-5 peer-hover:text-opacity-60',
`text-${color}`
)}
/>
) : (
<TriangleFillIcon className="mx-auto h-5 w-5 rotate-180 text-gray-200 peer-hover:text-gray-400" />
<TriangleDownFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" />
)}
</div>
</Col>

17
web/lib/icons/triangle-down-fill-icon.tsx Normal file
View File

@ -0,0 +1,17 @@
// Icon from Bootstrap: https://icons.getbootstrap.com/
export default function TriangleDownFillIcon(props: { className?: string }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
className={props.className}
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
transform="rotate(-180 8 8)"
d="M7.022 1.566a1.13 1.13 0 0 1 1.96 0l6.857 11.667c.457.778-.092 1.767-.98 1.767H1.144c-.889 0-1.437-.99-.98-1.767L7.022 1.566z"
/>
</svg>
)
}

13
web/lib/icons/triangle-icon.tsx
View File

@ -1,13 +0,0 @@
// Icon from Bootstrap: https://icons.getbootstrap.com/
export default function TriangleIcon(props: { className?: string }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
className={props.className}
viewBox="0 0 16 16"
>
<path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z" />
</svg>
)
}