@@ -33,7 +33,6 @@ import ScanInput from '../scanInput/ScanInput';
33
33
import FormikSelect from '../forms/Select' ;
34
34
import { objectKeys , Position } from '../../lib/helpers' ;
35
35
import { FormikErrorMessage } from '../forms' ;
36
- import Table , { TableBody , TableHead , TableHeader } from '../Table' ;
37
36
38
37
type LabwarePlanProps = {
39
38
/**
@@ -223,39 +222,42 @@ const LabwarePlan = React.forwardRef<HTMLDivElement, LabwarePlanProps>(
223
222
) }
224
223
225
224
{ outputLabware . labwareType . name !== LabwareTypeName . FETAL_WASTE_CONTAINER && (
226
- < Table >
227
- < TableHead >
228
- < tr >
229
- < TableHeader > Slot</ TableHeader >
230
- < TableHeader > Section Thickness</ TableHeader >
231
- </ tr >
232
- </ TableHead >
233
- < TableBody >
234
- { outputLabware . slots . map ( ( slot , index ) => (
235
- < tr key = { index } >
236
- < td className = "text-center" > { slot . address } </ td >
237
- < td >
238
- < FormikInput
239
- className = "text-center focus:ring-sdb-100 focus:border-sdb-100 block border-gray-300 rounded-md disabled:opacity-75 disabled:cursor-not-allowed"
240
- label = { '' }
241
- disabled = { current . matches ( 'printing' ) || current . matches ( 'done' ) }
242
- name = { `sectionThickness[${ slot . address } ]` }
243
- data-testid = { `section-thickness-${ slot . address } ` }
244
- type = "number"
245
- min = { 0.5 }
246
- step = { 0.5 }
247
- onFocus = { ( ) => {
248
- setHighlightedSlots ( new Set ( [ slot . address ] ) ) ;
249
- } }
250
- onBlur = { ( ) => {
251
- setHighlightedSlots ( new Set ( ) ) ;
252
- } }
253
- />
254
- </ td >
255
- </ tr >
225
+ < div className = "p-4 space-y-2 space-x-2 bg-gray-100" >
226
+ < div className = { 'grid grid-cols-2 py-2 text-gray-500 text-center' } >
227
+ < div > Section Thickness</ div >
228
+ </ div >
229
+ < div className = { 'flex flex-col space-y-4' } >
230
+ { outputLabware . slots . map ( ( slot ) => (
231
+ < div key = { slot . address } className = "flex flex-row items-start justify-start gap-x-2" >
232
+ < span className = "font-medium text-gray-800 tracking-wide py-2" > { slot . address } </ span >
233
+ < FormikInput
234
+ className = "text-center focus:ring-sdb-100 focus:border-sdb-100 block border-gray-300 rounded-md disabled:opacity-75 disabled:cursor-not-allowed disabled:bg-gray-300"
235
+ label = { '' }
236
+ disabled = {
237
+ current . matches ( 'printing' ) ||
238
+ current . matches ( 'done' ) ||
239
+ ! current . context . layoutPlan . plannedActions . has ( slot . address )
240
+ }
241
+ name = {
242
+ current . context . layoutPlan . plannedActions . has ( slot . address )
243
+ ? `sectionThickness[${ slot . address } ]`
244
+ : 'sectionThickness'
245
+ }
246
+ data-testid = { `section-thickness` }
247
+ type = "number"
248
+ min = { 0.5 }
249
+ step = { 0.5 }
250
+ onFocus = { ( ) => {
251
+ setHighlightedSlots ( new Set ( [ slot . address ] ) ) ;
252
+ } }
253
+ onBlur = { ( ) => {
254
+ setHighlightedSlots ( new Set ( ) ) ;
255
+ } }
256
+ />
257
+ </ div >
256
258
) ) }
257
- </ TableBody >
258
- </ Table >
259
+ </ div >
260
+ </ div >
259
261
) }
260
262
</ div >
261
263
0 commit comments