From 81e4d0ef99adb02e0789e7f32e1076e966d9c8f4 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sun, 29 Nov 2020 01:23:16 -0500
Subject: [PATCH] Better typography: headers, mission, buttons
---
src/App.css | 2 ++
src/components/ArticleList.tsx | 2 +-
src/components/ArticleRow.tsx | 11 +++++++----
src/components/Footer.tsx | 1 -
src/components/Mission.tsx | 11 ++++++-----
src/css/article.css | 5 -----
src/css/mission.css | 8 ++++++++
src/pages/involved.tsx | 8 +++++---
8 files changed, 29 insertions(+), 19 deletions(-)
diff --git a/src/App.css b/src/App.css
index 05c35af..23ac9cd 100644
--- a/src/App.css
+++ b/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 {
diff --git a/src/components/ArticleList.tsx b/src/components/ArticleList.tsx
index 585d2d1..a77eb4c 100644
--- a/src/components/ArticleList.tsx
+++ b/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);
diff --git a/src/components/ArticleRow.tsx b/src/components/ArticleRow.tsx
index 122235a..41f76ac 100644
--- a/src/components/ArticleRow.tsx
+++ b/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'>
- {article.publish_date} - {article.author || 'No author'}
- </i>
+ <i className='text-sm'>{article.publish_date}</i>
+ <br />
+ <i>{article.author || 'No author'}</i>
<br />
<BlockContent blocks={article.content} />
</div>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index c6ce887..a676f3f 100644
--- a/src/components/Footer.tsx
+++ b/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 (
diff --git a/src/components/Mission.tsx b/src/components/Mission.tsx
index 2106663..8e1e4a2 100644
--- a/src/components/Mission.tsx
+++ b/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>{mission.mission}</p>
- <h3 className='header text-center'>Vision</h3>
- <p>{mission.vision}</p>
- <blockquote>{mission.quote_text}</blockquote>
+ <p className='mission-landing-page-text'>“{mission.vision}”</p>
+ <Link to='/mission' className='blue-button'>
+ Our Mission
+ </Link>
</div>
</section>
);
diff --git a/src/css/article.css b/src/css/article.css
index 464d886..fd461e9 100644
--- a/src/css/article.css
+++ b/src/css/article.css
@@ -1,8 +1,3 @@
-.load-more-button {
- font-weight: 300;
- text-transform: uppercase;
-}
-
.article-list {
display: flex;
flex-direction: column;
diff --git a/src/css/mission.css b/src/css/mission.css
index cf6e481..8e79532 100644
--- a/src/css/mission.css
+++ b/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;
diff --git a/src/pages/involved.tsx b/src/pages/involved.tsx
index 7111db2..3a9e021 100644
--- a/src/pages/involved.tsx
+++ b/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} />
))}