[Feature] Desktop + Mobile About Section Refresh (#259)

changed mobile and desktop view to match theme

Author: kzeng24

main-site/components/about-section/AboutSection.styles.ts

@@ -1,14 +1,14 @@
 import styled from '@emotion/styled';
 import { H2, H3, P } from '../../../shared-ui/style/typography';
-import { min } from '../../../shared-ui/lib/responsive';
+import { max, min } from '../../../shared-ui/lib/responsive';
 
 const StyledAboutSectionContainer = styled.div`
-  margin-top: 2em;
+  margin-top: 10em;
   padding-bottom: 10em;
   position: relative;
   overflow: hidden;
   @media ${min.tablet} {
-    margin-top: 6em;
+    margin-top: 10em;
   }
 `;
 
@@ -36,6 +36,7 @@ const StyledItemTextContainer = styled.div`
 `;
 
 const StyledTitle = styled(H2)`
+  color: white;
   text-align: center;
 `;
 
@@ -53,9 +54,10 @@ const StyledItemImage = styled.img`
 `;
 
 const StyledItemDescription = styled(P)`
-  margin: 1em 2em 0 2em;
+  margin: 4em 2em 0 2em;
   @media ${min.tablet} {
     margin: 0;
+    font-size: 1.125em;
   }
 `;
 
@@ -93,20 +95,25 @@ const StyledCenterImage = styled(StyledMobileImage)`
 
 const StyledLeftImage = styled(StyledMobileImage)`
   left: -14em;
+
   @media ${min.tabletSm} {
     left: -20em;
   }
 `;
 
 const StyledRightImage = styled(StyledMobileImage)`
   right: -14em;
+
   @media ${min.tabletSm} {
     right: -20em;
   }
 `;
 
 const StyledArrowDescriptionContainer = styled.div`
   display: flex;
+  margin-left: -4.5em;
+  margin-right: -4.5em;
+  margin-top: -3.7em;
 `;
 
 const StyledRedRocks = styled.img`
@@ -126,6 +133,7 @@ const StyledRedRocks = styled.img`
 
 const StyledItemTitle = styled(H3)`
   font-size: 1.7em;
+  margin-bottom: 1em;
 `;
 
 export {

main-site/components/about-section/AboutSection.tsx

@@ -14,7 +14,6 @@ import {
   StyledLeftImage,
   StyledRightImage,
   StyledArrowDescriptionContainer,
-  StyledRedRocks,
   StyledItemTitle
 } from './AboutSection.styles';
 import { aboutSectionData } from '../../lib/data';
@@ -23,8 +22,8 @@ import Exploration from '../../../shared-ui/images/exploration.png';
 import Growth from '../../../shared-ui/images/growth.png';
 import { AboutSectionData } from '../../lib/types';
 import Arrow from '../../../shared-ui/components/arrow/Arrow';
-import RedRocks from '../../../shared-ui/images/red-rocks.svg';
 import { getLeftOrRight } from '../../lib/utils';
+import Shell from '../../../shared-ui/images/shell.png';
 
 function getImage(title: string): string {
   if (title === 'Community') {
@@ -48,15 +47,11 @@ const AboutSection: React.FC = () => {
         <StyledTitle>HackBeanpot is about...</StyledTitle>
         {!isDesktop && (
           <StyledItemsContainer>
-            <StyledLeftImage
-              src={getImage(
-                getLeftOrRight('left', aboutSectionData, currItem).title
-              )}
-            />
+            <StyledLeftImage src={Shell} />
             <StyledItemContainer>
-              <StyledCenterImage src={getImage(currItem.title)} />
+              <StyledCenterImage src={Shell} />
               <StyledItemTextContainer>
-                <StyledItemTitle color={colors.TEXT_BROWN}>
+                <StyledItemTitle color={colors.WHITE}>
                   {currItem.title}
                 </StyledItemTitle>
 
@@ -69,7 +64,7 @@ const AboutSection: React.FC = () => {
                       )
                     }
                   />
-                  <StyledItemDescription color={colors.TEXT_BROWN}>
+                  <StyledItemDescription color={colors.WHITE}>
                     {currItem.description}
                   </StyledItemDescription>
                   <Arrow
@@ -83,32 +78,27 @@ const AboutSection: React.FC = () => {
                 </StyledArrowDescriptionContainer>
               </StyledItemTextContainer>
             </StyledItemContainer>
-            <StyledRightImage
-              src={getImage(
-                getLeftOrRight('right', aboutSectionData, currItem).title
-              )}
-            />
+            <StyledRightImage src={Shell} />
           </StyledItemsContainer>
         )}
 
         {isDesktop && (
           <StyledItemsContainer>
             {aboutSectionData.map((curr) => (
               <StyledItemContainer key={curr.title}>
-                <StyledItemImage src={getImage(curr.title)} />
+                <StyledItemImage src={Shell} />
                 <StyledItemTextContainer>
-                  <StyledItemTitle color={colors.TEXT_BROWN}>
+                  <StyledItemTitle color={colors.WHITE}>
                     {curr.title}
                   </StyledItemTitle>
-                  <StyledItemDescription color={colors.TEXT_BROWN}>
+                  <StyledItemDescription color={colors.WHITE}>
                     {curr.description}
                   </StyledItemDescription>
                 </StyledItemTextContainer>
               </StyledItemContainer>
             ))}
           </StyledItemsContainer>
         )}
-        <StyledRedRocks src={RedRocks} />
       </StyledAboutSectionContainer>
     </div>
   );

main-site/components/past-projects-section/PastProjectsSection.styles.ts

@@ -6,9 +6,10 @@ import { max, min } from '../../../shared-ui/lib/responsive';
 const StyledArrowContainer = styled.div`
   display: flex;
   position: relative;
+  margin-top: 2.1em;
 `;
 
-const StyledPastProjectsHeader = styled(H3)`
+const StyledPastProjectsHeader = styled(H2)`
   color: ${colors.WHITE};
   padding-bottom: 1em;
   text-align: center;
@@ -75,7 +76,6 @@ const StyledPastProjectsTitle = styled(H2)`
   width: 100%;
 
   @media ${max.tablet} {
-    margin-top: 1.5em;
     text-align: center;
   };
 `;
@@ -169,10 +169,12 @@ const StyledPastProjectsPhotos = styled.img`
     float: none;
     position: relative;
     display: inline-block;
+    margin-bottom: 1.5em;
   }
 
   @media ${max.tabletLg} {
     width: 19em;
+    margin-bottom: 1.5em;
   }
 `;
 

main-site/components/past-projects-section/PastProjectsSection.tsx

@@ -40,7 +40,6 @@ const PastProjectsSection: React.FC = () => {
   return (
     <div>
       <StyledPirateFlag src={PirateFlag} />
-      {/* <StyledTreasureChest src={TreasureChest} /> */}
       <StyledPastProjectsHeader>Past Projects</StyledPastProjectsHeader>
       <StyledPastProjectsSection>
         {isDesktop &&

shared-ui/components/arrow/Arrow.styles.ts

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 const StyledArrow = styled.img`
   z-index: 5;
   cursor: pointer;
+  width: 35px;
+  height: 30px;
 `;
 
 export { StyledArrow };

shared-ui/components/arrow/Arrow.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ArrowProps } from '../../lib/types';
-import LeftArrow from '../../images/left-arrow.svg';
-import RightArrow from '../../images/right-arrow.svg';
+import LeftArrow from '../../images/arrowLeft.png';
+import RightArrow from '../../images/arrowRight.png';
 import { StyledArrow } from './Arrow.styles';
 
 const Arrow: React.FC<ArrowProps> = ({ left = true, onClick }) => {

shared-ui/images/arrowLeft.png

@@ -25,6 +25,7 @@ const H2 = styled.h2`
   margin: 0;
   @media ${min.tablet} {
     letter-spacing: 0.1em;
+    font-size: 2.5em;
   }
 `;
 
@@ -80,7 +81,7 @@ const P = styled.p`
   line-height: 1.4em;
   color: ${(props): string => (props.color ? props.color : colors.WHITE)};
   @media ${min.mobile} {
-    font-size: 0.8em;
+    font-size: 1.3em;
   }
   @media ${min.tablet} {
     font-size: 1.4em;