search

tocwex / fund

A sovereign platform for peer-to-peer economic activity with on-chain settlement and trusted identity assessment of work completion.
GNU General Public License v3.0
7 stars 0 forks source link

Thermometer Designs #32

Open thelifeandtimes opened 5 months ago

thelifeandtimes commented 5 months ago

Currently there are a few snags on quick consumption of thermometer data. We need to make some basic visual and labeling changes.

This issue does not include going into whether or not money has been refunded or paid out to the worker.

thelifeandtimes commented 5 months ago

Here's the html for what I am thinking:

<div class="w-[1204px] h-32 justify-start items-start inline-flex">
    <div class="grow shrink basis-0 border-r-4 border-green-500 flex-col justify-start items-end inline-flex">
        <div class="self-stretch h-[68px] bg-green-500 flex-col justify-center items-end gap-2.5 flex">
            <div class="p-3 justify-end items-center gap-3 inline-flex">
                <div class="text-center text-white text-4xl font-medium font-['Inter']">$100,000</div>
            </div>
        </div>
        <div class="p-3 justify-center items-center gap-2.5 inline-flex">
            <div class="text-center text-black text-2xl font-light font-['Poppins']">funded</div>
        </div>
    </div>
    <div class="grow shrink basis-0 border-r-4 border-blue-700 flex-col justify-start items-end inline-flex">
        <div class="self-stretch h-[68px] bg-blue-700 flex-col justify-center items-end gap-2.5 flex">
            <div class="p-3 justify-end items-center gap-3 inline-flex">
                <div class="text-center text-white text-4xl font-medium font-['Inter']">$100,000</div>
            </div>
        </div>
        <div class="p-3 justify-center items-center gap-2.5 inline-flex">
            <div class="text-center text-black text-2xl font-light font-['Poppins']">surpassed</div>
        </div>
    </div>
    <div class="grow shrink basis-0 border-r-4 border-blue-400 flex-col justify-start items-end inline-flex">
        <div class="self-stretch h-[68px] bg-blue-400 flex-col justify-center items-end gap-2.5 flex">
            <div class="p-3 justify-end items-center gap-3 inline-flex">
                <div class="text-center text-white text-4xl font-medium font-['Inter']">$100,000</div>
            </div>
        </div>
        <div class="p-3 justify-center items-center gap-2.5 inline-flex">
            <div class="text-center text-black text-2xl font-light font-['Poppins']">over pledged</div>
        </div>
    </div>
</div>

Longer run, I've starting figuring out a good way to get code (html+tailwind) out of figma, so post-launch I want to go through and properly structure all the components so that I can rapidly produce the html+tailwind for any given component and then the trick will be for us to optimize the way we get that into sail/manx with the appropriate variables and such.