From 38a0ebd83b07932d98aad3c6ea12804b8c19e90e Mon Sep 17 00:00:00 2001
From: Philipp Wambach <philippwambach@googlemail.com>
Date: Wed, 9 Sep 2020 14:37:01 +0200
Subject: [PATCH] feat(story-selector): restyle story images layout

---
 .../stories/story-list-item/story-list-item.styl | 16 ++++++++++++----
 .../stories/story-list-item/story-list-item.tsx  |  8 +++++---
 .../stories/story-list/story-list.styl           |  2 +-
 .../stories/story-tags/story-tags.styl           |  1 +
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/scripts/components/stories/story-list-item/story-list-item.styl b/src/scripts/components/stories/story-list-item/story-list-item.styl
index f93c46fb5..5ac007ff0 100644
--- a/src/scripts/components/stories/story-list-item/story-list-item.styl
+++ b/src/scripts/components/stories/story-list-item/story-list-item.styl
@@ -1,6 +1,6 @@
 @require '../../../../variables.styl'
 
-.storyItem
+.storyListItem
   display: flex
   flex-direction: column
   justify-content: flex-end
@@ -29,17 +29,25 @@
   text-align: center
   line-height: 30px
 
-.imageInfo
+.image
+  height: 220px
+  background: black
+  background-position: center
+  background-size: cover
+
+.info
   overflow-y: auto
   box-sizing: border-box
   padding: emCalc(16px)
-  min-height: 50%
+  min-height: 45%
   width: 100%
   height: fit-content
   border-bottom-right-radius: 2px
   border-bottom-left-radius: 2px
   background-color: $darkGrey1
-  opacity: 0.95
+
+.storyListItem:hover .info
+  background-color: lighten($darkGrey1, 5)
 
 .title
   margin: 0
diff --git a/src/scripts/components/stories/story-list-item/story-list-item.tsx b/src/scripts/components/stories/story-list-item/story-list-item.tsx
index e668a7766..69ded2ed5 100644
--- a/src/scripts/components/stories/story-list-item/story-list-item.tsx
+++ b/src/scripts/components/stories/story-list-item/story-list-item.tsx
@@ -29,7 +29,7 @@ const StoryListItemContent: FunctionComponent<Props> = ({
   onSelectStory
 }) => {
   const classes = cx(
-    styles.storyItem,
+    styles.storyListItem,
     mode === StoryMode.Present && styles.present,
     selectedIndex >= 0 && styles.selected
   );
@@ -41,13 +41,15 @@ const StoryListItemContent: FunctionComponent<Props> = ({
 
   return (
     <div
-      style={{backgroundImage: `url(${imageUrl})`}}
       className={classes}
       onClick={() => mode === StoryMode.Showcase && onSelectStory(story.id)}>
       {selectedIndex >= 0 && (
         <div className={styles.storyNumber}>{selectedIndex + 1}</div>
       )}
-      <div className={styles.imageInfo}>
+      <div
+        className={styles.image}
+        style={{backgroundImage: `url(${imageUrl})`}}></div>
+      <div className={styles.info}>
         <p className={styles.title}>{story.title}</p>
         <p className={styles.description}>{story.description}</p>
         {story.tags && <StoryTags tags={story.tags} selected={selectedTags} />}
diff --git a/src/scripts/components/stories/story-list/story-list.styl b/src/scripts/components/stories/story-list/story-list.styl
index e4922807d..da77c90c5 100644
--- a/src/scripts/components/stories/story-list/story-list.styl
+++ b/src/scripts/components/stories/story-list/story-list.styl
@@ -9,7 +9,7 @@
   display: grid
   padding: emCalc(20px)
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))
-  grid-auto-rows: 300px
+  grid-auto-rows: 340px
   grid-gap: 16px
 
 .present
diff --git a/src/scripts/components/stories/story-tags/story-tags.styl b/src/scripts/components/stories/story-tags/story-tags.styl
index 8b8233484..1c2a33855 100644
--- a/src/scripts/components/stories/story-tags/story-tags.styl
+++ b/src/scripts/components/stories/story-tags/story-tags.styl
@@ -19,6 +19,7 @@
   cursor: pointer
 
   &:hover
+    border-color: lighten($darkGrey4, 10)
     background: $darkGrey2
 
 .selected, .selected:hover