upgrade kit docs

Author: CamDavidsonPilon

src/components/Card.js

@@ -7,7 +7,7 @@ import Link from '@docusaurus/Link'; // Import Link component for internal navig
 const Card = ({ imageUrl, headerText, linkUrl, isNew }) => (
   <Link to={linkUrl} className={styles.cardLink}>
     <div className={styles.card}>
-      {isNew && <div className={styles.newLabel}>✨New</div>}
+      {isNew && <div className={styles.newLabel}>New</div>}
       <img src={require(`/static/img/${imageUrl}`).default} alt={headerText} className={styles.cardImage} />
       <h3 className={styles.cardHeader}>{headerText}</h3>
     </div>

src/components/Card.module.css

@@ -20,15 +20,18 @@
   position: absolute;
   top: 10px; /* Adjust as necessary */
   right: 10px; /* Adjust as necessary */
-  background-color: #5332CD; /* Choose color based on your design */
-  color: white;
-  padding: 5px 10px;
-  border-radius: 5px; /* Rounded corners */
+  background-color: rgba(83, 49, 202, 0.06);
+  border: 1px solid rgba(83, 49, 202, 0.16);
+  padding: 2px 6px;
+  font-weight: 600;
+  color: #4a3c82;
+  border-radius: 999px;
   font-size: 0.9em;
-  font-weight: bold;
   z-index: 1; /* Keep the badge above the zoomed image */
 }
 
+
+
 .cardImage {
   width: 100%;
   height: 200px;

static/img/user-guide/hardware-assembly/20ml-v15/oring-groove.jpg

@@ -30,11 +30,8 @@ import TabItem from '@theme/TabItem';
 <AssemblyInstructionBlock title="Step 2: Inserting the O-rings" images={["user-guide/hardware-assembly/20ml-v15/oring-in-holder.jpg", "user-guide/hardware-assembly/20ml-v15/oring-groove.jpg", "user-guide/hardware-assembly/20ml-v15/oring-in-top.jpg", "user-guide/hardware-assembly/upgrade-version/thick-oring-into-bottom.png",
 "user-guide/hardware-assembly/20ml-v15/vial-holders-with-oring.jpg"]}>
 
-1. The O-rings are pre-lubricated with a silicone-based lubricant. If needed, remove any excess lubricant from the O-rings.
 2. The top vial holder has <Highlight color={colors.blue}>a groove within the body</Highlight> where the <Highlight color={colors.magenta}>thinner #024 O-ring</Highlight> sits. Carefully insert the O-ring using your fingers. Make sure to not twist the O-ring.
 3. Run your finger inside the vial holder, pushing the O-ring into place to ensure a snug fit.
-4. The bottom vial holder has a groove for the <Highlight color={colors.orange}>thicker #121 O-ring</Highlight>. The O-ring will sit between the base of the holder and the heater PCB. Carefully insert the O-ring using your fingers. Make sure to not twist the O-ring.
-5. Push the O-ring into place to ensure a snug fit.
 
 </AssemblyInstructionBlock>
 
@@ -79,6 +76,6 @@ import TabItem from '@theme/TabItem';
 <AssemblyInstructionBlock title="Step 6: Complete the vial holder" images={["user-guide/hardware-assembly/20ml-v15/twist-top-and-bottom.jpg"]}>
 
 1. Screw the top and bottom vial holder sections together so that the IR label is positioned above the flat-flex-cable.
-2. Set this aside and proceed to the next page. 
+2. Set this aside and proceed to the next page.
 
 </AssemblyInstructionBlock>

static/img/user-guide/hardware-assembly/upgrade_kits/attach_new_vial_holder.jpg

@@ -0,0 +1,37 @@
+---
+title: Disassembly
+slug: /20ml-v11-upgrade-v15-upgrade-disassembly
+---
+
+import AssemblyInstructionBlock from '@site/src/components/AssemblyInstructionBlock';
+import Highlight from '@site/src/components/Highlight';
+import * as colors from '@site/src/components/constants';
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+<AssemblyInstructionBlock title="Step 1: Unplug and disassemble the optics system
+" images={["user-guide/hardware-assembly/upgrade_kits/remove_pds_leds.jpg","user-guide/hardware-assembly/upgrade_kits/disconnect_pds.jpg"]}>
+
+1. Remove any vial placed in the Pioreactor.
+2. Remove the <Highlight color={colors.teal}>LED caps</Highlight> from **REF**, **IR** and **90°** sockets.
+3. Remove the LED and PDs from their sockets.
+    :::caution
+    If the LEDs/PDs are stuck in the socket, **do not pull!** Gently twist the bulb until it loosens from the socket to safely remove it.
+    :::
+4. Unplug the <Highlight color={colors.red}>PDs only</Highlight> from the HAT. Leave the LED attached - this will be reused in the v1.5.
+
+</AssemblyInstructionBlock>
+
+<AssemblyInstructionBlock title="Step 2: Replace the top vial holder
+" images={["user-guide/hardware-assembly/upgrade_kits/remove_old_vial_holder.jpg","user-guide/hardware-assembly/20ml-v15/oring-groove.jpg", "user-guide/hardware-assembly/20ml-v15/oring-in-top.jpg", "user-guide/hardware-assembly/upgrade_kits/attach_new_vial_holder.jpg",]}>
+
+2. Screw off the existing top vial holder by twisting it counter-clockwise. This old top isn't needed anymore.
+2. The new top v1.5 vial holder has <Highlight color={colors.blue}>a groove within the body</Highlight> where the #024 O-ring sits. Carefully insert the O-ring using your fingers. Make sure to not twist the O-ring.
+3. Run your finger inside the vial holder, pushing the O-ring into place to ensure a snug fit.
+3. Screw on the new v1.5 vial holder.
+
+</AssemblyInstructionBlock>
+
+

static/img/user-guide/hardware-assembly/upgrade_kits/disconnect_pds.jpg

@@ -0,0 +1,26 @@
+---
+title: Wetware assembly
+slug: /20ml-v11-upgrade-v15-wetware-assembly
+hide_table_of_contents: true
+---
+
+import AssemblyInstructionBlock from '@site/src/components/AssemblyInstructionBlock';
+import Highlight from '@site/src/components/Highlight';
+import * as colors from '@site/src/components/constants';
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+<AssemblyInstructionBlock title="Step 1: 20ml vial assembly" images={["user-guide/hardware-assembly/20ml-v15/20ml-vial-pieces.jpg","user-guide/hardware-assembly/40ml/steel-ports-into-holes.png","user-guide/hardware-assembly/40ml/steel-ports.png","user-guide/hardware-assembly/20ml-v15/20ml-vial.jpg"]}>
+
+
+1. Gather the 20ml vial, stirbar, and stainless steel ports.
+2. Remove the cap from the vial.
+3. Gently but firmly push the stainless steel ports into the four holes. The two straight ports are placed in the <Highlight color={colors.blue}>outer holes</Highlight>, and the two bent ports are placed in the <Highlight color={colors.orange}>inner holes</Highlight>. 
+4. Position the ports about **half way** through the vial cap for now. These can be adjusted later.
+5. Place the stirbar in the vial and secure the cap.
+
+</AssemblyInstructionBlock>
+
+