download button icon

frontend/src/lib/DownloadButton.svelte

+<script lang="ts">
+  export let api_path = "";
+</script>
+
+<button
+  class="h-10 rounded-full bg-red-300 mt-2 flex flex-row items-center justify-center"
+  on:click={() => {
+    window.location.href = api_path;
+  }}
+>
+  <svg
+    class="fill-current w-4 h-4 mr-2"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    ><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" /></svg
+  >Download
+</button>

frontend/src/routes/BeadPreview.svelte

@@ -3,6 +3,7 @@
   import * as THREE from "three";
   import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
   import { loadSTL, createViewer } from "$lib/STLViewer";
+  import DownloadButton from "$lib/DownloadButton.svelte";
 
   const material = new THREE.MeshPhongMaterial({
     color: 0x9e8db9,
@@ -65,7 +66,7 @@
     {/if}
 
     <button
-      class="h-10 rounded-full bg-green-500"
+      class="h-10 rounded-full bg-green-400 mt-2"
       on:click={() => {
         loadSTL(loader, scene, material, api_path);
       }}
@@ -73,14 +74,7 @@
       Update Generation
     </button>
 
-    <button
-      class="h-10 rounded-full bg-red-300"
-      on:click={() => {
-        window.location.href = api_path;
-      }}
-    >
-      Download Generation
-    </button>
+    <DownloadButton {api_path} />
   </div>
   <div class="relative flex-1 ml-2" id="bead-stl" />
 </div>

frontend/src/routes/TipPreview.svelte

@@ -75,7 +75,7 @@
     {/if}
 
     <button
-      class="h-10 rounded-full bg-green-500"
+      class="h-10 rounded-full bg-green-400 mt-2"
       on:click={() => {
         loadSTL(loader, scene, material, api_path);
       }}
@@ -83,7 +83,7 @@
       Update Tip
     </button>
   </div>
-  <div class="relative flex-1 ml-2" id="tip-stl" />
+  <div class="relative flex-1 ml-2 max-h-full" id="tip-stl" />
 </div>
 
 <style></style>

frontend/src/routes/double/+page.svelte

@@ -3,6 +3,7 @@
   import * as THREE from "three";
   import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
   import { loadSTL, createViewer } from "$lib/STLViewer";
+  import DownloadButton from "$lib/DownloadButton.svelte";
 
   const material = new THREE.MeshPhongMaterial({
     color: 0x66ff66,
@@ -166,14 +167,7 @@
       Update Generation
     </button>
 
-    <button
-      class="h-10 rounded-full bg-red-300"
-      on:click={() => {
-        window.location.href = api_path;
-      }}
-    >
-      Download Generation
-    </button>
+    <DownloadButton {api_path} />
   </div>
   <div class="relative flex-1 ml-2" id="bead-stl" />
 </div>

frontend/src/routes/spherical/+page.svelte

@@ -3,6 +3,7 @@
   import * as THREE from "three";
   import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
   import { loadSTL, createViewer } from "$lib/STLViewer";
+  import DownloadButton from "$lib/DownloadButton.svelte";
 
   const material = new THREE.MeshPhongMaterial({
     color: 0xa345bf,
@@ -130,7 +131,7 @@
     />
 
     <button
-      class="h-10 rounded-full bg-green-500"
+      class="h-10 rounded-full bg-green-500 mt-2"
       on:click={() => {
         loadSTL(loader, scene, material, api_path);
       }}
@@ -138,14 +139,7 @@
       Update Generation
     </button>
 
-    <button
-      class="h-10 rounded-full bg-red-300"
-      on:click={() => {
-        window.location.href = api_path;
-      }}
-    >
-      Download Generation
-    </button>
+    <DownloadButton {api_path} />
   </div>
   <div class="relative flex-1 ml-2" id="sphere-stl" />
 </div>

frontend/src/routes/structures/+page.svelte

@@ -3,6 +3,7 @@
   import * as THREE from "three";
   import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
   import { loadSTL, createViewer } from "$lib/STLViewer";
+  import DownloadButton from "$lib/DownloadButton.svelte";
 
   const material = new THREE.MeshPhongMaterial({
     color: 0xa345bf,
@@ -104,7 +105,7 @@
     />
 
     <button
-      class="h-10 rounded-full bg-green-500"
+      class="h-10 rounded-full bg-green-500 mt-2"
       on:click={() => {
         loadSTL(loader, scene, material, api_path);
       }}
@@ -112,14 +113,7 @@
       Update Generation
     </button>
 
-    <button
-      class="h-10 rounded-full bg-red-300"
-      on:click={() => {
-        window.location.href = api_path;
-      }}
-    >
-      Download Generation
-    </button>
+    <DownloadButton {api_path} />
   </div>
   <div class="relative flex-1 ml-2" id="struct-stl" />
 </div>