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
ubilabs · Nov 28, 2019 · cac3981 · cac3981
1 parent 43ea8d9
commit cac3981
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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