sosokker/SOS12
1
0
Fork 0
mirror of https://github.com/Sosokker/SOS12.git synced 2025-12-22 22:24:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #2 from Sosokker/styles

Browse Source 
change color
This commit is contained in:
Yanatchara Jeraja 2023-06-28 14:11:00 +07:00 committed by GitHub
commit 63cb7e2b5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 139 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/App.jsx
View File

@ -13,11 +13,11 @@ import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container'; import Container from '@mui/material/Container';
import Link from '@mui/material/Link'; import Link from '@mui/material/Link';
import { createTheme, ThemeProvider } from '@mui/material/styles'; import {createTheme, ThemeProvider} from '@mui/material/styles';
function Copyright() { function Copyright() {
return ( return (
<Typography variant="body2" color="text.secondary" align="center"> <Typography variant="body2" color="#5585A4" align="center">
{'Copyright © '} {'Copyright © '}
<Link color="inherit" href="https://mui.com/"> <Link color="inherit" href="https://mui.com/">
Your Website Your Website
@ -35,8 +35,12 @@ const defaultTheme = createTheme();
export default function App() { export default function App() {
return ( return (
<ThemeProvider theme={defaultTheme}> <ThemeProvider theme={defaultTheme}>
<CssBaseline /> <CssBaseline/>
<AppBar position="relative"> <AppBar position="relative"
sx={{
bgcolor: '#161E29',
}}
>
<Toolbar> <Toolbar>
<Typography variant="h6" color="inherit" noWrap> <Typography variant="h6" color="inherit" noWrap>
Album layout Album layout
@ -47,7 +51,7 @@ export default function App() {
{/* Hero unit */} {/* Hero unit */}
<Box <Box
sx={{ sx={{
bgcolor: 'background.paper', bgcolor: '#0A0E1A',
pt: 8, pt: 8,
pb: 6, pb: 6,
}} }}
@ -57,28 +61,47 @@ export default function App() {
component="h1" component="h1"
variant="h2" variant="h2"
align="center" align="center"
color="text.primary" color="#7DD6F6"
gutterBottom gutterBottom
> >
SOS12 SOS12
</Typography> </Typography>
<Typography variant="h5" align="center" color="text.secondary" paragraph> <Typography variant="h5" align="center" color="aliceblue" paragraph>
Something short and leading about the collection below—its contents, Something short and leading about the collection below—its contents,
the creator, etc. Make it short and sweet, but not too short so folks the creator, etc. Make it short and sweet, but not too short so folks
don&apos;t simply skip over it entirely. don&apos;t simply skip over it entirely.
</Typography> </Typography>
<Stack <Stack
sx={{ pt: 4 }} sx={{pt: 4}}
direction="row" direction="row"
spacing={2} spacing={2}
justifyContent="center" justifyContent="center"
> >
<Button variant="contained">Main call to action</Button> <Button variant="contained"
<Button variant="outlined">Secondary action</Button> sx={{
bgcolor: '#5585A4',
":hover": {
bgcolor: '#69ACCD',
}
}}
>Main call to action</Button>
<Button variant="outlined"
sx={{
color: '#69ACCD',
borderColor: '#69ACCD',
":hover": {
borderColor: 'aliceblue',
}
}}
>Secondary action</Button>
</Stack> </Stack>
</Container> </Container>
</Box> </Box>
<Container sx={{ py: 8 }} maxWidth="md"> <Container
sx={{
py: 8,
bgcolor: '#0A0E1A',
}} maxWidth="fit-content">
{/* End hero unit */} {/* End hero unit */}
<Grid container spacing={4}> <Grid container spacing={4}>
@ -86,7 +109,12 @@ export default function App() {
{cards.map((card) => ( {cards.map((card) => (
<Grid item key={card} xs={12} sm={6} md={4}> <Grid item key={card} xs={12} sm={6} md={4}>
<Card <Card
sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} sx={{
height: '100%',
display: 'flex',
flexDirection: 'column',
bgcolor: '#2B3E52'
}}
> >
<CardMedia <CardMedia
component="div" component="div"
@ -96,17 +124,19 @@ export default function App() {
}} }}
image="https://source.unsplash.com/random?wallpapers" image="https://source.unsplash.com/random?wallpapers"
/> />
<CardContent sx={{ flexGrow: 1 }}> <CardContent sx={{flexGrow: 1}}>
<Typography gutterBottom variant="h5" component="h2"> <Typography gutterBottom variant="h5" component="h2"
color="#7DD6F6">
Jode1 Jode1
</Typography> </Typography>
<Typography> <Typography color="aliceblue">
This is a media card. You can use this section to describe the This is a media card. You can use this section to
describe the
content. content.
</Typography> </Typography>
</CardContent> </CardContent>
<CardActions> <CardActions>
<Button size="small">View</Button> <Button size="small" sx={{color: "#69ACCD"}}>View</Button>
<Button size="small">Edit</Button> <Button size="small">Edit</Button>
</CardActions> </CardActions>
</Card> </Card>
@ -117,19 +147,20 @@ export default function App() {
</Container> </Container>
</main> </main>
{/* Footer */} {/* Footer */}
<Box sx={{ bgcolor: 'background.paper', p: 6 }} component="footer"> <Box sx={{bgcolor: '#161E29', p: 6}} component="footer">
<Typography variant="h6" align="center" gutterBottom> <Typography variant="h6" align="center" gutterBottom
sx={{color: "aliceblue"}}>
Footer Footer
</Typography> </Typography>
<Typography <Typography
variant="subtitle1" variant="subtitle1"
align="center" align="center"
color="text.secondary" color="aliceblue"
component="p" component="p"
> >
Something here to give the footer a purpose! Something here to give the footer a purpose!
</Typography> </Typography>
<Copyright /> <Copyright/>
</Box> </Box>
{/* End footer */} {/* End footer */}
</ThemeProvider> </ThemeProvider>