diff --git a/src/components/UnpublishedListing/UnpublishedListing.css b/src/components/UnpublishedListing/UnpublishedListing.css index bbdbc05d..5345ed3f 100644 --- a/src/components/UnpublishedListing/UnpublishedListing.css +++ b/src/components/UnpublishedListing/UnpublishedListing.css @@ -1,5 +1,6 @@ :root { - --highlightColor: #e1eeea; + --highlightColor: #38ab9b; + --backgroundAltColor: #232528; --defaultFontSize: 1em; } @@ -11,6 +12,7 @@ .column { flex: 1 33%; margin: -10px; + margin-top: 24px; padding: 10px; max-width: 33%; transition: background-color .5s ease; @@ -18,7 +20,8 @@ .columnHovered { composes: column; - background-color: var(--highlightColor); + border: 2px dashed var(--highlightColor); + border-radius: 4px; } .columnHeading { @@ -32,3 +35,11 @@ .card { margin-bottom: 10px; } + +/* Gross stuff below, React Toolbox hacks */ + +.cardTitle h5 { + color: var(--backgroundAltColor) !important; + font-weight: 500 !important; + font-size: 21px !important; +} diff --git a/src/components/UnpublishedListing/UnpublishedListing.js b/src/components/UnpublishedListing/UnpublishedListing.js index 7b064c5a..4f061d72 100644 --- a/src/components/UnpublishedListing/UnpublishedListing.js +++ b/src/components/UnpublishedListing/UnpublishedListing.js @@ -88,6 +88,7 @@ class UnpublishedListing extends React.Component { <CardTitle title={entry.getIn(['data', 'title'])} subtitle={`by ${ author }`} + className={styles.cardTitle} /> <CardText> Last updated: {timeStamp} by {entry.getIn(['metaData', 'user'])} diff --git a/src/components/UnpublishedListing/UnpublishedListingCardMeta.css b/src/components/UnpublishedListing/UnpublishedListingCardMeta.css index a1964d9a..5e42be98 100644 --- a/src/components/UnpublishedListing/UnpublishedListingCardMeta.css +++ b/src/components/UnpublishedListing/UnpublishedListingCardMeta.css @@ -12,7 +12,8 @@ font-size: .75em; text-transform: uppercase; - background: var(--backgroundColorShaded); + background: var(--backgroundAltColor); + color: #fff; } .meta {}