From 240fd5e53b5e1e11802aa372ec1c72ea2543a382 Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@media.mit.edu>
Date: Sun, 25 Oct 2020 23:10:11 -0400
Subject: [PATCH] Make 4Ps more consistent with design sketch for all screen
 sizes.

---
 src/views/annual-report/annual-report.jsx  |  84 +++++++++--
 src/views/annual-report/annual-report.scss | 160 ++++++++++++++++-----
 2 files changed, 194 insertions(+), 50 deletions(-)

diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx
index 8820d6473..fc57d88f7 100644
--- a/src/views/annual-report/annual-report.jsx
+++ b/src/views/annual-report/annual-report.jsx
@@ -409,29 +409,91 @@ class AnnualReport extends React.Component {
                                 />
                             </p>
                         </div>
-                        <div className="four-ps-wrapper">
-                            <div className="four-ps">
+                        <div className="four-ps">
+                            <MediaQuery minWidth={frameless.tabletPortrait}>
                                 <div className="one-p four-ps-projects">
-                                    <h3><FormattedMessage id="annualReport.missionProjectsTitle" /></h3>
-                                    <p><FormattedMessage id="annualReport.missionProjectsDescription" /></p>
+                                    <div className="title-and-description">
+                                        <h3><FormattedMessage id="annualReport.missionProjectsTitle" /></h3>
+                                        <p><FormattedMessage id="annualReport.missionProjectsDescription" /></p>
+                                    </div>
                                     <img src="/images/annual-report/mission/Projects Illustration.svg" />
                                 </div>
+                            </MediaQuery>
+                            <MediaQuery
+                                className="one-p top"
+                                maxWidth={frameless.tabletPortrait - 1}
+                            >
+                                <div className="title-and-description">
+                                    <h3><FormattedMessage id="annualReport.missionProjectsTitle" /></h3>
+                                    <p><FormattedMessage id="annualReport.missionProjectsDescription" /></p>
+                                </div>
+                                <div className="small-p four-ps-projects">
+                                    <img src="/images/annual-report/mission/Projects Illustration.svg" />
+                                </div>
+                            </MediaQuery>
+                            <MediaQuery minWidth={frameless.tabletPortrait}>
                                 <div className="one-p four-ps-passion">
-                                    <h3><FormattedMessage id="annualReport.missionPassionTitle" /></h3>
-                                    <p><FormattedMessage id="annualReport.missionPassionDescription" /></p>
+                                    <div className="title-and-description">
+                                        <h3><FormattedMessage id="annualReport.missionPassionTitle" /></h3>
+                                        <p><FormattedMessage id="annualReport.missionPassionDescription" /></p>
+                                    </div>
                                     <img src="/images/annual-report/mission/Passion Illustration.svg" />
                                 </div>
+                            </MediaQuery>
+                            <MediaQuery
+                                className="one-p"
+                                maxWidth={frameless.tabletPortrait - 1}
+                            >
+                                <div className="title-and-description">
+                                    <h3><FormattedMessage id="annualReport.missionPassionTitle" /></h3>
+                                    <p className="no-margin-bottom"><FormattedMessage id="annualReport.missionPassionDescription" /></p>
+                                </div>
+                                <div className="small-p four-ps-passion">
+                                    <img src="/images/annual-report/mission/Passion Illustration.svg" />
+                                </div>
+                            </MediaQuery>
+                            <MediaQuery minWidth={frameless.tabletPortrait}>
                                 <div className="one-p four-ps-peers">
-                                    <h3><FormattedMessage id="annualReport.missionPeersTitle" /></h3>
-                                    <p><FormattedMessage id="annualReport.missionPeersDescription" /></p>
+                                    <div className="title-and-description">
+                                        <h3><FormattedMessage id="annualReport.missionPeersTitle" /></h3>
+                                        <p><FormattedMessage id="annualReport.missionPeersDescription" /></p>
+                                    </div>
                                     <img src="/images/annual-report/mission/Peers Illustration.svg" />
                                 </div>
+                            </MediaQuery>
+                            <MediaQuery
+                                className="one-p"
+                                maxWidth={frameless.tabletPortrait - 1}
+                            >
+                                <div className="title-and-description">
+                                    <h3><FormattedMessage id="annualReport.missionPeersTitle" /></h3>
+                                    <p><FormattedMessage id="annualReport.missionPeersDescription" /></p>
+                                </div>
+                                <div className="small-p four-ps-peers">
+                                    <img src="/images/annual-report/mission/Peers Illustration.svg" />
+                                </div>
+                            </MediaQuery>
+                            <MediaQuery minWidth={frameless.tabletPortrait}>
                                 <div className="one-p four-ps-play">
-                                    <h3><FormattedMessage id="annualReport.missionPlayTitle" /></h3>
-                                    <p><FormattedMessage id="annualReport.missionPlayDescription" /></p>
+                                    <div className="title-and-description">
+                                        <h3><FormattedMessage id="annualReport.missionPlayTitle" /></h3>
+                                        <p><FormattedMessage id="annualReport.missionPlayDescription" /></p>
+                                    </div>
                                     <img src="/images/annual-report/mission/Play Illustration.svg" />
                                 </div>
-                            </div>
+                            </MediaQuery>
+                            <MediaQuery
+                                className="one-p"
+                                maxWidth={frameless.tabletPortrait - 1}
+                            >
+                                <div className="title-and-description">
+                                    <h3><FormattedMessage id="annualReport.missionPlayTitle" /></h3>
+                                    <p><FormattedMessage id="annualReport.missionPlayDescription" /></p>
+                                </div>
+                                <div className="small-p four-ps-play">
+                                    <img src="/images/annual-report/mission/Play Illustration.svg" />
+                                </div>
+                            </MediaQuery>
                         </div>
                     </div>
                     <div
diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss
index 88dc25e64..6b31818dd 100644
--- a/src/views/annual-report/annual-report.scss
+++ b/src/views/annual-report/annual-report.scss
@@ -280,25 +280,37 @@ p {
       text-align: left;
   }
 
-
   .inner {
     padding-top: 124px;
     width: 620px;
   }
-  
-  .four-ps-wrapper {
-    padding: 124px 0;
+
+  .four-ps {
+    margin: 56px 0 124px 0;
     width: 940px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    
+    @media #{$intermediate} {
+        margin-top: 96px 0 108px 0;
+    }
+
     @media #{$intermediate-and-smaller} {
-      padding-top: 20px;
+      justify-content: center;
+    }
+
+    @media #{$medium-and-smaller} {
+        margin-top: 76px;
+        align-items: center;
     }
   }
-  
-  .inner, .four-ps-wrapper {  
+
+  .inner, .four-ps {
     @media #{$intermediate} {
       width: 620px;
     }
-
     @media #{$medium} {
       width: 460px;
     }
@@ -307,77 +319,147 @@ p {
     }
   }
   
-  .four-ps {
-    height: 940px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    @media #{$intermediate-and-smaller} {
-      height: auto;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-  
   .one-p {
-    width: 300px;
-    height: 370px;
-    padding: 20px 80px;
-    background-position: center;
+    width: 460px;
+    height: 493px;
     background-repeat: no-repeat;
     background-size: contain;
-    margin-top: 20px;
     margin-right: 20px;
-    p {
-      font-size: 1.25rem;
-      margin-top: 1.5rem;
+
+    img {
+        width: 460px;
+    }
+
+    &.top {
+        margin-top: 0px;
     }
 
     @media #{$intermediate-and-smaller} {
       padding: 0;
+      width: 300px;
+      background-position: center;
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+
+      img {
+          width: 300px;
+      }
+    }
+
+    @media #{$intermediate} {
+        height: 370px;
+    }
+
+    @media #{$medium-and-smaller} {
+        margin-top: 62px;
+        height: 398px;
     }
 
     @media #{$medium} {
         margin-right: 0;
     }
+
+    .title-and-description {
+        width: 300px;
+        margin: 16px auto 0 auto;
+        
+        p {
+            font-size: 1.25rem;
+            line-height: 2rem;
+            margin-top: 16px;
+        }
+
+        .no-margin-bottom {
+            margin-bottom: 0;
+        }
+    
+        @media #{$intermediate-and-smaller} {
+            text-align: center;
+        }
+
+        @media #{$medium-and-smaller} {
+            margin: 0 auto;
+            
+            p {
+                font-size: 1rem;
+                line-height: 2rem;
+                margin-bottom: 16px;
+            }
+        }
+
+        @media #{$medium} {
+            p {
+                margin-top: 12px;
+            }
+        }
+
+        @media #{$small} {
+            p {
+                margin-top: 5px;
+            }
+        }
+    }
+  }
+
+  .small-p {
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 268px;
+
+    img {
+        margin: 34px 0;
+    }
   }
   
   .four-ps-projects {
     background-image: url("/images/annual-report/mission/Projects Splash.svg");
   }
   
-  .four-ps-peers {
-    background-image: url("/images/annual-report/mission/Peers Splash.svg");
-  }
-  
   .four-ps-passion {
     background-image: url("/images/annual-report/mission/Passion Splash.svg");
-    margin-top: 72px;
+    margin-top: 112px;
     margin-right: 0;
 
     @media #{$intermediate} {
-        margin-top: 72px;
+        margin-top: 96px;
     }
 
     @media #{$medium-and-smaller} {
-      margin-top: 20px;
+      margin-top: 0;
     }    
   }
+
+  .four-ps-peers {
+    background-image: url("/images/annual-report/mission/Peers Splash.svg");
+    margin-top: -80px;
+
+    @media #{$intermediate} {
+        margin-top: -72px;
+    }
+    
+    @media #{$medium-and-smaller} {
+        margin-top: 0;
+    } 
+  }
   
   .four-ps-play {
     background-image: url("/images/annual-report/mission/Play Splash.svg");
     margin-right: 0;
-    margin-top: 72px;
+    margin-top: 32px;
 
     @media #{$intermediate} {
-        margin-top: 72px;
+        margin-top: 24px;
     }
 
     @media #{$medium-and-smaller} {
-      margin-top: 20px;
+        margin-top: 0;
     } 
   }
+
 }
 
 .milestones-section {