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 = ({storyIds, story, mode}) => { return (
- - - + {!isPresenterMode && ( + + + + )}

{story && story.title}

{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 = ({ {isPresenterMode && (
- 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