Enhance the Card component #3488
Conversation
ivarnakken
added
enhancement
ABA-225 Enhance Card component
Improve the design and make other "cards" actually use the component in order to standardize the look of the webapp. |
|
|
||
| html[data-theme='dark'] .card { | ||
| background: inherit; | ||
| border-radius: 1rem; |
There was a problem hiding this comment.
This matches the border-radius of the newly improved modals.
| let format = | ||
| moment().year() === moment(item.startTime).year() | ||
| ? 'DD. MMM' | ||
| : 'DD. MMM YYYY'; | ||
| if (isEvent) { | ||
| format += ' HH:mm'; | ||
| } |
There was a problem hiding this comment.
The exact time the article was posted isn't that important. However, it's different for events because it's important to know when it starts.
|
IMO the borders were increased a tad too much. I'd probably enjoy something in-between this and the current more. |
I don't really agree. A
Well, yes, but no. You see, that's kind of the point. I tried a higher contrast, but that just looked off. It made the cards stand out way too much and they became too eye-catching, which is not its purpose. You want it to blend in nicely with the surroundings, while still separating its content from the rest. |
| @@ -130,7 +130,7 @@ const Footer = ({ loggedIn }: Props) => ( | |||
| Informasjonskapsler (cookies) | |||
| </Link> | |||
| <Link to="/pages/personvern/124-personvernserklring"> | |||
| Personvernserklæring | |||
| Personvernerklæring | |||
There was a problem hiding this comment.
Had to be done. Sorry. I'm not making a seperate PR for this.
ivarnakken
force-pushed
the
card
branch
2 times, most recently
from
9a4bf4e
to
56dec53
Compare
Also make all "cards" actually employ the component. The cards now have a much more modern look and they all share the same styling.
Small styling changes here and there. Among other things, the background is now less "blue".
|
The contrast between the card and the background has been increased. |
Description
Enhance the Card component
Also make all "cards" actually employ the component. The cards now have
a much more modern look and they all share the same styling.
Iterate on the introduction of Inter
Small styling changes here and there. Among other things, the background is now less "blue".
Result
Before
After
Before
After
The cards looks much better here once the content background is gone.
Testing
I've tested all use cases of the component.
Resolves ABA-225