category image tweaks, use for channel too

client/src/components/atoms/CategoryImage.module.scss

@@ -8,13 +8,18 @@
     background-color: $body-background;
     border-radius: $border-radius;
     overflow: hidden;
-    opacity: .8;
+    opacity: .85;
     transition: .2s ease-out;
+    border: 1px solid $brand-grey-lighter;
 }
 
 .header {
     composes: categoryImage;
     height: 8rem;
     margin-top: $spacer;
-    opacity: .5;
+}
+
+.dimmed {
+    composes: categoryImage;
+    opacity: .6;
 }

client/src/components/atoms/CategoryImage.tsx

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react'
+import cx from 'classnames'
 import styles from './CategoryImage.module.scss'
 
 import agriculture from '../../img/categories/agriculture.jpg'
@@ -141,18 +142,19 @@ const categoryImageFile = (category: string) => {
 export default class CategoryImage extends PureComponent<{
     category: string
     header?: boolean
+    dimmed?: boolean
 }> {
     public render() {
         const image = categoryImageFile(this.props.category)
+        const classNames = cx(styles.categoryImage, {
+            [styles.header]: this.props.header,
+            [styles.dimmed]: this.props.dimmed
+        })
 
         return (
             <div
-                className={
+                className={classNames}
-                    this.props.header ? styles.header : styles.categoryImage
+                style={{ backgroundImage: `url(${image})` }}
-                }
-                style={{
-                    backgroundImage: `url(${image})`
-                }}
             />
         )
     }

client/src/components/molecules/AssetTeaser.tsx

@@ -38,7 +38,7 @@ const AssetTeaser = ({
         >
             <Link to={`/asset/${asset.id}`}>
                 {base.categories && !minimal && (
-                    <CategoryImage category={base.categories[0]} />
+                    <CategoryImage dimmed category={base.categories[0]} />
                 )}
                 <h1>{base.name}</h1>
 

client/src/components/organisms/ChannelTeaser.module.scss

@@ -38,7 +38,29 @@
 }
 
 .channelTitle {
-    margin-top: $spacer * 2;
+    margin-top: $spacer * 4;
+
+    @media (min-width: $break-point--medium) {
+        margin-top: -($spacer / 1.5);
+    }
+}
+
+.channelHeader {
+    a {
+        display: block;
+
+        &:hover,
+        &:focus {
+            transform: none;
+
+            // category image
+            // stylelint-disable-next-line
+            .channelTitle + div {
+                opacity: 1;
+                background-size: 105%;
+            }
+        }
+    }
 }
 
 .channelResults {

client/src/components/organisms/ChannelTeaser.tsx

@@ -6,6 +6,7 @@ import Spinner from '../atoms/Spinner'
 import AssetTeaser from '../molecules/AssetTeaser'
 import styles from './ChannelTeaser.module.scss'
 import channels from '../../data/channels.json'
+import CategoryImage from '../atoms/CategoryImage'
 
 interface ChannelTeaserProps {
     channel: string
@@ -72,12 +73,13 @@ export default class ChannelTeaser extends Component<
         return (
             <div className={styles.channel}>
                 <div>
-                    <div>
+                    <header className={styles.channelHeader}>
-                        <h2 className={styles.channelTitle}>
+                        <Link to={`/channels/${slug}`}>
-                            <Link to={`/channels/${slug}`}>{title} →</Link>
+                            <h2 className={styles.channelTitle}>{title} →</h2>
-                        </h2>
+                            <CategoryImage category={title} />
+                        </Link>
                         <p>{teaser}</p>
-                    </div>
+                    </header>
                 </div>
                 <div>
                     {isLoadingChannel ? (

client/src/components/templates/Asset/index.tsx

@@ -53,6 +53,7 @@ export default class Details extends Component<DetailsProps, DetailsState> {
                     metadata.base.categories && (
                         <CategoryImage
                             header
+                            dimmed
                             category={metadata.base.categories[0]}
                         />
                     )

client/src/components/templates/Channel.tsx

@@ -9,6 +9,7 @@ import Pagination from '../../components/molecules/Pagination'
 import styles from './Channel.module.scss'
 import Content from '../../components/atoms/Content'
 import channels from '../../data/channels.json'
+import CategoryImage from '../atoms/CategoryImage'
 
 interface ChannelProps {
     history: History
@@ -112,7 +113,11 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
         const { title, description, totalPages, currentPage } = this.state
 
         return (
-            <Route title={title} description={description}>
+            <Route
+                title={title}
+                description={description}
+                image={<CategoryImage header category={title} />}
+            >
                 <Content wide>
                     {this.renderResults()}
 

client/src/components/templates/Route.module.scss

@@ -12,6 +12,10 @@
     @media (min-width: $break-point--small) {
         font-size: $font-size-h1;
     }
+
+    + div:not(.description) {
+        margin-bottom: $spacer;
+    }
 }
 
 .description {

client/src/components/templates/Route.tsx

@@ -31,7 +31,9 @@ const Route = ({
             <header className={styles.header}>
                 <Content wide={wide}>
                     <h1 className={styles.title}>{title}</h1>
+
                     {image && image}
+
                     {description && (
                         <Markdown
                             text={description}

client/src/data/channels.json

@@ -3,7 +3,7 @@
   "description": "Channels are... You can do this with them... They're cool because...",
   "items": [
     {
-      "title": "AI for Good",
+      "title": "AI For Good",
       "slug": "ai-for-good",
       "teaser": "AI for Good is an initiative to promote the use of artificial intelligence for good causes.",
       "description": "AI for Good is an initiative to promote the use of artificial intelligence for good causes, such as fighting poverty, climate change, improving healthcare, safer transportation, and so on. The [AI for Good Global Summit](https://aiforgood.itu.int) is the leading United Nations platform for global and inclusive dialogue on AI. The Summit is hosted each year in Geneva by the ITU in partnership with UN Sister agencies, XPRIZE Foundation and ACM."

client/src/routes/Home.module.scss

@@ -33,12 +33,6 @@
 }
 
 .category {
-    // category image
-    > div {
-        opacity: .7;
-        transition: .2s ease-out;
-    }
-
     h3 {
         font-size: $font-size-base;
         color: $brand-grey;