style: responsive updates (#66)

sfbrigade · May 12, 2022 · 5e8bdc4 · 5e8bdc4
1 parent 0162ae2
commit 5e8bdc4
Show file tree

Hide file tree

Showing 9 changed files with 278 additions and 259 deletions.
diff --git a/src/assets/LandingPageSky.svg b/src/assets/LandingPageSky.svg
diff --git a/src/assets/RedTriangle.svg b/src/assets/RedTriangle.svg
diff --git a/src/components/Header.styles.tsx b/src/components/Header.styles.tsx
@@ -39,13 +39,16 @@ export const HiddenContainer = styled.header`
 `;
 
 export const LogoWrapper = styled.div`
-  margin-left: 56px;
+  padding-left: 4%;
+  @media screen and (max-width: 752px) {
+    padding-left: 6.9%;
+  }
 `;
 
 export const Menu = styled.div`
   height: 100%;
   display: flex;
-  padding-right: 88px;
+  padding-right: 6.9%;
   align-items: center;
   justify-content: flex-end;
 `;

diff --git a/src/components/home/AboutUs.tsx b/src/components/home/AboutUs.tsx
@@ -27,33 +27,35 @@ const AboutDescription = styled.div`
   width: 433px;
   z-index: 1;
   margin-left: 12%;
+  @media (max-width: 752px) {
+    margin: 0 12% 0 12%;
+  }
 `;
 
 const AboutUs: React.FC = () => {
   return (
-    <Container>
-      <StyledYellowHalfCircle title="Yellow half circle"/>  
-      <AboutDescription>
-        <Typography variant="h3">About</Typography>
-        <br />
-        <br />
-        <Typography>
-          We are a group of volunteers invested in working together to improve
-          the City and County of San Francisco, often using technology to
-          support our efforts. By connecting people, organizations, resources,
-          tools, and networks to build for San Francisco, we will all thrive.
-        </Typography>
-        <br />
-        <Typography>
-          The Data Science Working Group’s primary purpose is to efficiently
-          assess, inspire, and tackle Code for San Francisco’s data science
-          needs, as well as to help the City and other brigades with their
-          data science needs whenever appropriate.
-        </Typography>
-        <ImageAvatars />
-
-      </AboutDescription>
-    </Container>
+      <Container>
+        <StyledYellowHalfCircle title="Yellow half circle" />
+        <AboutDescription>
+          <Typography variant="h3">About</Typography>
+          <br />
+          <br />
+          <Typography>
+            We are a group of volunteers invested in working together to improve
+            the City and County of San Francisco, often using technology to
+            support our efforts. By connecting people, organizations, resources,
+            tools, and networks to build for San Francisco, we will all thrive.
+          </Typography>
+          <br />
+          <Typography>
+            The Data Science Working Group’s primary purpose is to efficiently
+            assess, inspire, and tackle Code for San Francisco’s data science
+            needs, as well as to help the City and other brigades with their data
+            science needs whenever appropriate.
+          </Typography>
+          <ImageAvatars />
+        </AboutDescription>
+      </Container>
   );
 };
 

diff --git a/src/components/home/Home.styles.tsx b/src/components/home/Home.styles.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { ReactComponent as LandingPageSky } from "../../assets/LandingPageSky.svg";
+import Sky from "../../assets/LandingPageSky.svg";
 
 export const PageContainer = styled.div`
   display: flex;
@@ -15,24 +15,27 @@ export const SectionContainer = styled.div`
 `;
 
 export const ImageSection = styled.div`
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
   flex: 1 1 0;
 `;
 
-export const StyledLandingPageSky = styled(LandingPageSky)`
-  position: absolute;
-  left: 0px;
+export const LPImages = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 100vh;
+  width: 100%;
+  position: relative;
+  background: url(${Sky}) no-repeat;
 `;
 
 export const StyledStoreFront = styled.img`
-  display: none;
   position: absolute;
   width: 800px;
   height: 800px;
   left: 0px;
   top: 150px;
-  @media (min-width: 768px) {
-    display: block;
-  }
 `;
 
 export const SearchSection = styled.div`
@@ -42,4 +45,4 @@ export const SearchSection = styled.div`
   justify-content: center;
   align-items: center;
   z-index: 1;
-`;
+`;
diff --git a/src/components/home/Home.test.tsx b/src/components/home/Home.test.tsx
@@ -3,7 +3,7 @@ import {fireEvent, render, screen} from "@testing-library/react";
 import Home from "./Home";
 import {Route, Router} from "react-router-dom";
 import {createMemoryHistory} from "history";
-import { setValues } from "../../context/globalStates";
+import {setValues} from "../../context/globalStates";
 
 const history = createMemoryHistory();
 history.location.state = {toAbout: false, toHome: false};
@@ -19,27 +19,27 @@ beforeEach(() => {
     setInitialData: jest.fn(),
     initialData: [],
     filteredResults: [],
-    handleClearFilters: jest.fn()
+    handleClearFilters: jest.fn(),
   });
   render(
-    <Router history={history}>
-      <Route component={Home} />
-    </Router>
+      <Router history={history}>
+        <Route component={Home} />
+      </Router>
   );
 });
 
 describe("Home", () => {
   it("renders a homepage title with description", () => {
     expect(
-      screen.getByRole("heading", {name: "Find Loans & Grants"})
+        screen.getByRole("heading", {name: "Find Loans & Grants"})
     ).toBeVisible();
     expect(
-      screen.getByText(/Search our database for Bay Area loans/i)
+        screen.getByText(/Search our database for Bay Area loans/i)
     ).toBeVisible();
   });
 
   it("renders a landing page sky svg with a front house image", () => {
-    expect(screen.getByTitle("Landing page sky")).toBeVisible();
+    expect(screen.getByTestId("sky-asset")).toBeVisible();
     expect(screen.getByRole("img", {name: "Storefront"})).toBeVisible();
   });
 
@@ -58,21 +58,21 @@ describe("Home", () => {
       expect(screen.getByText("Help us look")).toBeVisible();
 
       expect(
-        screen.getByText(
-          "We search across government websites, social media, and fundraising platforms to look for financial aid. We then help categorize them so it’s easy for you to find."
-        )
+          screen.getByText(
+              "We search across government websites, social media, and fundraising platforms to look for financial aid. We then help categorize them so it’s easy for you to find."
+          )
       ).toBeVisible();
 
       expect(
-        screen.getByText(
-          "We search across government websites, social media, and fundraising platforms to look for financial aid. We then help categorize them so it’s easy for you to find."
-        )
+          screen.getByText(
+              "We search across government websites, social media, and fundraising platforms to look for financial aid. We then help categorize them so it’s easy for you to find."
+          )
       ).toBeVisible();
 
       expect(
-        screen.getByText(
-          "Found a fund that isn’t on our website? Help the community by letting us know, so we can add it to our database."
-        )
+          screen.getByText(
+              "Found a fund that isn’t on our website? Help the community by letting us know, so we can add it to our database."
+          )
       ).toBeVisible();
 
       expect(screen.getByAltText("We scrape the internet")).toBeVisible();
@@ -85,15 +85,15 @@ describe("Home", () => {
     it("renders heading and description", () => {
       expect(screen.getByRole("heading", {name: "About"})).toBeVisible();
       expect(
-        screen.getByText(
-          "We are a group of volunteers invested in working together to improve the City and County of San Francisco, often using technology to support our efforts. By connecting people, organizations, resources, tools, and networks to build for San Francisco, we will all thrive."
-        )
+          screen.getByText(
+              "We are a group of volunteers invested in working together to improve the City and County of San Francisco, often using technology to support our efforts. By connecting people, organizations, resources, tools, and networks to build for San Francisco, we will all thrive."
+          )
       ).toBeInTheDocument();
 
       expect(
-        screen.getByText(
-          "The Data Science Working Group’s primary purpose is to efficiently assess, inspire, and tackle Code for San Francisco’s data science needs, as well as to help the City and other brigades with their data science needs whenever appropriate."
-        )
+          screen.getByText(
+              "The Data Science Working Group’s primary purpose is to efficiently assess, inspire, and tackle Code for San Francisco’s data science needs, as well as to help the City and other brigades with their data science needs whenever appropriate."
+          )
       ).toBeInTheDocument();
     });
     it("renders a yellow half circle svg", () => {
@@ -105,35 +105,35 @@ describe("Home", () => {
     it("renders heading and description", () => {
       expect(screen.getByRole("heading", {name: "Thank you"})).toBeVisible();
       expect(
-        screen.getByText(
-          "This project couldn’t have happened without the generosity of the friends and family of Sanat Moningi. Thank you also to our sponsors, who provided us the tools to make this portal possible."
-        )
+          screen.getByText(
+              "This project couldn’t have happened without the generosity of the friends and family of Sanat Moningi. Thank you also to our sponsors, who provided us the tools to make this portal possible."
+          )
       ).toBeVisible();
     });
 
     it("renders images and logos with links", () => {
       expect(screen.getByAltText("Thank you image")).toBeVisible();
       expect(screen.getByAltText("Code for SF Logo")).toBeVisible();
       expect(
-        screen.getByAltText("Code for SF Logo").closest("a")
+          screen.getByAltText("Code for SF Logo").closest("a")
       ).toHaveAttribute("href", "https://www.codeforsanfrancisco.org/");
 
       expect(screen.getByAltText("GitHub Logo")).toBeVisible();
       expect(screen.getByAltText("GitHub Logo").closest("a")).toHaveAttribute(
-        "href",
-        "https://github.com/"
+          "href",
+          "https://github.com/"
       );
 
       expect(screen.getByAltText("React Logo")).toBeVisible();
       expect(screen.getByAltText("React Logo").closest("a")).toHaveAttribute(
-        "href",
-        "https://reactjs.org/"
+          "href",
+          "https://reactjs.org/"
       );
     });
 
     it("renders a red triangle and teal square svg", () => {
-      expect(screen.getByTitle("Red triangle")).toBeVisible();
-      expect(screen.getByTitle("Teal square")).toBeVisible();
+      expect(screen.getByAltText("red triangle")).toBeVisible();
+      expect(screen.getByAltText("teal square")).toBeVisible();
     });
   });
 });
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
@@ -1,11 +1,11 @@
 import React, {useEffect, useRef} from "react";
 import {
-  PageContainer,
-  SectionContainer,
-  ImageSection,
-  StyledLandingPageSky,
-  StyledStoreFront,
-  SearchSection,
+    PageContainer,
+    SectionContainer,
+    ImageSection,
+    StyledStoreFront,
+    SearchSection,
+    LPImages,
 } from "./Home.styles";
 import {RouteComponentProps} from "react-router-dom";
 import Storefront from "../../assets/Storefront.png";
@@ -14,45 +14,44 @@ import AboutUs from "./AboutUs";
 import ThankYou from "./ThankYou";
 import {SearchForm} from "./SearchForm";
 import Typography from "@mui/material/Typography";
-import { LocationState } from "../../types";
+import {LocationState} from "../../types";
 
 const Home: React.FC<RouteComponentProps> = ({location}) => {
-  const aboutRef = useRef<HTMLDivElement>(null);
-  const customLocationState = location.state as LocationState;
-  useEffect(() => {
-    if (customLocationState?.toAbout === true){
-      aboutRef.current.scrollIntoView({
-        behavior: "smooth",
-      });
-    }
-    if (customLocationState?.toHome === true) {
-      window.scrollTo(0, 0);
-    }
-  }, [location]);
+    const aboutRef = useRef<HTMLDivElement>(null);
+    const customLocationState = location.state as LocationState;
+    useEffect(() => {
+        if (customLocationState?.toAbout === true) {
+            aboutRef.current.scrollIntoView({
+                behavior: "smooth",
+            });
+        }
+        if (customLocationState?.toHome === true) {
+            window.scrollTo(0, 0);
+        }
+    }, [location]);
 
-  return (
-    <PageContainer>
-      <SectionContainer>
-        <ImageSection>
-          <StyledLandingPageSky title="Landing page sky" />
-          <StyledStoreFront src={Storefront} alt="Storefront" />
-        </ImageSection>
-        <SearchSection>
-          <Typography variant="h3">Find Loans & Grants</Typography>
-          <SearchForm />
-        </SearchSection>
-      </SectionContainer>
-      <SectionContainer>
-        <HowItWorks />
-      </SectionContainer>
-      <SectionContainer ref={aboutRef} style={{scrollMarginTop: "-98px"}}>
-        <AboutUs />
-      </SectionContainer>
-      <SectionContainer>
-        <ThankYou />
-      </SectionContainer>
-    </PageContainer>
-  );
+    return (
+        <PageContainer className="containerPage">
+            <LPImages data-testid="sky-asset">
+                <ImageSection>
+                    <StyledStoreFront src={Storefront} alt="Storefront" />
+                </ImageSection>
+                <SearchSection>
+                    <Typography variant="h3">Find Loans & Grants</Typography>
+                    <SearchForm />
+                </SearchSection>
+            </LPImages>
+            <SectionContainer>
+                <HowItWorks />
+            </SectionContainer>
+            <SectionContainer ref={aboutRef} style={{scrollMarginTop: "-98px"}}>
+                <AboutUs />
+            </SectionContainer>
+            <SectionContainer>
+                <ThankYou />
+            </SectionContainer>
+        </PageContainer>
+    );
 };
 
 export default Home;