redesign home page

JustFixNYC · Dec 17, 2024 · 31cdd35 · 31cdd35
1 parent c4fed11
commit 31cdd35
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "format": "prettier --write --ignore-unknown \"src/**/*\""
   },
   "dependencies": {
-    "@justfixnyc/component-library": "0.53.1",
+    "@justfixnyc/component-library": "0.53.4",
     "@justfixnyc/geosearch-requester": "^1.0.3-alpha.0",
     "@rollbar/react": "^0.12.0-beta",
     "react": "^18.3.1",

diff --git a/src/Components/GeoSearchInput/GeoSearchInput.scss b/src/Components/GeoSearchInput/GeoSearchInput.scss
@@ -1,3 +1,26 @@
+@import "../../mixins.scss";
+@import "../../colors.scss";
+
 .geo-search {
-  margin-bottom: 1rem; //16px
+  // the focus outline shifts the layout a bit, so trying to counter this (still a bit of flicker, but better)
+  .jfcl-dropdown__control {
+    margin-bottom: 2px;
+    &.jfcl-dropdown__control--is-focused {
+      margin-bottom: 0;
+    }
+  }
+
+  .jfcl-dropdown__value-container {
+    padding: 1.125rem; // 18px
+  }
+  .jfcl-dropdown__placeholder {
+    @include body_large_desktop;
+    svg {
+      color: $OFF_BLACK;
+      margin-right: 1.5rem; // 24px
+    }
+  }
+  .jfcl-dropdown__indicators {
+    display: none;
+  }
 }
diff --git a/src/Components/GeoSearchInput/GeoSearchInput.tsx b/src/Components/GeoSearchInput/GeoSearchInput.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { Dropdown } from "@justfixnyc/component-library";
+import { Dropdown, Icon } from "@justfixnyc/component-library";
 import {
   GeoSearchRequester,
   GeoSearchFeature,
@@ -51,23 +51,23 @@ export const GeoSearchInput: React.FC<GeoSearchInputProps> = ({
       <Dropdown
         className="geo-search"
         options={options}
-        labelText="Enter your building address to get started"
+        placeholder={
+          <>
+            <Icon icon="locationDot" />
+            Enter your address
+          </>
+        }
         filterOption={null}
         onInputChange={(value: string) => {
           requester.changeSearchRequest(value);
           return value;
         }}
         escapeClearsValue={false}
-        defaultValue={{
-          value: initialAddress?.address,
-          label: initialAddress?.address,
-        }}
         defaultOptions={[
           { value: initialAddress?.address, label: initialAddress?.address },
         ]}
         // @ts-expect-error We need to update the JFCL onChange props to match react-select
         onChange={({ value }) => {
-          console.log("onchange", { value });
           const selectedAddress = results.find(
             (result) => formatGeosearchAddress(result.properties) === value
           );

diff --git a/src/Components/Pages/ConfirmAddress/ConfirmAddress.tsx b/src/Components/Pages/ConfirmAddress/ConfirmAddress.tsx
@@ -7,9 +7,9 @@ import { BackLink } from "../../JFCLLinkInternal";
 import { useGetBuildingData, useSendGceData } from "../../../api/hooks";
 import { GCEUser } from "../../../types/APIDataTypes";
 import { Header } from "../../Header/Header";
-import "./ConfirmAddress.scss";
 import { toTitleCase } from "../../../helpers";
 import { InfoBox } from "../../InfoBox/InfoBox";
+import "./ConfirmAddress.scss";
 
 export const ConfirmAddress: React.FC = () => {
   const navigate = useNavigate();

diff --git a/src/Components/Pages/Home/Home.scss b/src/Components/Pages/Home/Home.scss
@@ -1,22 +1,59 @@
 @import "../../../mixins.scss";
+@import "../../../variables.scss";
+@import "../../../colors.scss";
 
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding-left: 3rem; // 48px
-  padding-right: 3rem; // 48px
-}
+#home-page {
+  .geo-search-form {
+    display: inline-flex;
+    gap: 1.5rem; // 24px
+    width: 100%;
+    max-width: $contentBoxWidth;
+    margin-top: 3rem; // 48px
+    .jfcl-dropdown {
+      width: 100%;
+    }
+  }
 
-.main-content {
-  flex-grow: 1;
-  margin-top: 2.25rem; //36px
+  .content-section {
+    padding: 4.5rem 0; // 72px
+    &.home__about-law {
+      border-bottom: 1px solid $OFF_BLACK;
+      .callout-box {
+        margin-top: 3rem; // 48px
+      }
+    }
+    h3 {
+      @include h3_desktop;
+      margin: 0 0 1rem 0; // 16px
+    }
+    p {
+      @include body_large_desktop;
+      margin: 0;
+    }
+    .callout-box {
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem; // 24px
+      padding: 2.25rem; // 36px
+      background-color: $OFF_WHITE_200;
+      border-radius: 4px;
 
-  .content-p {
-    @include body_large_desktop;
-  }
-  .jfcl-input-header__label {
-    @include body_large_desktop;
-    font-weight: 600;
+      .callout-box__header {
+        @include body_large_desktop;
+      }
+      p {
+        @include body_standard_desktop;
+        margin: 0;
+      }
+    }
+    .about-project__orgs-container {
+      display: flex;
+      gap: 2.25rem; // 36px;
+      .callout-box {
+        width: 100%;
+        height: fit-content;
+        margin-top: 2.25rem; // 36px;
+      }
+    }
   }
 }
diff --git a/src/Components/Pages/Home/Home.tsx b/src/Components/Pages/Home/Home.tsx
@@ -1,12 +1,15 @@
 import { useState } from "react";
 import { useNavigate } from "react-router";
 import { Button } from "@justfixnyc/component-library";
+
 import { GeoSearchInput } from "../../GeoSearchInput/GeoSearchInput";
 import { useSessionStorage } from "../../../hooks/useSessionStorage";
-import "./Home.scss";
 import { FormFields } from "../Form/Form";
 import { useSendGceData } from "../../../api/hooks";
 import { GCEPostData, GCEUser } from "../../../types/APIDataTypes";
+import { Header } from "../../Header/Header";
+import JFCLLinkInternal from "../../JFCLLinkInternal";
+import "./Home.scss";
 
 export type Address = {
   bbl: string;
@@ -48,24 +51,72 @@ export const Home: React.FC = () => {
   };
 
   return (
-    <div className="wrapper">
-      <div className="main-content">
-        <h2>Learn if you're covered by Good Cause Eviction in NYC</h2>
-        <p className="content-p body-desktop-large">
-          If you’re covered by the law, you have a right to stay in your home
-          when your lease ends, and there are limits to how much your landlord
-          can increase your rent. This tool will show you which of the law's
-          requirements you meet and what you can do to assert your rights.
-        </p>
-
+    <div id="home-page">
+      <Header title="Learn if you're covered by Good Cause Eviction law in NYC">
         <div className="geo-search-form">
           <GeoSearchInput initialAddress={address} onChange={setGeoAddress} />
-          <Button
-            labelText="See if you are covered"
-            size="small"
-            disabled={!geoAddress && !address}
-            onClick={handleAddressSearch}
-          />
+          <Button labelText="Get started" onClick={handleAddressSearch} />
+        </div>
+      </Header>
+
+      <div className="content-section home__about-law">
+        <div className="content-section__content">
+          <h3>About the law</h3>
+          <p>
+            Good Cause Eviction went into effect on April 20th, 2024. If you are
+            covered by the law, you now have a right to remain in your home as
+            long as you pay rent and follow the terms of your lease. There are
+            also limits to how much your rent can be increased.
+          </p>
+          <div className="callout-box">
+            <span className="callout-box__header">
+              You’re protected, even if you aren’t covered
+            </span>
+            <p>
+              All NYC tenants are protected by certain rights, even if they are
+              not covered by the new Good Cause Eviction legislation.
+            </p>
+            <JFCLLinkInternal to="">
+              Learn more about tenants’ rights in NYC
+            </JFCLLinkInternal>
+          </div>
+        </div>
+      </div>
+      <div className="content-section home__about-project">
+        <div className="content-section__content">
+          <h3>About the project</h3>
+          <p>
+            To be covered by Good Cause Eviction, your apartment must meet
+            certain requirements. If you live in New York City, you can use this
+            tool to see which of the law's requirements you meet and what you
+            can do to assert your rights.
+          </p>
+          <br />
+          <p>
+            This project is a collaboration between JustFix and Housing Justice
+            for All
+          </p>
+          <div className="about-project__orgs-container">
+            <div className="callout-box">
+              <span className="callout-box__header">JustFix</span>
+              <p>
+                A non-profit that builds free tools for tenants to exercise
+                their rights to a livable home.
+              </p>
+              <JFCLLinkInternal to="">Learn more</JFCLLinkInternal>
+            </div>
+            <div className="callout-box">
+              <span className="callout-box__header">
+                Housing Justice for All
+              </span>
+              <p>
+                A statewide coalition of over 80 groups representing tenants and
+                homeless New Yorkers, united in the fight for housing as a human
+                right.
+              </p>
+              <JFCLLinkInternal to="">Learn more</JFCLLinkInternal>
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/yarn.lock b/yarn.lock
@@ -450,10 +450,10 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@justfixnyc/component-library@0.53.1":
-  version "0.53.1"
-  resolved "https://registry.yarnpkg.com/@justfixnyc/component-library/-/component-library-0.53.1.tgz#ea501646a180ed16c087f56b51baef18a8e52477"
-  integrity sha512-V/3ujeX/3pzqTMZ/GwbdZlTpSkAvI1N89f+xyX5bJlqG/YYVoMNdMypNzs1FRAvZwjN9/hwjx/1aJUyo7QFO6Q==
+"@justfixnyc/component-library@0.53.4":
+  version "0.53.4"
+  resolved "https://registry.yarnpkg.com/@justfixnyc/component-library/-/component-library-0.53.4.tgz#838f7c0c0d0cec41edd46dfd8e103cb4e655f9f8"
+  integrity sha512-ddXH/cJfmlL/Ujy48BT/spJ+PvENpKVzPbR2v0cR2NMflrlOqnza/WeDgocBRU4cwR5lCC6OLCptDd7y5izQrQ==
   dependencies:
     "@awesome.me/kit-dd32553919" "^1.0.13"
     "@babel/runtime" "^7.12.5"