Ignore:
File:
1 edited

Legend:

Unmodified
Added
Removed

  • components/ComponentDetailsDialog.tsx

    rf727252 r8a7f936  
    22import {
    33    Dialog, DialogTitle, DialogContent, DialogActions, Button,
    4     Typography, Box, Chip, CircularProgress, IconButton,
     4    Typography, Box, Grid, Chip, CircularProgress, IconButton,
    55    Table, TableBody, TableCell, TableContainer, TableRow, Paper
    66} from '@mui/material';
    … …  
    9292            open={open}
    9393            onClose={onClose}
    94             maxWidth="md"
    95             fullWidth
    96             scroll="body"
     94            maxWidth="lg"
     95            // fullWidth
    9796            sx={{zIndex: 1400}}
    9897        >
    … …  
    117116            </DialogTitle>
    118117
    119             <DialogContent
    120                 sx={{
    121                     p: 1,
    122                     overflow: 'visible'
    123                 }}
    124             >
     118            <DialogContent dividers>
    125119                {loading ? (
    126120                    <Box sx={{display: 'flex', justifyContent: 'center', p: 5}}>
    … …  
    128122                    </Box>
    129123                ) : (
    130                     <Box
    131                         sx={{
    132                             display: 'grid',
    133                             gridTemplateColumns: {
    134                                 xs: '1fr',
    135                                 md: '1fr 1fr'
    136                             },
    137                             gap: 4,
    138                             width: '100%'
    139                         }}
    140                     >
    141                         <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
     124                    <Grid container spacing={4}>
     125                        <Grid item xs={12} md={4} sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
    142126                            <Box
    143127                                component="img"
     128                                // src={`https://placehold.co/400x400?text=${encodeURIComponent(displayData.name)}`}
    144129                                src={displayData.imgUrl}
    145130                                alt={displayData.name}
    … …  
    148133                                    maxHeight: 300,
    149134                                    objectFit: 'contain',
    150                                     mb: 1,
    151                                     mt: 7,
    152                                     p: 1
     135                                    mb: 2,
     136                                    // border: '1px solid #eee',
     137                                    // borderRadius: 2,
     138                                    p: 2
    153139                                }}
    154140                            />
    … …  
    158144                                sx={{fontWeight: 'bold'}}
    159145                            />
    160                         </Box>
    161 
    162                         <Box sx={{
    163                             display: 'flex',
    164                             flexDirection: 'column',
    165                             alignItems: 'center',
    166                             width: '70%'
    167                         }}>
    168                             <Typography
    169                                 variant="subtitle1"
    170                                 fontWeight="bold"
    171                                 gutterBottom
    172                                 sx={{
    173                                     borderBottom: '2px solid #ff8201',
    174                                     mb: 1,
    175                                     mt: 1,
    176                                     textAlign: 'center',
    177                                     width: '100%'
    178                                 }}
    179                             >
     146                        </Grid>
     147
     148                        <Grid item xs={12} md={8}>
     149                            <Typography variant="subtitle1" fontWeight="bold" gutterBottom
     150                                        sx={{borderBottom: '2px solid #ff8201', display: 'inline-block', mb: 0.5}}>
    180151                                Technical Specifications
    181152                            </Typography>
    182153
    183                             <TableContainer
    184                                 component={Paper}
    185                                 variant="outlined"
    186                                 sx={{
    187                                     maxWidth: '100%',
    188                                     width: '100%'
    189                                 }}
    190                             >
    191                                 <Table size="medium">
     154                            <TableContainer component={Paper} variant="outlined">
     155                                <Table size="small">
    192156                                    <TableBody>
    193157                                        <TableRow>
    194                                             <TableCell
    195                                                 component="th"
    196                                                 scope="row"
    197                                                 sx={{
    198                                                     fontWeight: 'bold',
    199                                                     width: '50%',
    200                                                     bgcolor: '#1e1e1e',
    201                                                     textAlign: 'center',
    202                                                     px: 2
    203                                                 }}
    204                                             >
     158                                            <TableCell component="th" scope="row"
     159                                                       sx={{fontWeight: 'bold', width: '30%', bgcolor: '#1e1e1e'}}>
    205160                                                Brand
    206161                                            </TableCell>
    207                                             <TableCell sx={{
    208                                                 textAlign: 'center',
    209                                                 px: 2,
    210                                                 width: '50%'
    211                                             }}>
    212                                                 {displayData.brand}
    213                                             </TableCell>
     162                                            <TableCell>{displayData.brand}</TableCell>
    214163                                        </TableRow>
    215164
    … …  
    219168                                            return (
    220169                                                <TableRow key={key}>
    221                                                     <TableCell
    222                                                         component="th"
    223                                                         scope="row"
    224                                                         sx={{
    225                                                             fontWeight: 'bold',
    226                                                             width: '50%',
    227                                                             bgcolor: '#1e1e1e',
    228                                                             textAlign: 'center',
    229                                                             px: 2
    230                                                         }}
    231                                                     >
     170                                                    <TableCell component="th" scope="row" sx={{
     171                                                        fontWeight: 'bold',
     172                                                        width: '30%',
     173                                                        bgcolor: '#1e1e1e'
     174                                                    }}>
    232175                                                        {formatKey(key)}
    233176                                                    </TableCell>
    234                                                     <TableCell sx={{
    235                                                         textAlign: 'center',
    236                                                         px: 2,
    237                                                         width: '50%'
    238                                                     }}>
    239                                                         {renderValue(key, val)}
    240                                                     </TableCell>
     177                                                    <TableCell>{renderValue(key, val)}</TableCell>
    241178                                                </TableRow>
    242179                                            );
    … …  
    245182                                </Table>
    246183                            </TableContainer>
    247 
    248                             <Box sx={{
    249                                 display: 'flex',
    250                                 justifyContent: 'center',
    251                                 alignItems: 'center',
    252                                 mt: 1,
    253                                 width: '100%'
    254                             }}>
     184                            <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 0.5}}>
    255185                                <Typography variant="h4" color="primary.main" fontWeight="bold">
    256186                                    {formatMoney(displayData.price)}
    257187                                </Typography>
    258188                            </Box>
    259                         </Box>
    260                     </Box>
     189                        </Grid>
     190                    </Grid>
    261191                )}
    262192            </DialogContent>
    … …  
    268198                            color: 'white',
    269199                            borderColor: '#ff8201',
    270                             '&:hover': {backgroundColor: '#ba5d02', borderColor: '#ba5d02'}
     200                            onHover: {backgroundColor: '#ba5d02', borderColor: '#ba5d02'}
    271201                        }}
    272202                >Close</Button>
Note: See TracChangeset for help on using the changeset viewer.