Mobile Header

src/components/Header.styles.tsx

@@ -2,11 +2,13 @@ import styled from "styled-components";
 import {Link} from "react-router-dom";
 import {Typography} from "@material-ui/core";
 import {colors} from "../theme";
+import {ReactComponent as Logo} from "../assets/Logo.svg";
 
 export const WhiteContainer = styled.header`
   top: 0;
+  right:0;
   width: 100%;
-  height: 98px;
+  height: 20vw;
   z-index: 100;
   display: flex;
   position: fixed;
@@ -15,21 +17,27 @@ export const WhiteContainer = styled.header`
   background-color: white;
   justify-content: space-between;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.14);
+
 `;
 export const TransparentContainer = styled.header`
   top: 0;
+  right:0;
   width: 100%;
-  height: 98px;
+  height: 15vw;
   z-index: 100;
   display: flex;
   position: fixed;
   overflow: hidden;
   align-items: center;
   justify-content: space-between;
+
+  @media(min-width: 30rem){
+    height: 8.5vw;
+  }
 `;
 
 export const FilterContainer = styled.div`
-  @media (min-width: 752px) {
+  @media (min-width: 30rem) {
     display: none;
   }
 `;
@@ -39,13 +47,25 @@ export const HiddenContainer = styled.header`
 `;
 
 export const LogoWrapper = styled.div`
-  margin-left: 56px;
+  margin-left: 5.1vw;
+`;
+
+export const StyledLogo = styled(Logo)`
+  width: 40vw;
+  height: 25vw;
+
+  @media(min-width: 30rem){
+   width: 20vw;
+   height: 10vh;
+
+ }
+
 `;
 
 export const Menu = styled.div`
   height: 100%;
   display: flex;
-  padding-right: 88px;
+  padding-right: 8.1vw;
   align-items: center;
   justify-content: flex-end;
 `;
@@ -54,22 +74,23 @@ export const SmallMenuContainer = styled.div`
   display: block;
   color: black;
   text-align: center;
-  margin-left: 32px;
+  margin-left: 3vw;
   text-decoration: none;
+  margin:0;
 
-  @media (min-width: 752px) {
+  @media (min-width: 30rem) {
     display: none;
   }
 `;
 
 export const MenuItem = styled(Link)`
   display: none;
 
-  @media (min-width: 752px) {
+  @media (min-width: 30rem) {
     display: block;
     color: black;
     text-align: center;
-    margin-left: 32px;
+    margin-left: 2.3vw;
     text-decoration: none;
   }
 `;

src/components/Header.tsx

@@ -1,7 +1,6 @@
 import React, {useContext, useEffect, useState} from "react";
 import {StyledComponent} from "styled-components";
 import {Link, useLocation} from "react-router-dom";
-import {ReactComponent as Logo} from "../assets/Logo.svg";
 
 import {FilterBar} from "./results/FilterBar";
 
@@ -17,6 +16,7 @@ import {
   FilterContainer,
   HiddenContainer,
   LogoWrapper,
+  StyledLogo,
   Menu,
   MenuItem,
   SmallMenuContainer,
@@ -161,7 +161,7 @@ const Header: React.FC = () => {
   return (
     <Container>
       <LogoWrapper>
-        <Logo role="logo" />
+        <StyledLogo role="logo" />
       </LogoWrapper>
       {isResultsPage && (
         <FilterContainer>

src/components/home/Home.styles.tsx

@@ -2,40 +2,69 @@ import styled from "styled-components";
 import {ReactComponent as LandingPageSky} from "../../assets/LandingPageSky.svg";
 
 export const PageContainer = styled.div`
-  display: flex;
-  flex-direction: column;
 `;
 
 export const SectionContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  min-height: 100vh;
-  width: 100%;
-  position: relative;
+  width: 100%;  
+  display: flex;  
+  flex-direction: column;
+
+  @media(min-width: 30rem){
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
 `;
 
 export const ImageSection = styled.div`
-  flex: 1 1 0;
+  position: relative;
+  height: 70vw;
+
+  @media(min-width: 30rem){
+    flex: 0.5;
+    height: 55vw;
+  }
 `;
 
 export const StyledLandingPageSky = styled(LandingPageSky)`
   position: absolute;
   left: 0px;
+  width: 80vw;
+  height: 80vw;
+
+  @media(min-width: 30rem){
+    width: 46vw;
+    max-width: 530px;
+    height: 46vw;
+    max-height: 530px;
+  }
 `;
 
 export const StyledStoreFront = styled.img`
   position: absolute;
-  width: 800px;
-  height: 800px;
+  width: 72vw;
+  height: 72vw;
   left: 0px;
-  top: 150px;
+  top: 13vw;
+
+  @media(min-width: 30rem){
+    width: 43vw;
+    max-width: 500px;
+    height: 43vw;
+    max-height: 500px;
+    top: 8vw;
+  }
 `;
 
 export const SearchSection = styled.div`
-  flex: 1 1 0;
+  flex: 0.5;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   z-index: 1;
+  margin-top: 10vw;
+
+  @media(min-width: 30rem){
+    margin-top: 10vw;
+  }
 `;

src/components/home/Home.tsx

@@ -1,3 +1,4 @@
+
 import React, {useEffect, useRef} from "react";
 import {
   PageContainer,
@@ -36,7 +37,7 @@ const Home: React.FC<RouteComponentProps<{}, {}, LocationState>> = ({
     <PageContainer>
       <SectionContainer>
         <ImageSection>
-          <StyledLandingPageSky title="Landing page sky" />
+          <StyledLandingPageSky title="Landing page sky" /> 
           <StyledStoreFront src={Storefront} alt="Storefront" />
         </ImageSection>
         <SearchSection>

src/components/home/SearchForm.tsx

@@ -1,3 +1,4 @@
+
 import styled from "styled-components";
 import Select from "@material-ui/core/Select";
 import {County, OrgType} from "../../types";
@@ -14,20 +15,28 @@ const SearchFormContainer = styled.form`
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 14px;
-  border: 0;
+  margin-top: 1.4vw;
 `;
 
 const SearchDescription = styled.div`
-  width: 400px;
   z-index: 10;
-  margin-bottom: 27px;
+  margin-bottom: 7vw;
+  width: 90%;
+
+  @media(min-width: 30rem){
+    width: 33vw;
+    margin-bottom: 1.5vw;
+  }
 `;
 
 const SearchFormFields = styled.div`
   display: flex;
   flex-direction: column;
-  width: 328px;
+  width: 80%;
+
+  @media(min-width: 30rem){
+    width: 28vw;
+  }
 `;
 
 const StyledSelect = styled(Select)`
@@ -36,9 +45,16 @@ const StyledSelect = styled(Select)`
 
 const SearchButton = styled(Button)`
   && {
-    width: 97px;
-    height: 36px;
+    width: 20vw;
+    height: 10.6vw;
     border-radius: 200px;
+    font-size: 5vw;
+
+    @media(min-width: 30rem){
+      width: 8.9vw;
+      height: 3.6vw;
+      font-size: 1.3vw;
+    }
 
     :disabled {
       background-color: ${colors.primaryRed};
@@ -49,9 +65,16 @@ const SearchButton = styled(Button)`
 `;
 const DonateButton = styled(Button)`
   && {
-    margin-top: 13px;
-    padding: 13px;
-    border-radius: 4px;
+    margin-top: 2vw;
+    padding: 2vw;
+    border-radius: 0.4vw;
+    font-size: 6vw;
+
+    @media(min-width: 30rem){
+      margin-top: 1.2vw;
+      padding: 1.2vw;
+      font-size: 1.3vw;
+    }
   }
 `;
 

src/theme.ts

@@ -18,10 +18,14 @@ export const theme = createMuiTheme({
   },
   typography: {
     fontFamily: "Source Sans Pro",
+
     h3: {
       fontFamily: "Bree Serif",
-      fontSize: "48px",
+      fontSize: "10vw",
       color: colors.text,
+      ['@media (min-width: 30rem)']:{
+        fontSize: "4.1vw"
+      }
     },
     h4: {
       fontSize: "34px",
@@ -41,9 +45,13 @@ export const theme = createMuiTheme({
       letterSpacing: "0.15px"
     },
     body1: {
-      fontSize: "18px",
-      lineHeight: "28px",
-      letterSpacing: "0.5px",
+      fontSize: "5vw",
+      lineHeight: "5.3vw",
+      letterSpacing: "0.05vw",
+      ['@media (min-width: 30rem)']:{
+        fontSize: "1.5vw",
+        lineHeight: "2vw"
+      }
     },
     body2: {
       fontSize: "12px",
@@ -57,7 +65,7 @@ export const theme = createMuiTheme({
       letterSpacing: "0.25px",
     },
     button: {
-      fontWeight: 600,
+      fontWeight: 600
     },
     overline: {
       fontSize: "12px",