Some more style changes

src/App.css

@@ -43,6 +43,10 @@
   cursor: pointer;
 }
 
+a.blue-button {
+  text-decoration: none;
+}
+
 .clickable-link {
   text-decoration: underline;
   color: #38A3BD;

src/components/ArticleRow.tsx

@@ -18,11 +18,9 @@ export default function ArticleRow({
 	};
 
 	return (
-		<div className='row'>
+		<div className='d-flex'>
 			<div className='article-row-thumbnail'>
-				{thumbUrl ? (
+				{thumbUrl ? <img src={thumbUrl} alt={article.title} /> : null}
-					<img className='mb-4' src={thumbUrl} alt={article.title} />
-				) : null}
 			</div>
 			<div className='article-row-content'>
 				<Link

src/components/InitiativeRow.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import imageUrl from '../imageUrl';
 import BlockContent from '@sanity/block-content-to-react';
+import '../css/article.css';
 
 export default function InitiativeRow({
 	initiative,
@@ -13,16 +14,12 @@ export default function InitiativeRow({
 	}
 
 	return (
-		<div style={{ display: 'flex' }}>
+		<div className='d-flex'>
-			<div style={{ flex: 1, padding: '10px' }}>
+			<div className='article-row-thumbnail'>
-				{thumbUrl ? (
+				{thumbUrl ? <img src={thumbUrl} alt={initiative.name} /> : null}
-					<img className='mb-4' src={thumbUrl} alt={initiative.name} />
-				) : null}
 			</div>
-			<div style={{ flex: 3, padding: '10px' }}>
+			<div className='article-row-content'>
-				<h3 className='header'>
+				<h3 className='header'>{initiative.name}</h3>
-					{initiative.name}
-				</h3>
 				<BlockContent blocks={initiative.content} />
 			</div>
 		</div>

src/components/RecentNews.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
 import useQuery from '../hooks/useQuery';
 import ArticleRow from './ArticleRow';
 
@@ -12,10 +14,11 @@ export default function RecentNews() {
 
 	return (
 		<div>
-			<h3 className='text-center display-3'>Recent News</h3>
+			<h3 className='display-3'>Recent News</h3>
 			{news.map((article) => {
 				return <ArticleRow article={article} />;
 			})}
+			<Link to='/news'>All News</Link>
 		</div>
 	);
 }

src/css/article.css

@@ -5,17 +5,16 @@
 
 .article-row-thumbnail {
   flex: 1;
-  padding: 10px;
+  padding-top: 0.5em;
-  /* 
+  padding-bottom: 0.5em;
-		To center the image
+  padding-right: 1em;
-	*/
-  /* display: flex;
-align-items: center; */
 }
 
 .article-row-content {
   flex: 3;
-  padding: 10px;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 1em;
 }
 
 .article-paragraphs {

src/css/get-involved.css

@@ -3,10 +3,13 @@
   font-size: 22px;
   line-height: 33px;
   font-weight: 300;
+  text-align: left;
 }
 
 .get-involved-title {
   flex: 1;
+  text-align: right;
+  padding-right: 2em;
 }
 
 .get-involved-description {

src/css/mission.css

@@ -11,8 +11,11 @@
 }
 
 .mission-header {
-	font-size: 1.25rem;
+  font-size: 2rem;
   font-weight: bold;
+  text-align: right;
+  display: block;
+  padding-right: 2em;
 }
 
 .mission-para {

src/css/segment.css

@@ -12,6 +12,7 @@
 }
 
 .segment-title {
-  margin: 10px 0px;
+  margin: 1em 0px;
-  font-weight: 600;
+  font-size: 1.75rem;
+  font-weight: 500;
 }

src/pages/involved.tsx

@@ -18,7 +18,7 @@ export default function GetInvolved() {
 		<>
 			<Hero heading='Get Involved' />
 			<main className='text-center'>
-				<h2>SGA Calendar</h2>
+				<h2 className='my-2'>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'

src/pages/mission.tsx

@@ -19,20 +19,19 @@ export default function Mission() {
 							— {mission.quote_author}
 						</span>
 					</div>
-					<div className='row'>
+					<div className='d-flex'>
-						<div className='flex-1'>
+						<div className='flex-1 p-2'>
 							<span className='mission-header'>Vision</span>
 						</div>
-						<div className='flex-2'>
+						<div className='flex-2 p-2'>
 							<p className='mission-para'>{mission.vision}</p>
 						</div>
 					</div>
-					<hr />
+					<div className='d-flex'>
-					<div className='row'>
+						<div className='flex-1 p-2'>
-						<div className='flex-1'>
 							<span className='mission-header'>Mission</span>
 						</div>
-						<div className='flex-2'>
+						<div className='flex-2 p-2'>
 							<p className='mission-para'>{mission.mission}</p>
 						</div>
 					</div>

src/pages/news.tsx

@@ -7,7 +7,9 @@ export default function News() {
 		<>
 			<Hero heading='News' />
 			<main>
+				<div style={{ paddingTop: '1em' }}>
 					<ArticleList />
+				</div>
 			</main>
 		</>
 	);

src/pages/newsArticle.tsx

@@ -1,38 +1,39 @@
 import React from 'react';
 import { Link, useParams } from 'react-router-dom';
 import Hero from '../components/Hero';
-import useQuery from '../hooks/useQuery';
 import imageUrl from '../imageUrl';
 import BlockContent from '@sanity/block-content-to-react';
+import sanity from '../sanity';
 import '../css/article.css';
 
 export default function NewsArticle() {
 	let { articleId } = useParams<{ articleId: string }>();
-	let article = useQuery<SGA.ArticleDocument>('*[_id == $articleId] [0]', {
+	let [article, setArticle] = React.useState<SGA.ArticleDocument>(null!);
-		articleId,
-	});
 
-	let thumbUrl: string | undefined = undefined;
+	React.useEffect(() => {
+		sanity.fetch('*[_id == $articleId] [0]', { articleId }).then(setArticle);
+	}, [articleId]);
+
+	let thumbUrl: string | null = null;
 	if (article?.thumbnail) {
-		thumbUrl = imageUrl(article.thumbnail).url() || undefined;
+		thumbUrl = imageUrl(article.thumbnail).url();
 	} else {
 		thumbUrl = '/images/hero.png';
 	}
 
 	return (
 		<>
-			<Hero heading='News' imageURL={thumbUrl} />
+			<Hero heading='News' imageURL={thumbUrl || undefined} />
 			<main>
+				{article ? (
+					<div style={{ maxWidth: '640px', margin: '2rem auto' }}>
 						<Link to='/news' className='clickable-link'>
 							Go to all news articles
 						</Link>
-				<br />
-				{article ? (
-					<div style={{ maxWidth: '640px', margin: '2rem auto' }}>
 						<h1>{article.title}</h1>
-						<i className='text-sm'>{article.publish_date}</i>
+						<i>
-						<br />
+							Posted {article.publish_date} by {article.author || 'No author'}
-						<i>{article.author || 'No author'}</i>
+						</i>
 						<br />
 						{/* Wrap the BlockContent in a div because it expands to <></> */}
 						<div className='article-paragraphs'>