1165/design items

sites/public/pages/listing/[id]/[slug].tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useContext } from "react"
 import Head from "next/head"
 import axios from "axios"
 import { Listing } from "@bloom-housing/backend-core/types"
-import { AuthContext, t } from "@bloom-housing/ui-components"
+import { AuthContext, ListingDividerLine, t } from "@bloom-housing/ui-components"
 import { imageUrlFromListing, ListingDetail, pushGtmEvent } from "@bloom-housing/shared-helpers"
 import { UserStatus } from "../../../lib/constants"
 import Layout from "../../../layouts/application"
@@ -63,6 +63,9 @@ export default function ListingPage(props: ListingProps) {
         <title>{pageTitle}</title>
       </Head>
       <MetaTags title={listing.name} image={metaImage} description={metaDescription} />
+      <span className="hidden md:block">
+        <ListingDividerLine />
+      </span>
       <ListingView listing={listing} allowFavoriting={true} />
     </Layout>
   )

sites/public/src/ListingView.tsx

@@ -75,7 +75,7 @@ export const ListingProcess = (props: ListingProcessProps) => {
   } = props
 
   return (
-    <aside className="w-full static md:me-8 md:ms-2 md:border border-gray-400 bg-white text-gray-750">
+    <aside className="w-full static md:me-8 md:ms-2 md:border-r md:border-l md:border-b border-gray-400 bg-white text-gray-750">
       <ListingUpdated listingUpdated={listing.updatedAt} />
       {openHouseEvents && <OpenHouseEvent events={openHouseEvents} />}
       {!applicationsClosed && (

sites/public/styles/footers.scss

@@ -5,6 +5,8 @@ footer.site-footer > .footer-row:first-of-type {
 
 .footer-sections {
   padding: 2rem 0;
+  max-width: 1024px;
+  margin: auto;
 }
 
 .footer-sock {

sites/public/styles/headers.scss

@@ -11,7 +11,6 @@
     .navbar {
       align-items: center;
       height: auto;
-      justify-content: flex-start;
       max-height: none;
       padding: 24px 0 18px;
 

ui-components/index.ts

@@ -106,6 +106,7 @@ export * from "./src/page_components/listing/ContentAccordion"
 export * from "./src/page_components/listing/ListingCard"
 export * from "./src/page_components/listing/ListingDetailHeader"
 export * from "./src/page_components/listing/ListingDetails"
+export * from "./src/page_components/listing/ListingDividerLine"
 export * from "./src/page_components/listing/ListingMap"
 export * from "./src/page_components/listing/ListingsGroup"
 export * from "./src/page_components/listing/UnitTables"

ui-components/src/blocks/Tooltip.scss

@@ -34,7 +34,7 @@ $tooltip_arrow_height: 9px;
     @apply w-0 h-0;
     @apply border-solid;
     @apply left-1/2;
-    bottom: -$tooltip_arrow_height;
+    bottom: -$tooltip_padding;
     transform: translateX(-50%);
     border-width: $tooltip_arrow_height 7px 0 7px;
     border-color: theme("colors.primary-dark") transparent transparent transparent;

ui-components/src/footers/SiteFooter.scss

@@ -15,7 +15,7 @@ footer.site-footer {
   }
 
   p {
-    @apply mb-5;
+    @apply mb-8;
   }
 
   & > .footer-row:first-of-type {

ui-components/src/navigation/LanguageNav.scss

@@ -3,10 +3,18 @@
 }
 
 .language-bar__inner {
-  @apply max-w-5xl;
+  @apply w-full;
   @apply flex;
   @apply justify-end;
   margin: auto;
+
+  @screen md {
+    padding: 0 12px;
+  }
+
+  @screen lg {
+    padding: 0 50px;
+  }
 }
 
 .language-nav__list {

ui-components/src/page_components/listing/ListingDividerLine.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+
+const ListingDividerLine = () => {
+  return <section className="w-full border-b border-gray-400 h-0"></section>
+}
+
+export { ListingDividerLine as default, ListingDividerLine }

ui-components/src/sections/FooterSection.scss

@@ -1,5 +1,4 @@
 .footer-row__section {
-  @apply max-w-5xl;
   @apply m-auto;
   @apply px-2;
   @apply text-center;