dwyl / mvp

📲 simplest version of the @dwyl app
https://mvp.fly.dev
GNU General Public License v2.0
87 stars 2 forks source link

Add UI Icons to Buttons #101

Closed nelsonic closed 2 years ago

nelsonic commented 2 years ago

Definitely not high priority but a super-nice-to-have for aesthetics. Use: https://www.flaticon.com/uicons Borrow from: https://postsrc.com/components/buttons/button-with-icon

example:

<button class="inline-flex items-center px-4 py-2 mr-2
 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-md"
  phx-click="delete" phx-value-id={item.id}>
    <svg xmlns="http://www.w3.org/2000/svg" 
    class="h-5 w-5 mr-2" fill="none" 
    viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
      d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
    </svg>
  Archive
</button>

Which outputs:

image

The hard part is to select the appropriate icon for each situation:

Todo

nelsonic commented 2 years ago

For the start button, thinking a Stopwatch: ⏱️ https://www.flaticon.com/uicons?word=stopwatch image

or "Play" button: https://www.flaticon.com/uicons?word=play ⏯️ image

But very keen to hear anyone else's thoughts on what is most intuitive. 💭

nelsonic commented 2 years ago

For the "save" button, which I'm not sure we will keep longer term, but which I don't have a better solution for in the MVP ... the available icons for the word "save": https://www.flaticon.com/uicons?word=save are either banking, bookmarking or "floppy disk": image

While the "floppy disk" metaphor might make sense to older people ... https://www.flaticon.com/free-icon-font/disk_3917263?page=1&position=16&term=save image I suspect that younger people are scratching their heads. See: https://uxdesign.cc/the-floppy-disk-save-icon-visual-language-of-an-era-long-gone-93f74efc9f9

"Is the save icon a vending machine?" Child's question: https://www.ctvnews.ca/sci-tech/is-the-save-icon-a-vending-machine-child-s-question-about-symbol-goes-viral-1.4545695?cache=yes#:~:text=During%20the%20advent%20of%20computer,symbol%20for%20saving%20one's%20work.

So I'm thinking a "downward arrow" as a temporary icon: https://www.flaticon.com/uicons?word=arrow%20down image

As always, very open to suggestions. 🙏

nelsonic commented 2 years ago

Briefly considered this down arrow with a clock as it conveys the intent: https://uxwing.com/downtime-arrow-icon/ image

But it's way too complex and will confuse first time people using the App. Still searching. ... 🔍

nelsonic commented 2 years ago

Couldn't make any of the icons look good ... ⏳ 🤦‍♂️

Discovered: https://heroicons.dev/ via: https://flowbite.com/docs/customize/icons/

Investigating ...

nelsonic commented 2 years ago

Ok. I've spent enough time on this. leaving as a downward arrow: image

nelsonic commented 2 years ago

This is what I have in terms of the 4 buttons with icons:

image

Again, very happy for anyone else to improve on this. 🙏

nelsonic commented 2 years ago

Current UI with icons in buttons: mvp-showing-checkbox-ends-timer

Closing. ✅

note: feedback still very much welcome. just know you have lots of other stuff to do.