Fixing the warnings

Fixing the yaml runner

Author: Ryan Hodge

.github/workflows/node.js.yml

@@ -3,11 +3,7 @@
 
 name: Node.js CI
 
-on:
-  push:
-    branches: [ "master" ]
-  pull_request:
-    branches: [ "master" ]
+on: [push]
 
 jobs:
   build:
@@ -16,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -26,6 +22,6 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
-    - run: npm ci --legacy-peer-deps
+    - run: npm i
     - run: npm run build --if-present
     - run: npm test

package.json

@@ -79,6 +79,7 @@
     "react-toastify": "^9.0.8",
     "styled-components": "^5.3.5",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3"
+    "webpack-dev-server": "^4.9.3",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

src/pages/general/navigation/Navigation.tsx

@@ -40,15 +40,16 @@ const Navigation = (): React.ReactElement => {
 				<Navbar.Toggle aria-controls='basic-navbar-nav' />
 				<Navbar.Collapse className='basic-navbar-links'>
 					<Styles.NavbarLinks variant='pills' toggle={ width < Constants.MOBILE_SIZE ? 1 : 0 }>
-						
 						<NavLink eventKey='7' as={Link} to={Constants.PATHS.HOME} onClick={() => location.href = TEAMS}>Teams</NavLink>
 						<NavLink eventKey='1' as={Link} to={Constants.PATHS.HOME} onClick={scrollToTop}>Home</NavLink>
 						<NavLink eventKey='2' as={Link} to={Constants.PATHS.EVENTS} onClick={scrollToTop}>Events</NavLink>
 						<NavLink eventKey='3' as={Link} to={Constants.PATHS.SPONSORS} onClick={scrollToTop}>Sponsors</NavLink>
 						<NavLink eventKey='4' as={Link} to={Constants.PATHS.ROBOTICS} onClick={scrollToTop}>Robotics</NavLink>
 						<NavLink eventKey='5' as={Link} to={Constants.PATHS.ROCKSAT} onClick={scrollToTop}>RockSat</NavLink>
 						<NavLink eventKey='6' as={Link} to={Constants.PATHS.BALLOONING} onClick={scrollToTop}>NASA Ballooning</NavLink>
-						<NavLink eventKey='8' as={Link} to={Constants.PATHS.MEETTHELEADS} onClick={scrollToTop}>Meet Our Robotics Leads</NavLink>
+						<NavLink eventKey='8' as={Link} to={Constants.PATHS.MEETTHELEADS} onClick={scrollToTop}>
+							Meet Our Robotics Leads
+						</NavLink>
 					</Styles.NavbarLinks>
 				</Navbar.Collapse>
 			</Styles.NavigationBar>

src/pages/meet-the-leads/MeetTheLeadsStyles.tsx

@@ -6,8 +6,8 @@ export default class MeetTheLeadsStyles {
 	static readonly MeetTheLeadsContainer = styled.div`
 		display: grid;
 		grid-template-columns: 100%;
-		grid-template-rows: 
-			calc(var(--vh) * .2)    /* Intro heading */  
+		grid-template-rows:
+			calc(var(--vh) * .2)    /* Intro heading */
 			calc(var(--vh) * 2.39)   /* Outreach gallery and photo gallery */
 			max(calc(var(--vh) * .15), 100px);  /* Contact info */
 		justify-content: center;
@@ -16,16 +16,16 @@ export default class MeetTheLeadsStyles {
 		@media (max-width: 718px) {
 			display: grid;
 			grid-template-columns: 100%;
-			grid-template-rows: 
-			calc(var(--vh) * .2)    /* Intro heading */  
+			grid-template-rows:
+			calc(var(--vh) * .2)    /* Intro heading */
 			calc(var(--vh) * 2.65)   /* Outreach gallery and photo gallery */
 			max(calc(var(--vh) * .15), 100px);  /* Contact info */
 		justify-content: center;
 		align-content: center;
 
 		}
 
-		
+
 	`
 
 	static readonly TitleContainer = styled.div`
@@ -45,7 +45,7 @@ export default class MeetTheLeadsStyles {
 	    //grid of leads text and img squares
 		display: grid;
 		grid-template-columns: repeat(2	, minmax(0, 1fr));
-		grid-template-rows: calc(var(--vh) * .4) repeat(6, minmax(0, 1fr)); 
+		grid-template-rows: calc(var(--vh) * .4) repeat(6, minmax(0, 1fr));
 		row-gap: 20px;
 		column-gap: 4%;
 		justify-items: center;
@@ -102,8 +102,6 @@ export default class MeetTheLeadsStyles {
 		justify-items: center;
 		align-items: center;
 
-		
-	`
 
-	
+	`
 }

src/pages/sponsors/Sponsors.tsx

@@ -22,12 +22,9 @@ const Sponsors = (): React.ReactElement => {
 				<h2 className='title'>Sponsors</h2>
 				<AiOutlineDash/>
 			</Styles.TitleContainer>
-			
-			<div className='img-container' style={{background: '#000000a0',  display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', 
-				rowGap: '3rem',
-			}}>
+			<div className='img-container centered-img'>
 				<h1 className='title'>Current Sponsors</h1>
-				<Button source={'https://forms.gle/pAfv3VBYJJXooiU38'} 
+				<Button source={'https://forms.gle/pAfv3VBYJJXooiU38'}
 					text='become a sponsor' size='large' className='becomeSponsor'/>
 			</div>
 			<div className='img-container' style={{background: '#053a92'}}>
@@ -36,9 +33,8 @@ const Sponsors = (): React.ReactElement => {
 			<div className='img-container' style={{background: 'white'}}>
 				<Amtrack/>
 			</div>
-			
-			<div className='img-container' style={{background: '#000000b5',  display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', 
-				rowGap: '3rem'}}>
+
+			<div className='img-container centered-img'>
 				<h1 className='title'>Previous Sponsors</h1>
 			</div>
 
@@ -52,9 +48,9 @@ const Sponsors = (): React.ReactElement => {
 				<img src={SponsorImages.hillock} style={{width: '60%'}}/>
 			</div>
 			{/* <div className='img-container' style={{background: 'wihte'}}>
-				 call amtrak image here, make sure it has been transerred into an svg 
+				 call amtrak image here, make sure it has been transerred into an svg
 			</div> */}
-			
+
 
 			<Contact/>
 		</Styles.SponsorContainer>

src/pages/sponsors/SponsorsStyles.tsx

@@ -42,6 +42,14 @@ export default class SponsorsStyles {
 			text-align: center;
 		}
 
+        .centered-img {
+            background: #000000a0;
+            display: 'flex';
+            justify-content: 'center';
+            align-items: 'center';
+            flex-direction: 'column';
+			row-gap: '3rem';
+        }
 	`