Improve list item style

This commit is contained in:
Amit Jakubowicz 2019-11-13 10:33:26 +01:00
parent 4751188ffb
commit c3ddaf4881
3 changed files with 17 additions and 8 deletions

View file

@ -1,7 +1,7 @@
const theme = {
colors: {
lead: '#043b14',
secondary: '#FFAD00'
secondary: '#FFAD00',
}
}

View file

@ -1,5 +1,5 @@
import styled from "@emotion/styled"
import { css } from "qpa-emotion"
import {css, Theme} from "qpa-emotion"
import * as React from "react"
import { hot } from "react-hot-loader"
import { useAppContext } from "../../App/Context/AppContext"
@ -79,9 +79,9 @@ const ListRoot = styled.div``
const Items = styled.div``
const DayPresentation = styled.div`
font-size: 18px;
//font-size: 14px;
text-align: center;
background-color: rgba(0, 0, 0, 0.1);
background-color: ${(props: {theme: Theme}) => props.theme.colors.secondary};
padding: 2px 8px;
font-weight: 600;
color: rgba(0, 0, 0, 0.6);
@ -110,7 +110,8 @@ const DayPresentationContainer = styled.div`
`
const DayItems = styled.div`
display: grid;
grid-template-columns: auto auto;
grid-template-columns: 90px auto;
grid-gap: 8px;
grid-template-rows: auto auto;
grid-template-areas:
"dayname items"

View file

@ -1,5 +1,5 @@
import Chip from "qpa-components/Chip"
import styled, { css } from "qpa-emotion"
import styled, {css, Theme} from "qpa-emotion"
import * as React from "react"
import { hot } from "react-hot-loader"
import { Link } from "react-router-dom"
@ -26,14 +26,14 @@ const ListItem = (props: Props) => {
return (
<Root className={props.className}>
<Time>{startTime}</Time>
<Link
<Title
to={`/o/${sanitizeEventName(event.info.title)}/${event.id}`}
css={css`
white-space: nowrap;
`}
>
{event.info.title}
</Link>
</Title>
<Location>{event.location.name}</Location>
<Address>{event.location.address}</Address>
<Tags>
@ -58,11 +58,19 @@ const Root = styled.div`
[line2] auto
[tags] auto;
`
const Title = styled(Link)`
color: ${(props: {theme: Theme}) => props.theme.colors.lead};
font-size: 1.1em;
text-decoration: none;
`
const EditLink = styled(Link)`
margin-left: 8px;
font-size: 0.6em;
grid-row: line2;
grid-column: -1;
text-decoration: none;
color: inherit;
`
const Time = styled.div`
grid-column: time;