futurecoder icon indicating copy to clipboard operation
futurecoder copied to clipboard

Make hints lightbulb button more obvious

Open alexmojaki opened this issue 3 years ago • 1 comments

Some users don't notice it at all

alexmojaki avatar Jan 13 '22 20:01 alexmojaki

I offer 8 options:

  1. No change: 0

  2. Simply make the icon larger:

// main.scss
.hint-icon {
  position: fixed;
  bottom: 10%;
  right: 10px;
  //width: 48px;
  width: 72px;
  //height: 48px;
  height: 72px;
}

1

  1. Make it animated (same size). It blinks between white/red background once per second:
// Hints.js
//import hintIcon from "./img/hint.png";
import hintIcon from "./img/hint.gif";

2

  1. Make it animated, AND larger: 3

Then: basically the same as 0,1,2,3 but, in the middle of the screen, and slightly more elevated from the bottom:

// main.scss
.hint-icon {
  position: fixed;
  //bottom: 10px;
  bottom: 10%;
  //right: 10px;
  right: 50%;
  width: 48px;
  height: 48px;
}

4

5

6

7

Or something else... (beyond my ability)

spamegg1 avatar Jan 16 '22 16:01 spamegg1