From cac398172a728766efc71138d2252d1be1a90643 Mon Sep 17 00:00:00 2001
From: Katherina Marcenko <45818654+KatvonRivia@users.noreply.github.com>
Date: Thu, 28 Nov 2019 15:35:17 +0100
Subject: [PATCH] refactor(presenter-controls): remove play icon (#221)

* refactor(presenter-controls): remove play icon

* refactor(presenter): nename const

* refactor(presenter-mode): rename const

* refactor(presenter-controls): rename Present to isPresenterMode
---
 .../components/story-header/story-header.styl        | 12 +++++-------
 src/scripts/components/story-header/story-header.tsx |  8 +++++---
 .../story-pagination/story-pagination.styl           |  9 +++++----
 .../components/story-pagination/story-pagination.tsx |  2 --
 src/scripts/components/story/story.styl              |  9 ---------
 5 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/src/scripts/components/story-header/story-header.styl b/src/scripts/components/story-header/story-header.styl
index fcd5fcf73..4db3db54b 100644
--- a/src/scripts/components/story-header/story-header.styl
+++ b/src/scripts/components/story-header/story-header.styl
@@ -1,6 +1,8 @@
+@require '../../../variables.styl'
+
 .storyHeader
   position: absolute
-  right: 500px
+  right: $storyWidth
   left: 0
   z-index: 1
   display: flex
@@ -16,11 +18,7 @@
   margin: 0
 
 .present
+  justify-content: center
+
   .title
     font-size: 2em
-
-  .subtitle
-    font-size: 1.3em
-
-  .backButton
-    font-size: 1.3em
diff --git a/src/scripts/components/story-header/story-header.tsx b/src/scripts/components/story-header/story-header.tsx
index 07c239a24..5276639d9 100644
--- a/src/scripts/components/story-header/story-header.tsx
+++ b/src/scripts/components/story-header/story-header.tsx
@@ -28,9 +28,11 @@ const StoryHeader: FunctionComponent<Props> = ({storyIds, story, mode}) => {
 
   return (
     <div className={storyClasses}>
-      <Link to={backLink} className={styles.backButton}>
-        <FormattedMessage id="goBack" />
-      </Link>
+      {!isPresenterMode && (
+        <Link to={backLink} className={styles.backButton}>
+          <FormattedMessage id="goBack" />
+        </Link>
+      )}
       <div>
         <h2 className={styles.title}>{story && story.title}</h2>
         {isShowcaseMode && (
diff --git a/src/scripts/components/story-pagination/story-pagination.styl b/src/scripts/components/story-pagination/story-pagination.styl
index d30a5d35f..86816c527 100644
--- a/src/scripts/components/story-pagination/story-pagination.styl
+++ b/src/scripts/components/story-pagination/story-pagination.styl
@@ -1,5 +1,6 @@
+@require '../../../variables.styl'
+
 .pagination
-  width: 100%
   height: 40px
 
 .controls
@@ -13,16 +14,16 @@
 
 .present
   position: absolute
-  right: 500px
+  right: $storyWidth
   bottom: 0
+  left: 0
   z-index: 1
   display: flex
   flex-direction: row
-  justify-content: flex-end
+  justify-content: center
   height: 50px
 
   .controls
-    margin-right: 20px
     padding: 0 15px
     width: fit-content
     border: 1px solid #ccc
diff --git a/src/scripts/components/story-pagination/story-pagination.tsx b/src/scripts/components/story-pagination/story-pagination.tsx
index e09359080..c05ba0446 100644
--- a/src/scripts/components/story-pagination/story-pagination.tsx
+++ b/src/scripts/components/story-pagination/story-pagination.tsx
@@ -5,7 +5,6 @@ import cx from 'classnames';
 
 import {PreviousIcon} from '../icons/previous-icon';
 import {NextIcon} from '../icons/next-icon';
-import {PlayIcon} from '../icons/play-icon';
 import {RemoveIcon} from '../icons/remove-icon';
 
 import {StoryMode} from '../../types/story-mode';
@@ -56,7 +55,6 @@ const StoryPagination: FunctionComponent<Props> = ({
 
         {isPresenterMode && (
           <div className={styles.icons}>
-            <PlayIcon />
             <Link
               to={`/${mode}`}
               title={intl.formatMessage({id: 'closeStory'})}>
diff --git a/src/scripts/components/story/story.styl b/src/scripts/components/story/story.styl
index 7371d1892..5c4e6e8ce 100644
--- a/src/scripts/components/story/story.styl
+++ b/src/scripts/components/story/story.styl
@@ -14,15 +14,6 @@
   .backButton
     font-size: 1.3em
 
-.header
-  position: absolute
-  right: $storyWidth
-  left: 0
-  z-index: 1
-  display: flex
-  flex-direction: row
-  justify-content: space-between
-
 .backButton
   display: block
   padding: 20px 0 0 20px