Improvement idea: activity "glow"

[rauchg]

If a tab has an activity marker (becomes green due to output), it'd be cool to make it "glow" (ie: become brighter), when subsequent data events occurs.

[timothyis]

Something like this?

EDIT: Updated with green used for upcoming update notification for consistency, to symbolise 'update'. #1FC963

[mfix22]

Working on it! One question:

Would you rather a function of this.props.hasActivity within styles().hasActivity in components/tab be used to update the header color functionally like:

function getHeaderColor (activity = 0) {
  const color = `hsl(144, ${73 + activity * 5}%, ${45 + activity}%)`,

  // OR

  const color = ({
    1: '#1fc963'
    2: '#1ad464'
    3: '#0fe464'
    4: '#02f563'
    5: '#00fc65'
  })[activity] || 'inherit'

  return {
    color,
    ':hover': {
      color
    }
  }
}

or just have separate classes for each increasingly glowing style, e.g.

'hasActivity-1': {
  color: '#1fc963',
  ':hover': {
    color: '#1fc963'
  }
},
'hasActivity-2': {
  color: '#1ad464',
  ':hover': {
    color: '#1ad464'
  }
}
'hasActivity-3': {
  color: '#0fe464',
  ':hover': {
    color: '#0fe464'
  }
}
'hasActivity-4': {
  color: '#02f563',
  ':hover': {
    color: '#02f563'
  }
}
'hasActivity-5': {
  color: '#00fc65',
  ':hover': {
    color: '#00fc65'
  }
}

[mfix22]

My current thinking (on branch mfix22/function, PR #1727) is to use

const color = `hsl(144, ${(73 + (activity * 5)).toFixed()}%, ${(45 + activity).toFixed()}%)`;

[chabou]

@mfix22 I think we need an animation when subsequent data events occurs. If I understand your PR, you add 4 colors to indicate 'level' of activity. But an animated glowing effect at each data event could be better imo.

[MartyGentillon]

Even better: display a number in a favicon. Something like the "unread badge" on iphone.