Remaining changes for hackathon prototype

[sharon-wang]

Circle Changes

• change circle::after to html element - @vezwork
• change circle hover background to same colour as circle - @sharon-wang
• get rid of XRP text from circle - @vezwork
• add % of time spent on site to circle detail - @sharon-wang
• add % of visits on site to circle detail - @sharon-wang
  - [ ] live update circle data - @vezwork
• put website favicon in circles - @sharon-wang
• remove click to go to site from circles - @vezwork
• open site when you click on the circle - @sharon-wang
• add payment stream estimate in circle detail - @sharon-wang

Tutorial Changes

• tutorial slide 2 (tired of ads?) make image more legible/toaster ad popup animation - @vezwork
• add link to coil on how to monetize your own site "Learn more and get involved" tutorial slide - @sharon-wang
• add perspective on how web monetization benefits creators in tutorial slides - @sharon-wang
• look into custom bullet points - @sharon-wang
• higher res images for the Akita Icon tutorial slide - @vezwork
• mention that it's the browser extension icon in Akita Icon tutorial slide - @vezwork

General Changes

• change colour of links in akita, maybe match akita branding colours - @sharon-wang
• add tooltip to "These monetized sites could use <3" to explain what that means - @vezwork
• remove "https://" from sites that could use love and add favicon - @sharon-wang
• replace needs love list with resources if user not using WM provider - @sharon-wang

Other

• Update README with demo, screenshots, tutorial explanation: Update README with demo, screenshots, tutorial explanation #39
• test browser extension on windows (firefox, chrome) - @vezwork
• test browser extension on mac (firefox, chrome) - @sharon-wang

[vezwork]

Favicon notes:

• maybe save icon in storage while on the site
• browsers by default expect the favicon to be at current url/favicon.ico, but they first check to see if there are any link tags in the html which specify where the favicon is. E.g. on https://sharonwang.netlify.app/ notice in the console that there is an error because the browser is looking for favicon.ico but cannot find it.
• http://jsfiddle.net/kh8puca6/1/ shows how to get the relative url of the favicon on a site. Favicon can then be asynchronously downloaded using fetch. Then .blob() to get a blob of the favicon which can be passed to URL.createObjectURL(). Data URLs are just strings so are easily stored, and can be displayed just by setting an html image's src to the data URL.

[sharon-wang]

Remaining changes are complete! Closing.