Add UI Icons to Buttons

[nelsonic]

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:

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

• [x] Save
• [x] Start
• [x] Stop
• [x] Archive

Todo

• [ ] Get feedback on icons from @iteles

[nelsonic]

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

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

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

[nelsonic]

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":

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 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

As always, very open to suggestions. 🙏

[nelsonic]

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

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

[nelsonic]

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

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

Investigating ...

[nelsonic]

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

[nelsonic]

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

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

[nelsonic]

Current UI with icons in buttons:

Closing. ✅

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