Better spacing, new photos, feedback page

package-lock.json

@@ -7401,6 +7401,20 @@
       "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
       "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE="
     },
+    "iframe-resizer": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.2.11.tgz",
+      "integrity": "sha512-fj5vX5kkpRbMb5Qje6veIDzqoJpnCEqUDdSOwASOeQHYmb8hLYX6Ev2yXf3jjMs2MclwcYY3chyZ3diGKcr8DA=="
+    },
+    "iframe-resizer-react": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/iframe-resizer-react/-/iframe-resizer-react-1.0.4.tgz",
+      "integrity": "sha512-j2AFgVe6ZhvUVu4VbEvUB4lUadmCwdg4tIYgL9TRdWubL1477Xv0wl8xVC9ETky3+81ngnbOYFLaUIkBOESJFQ==",
+      "requires": {
+        "iframe-resizer": "^4.2.10",
+        "warning": "^4.0.3"
+      }
+    },
     "ignore": {
       "version": "5.1.8",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
@@ -14425,6 +14439,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

package.json

@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "iframe-resizer-react": "^1.0.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",

src/App.tsx

@@ -14,7 +14,20 @@ const notfound = React.lazy(() => import('./pages/404'));
 const officers = React.lazy(() => import('./pages/officers'));
 const committee = React.lazy(() => import('./pages/committee'));
 const classcouncil = React.lazy(() => import('./pages/classcouncil'));
-const loading = () => <h1>Loading...</h1>;
+const loading = (
+	<div
+		style={{
+			width: '100vw',
+			height: '100vh',
+			textAlign: 'center',
+			display: 'flex',
+			alignItems: 'center',
+		}}
+	>
+		<h3 style={{ textAlign: 'center', width: '100vw' }}>Loading...</h3>
+	</div>
+);
+const feedback = React.lazy(() => import('./pages/feedback'));
 
 export default function App() {
 	return (
@@ -30,6 +43,7 @@ export default function App() {
 						<Route path='/officers' exact component={officers} />
 						<Route path='/committee' exact component={committee} />
 						<Route path='/class-council' exact component={classcouncil} />
+						<Route path='/feedback' exact component={feedback} />
 						<Route path='/:path' component={notfound} />
 						<Route path='/' exact component={index} />
 					</Switch>

src/components/Footer.tsx

@@ -17,9 +17,9 @@ export default function Footer() {
 				alt='Footer Banner'
 			/>
 			<div className='footer-container'>
-				{footer.columns.map((col) => {
+				{footer.columns.map((col, index) => {
 					return (
-						<div className='footer-col' key={col._id}>
+						<div className='footer-col' key={index}>
 							<BlockContent blocks={col.content} />
 						</div>
 					);

src/components/Hero.tsx

@@ -17,8 +17,8 @@ export default function Hero({
 				alt='Background'
 				style={{
 					width: '100vw',
-					height: '60vh',
-					objectFit: 'cover',
+					maxHeight: '60vh',
+					objectFit: 'contain',
 				}}
 			/>
 		</div>

src/components/InitiativeRow.tsx

@@ -14,7 +14,7 @@ export default function InitiativeRow({
 	}
 
 	return (
-		<div className='d-flex'>
+		<div className='d-flex my-4'>
 			<div className='article-row-thumbnail'>
 				{thumbUrl ? <img src={thumbUrl} alt={initiative.name} /> : null}
 			</div>

src/components/MemberRow.tsx

@@ -8,7 +8,7 @@ export default function MemberRow({ member }: { member: SGA.MemberDocument }) {
 	}
 
 	return (
-		<div className='row'>
+		<div className='d-flex my-4'>
 			<div className='article-row-thumbnail'>
 				{thumbUrl ? (
 					<img className='mb-4' src={thumbUrl} alt={member.name} />

src/components/Navbar.tsx

@@ -63,20 +63,22 @@ let pages = [
 		url: '/involved',
 		title: 'Get Involved',
 	},
+	{
+		url: '/feedback',
+		title: 'Feedback',
+	},
 ];
 
-export function Submenu({ items }) {}
-
 export default function Navbar() {
 	return (
 		<div className='nav'>
-			<Link to='/'>
+			<Link to='/' key='/'>
 				<img src='/images/banner.png' alt='TJ SGA' className='nav-logo' />
 			</Link>
 			{pages.map((page) => {
 				if ('items' in page) {
 					return (
-						<div className='submenu-outer' key={page.title}>
+						<div key={page.title} className='submenu-outer'>
 							<Link className='nav-link' to={page.url}>
 								{page.title}
 							</Link>

src/components/RecentNews.tsx

@@ -16,7 +16,7 @@ export default function RecentNews() {
 		<div>
 			<h3 className='display-3'>Recent News</h3>
 			{news.map((article) => {
-				return <ArticleRow article={article} />;
+				return <ArticleRow article={article} key={article._id} />;
 			})}
 			<Link to='/news'>All News</Link>
 		</div>

src/components/SegmentGroup.tsx

@@ -4,19 +4,19 @@ export default function InfoColumnGroup() {
 	return (
 		<div className='d-flex'>
 			<Segment
-				imageURL='/images/segment-1.jpg'
+				imageURL='/images/segments/news-and-happenings.jpg'
 				title='News and Happenings'
 				content={`Read about SGA initiatives, goals, and progress from SGA officers, as well as from other student leaders, students, and student organizations.`}
 				infoURL='/news'
 			/>
 			<Segment
-				imageURL='/images/segment-2.jpg'
+				imageURL='/images/segments/who-we-are.jpg'
 				title='Who We Are'
 				content={`Learn about your representatives, and how they're working to advance the common agenda that SGA has set to improve your experience at TJ.`}
 				infoURL='/officers'
 			/>
 			<Segment
-				imageURL='/images/segment-3.jpg'
+				imageURL='/images/segments/get-involved.jpg'
 				title='Get Involved'
 				content={`Any questions or concerns? Have an idea for how SGA could be doing more to advocate for students? Want to get involved? Contact Us!`}
 				infoURL='/involved'

src/index.css

@@ -25,6 +25,7 @@ img {
 
 main {
   width: 1200px;
+  max-width: 100vw;
   margin: 0px auto;
 }
 

src/pages/committee.tsx

@@ -11,7 +11,10 @@ export default function Committee() {
 
 	return (
 		<>
-			<Hero heading='Executive Committee' />
+			<Hero
+				heading='Executive Committee'
+				imageURL='/images/who-we-are/excomm.png'
+			/>
 			<main>
 				<div>
 					{excomm &&

src/pages/feedback.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Hero from '../components/Hero';
+
+const feedbackFormURL =
+	'https://docs.google.com/forms/d/e/1FAIpQLSeO8CN666WSb-jw0johyLMLb00rFz-bCtXaPeWpTSvbSqBBLw/viewform?embedded=true';
+
+export default function FeedbackPage() {
+	return (
+		<>
+			<Hero />
+			<main className='text-center'>
+				<iframe
+					src={feedbackFormURL}
+					style={{
+						width: '640px',
+						height: '900px',
+						scrollbarWidth: 'none',
+					}}
+					title='Feedback Form'
+				>
+					Loading…
+				</iframe>
+			</main>
+		</>
+	);
+}

src/pages/officers.tsx

@@ -14,7 +14,7 @@ export default function Officers() {
 
 	return (
 		<>
-			<Hero heading='Officers' />
+			<Hero heading='Officers' imageURL='/images/who-we-are/officers.jpg' />
 			<main>
 				{officers
 					? officers.map((officer) => {