Ignore:
Timestamp:
02/10/26 01:23:31 (5 months ago)
Author:
Mihail <mihail2.naumov@…>
Branches:
main
Children:
546a194
Parents:
b348db4
Message:

Optimizations & Layout/Text changes

File:
1 edited

Legend:

Unmodified
Added
Removed

  • components/ComponentDetailsDialog.tsx

    rb348db4 rf727252  
    22import {
    33    Dialog, DialogTitle, DialogContent, DialogActions, Button,
    4     Typography, Box, Grid, Chip, CircularProgress, IconButton,
     4    Typography, Box, Chip, CircularProgress, IconButton,
    55    Table, TableBody, TableCell, TableContainer, TableRow, Paper
    66} from '@mui/material';
    … …  
    9292            open={open}
    9393            onClose={onClose}
    94             maxWidth="lg"
    95             // fullWidth
     94            maxWidth="md"
     95            fullWidth
     96            scroll="body"
    9697            sx={{zIndex: 1400}}
    9798        >
    … …  
    116117            </DialogTitle>
    117118
    118             <DialogContent dividers>
     119            <DialogContent
     120                sx={{
     121                    p: 1,
     122                    overflow: 'visible'
     123                }}
     124            >
    119125                {loading ? (
    120126                    <Box sx={{display: 'flex', justifyContent: 'center', p: 5}}>
    … …  
    122128                    </Box>
    123129                ) : (
    124                     <Grid container spacing={4}>
    125                         <Grid item xs={12} md={4} sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
     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'}}>
    126142                            <Box
    127143                                component="img"
    128                                 // src={`https://placehold.co/400x400?text=${encodeURIComponent(displayData.name)}`}
    129144                                src={displayData.imgUrl}
    130145                                alt={displayData.name}
    … …  
    133148                                    maxHeight: 300,
    134149                                    objectFit: 'contain',
    135                                     mb: 2,
    136                                     // border: '1px solid #eee',
    137                                     // borderRadius: 2,
    138                                     p: 2
     150                                    mb: 1,
     151                                    mt: 7,
     152                                    p: 1
    139153                                }}
    140154                            />
    … …  
    144158                                sx={{fontWeight: 'bold'}}
    145159                            />
    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}}>
     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                            >
    151180                                Technical Specifications
    152181                            </Typography>
    153182
    154                             <TableContainer component={Paper} variant="outlined">
    155                                 <Table size="small">
     183                            <TableContainer
     184                                component={Paper}
     185                                variant="outlined"
     186                                sx={{
     187                                    maxWidth: '100%',
     188                                    width: '100%'
     189                                }}
     190                            >
     191                                <Table size="medium">
    156192                                    <TableBody>
    157193                                        <TableRow>
    158                                             <TableCell component="th" scope="row"
    159                                                        sx={{fontWeight: 'bold', width: '30%', bgcolor: '#1e1e1e'}}>
     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                                            >
    160205                                                Brand
    161206                                            </TableCell>
    162                                             <TableCell>{displayData.brand}</TableCell>
     207                                            <TableCell sx={{
     208                                                textAlign: 'center',
     209                                                px: 2,
     210                                                width: '50%'
     211                                            }}>
     212                                                {displayData.brand}
     213                                            </TableCell>
    163214                                        </TableRow>
    164215
    … …  
    168219                                            return (
    169220                                                <TableRow key={key}>
    170                                                     <TableCell component="th" scope="row" sx={{
    171                                                         fontWeight: 'bold',
    172                                                         width: '30%',
    173                                                         bgcolor: '#1e1e1e'
    174                                                     }}>
     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                                                    >
    175232                                                        {formatKey(key)}
    176233                                                    </TableCell>
    177                                                     <TableCell>{renderValue(key, val)}</TableCell>
     234                                                    <TableCell sx={{
     235                                                        textAlign: 'center',
     236                                                        px: 2,
     237                                                        width: '50%'
     238                                                    }}>
     239                                                        {renderValue(key, val)}
     240                                                    </TableCell>
    178241                                                </TableRow>
    179242                                            );
    … …  
    182245                                </Table>
    183246                            </TableContainer>
    184                             <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 0.5}}>
     247
     248                            <Box sx={{
     249                                display: 'flex',
     250                                justifyContent: 'center',
     251                                alignItems: 'center',
     252                                mt: 1,
     253                                width: '100%'
     254                            }}>
    185255                                <Typography variant="h4" color="primary.main" fontWeight="bold">
    186256                                    {formatMoney(displayData.price)}
    187257                                </Typography>
    188258                            </Box>
    189                         </Grid>
    190                     </Grid>
     259                        </Box>
     260                    </Box>
    191261                )}
    192262            </DialogContent>
    … …  
    198268                            color: 'white',
    199269                            borderColor: '#ff8201',
    200                             onHover: {backgroundColor: '#ba5d02', borderColor: '#ba5d02'}
     270                            '&:hover': {backgroundColor: '#ba5d02', borderColor: '#ba5d02'}
    201271                        }}
    202272                >Close</Button>
Note: See TracChangeset for help on using the changeset viewer.