Better typography: headers, mission, buttons

src/App.css

@@ -61,8 +61,10 @@
 	border-radius: 0.25rem;
 	border-style: solid;
 	border-color: #38A3BD;
+	background-color: white;
 	color: #38A3BD;
 	display: inline-block;
+	cursor: pointer;
 }
 
 .clickable-link {

src/components/ArticleList.tsx

@@ -49,7 +49,7 @@ export default function ArticleList() {
 			<div className='text-center'>
 				{!reachedEnd ? (
 					<button
-						className='load-more-button'
+						className='blue-button'
 						onClick={() => {
 							let lastArticle = articles[articles.length - 1];
 							addArticles(lastArticle.publish_date, lastArticle.title);

src/components/ArticleRow.tsx

@@ -25,12 +25,15 @@ export default function ArticleRow({
 				) : null}
 			</div>
 			<div className='article-row-content'>
-				<Link to={'/news/' + article._id + '/' + slug(article.title)} className="clickable-link">
+				<Link
+					to={'/news/' + article._id + '/' + slug(article.title)}
+					className='clickable-link'
+				>
 					<h3>{article.title}</h3>
 				</Link>
-				<i className='text-sm'>
+				<i className='text-sm'>{article.publish_date}</i>
-					{article.publish_date} - {article.author || 'No author'}
+				<br />
-				</i>
+				<i>{article.author || 'No author'}</i>
 				<br />
 				<BlockContent blocks={article.content} />
 			</div>

src/components/Footer.tsx

@@ -16,7 +16,6 @@ export default function Footer() {
 				src='/images/footer-banner.png'
 				alt='Footer Banner'
 			/>
-			<hr />
 			<div className='footer-container'>
 				{footer.columns.map((col) => {
 					return (

src/components/Mission.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
 import '../css/mission.css';
 import useMission from '../hooks/useMission';
 
@@ -10,11 +12,10 @@ export default function Mission() {
 	return (
 		<section className='text-center'>
 			<div className='mission-box'>
-				<h3 className='header text-center'>Mission</h3>
+				<p className='mission-landing-page-text'>“{mission.vision}”</p>
-				<p>{mission.mission}</p>
+				<Link to='/mission' className='blue-button'>
-				<h3 className='header text-center'>Vision</h3>
+					Our Mission
-				<p>{mission.vision}</p>
+				</Link>
-				<blockquote>{mission.quote_text}</blockquote>
 			</div>
 		</section>
 	);

src/css/article.css

@@ -1,8 +1,3 @@
-.load-more-button {
-  font-weight: 300;
-  text-transform: uppercase;
-}
-
 .article-list {
   display: flex;
   flex-direction: column;

src/css/mission.css

@@ -2,6 +2,14 @@
 	padding: 0px 20px;
 }
 
+.mission-landing-page-text {
+	font-family: 'Arapey';
+	font-size: 33px;
+	font-style: italic;
+	font-weight: 500;
+	line-height: 44px;
+}
+
 .mission-header {
 	font-size: 1.25rem;
 	font-weight: bold;

src/pages/involved.tsx

@@ -17,17 +17,19 @@ export default function GetInvolved() {
 	return (
 		<div className='text-center'>
 			<Hero heading='Get Involved' />
-			<h3>SGA Calendar</h3>
+			<h2>SGA Calendar</h2>
 			<iframe
 				src='https://calendar.google.com/calendar/u/0/embed?src=mbftfg4hu7i8ueqrgcb5o7hc6k@group.calendar.google.com&ctz=America/New_York'
 				title='SGA Calendar'
 				width='800'
 				height='600'
 			/>
-			<hr />
+			<p className="get-involved-body">
+				Interested in getting involved with SGA? You can run for office, work on a project, or apply to a committee. If you just want to share an idea or concern or get to know your representatives, reach out to us at <b>sga@tjhsst.edu</b>!
+			</p>
 			{ways ? (
 				<>
-					<h3>Here are some ways to connect with SGA:</h3>
+					<h2>Here are some ways to connect with SGA:</h2>
 					{ways.ways.map((way) => (
 						<GetInvolvedRow way={way} key={way._id} />
 					))}