first pass of the new look

src/components/App.svelte

@@ -1,6 +1,8 @@
 <Header />
 <main>
-  <input class="reset" type="button" value="reset" on:click={reset} />
+  <nav>
+    <input class="reset button small red" type="button"  value="reset" on:click={reset} />
+  </nav>
 
   <ShipSpecs />
 
@@ -17,6 +19,9 @@
     screens={$ship.structure.screens}
     armour={$ship.structure.armour}
     on:set_screens={set_screens}
+    cargo={$ship.cargo}
+    streamlining={$ship.streamlining}
+    on:set_cargo={ship_dispatch}
     on:ship_change={ship_dispatch} />
 
   <Section label="weaponry">
@@ -34,11 +39,6 @@
 
   </Section>
 
-  <Section label="misc">
-    <Cargo {...$ship.cargo} on:set_cargo={ship_dispatch} />
-    <Streamlining {...$ship.streamlining} />
-  </Section>
-
   <Carrier {...$ship.carrier} />
 
 </main>
@@ -57,8 +57,6 @@
   import Propulsion from "./Propulsion/index.svelte";
   import Section from "~C/Section";
   import Weapon from "~C/Weapon";
-  import Cargo from "~C/Cargo/index.svelte";
-  import Streamlining from "~C/Streamlining/index.svelte";
   import Carrier from "~C/Carrier";
   import ADFC from "~C/Weaponry/ADFC";
   import AddWeapon from "~C/Weaponry/AddWeapon";

src/components/Hull/Streamlining/index.svelte

@@ -1,12 +1,16 @@
 <ShipItem {cost} {mass}>
   <Field label="streamlining">
   <div>
+    <label>
     <input type="radio" bind:group={type} value="none" />
-    <label>none</label>
+    none</label>
+    <label>
+
     <input type="radio" bind:group={type} value="partial" />
-    <label>partial</label>
+    partial</label>
+    <label>
     <input type="radio" bind:group={type} value="full" />
-    <label>full</label>
+    full</label>
     </div>
   </Field>
 </ShipItem>
@@ -30,4 +34,7 @@
 
   <style>
   div { display: flex }
+  label {
+    margin-left: 1em;
+  }
   </style>

src/components/Hull/index.svelte

@@ -13,6 +13,9 @@
 
 <Armour {armour} on:ship_change />
 
+<Cargo {...cargo} on:set_cargo />
+
+<Streamlining {...streamlining} />
 </Section>
 
 <script>
@@ -23,11 +26,16 @@
     import ShipItem from '~C/ShipItem';
     import Screens from './Screens';
     import Armour from './Armour';
+    import Cargo from './Cargo';
+    import Streamlining from './Streamlining';
 
     export let cost, mass, ship_mass, rating, screens, armour = (
         0, 0, 10, 1, [], []
     );
 
+  export let cargo = {};
+  export let streamlining = {};
+
     let min, max;
   $: min = Math.ceil(ship_mass / 10);
   $: max = ship_mass;

src/components/Weapon/index.svelte

@@ -1,7 +1,9 @@
 <ShipItem {cost} {mass}>
 
   <div class="weapon_row">
-<div class="remove" on:click={remove}>X</div>
+
+    <input type="button" class="button small red remove" value="remove"
+      on:click={remove} />
 
 
 <svelte:component this={weapon_component[weapon_type]} {...weapon}
@@ -112,14 +114,6 @@
     display: block;
 }
 
-.remove {
-    width: 1em;
-    flex: 0;
-    color: white;
-    background-color: black;
-    border-radius: 0.5em;
-    height: 1em;
-}
   .weapon_row {
     display: flex;
     gap: 2em;

src/components/Weaponry/AddWeapon/index.svelte

@@ -8,7 +8,7 @@
     <option value="needle">needle weapon</option>
 </select>
 
-<input type="button" value="add weapon" on:click={ add_weapon }/>
+<input type="button" value="add weapon" class="button small blue" on:click={ add_weapon }/>
 
 </Field>
 

src/components/Weapons/Add.svelte

@@ -1,4 +1,4 @@
-<input class="add-weapon" type="button" value="add" 
+<input class="add-weapon button small blue" type="button" value="add"
     on:click={add} />
 
 <div class="weapon">
@@ -22,14 +22,14 @@
 
 <svg width="60px" height="60px">
 {#each arcs as arc (arc)}
-    <Arc {arc} radius={30} 
+    <Arc {arc} radius={30}
         active={selected_arc[arc]}
         on:click={()=>click_arc(arc)}
     />
 {/each}
     <circle cx="30" cy="30" r="15" />
 
-    
+
 </svg>
 
     <div>{weapon.cost}</div>
@@ -65,7 +65,7 @@
         arcs.map( arc => [ arc, false ] )
     );
 
-    const nbr_selected_arcs = () => Object.values(selected_arc).filter( 
+    const nbr_selected_arcs = () => Object.values(selected_arc).filter(
         x => x ).length;
 
     $: if ( nbr_selected_arcs() !== nbr_arcs ) {
@@ -109,7 +109,7 @@
         });
 
         selected_arc = new_arcs;
-        
+
     }
 
     let weapon = {};