Flattening "committees" page components (#170)

* first pass on flattening

* extra comments, rename

Author: mattxwang

src/App.scss

@@ -4,12 +4,9 @@
 @import 'Base';
 @import 'components/Navbar/style';
 @import 'components/Committees/style';
-@import 'components/Committees/CommitteesBanner/style';
-@import 'components/Committees/SidebarItem/style';
-@import 'components/Committees/CommitteeSections/CommitteeSectionHeader/style';
+@import 'components/Committees/Sidebar/style';
 @import 'components/Committees/CommitteeSections/CommitteeSectionIntro/style';
-@import 'components/Committees/CommitteeSections/CommitteeSectionBody/style';
-@import 'components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeEventCard/style';
+@import 'components/Committees/CommitteeSections/CommitteeEventCard/style';
 @import 'components/Button/style';
 @import 'components/Banner/style';
 @import 'components/Home/style';

src/Base.scss

@@ -5,62 +5,74 @@
 $acm-cobalt: #1E6CFF;
 $acm-black: #181818;
 $acm-tint: #3DA2FF;
- 
+
 $hack-purple: #C960FF;
 $hack-black: #262938;
 $hack-tint: #C137D8;
- 
+
 $w-teal: #1BC3A9;
 $w-black: #233431;
 $w-tint: #56E4B1;
- 
+
 $icpc-tangerine: #FF8383;
 $icpc-black: #3A2B2B;
 $icpc-tint: #F38F70;
- 
+
 $ai-arctic: #28B2FF;
 $ai-black: #233339;
 $ai-tint: #35DDF3;
- 
+
 $studio-raspberry: #FB4469;
 $studio-black: #39272B;
 $studio-tint: #FF8C93;
- 
+
 $cyber-amber: #FFCB44;
 $cyber-black: #3A3327;
 $cyber-tint: #FFE81A;
- 
+
 $design-orange: #FE8D3C;
 $design-black: #372B25;
 $design-tint: #FFAC30;
- 
+
 $teachla-green: #5EDA12;
 $teachla-black: #2C3022;
 $teachla-tint: #B0EE00;
- 
+
 $font-display: 'Poppins', 'Helvetica Neue', 'Helvetica', sans-serif;
 $font-header: 'Poppins', sans-serif;
 $font-body: 'Open Sans', sans-serif;
- 
+
 $font-primary-color: #333;
 $font-secondary-color: #777;
 
 $navbar-breakpoint: 1160px;
- 
+
 body {
   color: $font-primary-color;
   font-family: $font-body;
   margin: 0;
   padding: 0;
 }
- 
+
 .app-container {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 }
- 
+
 .main-container {
   flex: 1 0 auto;
   margin-top: 70px; //To account for height of Navbar, which uses fixed positioning
 }
+
+.font-header {
+  font-family: $font-header;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-25x {
+  font-size: 2.5em !important;
+}

…CommitteeEventCard/CommitteeEventCard.js …CommitteeEventCard/CommitteeEventCard.jssrc/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeEventCard/CommitteeEventCard.js renamed to src/components/Committees/CommitteeSections/CommitteeEventCard/CommitteeEventCard.js src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeEventCard/CommitteeEventCard.js renamed to src/components/Committees/CommitteeSections/CommitteeEventCard/CommitteeEventCard.js

@@ -8,7 +8,7 @@ function CommitteeEventCard(props) {
                 ? <img src={props.image.src} alt={props.image.alt} />
                 : <img src={`/images/committees/${props.committee}/${props.committee}_motif_base.png`} alt={props.image.alt} />
             }
-            <h2>{props.title}</h2>
+            <h4 className="font-header text-bold">{props.title}</h4>
             {props.desc}
         </div>
     );

…ectionBody/CommitteeEventCard/style.scss …eeSections/CommitteeEventCard/style.scsssrc/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeEventCard/style.scss renamed to src/components/Committees/CommitteeSections/CommitteeEventCard/style.scss src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeEventCard/style.scss renamed to src/components/Committees/CommitteeSections/CommitteeEventCard/style.scss

@@ -4,13 +4,14 @@
   flex-direction: column;
   margin: 0 1% 2rem;
   text-align: left;
-    
+
   img {
     height: 160px;
     object-fit: cover;
   }
 
-  h2 {
+  h4 {
+    font-size: 1.4em;
     margin: 20px 10px 20px 0;
   }
 

src/components/Committees/CommitteeSections/CommitteeSection.js

@@ -1,16 +1,46 @@
 import React from 'react';
-import Body from './CommitteeSectionBody/CommitteeSectionBody';
-import Header from './CommitteeSectionHeader/CommitteeSectionHeader';
+import CommitteeEventCard from './CommitteeEventCard/CommitteeEventCard';
 import Intro from './CommitteeSectionIntro/CommitteeSectionIntro';
 
-function CommitteeSection(props) {
+function CommitteeProjects({committee}) {
 	return (
-		<div id={props.committee.class} className='committee-section'>
-			<Header committee={props.committee}/>
-			<Intro committee={props.committee}/>
-			<Body committee={props.committee}/>
+		<div className="body-wrapper">
+			<h3 className="font-header text-bold text-25x">Events and Projects</h3>
+			<div className="card-container">
+				{committee.infoCards.map((card) => {
+					// TODO: destructure class after renaming it
+					const { image, title, desc } = card;
+					return (
+						<CommitteeEventCard
+							committee={committee.class}
+							image={image}
+							title={title}
+							desc={desc}
+							key={title}
+						/>
+					);
+				})}
+				</div>
 		</div>
 	);
 }
 
+function CommitteeSection(props) {
+  const { committee } = props;
+  // TODO: destructure committee after renaming the .class property
+  return (
+    <div id={committee.class} className="committee-section">
+      {/* Header image */}
+			{/* TODO: this could probably be a bit more accessible */}
+      <div className={`committee-header ${committee.class}`}>
+        <img src={committee.image} alt="committee logo" />
+      </div>
+      {/* Committee Intro */}
+      <Intro committee={committee} />
+      {/* Committee Body: events & projects */}
+      <CommitteeProjects committee={committee} />
+    </div>
+  );
+}
+
 export default CommitteeSection;

src/components/Committees/CommitteeSections/CommitteeSectionBody/CommitteeSectionBody.js

@@ -25,6 +25,7 @@ function CommitteeIconLink({committee, link}) {
     );
 }
 
+// TODO: down the line, this can be refactored into a utility!
 function CommitteeIcon({platform}) {
     // see https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility#web-fonts-semantic
     // for more on accessibility
@@ -45,10 +46,12 @@ function CommitteeIcon({platform}) {
     }
 }
 
+// TODO: props destructuring
 function CommitteeSectionIntro(props) {
     return (
         <div className="intro-row">
             <div className="show-mobile">
+                {/* TODO: this should have an alt tag */}
                 <img src={props.committee.introImage} alt=""/>
                 <p>{props.committee.introImageDesc}</p>
             </div>
@@ -62,6 +65,7 @@ function CommitteeSectionIntro(props) {
                     )}
                 </div>
             </div>
+            {/* TODO: we can easily refactor this with the above .show-mobile to reduce code dupe */}
             <div className="right-col">
                 <img src={props.committee.introImage} alt=""/>
                 <p>{props.committee.introImageDesc}</p>