Improve usability instructions on route draw screen of survey (#179)

* improve route-drawing instructions in html template

* minor edits to route draw instructions

* fix list color

---------

Co-authored-by: Matthew Jackson <mbjackson@Matthews-MacBook-Air.local>

app/route_rangers_api/templates/survey_map.html

@@ -5,34 +5,49 @@
 <div class="headers">
   <h1>{{ City }} Rider Survey</h1>
   <p class="inline">
-    Please enter the trips you frequently take on transit, bike, or by car.
-    Click on the map to drop a start pin and then click to add a pin where the
-    trip ends. This feedback will be used to assess gaps in current transit
-    routes. We will ask you some follow-up questions to better understand
-    whether a new transit route would make this trip easier for you. Please
-    enter up to three routes.
+    Please enter&nbsp;<strong>a trip</strong>&nbsp;you frequently take on transit, by bike, or by car.
   </p>
+  <ul style="color:rgba(0, 0, 0, 0.6)">
+    <li>Type in the the "Start" search bar and press Enter/Return to find or set a starting location. This will add a
+      pin where
+      the trip starts.</li>
+    <li>Type in the "End" search bar and press Enter/Return to find or set an ending location. This will add a pin where
+      the
+      trip ends.</li>
+    <li>The map will then find and show you route between your start and end points.
+      If it doesn't match your actual route, click and drag the route
+      until it looks right!</li>
+    <li><strong>Please click the "Save File" button <em>before</em> clicking "Next"! If you don't, your route
+        will not be saved!</strong></li>
+  </ul>
+  <p class="inline">We will ask you some follow-up questions to better understand
+    whether a new transit route would make this trip easier for you. This feedback will be used to assess gaps in
+    current transit
+    routes.</p>
+  <p class="inline">After that, you can enter a second or third route if you want.</p>
 </div>
 <style>
   .map {
-      position: absolute;
-      width: 100%;
-      height: 100%;
+    position: absolute;
+    width: 100%;
+    height: 100%;
   }
+
   .leaflet-routing-alternatives-container {
-      display: none;
+    display: none;
   }
+
   .export-button {
-      background: #edeeed;
-      padding: 5px;
-      cursor: pointer;
-      margin-left: auto;
-      width: 100%;
-      text-align: center;
-      font-weight: bold;
+    background: #edeeed;
+    padding: 5px;
+    cursor: pointer;
+    margin-left: auto;
+    width: 100%;
+    text-align: center;
+    font-weight: bold;
   }
 </style>
-{% block map %} 
+{% block map %}
 <div id="map" class="map"></div>
 
 <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
@@ -47,7 +62,7 @@ <h1>{{ City }} Rider Survey</h1>
 {% endblock %}
 {% block survey %}
 <form method="post">
-  {% csrf_token %} 
+  {% csrf_token %}
   {{ form }}
   <input type="hidden" id="lineStringInput" name="lineString">
   <div style="text-align: right">