Ignore:
Timestamp:
12/29/25 01:16:09 (6 months ago)
Author:
Mihail <mihail2.naumov@…>
Branches:
main
Children:
915ce0f
Parents:
8a7f936
Message:

Added styling to admin dashboard functions and highest ranking popup

File:
1 edited

Legend:

Unmodified
Added
Removed

  • pages/index/+Page.tsx

    r8a7f936 r5af32f0  
    11import React, {useEffect, useState} from 'react';
    22import {
    3     Container, Box, Typography, Button, Grid, IconButton, Dialog, DialogTitle, DialogContent
     3    Container, Box, Typography, Button, IconButton, Dialog, DialogTitle, DialogContent
    44} from '@mui/material';
    55import CloseIcon from '@mui/icons-material/Close';
    … …  
    108108                        },
    109109                        gap: 3,
    110                         width: '90%',
     110                        width: '100%',
     111                        mb: 8
    111112                    }}
    112113                >
    … …  
    124125                }}>
    125126                    <Typography variant="h4" fontWeight="bold" color="text.primary">Community Forge</Typography>
    126                     <Typography variant="subtitle1" color="text.secondary" sx={{mb: 2}}>Fresh builds from users around
    127                         the world.</Typography>
     127                    <Typography variant="subtitle1" color="text.secondary" sx={{mb: 2}}>Fresh builds from users around the world.</Typography>
    128128                </Box>
    129129                <Box
    … …  
    138138                        },
    139139                        gap: 3,
    140                         width: '90%',
     140                        width: '100%',
    141141                    }}
    142142                >
    … …  
    163163            />
    164164
    165             <Dialog open={openRankedPopup} onClose={() => setOpenRankedPopup(false)} maxWidth="xl" fullWidth
    166                     scroll="paper">
     165            <Dialog open={openRankedPopup} onClose={() => setOpenRankedPopup(false)} maxWidth="xl" fullWidth scroll="paper">
    167166                <DialogTitle sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
    168167                    Hall of Fame (Top Rated)
    169168                    <IconButton onClick={() => setOpenRankedPopup(false)}><CloseIcon/></IconButton>
    170169                </DialogTitle>
    171                 <DialogContent dividers>
    172                     <Grid container spacing={3} sx={{p: 1}}>
     170                <DialogContent dividers sx={{p: 3}}>
     171                    <Box
     172                        sx={{
     173                            display: 'grid',
     174                            gridTemplateColumns: {
     175                                xs: '1fr',
     176                                sm: 'repeat(2, 1fr)',
     177                                md: 'repeat(3, 1fr)',
     178                                lg: 'repeat(4, 1fr)',
     179                                xl: 'repeat(5, 1fr)',
     180                            },
     181                            gap: 3,
     182                            width: '100%'
     183                        }}
     184                    >
    173185                        {allRanked.map((build: any, index: number) => (
    174                             <Grid
    175                                 item
    176                                 xs={12}
    177                                 sm={6}
    178                                 md={3}
    179                                 key={`ranked-${build.id}`}
    180                                 sx={{display: 'flex'}}
    181                             >
    182                                 <Box sx={{position: 'relative', width: '100%', display: 'flex'}}>
    183                                     <Box sx={{
    184                                         position: 'absolute', top: -10, left: -10, zIndex: 1,
    185                                         width: 35, height: 35, borderRadius: '50%',
    186                                         bgcolor: index < 3 ? '#ff8201' : 'grey.800', color: 'white',
    187                                         display: 'flex', alignItems: 'center', justifyContent: 'center',
    188                                         fontWeight: 'bold', border: '2px solid white', boxShadow: 2
    189                                     }}>
    190                                         #{index + 1}
    191                                     </Box>
    192                                     <BuildCard
    193                                         build={build}
    194                                         onClick={() => {
    195                                             setOpenRankedPopup(false);
    196                                             setSelectedBuildId(build.id);
    197                                         }}
    198                                     />
     186                            <Box key={`ranked-${build.id}`} sx={{position: 'relative', width: '100%'}}>
     187                                <Box sx={{
     188                                    position: 'absolute',
     189                                    top: -10,
     190                                    left: -10,
     191                                    zIndex: 1,
     192                                    width: 35,
     193                                    height: 35,
     194                                    borderRadius: '50%',
     195                                    bgcolor: index < 3 ? '#ff8201' : 'grey.800',
     196                                    color: 'white',
     197                                    display: 'flex',
     198                                    alignItems: 'center',
     199                                    justifyContent: 'center',
     200                                    fontWeight: 'bold',
     201                                    border: '2px solid white',
     202                                    boxShadow: 2,
     203                                }}>
     204                                    #{index + 1}
    199205                                </Box>
    200                             </Grid>
     206                                <BuildCard
     207                                    build={build}
     208                                    onClick={() => {
     209                                        setOpenRankedPopup(false);
     210                                        setSelectedBuildId(build.id);
     211                                    }}
     212                                />
     213                            </Box>
    201214                        ))}
    202                     </Grid>
     215                    </Box>
    203216                </DialogContent>
    204217            </Dialog>
Note: See TracChangeset for help on using the changeset viewer.