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

change color

Browse Source
This commit is contained in:
Yanatchara JERAJA 2023-06-28 14:09:33 +07:00
parent 0c0143dd1c
commit 21b8e7f566
1 changed files with 139 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/App.jsx
View File

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