add styles refactor

protofire · Sep 28, 2023 · f436e5b · f436e5b
1 parent c4e5182
commit f436e5b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 38 deletions.
diff --git a/src/view/components/HomeButton/CustomContract.tsx b/src/view/components/HomeButton/CustomContract.tsx
@@ -1,51 +1,15 @@
 import * as React from 'react'
-import { styled } from '@mui/material/styles'
-import Button, { ButtonProps } from '@mui/material/Button'
-import Stack from '@mui/material/Stack'
+import { WrapperButton } from './styled'
+import { Typography, Stack, ButtonProps } from '@mui/material'
 
 import Image from 'next/image'
-import { Typography } from '@mui/material'
-
 interface Props extends ButtonProps {
   title: string
   subtitle: string
   imgPath: string
   imgProps: { width?: number; height?: number }
 }
 
-const WrapperButton = styled(Button)<ButtonProps>(({ theme }) => ({
-  color: 'white',
-  fontSize: '1.4rem',
-  borderRadius: '1rem',
-  width: '100%',
-  backgroundColor: 'transparent',
-  display: 'flex',
-  alignItems: 'center',
-  margin: '0',
-  position: 'relative',
-  padding: '1.5rem',
-  border: 'solid 1px transparent',
-  backgroundImage:
-    'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(180deg, #B214AC, #8C7524)',
-  backgroundOrigin: 'border-box',
-  backgroundClip: 'content-box, border-box',
-  boxShadow: '2px 1000px 1px #0D0E13 inset',
-  [theme.breakpoints.down('sm')]: {
-    width: '100%',
-    margin: '0.5rem !important',
-    padding: '1.3rem'
-  },
-
-  '&:hover': {
-    backgroundImage:
-      'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #ffffff, #ffb7ff)',
-    backgroundOrigin: 'border-box',
-    backgroundClip: 'content-box, border-box',
-    boxShadow:
-      '2px 1000px 1px #11121a inset, 0 4px 20px 2px rgba(241, 83, 255, 0.25)'
-  }
-}))
-
 export const HomeButtonCustom = (props: Props) => {
   const { title, subtitle, imgProps, imgPath, ...restProps } = props
 

diff --git a/src/view/components/HomeButton/styled.ts b/src/view/components/HomeButton/styled.ts
@@ -0,0 +1,35 @@
+import { styled } from '@mui/material/styles'
+import Button, { ButtonProps } from '@mui/material/Button'
+
+export const WrapperButton = styled(Button)<ButtonProps>(({ theme }) => ({
+  color: 'white',
+  fontSize: '1.4rem',
+  borderRadius: '1rem',
+  width: '100%',
+  backgroundColor: 'transparent',
+  display: 'flex',
+  alignItems: 'center',
+  margin: '0',
+  position: 'relative',
+  padding: '1.5rem',
+  border: 'solid 1px transparent',
+  backgroundImage:
+    'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #B214AC, #2EB5FD)',
+  backgroundOrigin: 'border-box',
+  backgroundClip: 'content-box, border-box',
+  boxShadow: '2px 1000px 1px #0D0E13 inset',
+  [theme.breakpoints.down('sm')]: {
+    width: '100%',
+    margin: '0.5rem !important',
+    padding: '1.3rem'
+  },
+
+  '&:hover': {
+    backgroundImage:
+      'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #ffffff, #ffb7ff)',
+    backgroundOrigin: 'border-box',
+    backgroundClip: 'content-box, border-box',
+    boxShadow:
+      '2px 1000px 1px #11121a inset, 0 4px 20px 2px rgba(241, 83, 255, 0.25)'
+  }
+}))