Add a download icon beside the export button

Author: StanFromIreland

codespeed/static/css/main.css

@@ -449,14 +449,18 @@ tbody.commits tr td.date { padding: 0.3em; width: 5em; text-align: right; }
     overflow: auto;
 }
 
-a#permalink {
+a#permalink, a#exportcsv {
     margin-left: auto;
     display: inline-flex;
     align-items: center;
     gap: 0.25em;
     font-size: 0.9em;
 }
-a#permalink svg { width: 1.1em; height: 1.1em; }
+a#permalink svg, a#exportcsv svg { width: 1.1em; height: 1.1em; }
+/* The download glyph fills its 16px grid, the link glyph does not;
+   shrink it slightly so the two look the same size. */
+a#exportcsv svg { width: 0.95em; height: 0.95em; }
+a#exportcsv + a#permalink { margin-left: 1em; }
 
 /* Plot styles */
 div#plot { text-align: left; height: 500px; width: 100%; }
@@ -577,6 +581,4 @@ div.footer a:hover { color: var(--accent); text-decoration: underline; }
 
 /* speed.pypy.org additions */
 .envlinecolor { float: right; font-size: 12px; line-height: 18px; color: #555; }
-a#exportcsv { margin-left: auto; font-size: small; }
-a#exportcsv + a#permalink { margin-left: 1em; }
 a#exportcsv:hover { text-decoration: underline; }

codespeed/templates/codespeed/comparison.html

@@ -77,7 +77,8 @@
     <label for="direction">Horizontal:</label>
     <input id="direction" type="checkbox" name="direction" value="horizontal"/>
   </span>
-  <a id="exportcsv" href="#">Export CSV</a>
+  {% comment %}Bootstrap Icons "download" glyph (MIT, twbs/icons).{% endcomment %}
+  <a id="exportcsv" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/></svg>Export CSV</a>
   {% include "codespeed/permalink.html" %}
 </div>
 <div id="graph-title" style="text-align:center; padding:8px 0; font-size:15px;"></div>