diff --git a/index.html b/index.html index 6c5c04d..3b1a22b 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@ <link rel="apple-touch-icon" href="/logo192.png" /> <link rel="manifest" href="/manifest.json" /> <script type="module" src="/src/index.jsx"></script> - <title>haslo.ch - Homegrown Techno from Bern, Switzerland</title> + <title>haslo.ch - Techno and Plugins from Bern, Switzerland</title> </head> <body> <!-- hallo musti --> diff --git a/src/pages/plugins/Destruktor.jsx b/src/pages/plugins/Destruktor.jsx index f07ad11..0fcb2dc 100644 --- a/src/pages/plugins/Destruktor.jsx +++ b/src/pages/plugins/Destruktor.jsx @@ -1,11 +1,16 @@ import * as React from "react"; import {Box, CardMedia, Typography} from "@mui/material"; +import {PriceStamp} from "./PriceStamp"; export function Destruktor({plugin_link}) { return ( <> <Box sx={{position: 'relative', marginBottom: '30px'}}> + <PriceStamp + color={'#243667'} + price={'$10'} + /> <a href={plugin_link}> <CardMedia component="img" diff --git a/src/pages/plugins/Haaschen.jsx b/src/pages/plugins/Haaschen.jsx index 1d80936..f0a8dcc 100644 --- a/src/pages/plugins/Haaschen.jsx +++ b/src/pages/plugins/Haaschen.jsx @@ -2,13 +2,16 @@ import * as React from "react"; import {Box, CardMedia, Typography} from "@mui/material"; -import {FreeStamp} from "./FreeStamp"; +import {PriceStamp} from "./PriceStamp"; export function Haaschen({plugin_link}) { return ( <> <Box sx={{position: 'relative', marginBottom: '30px'}}> - <FreeStamp/> + <PriceStamp + color={'#f50057'} + price={'FREE'} + /> <a href={plugin_link}> <CardMedia component="img" diff --git a/src/pages/plugins/Ploink.jsx b/src/pages/plugins/Ploink.jsx index 7dd05c0..809c716 100644 --- a/src/pages/plugins/Ploink.jsx +++ b/src/pages/plugins/Ploink.jsx @@ -2,13 +2,16 @@ import * as React from "react"; import {Box, CardMedia, Typography} from "@mui/material"; -import {FreeStamp} from "./FreeStamp"; +import {PriceStamp} from "./PriceStamp"; export function Ploink({plugin_link}) { return ( <> <Box sx={{position: 'relative', marginBottom: '30px'}}> - <FreeStamp/> + <PriceStamp + color={'#f50057'} + price={'FREE'} + /> <a href={plugin_link}> <CardMedia component="img" diff --git a/src/pages/plugins/FreeStamp.jsx b/src/pages/plugins/PriceStamp.jsx similarity index 85% rename from src/pages/plugins/FreeStamp.jsx rename to src/pages/plugins/PriceStamp.jsx index 9f03cb7..763bea5 100644 --- a/src/pages/plugins/FreeStamp.jsx +++ b/src/pages/plugins/PriceStamp.jsx @@ -2,7 +2,7 @@ import * as React from "react"; import {Box, Typography} from "@mui/material"; -export function FreeStamp() { +export function PriceStamp({color, price}) { return ( <> <Box @@ -10,7 +10,7 @@ export function FreeStamp() { position: 'absolute', top: 10, right: 10, - backgroundColor: '#f50057', + backgroundColor: color, color: 'white', borderRadius: '50%', width: 80, @@ -19,7 +19,7 @@ export function FreeStamp() { justifyContent: 'center', alignItems: 'center', transform: 'rotate(15deg)', - boxShadow: '0 0 0 5px #f50057', + boxShadow: `0 0 0 5px ${color}`, '&::before': { content: '""', position: 'absolute', @@ -33,7 +33,7 @@ export function FreeStamp() { }} > <Typography variant="subtitle1" fontWeight="bold"> - FREE + {price} </Typography> </Box> </> diff --git a/src/shared/SearchAppBar.jsx b/src/shared/SearchAppBar.jsx index b0543f8..b127142 100644 --- a/src/shared/SearchAppBar.jsx +++ b/src/shared/SearchAppBar.jsx @@ -68,7 +68,7 @@ export function SearchAppBar({setSearchQuery, searchEventSent, setSearchEventSen sx={{flexGrow: 1, display: {xs: 'block', sm: 'block'}}} > <a href='/public' style={{textDecoration: 'none', color: 'white'}}> - haslo.ch - Homegrown Techno from Bern, Switzerland + haslo.ch - Techno and Plugins from Bern, Switzerland </a> </Typography> {searchIsPending ? <CircularProgress/> : <></>}