Improve event page button design

frontend/src/components/generic/Button/index.js

@@ -61,7 +61,6 @@ const variantStyles = (theme, props) => {
         case 'applicationsClosed': {
             return {
                 color: color.main,
-                padding: 0,
                 margin: '25px 0 0 0',
                 textTransform: 'uppercase',
                 fontSize: '18px',

frontend/src/pages/_events/slug/default/EventTimeline/index.js

@@ -50,12 +50,12 @@ const colorLibStyle = props => ({
     },
     active: {
         '& $line': {
-            borderColor: '#784af4',
+            borderColor: props => props.accent || '#784af4',
         },
     },
     completed: {
         '& $line': {
-            borderColor: '#784af4',
+            borderColor: props => props.accent || '#784af4',
         },
     },
     line: {

frontend/src/pages/_events/slug/default/index.js

@@ -17,14 +17,30 @@ import FadeInWrapper from 'components/animated/FadeInWrapper'
 import Container from 'components/generic/Container'
 import { Helmet } from 'react-helmet'
 import EventDetailContext from '../context'
+import EventButtons from './EventButtons'
 
 const useStyles = makeStyles({
     header: {
         background: props => props.headerBackgroundColor,
         color: props => props.headerTextColor,
 
+        '& button:not(disabled)': {
+            color: props => props.headerBackgroundColor,
+            background: props => props.accentColor,
+
+            '&:hover': {
+                background: props => props.linkColor,
+            },
+        },
+    },
+    cta: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '3rem 2rem',
+        margin: '20px 0 0 0',
         '& button': {
-            color: props => props.accentColor,
+            margin: 0,
         },
     },
     body: {
@@ -179,6 +195,12 @@ export default () => {
                             </Grid>
                         </Container>
                     </Box>
+                    <Box className={`${classes.header} ${classes.cta}`}>
+                        <EventButtons
+                            event={event}
+                            registration={registration}
+                        />
+                    </Box>
                 </StaggeredList>
             </FadeInWrapper>
             <BannerCarousel />

frontend/src/pages/_pricing/index.js

@@ -38,7 +38,7 @@ export default () => {
     const { t } = useTranslation()
     const body1 = [
         'Event registration and organization through platform.',
-        'For non - profit organizations.'
+        'For non - profit organizations.',
     ]
     const body2 = [
         'Event registration and organization through platform',