feat(story-selector): add story selector style (#143)

src/scripts/components/presentation-selector/presentation-selector.styl

@@ -1,3 +1,11 @@
 .presentationSelector
   width: 100%
-  height: 100%
+  height: 100%
+
+.title
+  text-align: center
+  font-size: 1.7em
+
+.backButton
+  display: block
+  padding: 20px 0 0 20px

src/scripts/components/presentation-selector/presentation-selector.tsx

@@ -6,8 +6,10 @@ import StoryList from '../story-list/story-list';
 
 const PresentationSelector: FunctionComponent<{}> = () => (
   <div className={styles.presentationSelector}>
-    <Link to="/">Go back</Link>
-    <h1>Presenter Mode</h1>
+    <Link to="/" className={styles.backButton}>
+      Go back
+    </Link>
+    <h1 className={styles.title}>Presenter Mode</h1>
     <StoryList />
   </div>
 );

src/scripts/components/showcase-selector/showcase-selector.styl

@@ -1,3 +1,11 @@
 .showcaseSelector
   width: 100%
-  height: 100%
+  height: 100%
+
+.title
+  text-align: center
+  font-size: 1.7em
+
+.backButton
+  display: block
+  padding: 20px 0 0 20px

src/scripts/components/showcase-selector/showcase-selector.tsx

@@ -6,8 +6,10 @@ import StoryList from '../story-list/story-list';
 
 const ShowcaseSelector: FunctionComponent<{}> = () => (
   <div className={styles.showcaseSelector}>
-    <Link to="/">Go back</Link>
-    <h1>Showcase Mode</h1>
+    <Link to="/" className={styles.backButton}>
+      Go back
+    </Link>
+    <h1 className={styles.title}>Showcase Mode</h1>
     <StoryList />
   </div>
 );

src/scripts/components/story-list/story-list.styl

@@ -1,4 +1,5 @@
-.stories
+.storyList
   display: grid
+  padding: 20px
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
   grid-gap: 10px

src/scripts/components/story-list/story-list.tsx

@@ -20,7 +20,7 @@ const StoryList: FunctionComponent<{}> = () => {
   }, []);
 
   return (
-    <div className={styles.stories}>
+    <div className={styles.storyList}>
       {stories.map(story => (
         <StoryItem key={story.id} story={story} />
       ))}