✨ 40 - user profile page - #46
Conversation
|
|
||
| const User = () => { | ||
| return ( | ||
| <PageLayout backgroundColor={theme.colors.white}> |
There was a problem hiding this comment.
what do you think about using styled here?
Adding a className prop to PageLayout and then here using styled('PageLayout')background: ${theme.colors.white}`
There was a problem hiding this comment.
I've run into situations where I want to pass through one style... then it's another css prop... then another... and suddenly the props are filled with css styles which isn't ideal
There was a problem hiding this comment.
ah i see what you mean - good idea!
| import defaultTheme from './theme'; | ||
|
|
||
| const StyledLink = styled('a')` | ||
| color: ${({ theme }: { theme: typeof defaultTheme }) => css(theme.colors.secondary_accessible)}; |
There was a problem hiding this comment.
in general (because we have a very similar setup on platform-ui) do we need to type the theme prop every time?
There was a problem hiding this comment.
do you mean like this? pardon the wonky formatting
const StyledLink = styled('a')
${({ theme }: { theme: typeof defaultTheme }) => csscolor: ${theme.colors.secondary_accessible}; ${theme.typography.regular}; line-height: 24px; &:hover { color: ${theme.colors.accent}; }}
;
There was a problem hiding this comment.
I was just curious if we need to do the typing every time: ${({theme})} : {theme: typeof defaultTheme
but I see your point.
we've done something like this in a couple of places:
const Ul2 = styled('ul')`
${({ theme }) => css(theme.typography.paragraph)};
padding-left: 0px;
margin-top: 5px;
margin-bottom: 30px;
`;
so i guess one can do:
const StyledLink = styled('a')`
${theme} => css`
color: theme.colors.secodary;
&:hover {
color: theme.colors.accent
}`
`
Still trying to figure out the cleanest way to use Emotion!
There was a problem hiding this comment.
My editor complains when i don't type it...
There was a problem hiding this comment.
frig. ok not a big deal. just im sure its annoying typing it every single time :)
There was a problem hiding this comment.
yeah...i'll keep this in the back of my mind, maybe a nice solution will make itself known :)
| @@ -0,0 +1,453 @@ | |||
| import { css, Global } from '@emotion/core'; | |||
There was a problem hiding this comment.
This component looks fantastic
| }; | ||
|
|
||
| const getDayValue = (exp: number) => { | ||
| // round or floor? |
There was a problem hiding this comment.
off the top of my head I want to say floor because round might be rounding up when a token is actually expired
There was a problem hiding this comment.
good point! will change
2 participants
Add route, page component for User.