Rewards/ViewReward: add status info

[e18r]

TO DO before merging

• Wait for PR Rewards/My Rewards: add icons to "status" #1635 to get merged
• Redirect this PR to dev

Fixes #1629

[chadoh]

Looks pretty good! Thanks for the cleanup. I see a couple quick things that I'd prefer we improved before merging, but nothing big. Feel free to push back on these suggestions!

[chadoh]

Sort of a separate discussion, but I wonder if it makes more sense to use inline css= props for components like this, which would let us easily stop passing in theme and allow the component to define it itself:

import React from 'react'
import { GU, Text, theme } from '@aragon/ui'

export default function Header({ children }) {
  const theme = useTheme()
  return (
    <Text.Block
      smallcaps
      css={`color: ${theme.contentSecondary}; margin-top: ${2 * GU}px; margin-bottom: ${GU}px`}
    >
      {children}
    </Text.Block>
  )
}

A trade-off is that stylelint doesn't currently inspect these inline css= props correctly.

What do you think?

(Also, rewriting this made me think that we should probably use GU here.)

[e18r]

I like your suggestion of making this a fully-fledged component. However, I had to use style instead of css.

[chadoh]

I find it very strange that wrapping it in styled() works, but using inline css= doesn't. I thought they did the same thing!!

[e18r]

🤷‍♀️

[chadoh]

💋