From 8bcd3967950d38c6726ae1855e34e5dd40a19fab Mon Sep 17 00:00:00 2001
From: nflnkr <105123049+nflnkr@users.noreply.github.com>
Date: Thu, 17 Nov 2022 23:56:17 +0300
Subject: [PATCH] use styled for custom button

---
 src/components/Button.tsx           | 39 ++++++++++-------------------
 src/components/landing/Section1.tsx |  2 +-
 src/components/landing/Section5.tsx | 12 ++++-----
 3 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 606c4a6..2281d16 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,32 +1,19 @@
-import { Button as DefaultButton } from "@mui/material";
+import { Button as DefaultButton, styled } from "@mui/material";
+import { ButtonProps } from "@mui/material/Button";
 
 
 interface Props {
-    fullWidth?: boolean;
     backgroundColor?: string;
-    color?: string;
-    variant: "outlined" | "contained";
-    children: React.ReactNode;
+    textColor?: string;
 }
 
-export default function Button({ fullWidth = false, backgroundColor, color, variant, children }: Props) {
-
-    return (
-        <div>
-            <DefaultButton
-                fullWidth={fullWidth}
-                variant={variant}
-                sx={{
-                    backgroundColor,
-                    color,
-                    borderRadius: "8px",
-                    px: "41.5px",
-                    py: "9px",
-                    boxShadow: "none",
-                }}
-            >
-                {children}
-            </DefaultButton>
-        </div>
-    );
-}
+export default styled(DefaultButton)<ButtonProps & Props>(props => ({
+    paddingLeft: "41.5px",
+    paddingRight: "41.5px",
+    paddingTop: "9px",
+    paddingBottom: "9px",
+    borderRadius: "8px",
+    backgroundColor: props.backgroundColor,
+    color: props.textColor,
+    boxShadow: "none",
+}));
diff --git a/src/components/landing/Section1.tsx b/src/components/landing/Section1.tsx
index 6404888..a8974db 100644
--- a/src/components/landing/Section1.tsx
+++ b/src/components/landing/Section1.tsx
@@ -74,7 +74,7 @@ export default function Section1() {
                 <Button
                     variant="contained"
                     backgroundColor={theme.palette.custom.brightPurple.main}
-                    color={theme.palette.primary.main}
+                    textColor={theme.palette.primary.main}
                 >Подробнее</Button>
             </Box>
         </SectionWrapper>
diff --git a/src/components/landing/Section5.tsx b/src/components/landing/Section5.tsx
index 6ff2908..15298a7 100644
--- a/src/components/landing/Section5.tsx
+++ b/src/components/landing/Section5.tsx
@@ -1,5 +1,5 @@
-import { Box,  Typography, useTheme } from "@mui/material";
-import Button from "../Button";
+import { Box, Typography, useTheme } from "@mui/material";
+import CustomButton from "../Button";
 import SectionWrapper from "../SectionWrapper";
 
 
@@ -36,14 +36,14 @@ export default function Section5() {
                         }}
                     >
                         {/** extract buttons as components */}
-                        <Button
+                        <CustomButton
                             fullWidth
                             variant="outlined"
-                        >Подробнее</Button>
-                        <Button
+                        >Подробнее</CustomButton>
+                        <CustomButton
                             fullWidth
                             variant="contained"
-                        >Подробнее</Button>
+                        >Подробнее</CustomButton>
                     </Box>
                 </Box>
                 <Box