add button styles

2023-08-14 17:09:38 +03:00 · 2023-08-14 17:09:38 +03:00 · 06f55de0c3
commit 06f55de0c3
parent 6b71828653
7 changed files with 167 additions and 31 deletions
--- a/index.html
+++ b/index.html
@ -1,13 +1,17 @@
 <!doctype html>
 <html lang="en">
-  <head>
+
+<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
-  </head>
-  <body>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
+</head>
+
+<body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
-  </body>
+</body>
+
 </html>
--- a/lib/components/PenaLink.tsx
+++ b/lib/components/PenaLink.tsx
@ -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>
+    );
+}
--- a/lib/components/theme.ts
+++ b/lib/components/theme.ts
@ -60,22 +60,53 @@ export const penaMuiTheme = createTheme({
                {
                    props: { variant: "pena-contained" },
                    style: ({ theme }) => theme.unstable_sx({
-                        borderColor: theme.palette.brightPurple.main,
+                        border: `1px solid ${theme.palette.brightPurple.main}`,
                        backgroundColor: theme.palette.brightPurple.main,
-                        width: "180px",
-                        paddingTop: "10px",
-                        paddingBottom: "10px",
+                        minWidth: "180px",
+                        py: "9px",
                        borderRadius: "8px",
                        boxShadow: "none",
-                        // стили текста кнопки - нужны ли?
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        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: {
            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' {
    interface ButtonPropsVariantOverrides {
        "pena-contained": true;
+        "pena-outlined": true;
    }
 }

--- a/package.json
+++ b/package.json
@ -35,6 +35,7 @@
    "devDependencies": {
        "@emotion/react": "^11.11.1",
        "@emotion/styled": "^11.11.0",
+        "@mui/icons-material": "^5.14.3",
        "@mui/material": "^5.14.4",
        "@types/node": "^20.5.0",
        "@types/react-dom": "^18.2.7",
@ -47,6 +48,7 @@
        "eslint-plugin-react-refresh": "^0.4.3",
        "eslint": "^8.45.0",
        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
        "typescript": "^5.0.2",
        "vite-plugin-dts": "^3.5.2",
        "vite": "^4.4.5",
@ -55,6 +57,7 @@
    "peerDependencies": {
        "@emotion/react": "^11.11.1",
        "@emotion/styled": "^11.11.0",
+        "@mui/icons-material": "^5.14.3",
        "@mui/material": "^5.14.4",
        "axios": "^1.4.0",
        "react": "^18.2.0",
--- a/src/App.tsx
+++ b/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() {
-    const [count, setCount] = useState(0);

    return (
-        <>
-            <h1>Vite + React</h1>
-            <div className="card">
-                <button onClick={() => setCount((count) => count + 1)}>
-                    count is {count}
-                </button>
-                <p>
-                    Edit <code>src/App.tsx</code> and save to test HMR
-                </p>
-            </div>
-            <p className="read-the-docs">
-                Click on the Vite and React logos to learn more
-            </p>
-        </>
+        <Box sx={{
+            backgroundColor: "#333647",
+            minHeight: "100dvh",
+            width: "100%",
+        }}>
+            <Container sx={{
+                py: 4,
+                display: "flex",
+                flexDirection: "column",
+                gap: 2,
+                alignItems: "start",
+            }}>
+                <Button variant="pena-outlined">Личный кабинет</Button>
+                <Button variant="pena-contained">Подробнее</Button>
+                <PenaLink>Подробнее</PenaLink>
+            </Container>
+        </Box>
    );
 }

--- a/src/main.tsx
+++ b/src/main.tsx
@ -1,9 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { penaMuiTheme } from '../lib/index.ts';

 ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
-        <App />
+        <ThemeProvider theme={penaMuiTheme}>
+            <CssBaseline />
+            <App />
+        </ThemeProvider>
    </React.StrictMode>,
 );
--- a/yarn.lock
+++ b/yarn.lock
@ -581,6 +581,13 @@
  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.4.tgz#a517265647ee9660170107d68905db5e400576c5"
  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":
  version "5.14.4"
  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.4.tgz#9d4d1834a929a4acc59e550e34ca64c0fd60b3a6"