Merge pull request #169 from nwplus/update-newsletter-button

Update newsletter button
nwplus · Sep 5, 2023 · a591c74 · a591c74
2 parents 4551d71 + 4c2cfb2
commit a591c74
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 29 deletions.
diff --git a/components/Hackathons.js b/components/Hackathons.js
@@ -1,28 +1,28 @@
-import { useState } from 'react'
-import styled from 'styled-components'
-import HackathonCard from './HackathonCard'
-import NewsletterModal from './NewsletterModal'
-import { Body, LinkBody } from './Typography';
+import { useState } from 'react';
+import styled from 'styled-components';
+import HackathonCard from './HackathonCard';
+import NewsletterModal from './NewsletterModal';
+import { Body, Title2 } from './Typography';
+import Button from './Button';
 
 const HackCampData = {
   imgSrc: '/assets/HackCamp2022.png',
   link: 'https://hackcamp.nwplus.io',
   date: 'Nov 5 - 6',
-  open: false, 
-}
+  open: false,
+};
 const nwHacksData = {
   imgSrc: '/assets/nwHacks2023.jpg',
   link: 'https://nwhacks.io',
   date: 'Jan 21 - 22',
   open: false,
-}
+};
 const cmdfData = {
   imgSrc: '/assets/cmd-f2023.jpg',
   link: 'https://cmd-f.nwplus.io',
   date: 'Mar 11 - 12',
   open: false,
-}
-const subscribeCTAText = 'to our newsletter to stay up to date on our hackathons!';
+};
 
 const HackathonsContainer = styled.div`
   display: flex;
@@ -35,6 +35,23 @@ const HackathonsContainer = styled.div`
   }
 `;
 
+const ActionButton = styled(Button)`
+  width: 200px;
+  height: 60px;
+  font-size: 22px;
+  margin: auto;
+  margin-top: 24px;
+
+  ${(p) => p.theme.mediaQueries.mobile} {
+    height: 60px;
+    width: 200px;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
 export default function Hackathons() {
   const [showModal, setShowModal] = useState(false);
 
@@ -60,11 +77,18 @@ export default function Hackathons() {
           imageLink={cmdfData.imgSrc}
         />
       </HackathonsContainer>
-      <Body align="center"><LinkBody onClick={() => setShowModal(true)}>Subscribe</LinkBody> {subscribeCTAText}</Body>
-      <NewsletterModal
-        show={showModal}
-        onClose={() => setShowModal(false)}
-      />
+      <Title2 align='center' lineHeight='6px'>
+        Subscribe to our newsletter
+      </Title2>
+      <Body align='center'>Stay up to date on our hackathons!</Body>
+      <ActionButton
+        align='center'
+        fontColor='white'
+        onClick={() => setShowModal(true)}
+      >
+        Subscribe
+      </ActionButton>
+      <NewsletterModal show={showModal} onClose={() => setShowModal(false)} />
     </>
-  )
+  );
 }
diff --git a/components/Typography.js b/components/Typography.js
@@ -44,24 +44,19 @@ export const Title1 = styled.h1.attrs((p) => ({
     p.withGradient &&
     `background: -webkit-linear-gradient(92deg, #19cbcb 1.55%, #78ff96 100%);
     -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;`
-  }
+    -webkit-text-fill-color: transparent;`}
   ${(p) => p.theme.mediaQueries.mobile} {
     font-size: 21.32px;
     line-height: 27.77px;
   }
-  ${(p) =>
-    p.underline &&
-    'text-decoration: underline;'
-  }
+  ${(p) => p.underline && 'text-decoration: underline;'}
   ${(p) =>
     p.hover &&
     `&:hover {
       cursor: pointer;
       color: ${p.theme.colors.primary}
-    }`
-  }
-  ${(p) => p.align ? `text-align: ${p.align}` : ''};
+    }`}
+  ${(p) => (p.align ? `text-align: ${p.align}` : '')};
 `;
 
 export const Title2 = styled.h2.attrs((p) => ({
@@ -80,6 +75,8 @@ export const Title2 = styled.h2.attrs((p) => ({
     `background: -webkit-linear-gradient(92.58deg, #20FFAF 0%, #78FF96 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;`}
+  ${(p) => (p.align ? `text-align: ${p.align};` : '')}
+  line-height: ${(p) => p.lineHeight || '40px'};
   ${(p) => p.theme.mediaQueries.mobile} {
     font-size: 16px;
     line-height: 24px;
@@ -101,8 +98,7 @@ export const Title3 = styled.h3.attrs((p) => ({
     p.withGradient &&
     `background: -webkit-linear-gradient(92.58deg, #20FFAF 0%, #78FF96 100%);
     -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;`
-  }
+    -webkit-text-fill-color: transparent;`}
   ${(p) => p.theme.mediaQueries.mobile} {
     font-size: 12px;
     line-height: 16px;
@@ -126,7 +122,7 @@ export const Body = styled.p.attrs((p) => ({
     `background: -webkit-linear-gradient(92deg, #19cbcb 1.55%, #78ff96 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;`}
-  ${(p) => p.align ? `text-align: ${p.align};` : ''}
+  ${(p) => (p.align ? `text-align: ${p.align};` : '')}
   ${(p) => p.theme.mediaQueries.mobile} {
     font-size: 14px;
     line-height: 24px;
@@ -152,7 +148,7 @@ export const LinkBody = styled.p.attrs((p) => ({
   line-height: 24px;
   letter-spacing: -0.43px;
   text-decoration: underline;
-  text-decoration-thickness: 2px;  
+  text-decoration-thickness: 2px;
   ${SetColor}
   ${SetBackground}
   ${(p) => p.theme.mediaQueries.mobile} {