From 9ef8dc2eac28837b1a88f98c4d7a2b061a354fd9 Mon Sep 17 00:00:00 2001
From: Alfred Melch <dev@melch.pro>
Date: Sat, 14 Dec 2019 20:03:29 +0100
Subject: [PATCH] center controls

---
 src/components/RsvpReader.css    |  5 +++++
 src/components/RsvpReader.js     | 14 ++++++++------
 src/components/SegmentControl.js |  4 ++--
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/RsvpReader.css b/src/components/RsvpReader.css
index ec7ccbd..d1f2afc 100644
--- a/src/components/RsvpReader.css
+++ b/src/components/RsvpReader.css
@@ -10,4 +10,9 @@
 .mainItem {
   composes: item;
   flex: 2;
+  padding: 20px;
+}
+
+.controls {
+  text-align: center;
 }
diff --git a/src/components/RsvpReader.js b/src/components/RsvpReader.js
index 0174004..2a4192f 100644
--- a/src/components/RsvpReader.js
+++ b/src/components/RsvpReader.js
@@ -7,7 +7,7 @@ import { Options } from './Options'
 import { PlayerControl } from './PlayerControl'
 
 import styles from './RsvpReader.css'
-import { PipeMarker } from './PivotMarker'
+import { PipeMarker, BorderMarker } from './PivotMarker'
 
 export const RsvpReader = () => {
   return (
@@ -16,12 +16,14 @@ export const RsvpReader = () => {
         <TextInput />
       </div>
       <div className={styles.mainItem}>
-        <PipeMarker>
+        <BorderMarker>
           <Segment />
-        </PipeMarker>
-        <SegmentControl>
-          <PlayerControl />
-        </SegmentControl>
+        </BorderMarker>
+        <div className={styles.controls}>
+          <SegmentControl>
+            <PlayerControl />
+          </SegmentControl>
+        </div>
         <Options></Options>
       </div>
       <div className={styles.item}>
diff --git a/src/components/SegmentControl.js b/src/components/SegmentControl.js
index 9b12ea8..80d957f 100644
--- a/src/components/SegmentControl.js
+++ b/src/components/SegmentControl.js
@@ -19,7 +19,7 @@ import {
 export const SegmentControl = ({ children }) => {
   const dispatch = useDispatch()
   return (
-    <div>
+    <>
       <IconButton
         title="Previous Sentence"
         onClick={() => dispatch(decrementSentence())}
@@ -41,6 +41,6 @@ export const SegmentControl = ({ children }) => {
         title="Next Sentence"
         onClick={() => dispatch(incrementSentence())}
       />
-    </div>
+    </>
   )
 }