From 467d38c9e38fd8dba94d24db9ef18677f51c4c96 Mon Sep 17 00:00:00 2001 From: Robert A Dixon Date: Tue, 17 Sep 2024 19:41:34 -0400 Subject: [PATCH 1/4] completed first task --- .../pages/Landing/RenderLandingPage.jsx | 82 +++++++++++-- src/styles/RenderLandingPage.less | 111 +++++++++++++++--- 2 files changed, 167 insertions(+), 26 deletions(-) diff --git a/src/components/pages/Landing/RenderLandingPage.jsx b/src/components/pages/Landing/RenderLandingPage.jsx index 6be6b69a4..0d019ae9c 100644 --- a/src/components/pages/Landing/RenderLandingPage.jsx +++ b/src/components/pages/Landing/RenderLandingPage.jsx @@ -1,14 +1,14 @@ import React from 'react'; // ADD IMPORTS BACK FOR GRAPHS SECTION -// import GrantRatesByOfficeImg from '../../../styles/Images/bar-graph-no-text.png'; -// import GrantRatesByNationalityImg from '../../../styles/Images/pie-chart-no-text.png'; -// import GrantRatesOverTimeImg from '../../../styles/Images/line-graph-no-text.png'; +import GrantRatesByOfficeImg from '../../../styles/Images/bar-graph-no-text.png'; +import GrantRatesByNationalityImg from '../../../styles/Images/pie-chart-no-text.png'; +import GrantRatesOverTimeImg from '../../../styles/Images/line-graph-no-text.png'; import HrfPhoto from '../../../styles/Images/paper-stack.jpg'; import '../../../styles/RenderLandingPage.less'; import { Button } from 'antd'; import { useHistory } from 'react-router-dom'; // for the purposes of testing PageNav -// import PageNav from '../../common/PageNav'; +import PageNav from '../../common/PageNav'; function RenderLandingPage(props) { const scrollToTop = () => { @@ -17,7 +17,7 @@ function RenderLandingPage(props) { }; const history = useHistory(); - + ; return (
@@ -32,7 +32,24 @@ function RenderLandingPage(props) {
{/* Graphs Section: Add code here for the graphs section for your first ticket */} - {/*
*/} +
+
+ Grant Rates by Office +

Search Grant Rates By Office

+
+
+ Grant Rates by Nationality +

Search Grant Rates By Nationality

+
+
+ Grant Rates Over Time +

Search Grant Rates Over Time

+
+
+
+
@@ -55,16 +79,52 @@ function RenderLandingPage(props) { through a Freedom of Information Act request. You can search for information on asylum grant rates by year, nationality, and asylum office, visualize the data with charts and heat maps, and download - the data set + the data set.
{/* Bottom Section: Add code here for the graphs section for your first ticket */} - {/*
*/} -

scrollToTop()} className="back-to-top"> - Back To Top ^ -

+
+

Systematic Disparity Insights

+
+
+

36%

+

+ By the end of the Trump administration, the average asylum + office grant rate had fallen 36 percent from an average of 44 + percent in fiscal year 2016 to 28 percent in fiscal year 2020. +

+
+
+

5%

+

+ The New York asylum office grant rate dropped to 5 percent in + fiscal year 2020. +

+
+
+

6x Lower

+

+ Between fiscal year 2017 and 2020, the New York asylum office’s + average grant rate was six times lower than the San Francisco + asylum office. +

+
+
+
+ +
+

scrollToTop()} className="back-to-top"> + Back To Top ^ +

+
); diff --git a/src/styles/RenderLandingPage.less b/src/styles/RenderLandingPage.less index 70ee07c37..8a14c65e8 100644 --- a/src/styles/RenderLandingPage.less +++ b/src/styles/RenderLandingPage.less @@ -10,7 +10,7 @@ .header { background-color: @main-color; - display:flex; + display: flex; text-align: center; width: 100%; height: 20vh; @@ -27,31 +27,53 @@ text-align: center; width: 100%; align-items: center; + margin-bottom: 40px; + font-size: 24px; } .header-text-container h1 { - font-size: 3rem; + font-size: 48px; color: @white; font-family: 'moneta'; } .header-text-container h3 { - font-family: 'beatrice regular'; + font-family: 'moneta'; color: @white; - font-size: 1.2rem; + font-size: 24px; } -// .graphs-section { +.graphs-section { // ADD THIS BACK IN WHEN YOU HAVE THE GRAPHS SECTION -// } + display: flex; + justify-content: space-around; /* Distribute space between images */ + // width: 100%; + // margin-bottom: 20px; + align-items: flex-end; /* Align items to the bottom */ +} + +.graphs-section img { + display: block; /* Ensure images are block elements for margin */ + margin: 0 auto; /* Center the images */ +} + +.graphs-section p { + text-align: center; /* Center the text below the image */ + margin-top: 10px; /* Add space between the image and caption */ + font-family: 'acumin'; + font-size: 24px; /* Adjust the font size to be slightly larger */ +} .view-more-data-btn-container { + display: flex; + justify-content: center; /* Align buttons closer together */ + align-items: center; + gap: 40px; /* Adjust this value to control spacing between buttons */ height: 44px; - width: 180px; - margin: 0 auto; - text-align: center; - margin-bottom: 10%; -} + width: 100%; + margin-bottom: 5%; + margin-top: 60px; + } .middle-section { display: flex; @@ -75,16 +97,73 @@ font-size: 1.4rem; } -// .bottom-section { +.bottom-section { // ADD THIS BACK IN WHEN YOU HAVE A BOTTOM SECTION -// } + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 40px; + margin-top: 130px; +} + +h1 { + font-size: 56px; + font-family: 'Moneta'; + } + +.h2-container { + display: flex; + justify-content: space-between; /* Align items with space between them */ + gap: 20px; /* Adjust spacing between the h2/h3 items */ + margin-bottom: 20px; /* Space below the container */ + margin-top: 80px; + } + +.h2-item { + display: flex; + flex-direction: column; /* Align elements in a vertical column */ + align-items: center; /* Center the content horizontally */ + text-align: center; /* Ensure the text inside is centered */ + margin-bottom: 20px; /* Add some spacing below */ + } + + .h2-item h2 { + margin: 0; + font-family: 'moneta'; + font-size: 48px; + } + + .h2-item h3 { + margin-top: 10px; /* Add some space between the

and

*/ + line-height: 1.4; /* Adjust the line height for readability */ + max-width: 300px; /* Control the width for wrapping */ + text-align: center; /* Center the text */ + font-family: 'acumin'; + font-size: 1.2rem; + } + +.h2-container h2 { + margin: 0; + } + + .h2-container h3 { + margin: 0; + text-align: center; + line-height: 1.5; /* Adjust line height for readability */ + max-width: 500px; /* Adjust width to control text wrapping */ + } .back-to-top { width: 8%; font-size: 1.2rem; cursor: pointer; color: black; - margin: 5% auto; + margin: .2% auto; + margin-top: 20px; + margin-bottom: 30px; + display: flex; + justify-content: center; + align-items: center; } .ant-space-align-center { @@ -179,7 +258,9 @@ } .bottom-section h1 { - font-size: 2rem; + font-family: 'moneta', sans-serif;; + font-size: 48px; + margin-bottom: 10vh; } .data-container { From e4508a241fabd6286de69e43d3bacbfe44bc5b9d Mon Sep 17 00:00:00 2001 From: Robert A Dixon Date: Wed, 18 Sep 2024 03:35:03 -0400 Subject: [PATCH 2/4] wip --- src/styles/RenderLandingPage.less | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/styles/RenderLandingPage.less b/src/styles/RenderLandingPage.less index 8a14c65e8..3f8db43ec 100644 --- a/src/styles/RenderLandingPage.less +++ b/src/styles/RenderLandingPage.less @@ -47,8 +47,6 @@ // ADD THIS BACK IN WHEN YOU HAVE THE GRAPHS SECTION display: flex; justify-content: space-around; /* Distribute space between images */ - // width: 100%; - // margin-bottom: 20px; align-items: flex-end; /* Align items to the bottom */ } From 109aca70631407ef6dc5aba1725bbb738798bb7e Mon Sep 17 00:00:00 2001 From: Robert A Dixon Date: Wed, 18 Sep 2024 04:13:39 -0400 Subject: [PATCH 3/4] wip --- src/components/pages/Landing/RenderLandingPage.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/pages/Landing/RenderLandingPage.jsx b/src/components/pages/Landing/RenderLandingPage.jsx index 0d019ae9c..9bf89cde9 100644 --- a/src/components/pages/Landing/RenderLandingPage.jsx +++ b/src/components/pages/Landing/RenderLandingPage.jsx @@ -130,3 +130,4 @@ function RenderLandingPage(props) { ); } export default RenderLandingPage; + From c97ef90f2729d5662ce15ad61c8fd3ed334f37d1 Mon Sep 17 00:00:00 2001 From: Robert A Dixon Date: Wed, 18 Sep 2024 04:14:45 -0400 Subject: [PATCH 4/4] wip --- src/components/pages/Landing/RenderLandingPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pages/Landing/RenderLandingPage.jsx b/src/components/pages/Landing/RenderLandingPage.jsx index 9bf89cde9..3f182baa4 100644 --- a/src/components/pages/Landing/RenderLandingPage.jsx +++ b/src/components/pages/Landing/RenderLandingPage.jsx @@ -26,7 +26,7 @@ function RenderLandingPage(props) {

The Asylum Office Grant Rate Tracker provides asylum seekers, researchers, policymakers, and the public an interactive tool to - explore USCIS data on Asylum Office decisions + explore USCIS data on Asylum Office decisions.