Improve list item style

packages/qpa-emotion/theme.ts

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

packages/qpa/Calendar/List/List.tsx

@@ -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"

packages/qpa/Calendar/List/ListItem.tsx

@@ -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;