center controls

src/components/RsvpReader.css

@@ -10,4 +10,9 @@
 .mainItem {
   composes: item;
   flex: 2;
+  padding: 20px;
+}
+
+.controls {
+  text-align: center;
 }

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>
+        </BorderMarker>
+        <div className={styles.controls}>
           <SegmentControl>
             <PlayerControl />
           </SegmentControl>
+        </div>
         <Options></Options>
       </div>
       <div className={styles.item}>

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>
+    </>
   )
 }