refactor: improve styling in narrative itineraries header

Address comments in #359

Author: evansiroky

Diff for: lib/components/narrative/narrative-itineraries-header.js

@@ -9,11 +9,7 @@ const IssueButton = styled.button`
   border-radius: 5px;
   display: inline-block;
   font-size: 12px;
-  padding: 4px;
-
-  span {
-    margin-left: 4px;
-  }
+  padding: 2px 4px;
 `
 
 export default function NarrativeItinerariesHeader ({
@@ -62,7 +58,14 @@ export default function NarrativeItinerariesHeader ({
             <Icon type='arrow-left' /> View all options
           </button>
 
-          {itineraryIsExpanded && <SaveTripButton />}
+          {itineraryIsExpanded && (
+            // marginLeft: auto is a way of making something "float right"
+            // within a flex container
+            // see https://stackoverflow.com/a/36182782/269834
+            <div style={{marginLeft: 'auto'}}>
+              <SaveTripButton />
+            </div>
+          )}
         </>
         : <>
           <div
@@ -76,7 +79,7 @@ export default function NarrativeItinerariesHeader ({
             </span>
             {errors.length > 0 && (
               <IssueButton onClick={onToggleShowErrors}>
-                <Icon type='warning' />
+                <Icon style={{fontSize: 11, marginRight: 2}} type='warning' />
                 <span>{errors.length} issues</span>
               </IssueButton>
             )}