UI styling update

This commit is contained in:
mukesh13
2025-08-21 10:31:21 +05:30
parent 92a935f753
commit 543e21d2e2
3 changed files with 71 additions and 73 deletions

View File

@ -1,6 +1,13 @@
import React from 'react';
const PackagingGuideline = () => {
const guidelines = [
"Seal the tubes with parafilm for transportation. To prevent the tubes from being crushed and broken during transit (leading to sample loss), insert sample tubes into 50 ml centrifuge tubes (or other rigid supports), which can also be packed with cotton, foam, etc.",
"To prevent sample loss and/or cross-contamination, tightly seal all wells of the plate with an adhesive sheet or foil. Protect the plates or strip tubes in a sturdy box with plenty of cushioning. Sample shipments of plates should be carried out on frozen blue ice or dry ice to ensure that the samples remain frozen during shipment.",
"To prevent sample loss and cross-contamination, we recommend securely sealing all wells of the plate with an adhesive sheet or foil. Place the plates or strip tubes in a sturdy box with ample cushioning. Ship the samples with a surplus of frozen blue ice blocks or dry ice to ensure they remain frozen throughout shipment.",
"For leak prevention and to avoid cross-contamination, use one of the following sealing methods:\n(a) Cap the wells with matching 8-strip caps, ensuring a tight seal. These caps are typically ordered separately from the plates.\n(b) For foil seals, use a heat seal (preferred method) like \"Thermo Scientific Easy Peel Heat Sealing Foil\" that allows for resealing, or adhesive aluminum foil seals such as \"AlumaSeal CS Film.\""
];
return (
<div className="space-y-6">
<div>
@ -8,39 +15,31 @@ const PackagingGuideline = () => {
</div>
<div className="space-y-6">
<p className="leading-relaxed" style={{ color: '#555555' }}>
Seal the tubes with parafilm for transportation. To prevent the tubes from
being crushed and broken during transit (leading to sample loss), insert
sample tubes into 50 ml centrifuge tubes (or other rigid supports), which
can also be packed with cotton, foam, etc.
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
To prevent sample loss and/or cross-contamination, tightly seal all wells of
the plate with an adhesive sheet or foil. Protect the plates or strip tubes
in a sturdy box with plenty of cushioning. Sample shipments of plates should
be carried out on frozen blue ice or dry ice to ensure that the samples
remain frozen during shipment.
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
To prevent sample loss and cross-contamination, we recommend securely
sealing all wells of the plate with an adhesive sheet or foil. Place the
plates or strip tubes in a sturdy box with ample cushioning. Ship the
samples with a surplus of frozen blue ice blocks or dry ice to ensure they
remain frozen throughout shipment.
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
For leak prevention and to avoid cross-contamination, use one of the
following sealing methods:<br />
<span className="font-medium">(a)</span> Cap the wells with matching 8-strip
caps, ensuring a tight seal. These caps are typically ordered separately
from the plates.<br />
<span className="font-medium">(b)</span> For foil seals, use a heat seal (preferred method)
like "Thermo Scientific Easy Peel Heat Sealing Foil" that allows for
resealing, or adhesive aluminum foil seals such as "AlumaSeal CS Film."
</p>
<ul className="space-y-4">
{guidelines.map((guideline, idx) => (
<li key={idx} className="flex items-start">
<span
className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<p className="leading-relaxed" style={{ color: '#555555' }}>
{guideline.split('\n').map((line, lineIdx) => (
<React.Fragment key={lineIdx}>
{lineIdx > 0 && <br />}
{line.startsWith('(a)') || line.startsWith('(b)') ? (
<>
<span className="font-medium">{line.substring(0, 3)}</span>
{line.substring(3)}
</>
) : (
line
)}
</React.Fragment>
))}
</p>
</li>
))}
</ul>
</div>
</div>
);