mode selector in component

frontend/src/lib/AngleEditor.svelte

@@ -4,15 +4,15 @@
 </script>
 
 <label for="angle-input"> Angle Editor </label>
-<div class="flex flex-row">
+<div class="flex flex-row space-x-1">
   <input
     name="angle-input"
-    class="flex-1 h-10 min-w-0 bg-purple-100"
+    class="flex-1 h-10 min-w-0 appearance-none bg-gray-200 border border-gray-200 rounded-lg py-3 px-4 focus:outline-none focus:bg-white"
     type="number"
     bind:value={current_angle_input}
   />
   <button
-    class="h-10 rounded-full w-1/4 bg-rose-300 flex flex-row items-center justify-center"
+    class="h-10 rounded-lg w-1/4 bg-green-400 hover:bg-green-500 active:bg-green-600 flex flex-row items-center justify-center"
     on:click={() => {
       if (!angles.includes(current_angle_input)) {
         angles.push(current_angle_input);
@@ -28,7 +28,7 @@
     </svg>Add</button
   >
   <button
-    class="h-10 rounded-full w-1/4 bg-rose-500 flex flex-row items-center justify-center"
+    class="h-10 rounded-lg w-1/4 bg-red-300 hover:bg-red-400 active:bg-red-500 flex flex-row items-center justify-center"
     on:click={() => {
       angles = [0];
     }}

frontend/src/lib/ModeSelect.svelte

+<script lang="ts">
+  export let label: string;
+  export let binding: string;
+  export let values: { [value: string]: string };
+</script>
+
+<div class="block">
+  <label for="selection" class="pr-2"> {label} </label>
+  <select
+    name="selection"
+    class=" bg-gray-200 border border-gray-200 px-2 rounded focus:outline-none focus:bg-white focus:border-gray-500"
+    bind:value={binding}
+  >
+    {#each Object.entries(values) as [value, name]}
+      <option {value}>{name}</option>
+    {/each}
+  </select>
+</div>

frontend/src/routes/BeadPreview.svelte

@@ -5,6 +5,7 @@
   import { loadSTL, createViewer } from "$lib/STLViewer";
   import DownloadButton from "$lib/DownloadButton.svelte";
   import UpdateButton from "$lib/UpdateButton.svelte";
+  import ModeSelect from "$lib/ModeSelect.svelte";
 
   const material = new THREE.MeshPhongMaterial({
     color: 0x9e8db9,
@@ -19,6 +20,8 @@
   let length = 5;
   let segments = 1;
 
+  const result_types = { bead: "Bead", line: "Line" };
+
   let api_path: string;
   function updateAPIPath() {
     if (result_type == "bead") {
@@ -38,17 +41,11 @@
 
 <div class="flex flex-row flex-1 p-2">
   <div class="flex flex-col w-1/4">
-    <div class="flex flex-row">
-      <label for="result-type" class="pr-3"> Result Type: </label>
-      <select
-        name="result-type"
-        class="outline outline-slate-600 rounded-lg"
-        bind:value={result_type}
-      >
-        <option value="bead">Bead</option>
-        <option value="line">Line</option>
-      </select>
-    </div>
+    <ModeSelect
+      label="Output Type:"
+      bind:binding={result_type}
+      values={result_types}
+    />
 
     <label for="length-input"> Length </label>
     <input

frontend/src/routes/TipPreview.svelte

@@ -4,6 +4,7 @@
   import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
   import { loadSTL, createViewer } from "$lib/STLViewer";
   import UpdateButton from "$lib/UpdateButton.svelte";
+  import ModeSelect from "$lib/ModeSelect.svelte";
 
   const material = new THREE.MeshPhongMaterial({
     color: 0xff5533,
@@ -19,8 +20,11 @@
   let hole_radius = 0.5;
   let tip_angle = 90;
 
+  const tip_types = { cone: "Cone", sphere: "Sphere" };
+
   let api_path: string;
   function updateAPIPath() {
+    console.log(tip_type);
     if (tip_type == "cone") {
       api_path = `http://localhost:8000/api/cone_tip?radius=${radius}&hole_radius=${hole_radius}&tip_angle=${tip_angle}`;
     } else if (tip_type == "sphere") {
@@ -37,17 +41,7 @@
 
 <div class="flex flex-row flex-1 p-2">
   <div class="flex flex-col w-1/4">
-    <div class="flex flex-row">
-      <label for="tip-type" class="pr-3"> Tip Type: </label>
-      <select
-        name="tip-type"
-        class="outline outline-slate-600 rounded-lg"
-        bind:value={tip_type}
-      >
-        <option value="cone">Cone</option>
-        <option value="sphere">Sphere</option>
-      </select>
-    </div>
+    <ModeSelect label="Tip Type:" bind:binding={tip_type} values={tip_types} />
 
     <label for="radius-input"> Radius </label>
     <input

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

@@ -93,8 +93,8 @@
       bind:value={length}
     />
 
-    <div class="mt-3 outline-1 outline flex-col flex bg-red-200">
-      <label for="top-type"> Top Interface </label>
+    <div class="mt-3 p-1 outline-1 outline flex-col flex bg-red-200">
+      <label for="top-type" class="mb-1"> Top Interface </label>
       <select name="top-type" bind:value={top_type}>
         <option value="cone">Cone</option>
         <option value="sphere">Sphere</option>
@@ -118,7 +118,7 @@
       {/if}
     </div>
 
-    <div class="my-3 outline-1 outline flex-col flex bg-orange-100">
+    <div class="my-3 p-1 outline-1 outline flex-col flex bg-orange-100">
       <label for="bottom-type"> Bottom Interface </label>
       <select name="bottom-type" bind:value={bottom_type}>
         <option value="cone">Cone</option>