Organize imports

src/components/ArticleList.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import ArticleRow from './ArticleRow';
-import sanity from '../sanity';
 import '../css/article.css';
+import sanity from '../sanity';
+import ArticleRow from './ArticleRow';
 import BlueButton from './BlueButton';
 import Centered from './Centered';
 

src/components/ArticleRow.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import imageUrl from '../lib/imageUrl';
 import '../css/article.css';
+import imageUrl from '../lib/imageUrl';
 import ClickableLink from './ClickableLink';
 import FlexRow from './FlexRow';
 import FlexRowSection from './FlexRowSection';

src/components/Footer.tsx

@@ -1,6 +1,6 @@
+import BlockContent from '@sanity/block-content-to-react';
 import React from 'react';
 import '../css/footer.css';
-import BlockContent from '@sanity/block-content-to-react';
 import useFooter from '../hooks/useFooter';
 import Centered from './Centered';
 

src/components/InitiativeColumn.tsx

@@ -1,6 +1,6 @@
 import BlockContent from '@sanity/block-content-to-react';
-import imageUrl from '../lib/imageUrl';
 import '../css/initiative.css';
+import imageUrl from '../lib/imageUrl';
 
 export default function InitiativeColumn({ name, thumbnail, content }) {
 	let thumbUrl: string | null = null;

src/components/Layout.tsx

@@ -1,14 +1,5 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.com/docs/use-static-query/
- */
-
-import React from 'react';
-
-import Navbar from './Navbar';
 import Footer from './Footer';
+import Navbar from './Navbar';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
 	return (

src/components/MemberRow.tsx

@@ -1,7 +1,7 @@
-import imageUrl from '../lib/imageUrl';
 import '../css/article.css';
-import RowItemHeader from './RowItemHeader';
+import imageUrl from '../lib/imageUrl';
 import ConstrainedImage from './ConstrainedImage';
+import RowItemHeader from './RowItemHeader';
 import RowItemSubheader from './RowItemSubheader';
 
 export default function MemberRow({

src/components/Mission.tsx

@@ -4,15 +4,12 @@ import useMission from '../hooks/useMission';
 import BlueButtonLink from './BlueButtonLink';
 
 export default function Mission() {
-	let mission = useMission();
-	if (!mission) {
-		return null;
-	}
+	let mission = useMission(); // can be null
 
 	return (
 		<section className='text-center'>
 			<div className='mission-box'>
-				<p className='mission-landing-page-text'>“{mission.vision}”</p>
+				<p className='mission-landing-page-text'>“{mission?.vision}”</p>
 				<BlueButtonLink href='/mission'>Our Mission</BlueButtonLink>
 			</div>
 		</section>

src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import '../css/navbar.css';
 import { Link } from 'react-router-dom';
+import '../css/navbar.css';
 
 let pages = [
 	{

src/components/Segment.tsx

@@ -1,23 +1,9 @@
-import '../css/segment.css';
 import BlueButtonLink from './BlueButtonLink';
-
-function SegmentHeader({ children }: { children: React.ReactNode }) {
-	return (
-		<h3
-			style={{
-				margin: '1em 0px',
-				fontSize: '1.75rem',
-				fontWeight: 500,
-			}}
-		>
-			{children}
-		</h3>
-	);
-}
+import SegmentHeader from './SegmentHeader';
 
 export default function Segment({ title, content, imageUrl, infoUrl }) {
 	return (
-		<div className='segment'>
+		<div style={{ textAlign: 'center', padding: '0px 17px' }}>
 			<SegmentHeader>{title}</SegmentHeader>
 			<img src={imageUrl} alt={title} />
 			<p className='strong-paragraph'>{content}</p>

src/components/SegmentHeader.tsx

@@ -0,0 +1,17 @@
+export default function SegmentHeader({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<h3
+			style={{
+				margin: '1em 0px',
+				fontSize: '1.75rem',
+				fontWeight: 500,
+			}}
+		>
+			{children}
+		</h3>
+	);
+}

src/css/segment.css

@@ -1,18 +0,0 @@
-.segment {
-  padding: 0px 17px;
-  text-align: center;
-}
-
-.segment-body {
-  color: #444;
-  font-size: 22px;
-  line-height: 33px;
-  font-weight: 300;
-  text-align: left;
-}
-
-.segment-title {
-  margin: 1em 0px;
-  font-size: 1.75rem;
-  font-weight: 500;
-}

src/pages/mission.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import Hero from '../components/Hero';
-import useMission from '../hooks/useMission';
-import '../css/mission.css';
 import BlueButtonLink from '../components/BlueButtonLink';
 import Centered from '../components/Centered';
+import Hero from '../components/Hero';
 import ParagraphWithHeader from '../components/ParagraphWithHeader';
+import '../css/mission.css';
+import useMission from '../hooks/useMission';
 import { SGA_PREVIOUS_LEADERSHIP_URL } from '../lib/constants';
 
 function MissionQuote({ text, author }) {

src/pages/newsArticle.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import BlockContentWithExternalLinks from '../components/BlockContentWithExternalLinks';
+import ClickableLink from '../components/ClickableLink';
 import Hero from '../components/Hero';
-import imageUrl from '../lib/imageUrl';
+import PrimaryHeader from '../components/PrimaryHeader';
 import '../css/article.css';
 import useNewsArticle from '../hooks/useNewsArticle';
-import ClickableLink from '../components/ClickableLink';
-import BlockContentWithExternalLinks from '../components/BlockContentWithExternalLinks';
-import PrimaryHeader from '../components/PrimaryHeader';
+import imageUrl from '../lib/imageUrl';
 
 export default function NewsArticle() {
 	let { articleId } = useParams<{ articleId: string }>();

src/pages/officers.tsx

@@ -23,14 +23,15 @@ export default function Officers() {
 	}, []);
 
 	const officersSorted = sortCommittee(officers ?? [], officerOrder);
-	const officerList = officersSorted.map((officer) => (
-		<MemberRow member={officer} />
-	));
 
 	return (
 		<>
 			<Hero heading='Officers' imageURL='/images/who-we-are/officers.jpg' />
-			<main>{officerList}</main>
+			<main>
+				{officersSorted.map((officer) => (
+					<MemberRow member={officer} />
+				))}
+			</main>
 		</>
 	);
 }