add button styles
This commit is contained in:
nflnkr
parent
6b71828653
commit
06f55de0c3
12
index.html
12
index.html
@ -1,13 +1,17 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + React + TS</title>
|
<title>Vite + React + TS</title>
|
||||||
</head>
|
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
|
||||||
<body>
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
28
lib/components/PenaLink.tsx
Normal file
28
lib/components/PenaLink.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { Link, LinkProps, Typography, useTheme } from "@mui/material";
|
||||||
|
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
|
||||||
|
|
||||||
|
|
||||||
|
export function PenaLink(props: LinkProps) {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
const propsSx = props.sx;
|
||||||
|
delete props.sx;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
gap: "3px",
|
||||||
|
textUnderlinePosition: "under",
|
||||||
|
color: theme.palette.brightPurple.main,
|
||||||
|
textDecorationColor: theme.palette.brightPurple.main,
|
||||||
|
textUnderlineOffset: "3px",
|
||||||
|
...propsSx,
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<Typography variant="body2">{props.children}</Typography>
|
||||||
|
<ArrowForwardIcon sx={{ height: "20px", width: "20px" }} />
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -60,22 +60,53 @@ export const penaMuiTheme = createTheme({
|
|||||||
{
|
{
|
||||||
props: { variant: "pena-contained" },
|
props: { variant: "pena-contained" },
|
||||||
style: ({ theme }) => theme.unstable_sx({
|
style: ({ theme }) => theme.unstable_sx({
|
||||||
borderColor: theme.palette.brightPurple.main,
|
border: `1px solid ${theme.palette.brightPurple.main}`,
|
||||||
backgroundColor: theme.palette.brightPurple.main,
|
backgroundColor: theme.palette.brightPurple.main,
|
||||||
width: "180px",
|
minWidth: "180px",
|
||||||
paddingTop: "10px",
|
py: "9px",
|
||||||
paddingBottom: "10px",
|
|
||||||
borderRadius: "8px",
|
borderRadius: "8px",
|
||||||
boxShadow: "none",
|
boxShadow: "none",
|
||||||
// стили текста кнопки - нужны ли?
|
|
||||||
fontSize: "18px",
|
fontSize: "18px",
|
||||||
lineHeight: "24px",
|
lineHeight: "24px",
|
||||||
fontWeight: 400,
|
fontWeight: 400,
|
||||||
textTransform: "none",
|
textTransform: "none",
|
||||||
//
|
color: "white",
|
||||||
})
|
"&:hover": {
|
||||||
|
backgroundColor: "#944FEE",
|
||||||
|
},
|
||||||
|
"&:active": {
|
||||||
|
backgroundColor: "#FFFFFF",
|
||||||
|
color: theme.palette.brightPurple.main,
|
||||||
}
|
}
|
||||||
]
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
props: { variant: "pena-outlined" },
|
||||||
|
style: ({ theme }) => theme.unstable_sx({
|
||||||
|
border: `1px solid white`,
|
||||||
|
backgroundColor: "rgb(0 0 0 / 0)",
|
||||||
|
minWidth: "180px",
|
||||||
|
py: "9px",
|
||||||
|
borderRadius: "8px",
|
||||||
|
boxShadow: "none",
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "24px",
|
||||||
|
fontWeight: 400,
|
||||||
|
textTransform: "none",
|
||||||
|
color: "white",
|
||||||
|
"&:hover": {
|
||||||
|
backgroundColor: "#252734",
|
||||||
|
},
|
||||||
|
"&:active": {
|
||||||
|
backgroundColor: theme.palette.brightPurple.main,
|
||||||
|
borderColor: theme.palette.brightPurple.main,
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
defaultProps: {
|
||||||
|
disableTouchRipple: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
MuiTypography: {
|
MuiTypography: {
|
||||||
defaultProps: {
|
defaultProps: {
|
||||||
@ -84,12 +115,66 @@ export const penaMuiTheme = createTheme({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
|
typography: {
|
||||||
|
h5: {
|
||||||
|
fontSize: "24px",
|
||||||
|
lineHeight: "28.44px",
|
||||||
|
fontWeight: 500,
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "24px",
|
||||||
|
fontWeight: 400,
|
||||||
|
textTransform: "none",
|
||||||
|
},
|
||||||
|
body1: {
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "21.33px",
|
||||||
|
fontWeight: 400,
|
||||||
|
},
|
||||||
|
body2: {
|
||||||
|
fontSize: "16px",
|
||||||
|
lineHeight: "20px",
|
||||||
|
fontWeight: 500,
|
||||||
|
},
|
||||||
|
p1: {
|
||||||
|
fontSize: "20px",
|
||||||
|
lineHeight: "24px",
|
||||||
|
fontWeight: 500,
|
||||||
|
},
|
||||||
|
price: {
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: "20px",
|
||||||
|
lineHeight: "24px",
|
||||||
|
color: "#4D4D4D",
|
||||||
|
},
|
||||||
|
oldPrice: {
|
||||||
|
fontWeight: 400,
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "21px",
|
||||||
|
textDecorationLine: "line-through",
|
||||||
|
color: "#FB5607",
|
||||||
|
},
|
||||||
|
fontFamily: [
|
||||||
|
"Rubik",
|
||||||
|
"-apple-system",
|
||||||
|
"BlinkMacSystemFont",
|
||||||
|
'"Segoe UI"',
|
||||||
|
'"Helvetica Neue"',
|
||||||
|
"Arial",
|
||||||
|
"sans-serif",
|
||||||
|
'"Apple Color Emoji"',
|
||||||
|
'"Segoe UI Emoji"',
|
||||||
|
'"Segoe UI Symbol"',
|
||||||
|
].join(","),
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
declare module '@mui/material/Button' {
|
declare module '@mui/material/Button' {
|
||||||
interface ButtonPropsVariantOverrides {
|
interface ButtonPropsVariantOverrides {
|
||||||
"pena-contained": true;
|
"pena-contained": true;
|
||||||
|
"pena-outlined": true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -35,6 +35,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@emotion/react": "^11.11.1",
|
"@emotion/react": "^11.11.1",
|
||||||
"@emotion/styled": "^11.11.0",
|
"@emotion/styled": "^11.11.0",
|
||||||
|
"@mui/icons-material": "^5.14.3",
|
||||||
"@mui/material": "^5.14.4",
|
"@mui/material": "^5.14.4",
|
||||||
"@types/node": "^20.5.0",
|
"@types/node": "^20.5.0",
|
||||||
"@types/react-dom": "^18.2.7",
|
"@types/react-dom": "^18.2.7",
|
||||||
@ -47,6 +48,7 @@
|
|||||||
"eslint-plugin-react-refresh": "^0.4.3",
|
"eslint-plugin-react-refresh": "^0.4.3",
|
||||||
"eslint": "^8.45.0",
|
"eslint": "^8.45.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
"typescript": "^5.0.2",
|
"typescript": "^5.0.2",
|
||||||
"vite-plugin-dts": "^3.5.2",
|
"vite-plugin-dts": "^3.5.2",
|
||||||
"vite": "^4.4.5",
|
"vite": "^4.4.5",
|
||||||
@ -55,6 +57,7 @@
|
|||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@emotion/react": "^11.11.1",
|
"@emotion/react": "^11.11.1",
|
||||||
"@emotion/styled": "^11.11.0",
|
"@emotion/styled": "^11.11.0",
|
||||||
|
"@mui/icons-material": "^5.14.3",
|
||||||
"@mui/material": "^5.14.4",
|
"@mui/material": "^5.14.4",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
|
|||||||
36
src/App.tsx
36
src/App.tsx
@ -1,23 +1,27 @@
|
|||||||
import { useState } from 'react';
|
import { Box, Button, Container, Typography } from "@mui/material";
|
||||||
|
import { PenaLink } from "../lib/components/PenaLink";
|
||||||
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [count, setCount] = useState(0);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Box sx={{
|
||||||
<h1>Vite + React</h1>
|
backgroundColor: "#333647",
|
||||||
<div className="card">
|
minHeight: "100dvh",
|
||||||
<button onClick={() => setCount((count) => count + 1)}>
|
width: "100%",
|
||||||
count is {count}
|
}}>
|
||||||
</button>
|
<Container sx={{
|
||||||
<p>
|
py: 4,
|
||||||
Edit <code>src/App.tsx</code> and save to test HMR
|
display: "flex",
|
||||||
</p>
|
flexDirection: "column",
|
||||||
</div>
|
gap: 2,
|
||||||
<p className="read-the-docs">
|
alignItems: "start",
|
||||||
Click on the Vite and React logos to learn more
|
}}>
|
||||||
</p>
|
<Button variant="pena-outlined">Личный кабинет</Button>
|
||||||
</>
|
<Button variant="pena-contained">Подробнее</Button>
|
||||||
|
<PenaLink>Подробнее</PenaLink>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +1,14 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
import App from './App.tsx';
|
import App from './App.tsx';
|
||||||
|
import { CssBaseline, ThemeProvider } from '@mui/material';
|
||||||
|
import { penaMuiTheme } from '../lib/index.ts';
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
|
<ThemeProvider theme={penaMuiTheme}>
|
||||||
|
<CssBaseline />
|
||||||
<App />
|
<App />
|
||||||
|
</ThemeProvider>
|
||||||
</React.StrictMode>,
|
</React.StrictMode>,
|
||||||
);
|
);
|
||||||
|
|||||||
@ -581,6 +581,13 @@
|
|||||||
resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.4.tgz#a517265647ee9660170107d68905db5e400576c5"
|
resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.4.tgz#a517265647ee9660170107d68905db5e400576c5"
|
||||||
integrity sha512-pW2XghSi3hpYKX57Wu0SCWMTSpzvXZmmucj3TcOJWaCiFt4xr05w2gcwBZi36dAp9uvd9//9N51qbblmnD+GPg==
|
integrity sha512-pW2XghSi3hpYKX57Wu0SCWMTSpzvXZmmucj3TcOJWaCiFt4xr05w2gcwBZi36dAp9uvd9//9N51qbblmnD+GPg==
|
||||||
|
|
||||||
|
"@mui/icons-material@^5.14.3":
|
||||||
|
version "5.14.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.3.tgz#26a84d52ab2fceea2856adf7a139527b3a51ae90"
|
||||||
|
integrity sha512-XkxWPhageu1OPUm2LWjo5XqeQ0t2xfGe8EiLkRW9oz2LHMMZmijvCxulhgquUVTF1DnoSh+3KoDLSsoAFtVNVw==
|
||||||
|
dependencies:
|
||||||
|
"@babel/runtime" "^7.22.6"
|
||||||
|
|
||||||
"@mui/material@^5.14.4":
|
"@mui/material@^5.14.4":
|
||||||
version "5.14.4"
|
version "5.14.4"
|
||||||
resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.4.tgz#9d4d1834a929a4acc59e550e34ca64c0fd60b3a6"
|
resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.4.tgz#9d4d1834a929a4acc59e550e34ca64c0fd60b3a6"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user