From 0b3864073af327c6cf93474a1a996b36f90ac217 Mon Sep 17 00:00:00 2001
From: Jason Em <jasonem@umail.ucsb.edu>
Date: Mon, 15 Nov 2021 14:02:59 -0800
Subject: [PATCH 1/3] Edit Right Column

---
 .../src/pages/LocationPage/RightColumnDetails.scss | 14 ++++++++++++++
 .../src/pages/LocationPage/RightColumnDetails.tsx  |  9 +++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/LocationPage/RightColumnDetails.scss b/client/src/pages/LocationPage/RightColumnDetails.scss
index 7b41457..1885e13 100644
--- a/client/src/pages/LocationPage/RightColumnDetails.scss
+++ b/client/src/pages/LocationPage/RightColumnDetails.scss
@@ -11,3 +11,17 @@
   position: sticky;
   top: 1em;
 }
+
+.text-boxes {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-direction: column;
+  border-bottom: 1px solid rgb(209, 209, 209);
+}
+
+.text-box {
+  border: 1px solid rgb(209, 209, 209);
+  border-bottom: none;
+  padding: 5px;
+}
diff --git a/client/src/pages/LocationPage/RightColumnDetails.tsx b/client/src/pages/LocationPage/RightColumnDetails.tsx
index 2560fe8..fa3c3a5 100644
--- a/client/src/pages/LocationPage/RightColumnDetails.tsx
+++ b/client/src/pages/LocationPage/RightColumnDetails.tsx
@@ -4,8 +4,9 @@ function LeftColumnDetais() {
   return (
     <div id="location-page-right-column">
       <div id="sticky-sidebar">
-        <div className="building-info align-text-left">
-          <div>
+        {/* <div className="building-info align-text-left"> */}
+        <div className="text-boxes">
+          <div className="text-box">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
             accumsan, purus at eleifend ornare, libero metus tincidunt velit,
             quis tincidunt nisl eros non tellus. Nunc ullamcorper porttitor
@@ -17,6 +18,10 @@ function LeftColumnDetais() {
             ornare erat, ut lacinia lacus volutpat id. Suspendisse potenti.
             Suspendisse et iaculis velit.
           </div>
+          <div className="text-box">dummy text</div>
+          <div className="text-box">dummy text</div>
+          <div className="text-box">dummy text</div>
+          <div className="text-box">dummy text</div>
         </div>
       </div>
     </div>

From 0913331e98dc972b807eb119b56992e6a36b9a2e Mon Sep 17 00:00:00 2001
From: Christopher <51393127+chriscerie@users.noreply.github.com>
Date: Thu, 2 Dec 2021 23:08:44 -0800
Subject: [PATCH 2/3] Only render search bar and right side on large screens

---
 client/package.json                           |   1 +
 .../src/components/Header/LocationHeader.tsx  |   4 +-
 client/src/pages/LocationPage/index.tsx       |  12 +-
 client/yarn.lock                              | 176 +++++++++++++++++-
 4 files changed, 181 insertions(+), 12 deletions(-)

diff --git a/client/package.json b/client/package.json
index 5603f64..0745db9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -6,6 +6,7 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@mapbox/mapbox-gl-geocoder": "^4.7.4",
+    "@material-ui/core": "^4.12.3",
     "@mui/icons-material": "^5.0.4",
     "@mui/material": "^5.0.3",
     "@testing-library/jest-dom": "^5.11.4",
diff --git a/client/src/components/Header/LocationHeader.tsx b/client/src/components/Header/LocationHeader.tsx
index 3df4ed1..e069a55 100644
--- a/client/src/components/Header/LocationHeader.tsx
+++ b/client/src/components/Header/LocationHeader.tsx
@@ -6,14 +6,16 @@ import SearchBar from './SearchBar';
 import './LocationHeader.scss';
 import ProfileIcon from './ProfileIcon';
 import { Link } from 'react-router-dom';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 function LocationHeader() {
   const currentUser = useSelector((state: RootState) => state.currentUser);
+  const isLargeScreen = useMediaQuery('(min-width:640px)');
 
   return (
     <Container id="header-container" maxWidth="xl">
       <Link to="/" className="header-logo-link" />
-      <SearchBar />
+      {isLargeScreen && <SearchBar />}
       {currentUser ? (
         <ProfileIcon />
       ) : (
diff --git a/client/src/pages/LocationPage/index.tsx b/client/src/pages/LocationPage/index.tsx
index 135b851..ec13469 100644
--- a/client/src/pages/LocationPage/index.tsx
+++ b/client/src/pages/LocationPage/index.tsx
@@ -4,17 +4,21 @@ import PhotoHeader from './PhotoHeader';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../reducers';
 import { useParams } from 'react-router-dom';
-import './index.scss';
 import { useState, useEffect } from 'react';
 import LeftColumnDetails from './LeftColumnDetails';
 import RightColumnDetails from './RightColumnDetails';
 import { getLocationInfo } from '../../api/LocationAPI';
 import type { LocationType } from '../../types/LocationType';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import './index.scss';
 
 function LocationPage() {
   const { id } = useParams<{ id: string }>();
   const [locationInfo, setLocationInfo] = useState<null | LocationType>(null);
   const mapInstance = useSelector((state: RootState) => state.mapInstance.map);
+  const isLargeScreen = useMediaQuery('(min-width:640px)');
+
+  console.log(isLargeScreen);
 
   // Set point
   useEffect(() => {
@@ -36,10 +40,8 @@ function LocationPage() {
       />
 
       <Container id="location-page-container-inner">
-        {locationInfo && (
-          <LeftColumnDetails locationInfo={locationInfo} id={id} />
-        )}
-        <RightColumnDetails />
+        <LeftColumnDetails locationInfo={locationInfo} id={id} />
+        {isLargeScreen && <RightColumnDetails locationInfo={locationInfo} />}
       </Container>
     </div>
   );
diff --git a/client/yarn.lock b/client/yarn.lock
index 4d411ed..13bc11b 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1181,6 +1181,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.3":
+  version "7.16.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
+  integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.16.0", "@babel/template@^7.3.3":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
@@ -1649,6 +1656,70 @@
   dependencies:
     meow "^6.1.1"
 
+"@material-ui/core@^4.12.3":
+  version "4.12.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca"
+  integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/styles" "^4.11.4"
+    "@material-ui/system" "^4.12.1"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.2"
+    "@types/react-transition-group" "^4.2.0"
+    clsx "^1.0.4"
+    hoist-non-react-statics "^3.3.2"
+    popper.js "1.16.1-lts"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+    react-transition-group "^4.4.0"
+
+"@material-ui/styles@^4.11.4":
+  version "4.11.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"
+  integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@emotion/hash" "^0.8.0"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
+    csstype "^2.5.2"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.5.1"
+    jss-plugin-camel-case "^10.5.1"
+    jss-plugin-default-unit "^10.5.1"
+    jss-plugin-global "^10.5.1"
+    jss-plugin-nested "^10.5.1"
+    jss-plugin-props-sort "^10.5.1"
+    jss-plugin-rule-value-function "^10.5.1"
+    jss-plugin-vendor-prefixer "^10.5.1"
+    prop-types "^15.7.2"
+
+"@material-ui/system@^4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c"
+  integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    csstype "^2.5.2"
+    prop-types "^15.7.2"
+
+"@material-ui/types@5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
+  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+
+"@material-ui/utils@^4.11.2":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
+  integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@mui/core@5.0.0-alpha.53":
   version "5.0.0-alpha.53"
   resolved "https://registry.yarnpkg.com/@mui/core/-/core-5.0.0-alpha.53.tgz#ede1445be3bf5a93d25bdd8ead23afdfb1b68f8b"
@@ -2358,7 +2429,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.4":
+"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.4":
   version "4.4.4"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
   integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
@@ -3963,7 +4034,7 @@ clone-response@^1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
-clsx@^1.1.1:
+clsx@^1.0.4, clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -4436,6 +4507,14 @@ css-tree@^1.1.2:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
+css-vendor@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
+  dependencies:
+    "@babel/runtime" "^7.8.3"
+    is-in-browser "^1.0.2"
+
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
@@ -4577,6 +4656,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^2.5.2:
+  version "2.6.19"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
+  integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
+
 csstype@^3.0.2, csstype@^3.0.9:
   version "3.0.9"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
@@ -6493,7 +6577,7 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-hyphenate-style-name@^1.0.0:
+hyphenate-style-name@^1.0.0, hyphenate-style-name@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
   integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
@@ -6872,6 +6956,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+  integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -7720,6 +7809,76 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jss-plugin-camel-case@^10.5.1:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.8.2.tgz#8d7f915c8115afaff8cbde08faf610ec9892fba6"
+  integrity sha512-2INyxR+1UdNuKf4v9It3tNfPvf7IPrtkiwzofeKuMd5D58/dxDJVUQYRVg/n460rTlHUfsEQx43hDrcxi9dSPA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    hyphenate-style-name "^1.0.3"
+    jss "10.8.2"
+
+jss-plugin-default-unit@^10.5.1:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.8.2.tgz#c66f12e02e0815d911b85c02c2a979ee7b4ce69a"
+  integrity sha512-UZ7cwT9NFYSG+SEy7noRU50s4zifulFdjkUNKE+u6mW7vFP960+RglWjTgMfh79G6OENZmaYnjHV/gcKV4nSxg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.2"
+
+jss-plugin-global@^10.5.1:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.8.2.tgz#1a35632a693cf50113bcc5ffe6b51969df79c4ec"
+  integrity sha512-UaYMSPsYZ7s/ECGoj4KoHC2jwQd5iQ7K+FFGnCAILdQrv7hPmvM2Ydg45ThT/sH46DqktCRV2SqjRuxeBH8nRA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.2"
+
+jss-plugin-nested@^10.5.1:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.8.2.tgz#79f3c7f75ea6a36ae72fe52e777035bb24d230c7"
+  integrity sha512-acRvuPJOb930fuYmhkJaa994EADpt8TxI63Iyg96C8FJ9T2xRyU5T6R1IYKRwUiqZo+2Sr7fdGzRTDD4uBZaMA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.2"
+    tiny-warning "^1.0.2"
+
+jss-plugin-props-sort@^10.5.1:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.8.2.tgz#e25a7471868652c394562b6dc5433dcaea7dff6f"
+  integrity sha512-wqdcjayKRWBZnNpLUrXvsWqh+5J5YToAQ+8HNBNw0kZxVvCDwzhK2Nx6AKs7p+5/MbAh2PLgNW5Ym/ysbVAuqQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.2"
+
+jss-plugin-rule-value-function@^10.5.1:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.8.2.tgz#55354b55f1b2968a15976729968f767f02d64049"
+  integrity sha512-bW0EKAs+0HXpb6BKJhrn94IDdiWb0CnSluTkh0rGEgyzY/nmD1uV/Wf6KGlesGOZ9gmJzQy+9FFdxIUID1c9Ug==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.2"
+    tiny-warning "^1.0.2"
+
+jss-plugin-vendor-prefixer@^10.5.1:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.8.2.tgz#ebb4a482642f34091e454901e21176441dd5f475"
+  integrity sha512-DeGv18QsSiYLSVIEB2+l0af6OToUe0JB+trpzUxyqD2QRC/5AzzDrCrYffO5AHZ81QbffYvSN/pkfZaTWpRXlg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    css-vendor "^2.0.8"
+    jss "10.8.2"
+
+jss@10.8.2, jss@^10.5.1:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.8.2.tgz#4b2a30b094b924629a64928236017a52c7c97505"
+  integrity sha512-FkoUNxI329CKQ9OQC8L72MBF9KPf5q8mIupAJ5twU7G7XREW7ahb+7jFfrjZ4iy1qvhx1HwIWUIvkZBDnKkEdQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    csstype "^3.0.2"
+    is-in-browser "^1.1.3"
+    tiny-warning "^1.0.2"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
@@ -9131,6 +9290,11 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popper.js@1.16.1-lts:
+  version "1.16.1-lts"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -10140,7 +10304,7 @@ react-hook-form@^7.19.4:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.19.4.tgz#617e90761274aeb1fb513a9c1ee7e61b35bf3064"
   integrity sha512-6fwDW+376ybViiTrNokKBpAJ75i+3ThZwWQWgzRoT+1pYHXzFmZDuTHyR5JJzHThbY3a2ao6sotHTm2QIaaeIA==
 
-"react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2:
+"react-is@^16.12.0 || ^17.0.0", "react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -10302,7 +10466,7 @@ react-test-renderer@^17.0.2:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.2"
 
-react-transition-group@^4.4.2:
+react-transition-group@^4.4.0, react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
   integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
@@ -11748,7 +11912,7 @@ tiny-invariant@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
   integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==

From e48a3d9db5395f9e6bb251a369fdbee729485b7d Mon Sep 17 00:00:00 2001
From: Christopher <51393127+chriscerie@users.noreply.github.com>
Date: Thu, 2 Dec 2021 23:09:32 -0800
Subject: [PATCH 3/3] Edit sticky sidebar to display information

---
 .../pages/LocationPage/LeftColumnDetails.tsx  |  8 ++--
 .../LocationPage/RightColumnDetails.scss      | 17 ++++---
 .../pages/LocationPage/RightColumnDetails.tsx | 48 +++++++++++--------
 3 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/client/src/pages/LocationPage/LeftColumnDetails.tsx b/client/src/pages/LocationPage/LeftColumnDetails.tsx
index 55ad9b2..2bf6b81 100644
--- a/client/src/pages/LocationPage/LeftColumnDetails.tsx
+++ b/client/src/pages/LocationPage/LeftColumnDetails.tsx
@@ -13,7 +13,7 @@ function LeftColumnDetais({
   locationInfo,
   id,
 }: {
-  locationInfo: LocationType;
+  locationInfo: LocationType | null;
   id: string;
 }) {
   return (
@@ -21,7 +21,7 @@ function LeftColumnDetais({
       <div id="location-page-left-buttons-container">
         <div className="location-page-left-button">
           <Link
-            to={`/write-review/${locationInfo.id}`}
+            to={`/write-review/${locationInfo && locationInfo.id}`}
             style={{ textDecoration: 'none' }}
           >
             <Button
@@ -68,7 +68,9 @@ function LeftColumnDetais({
 
       <LocationSection title="Description">
         <div className="building-info align-text-left">
-          <p style={{ margin: 0 }}>{locationInfo.description}</p>
+          <p style={{ margin: 0 }}>
+            {locationInfo && locationInfo.description}
+          </p>
         </div>
       </LocationSection>
 
diff --git a/client/src/pages/LocationPage/RightColumnDetails.scss b/client/src/pages/LocationPage/RightColumnDetails.scss
index 1885e13..0f6df7e 100644
--- a/client/src/pages/LocationPage/RightColumnDetails.scss
+++ b/client/src/pages/LocationPage/RightColumnDetails.scss
@@ -10,18 +10,21 @@
 #sticky-sidebar {
   position: sticky;
   top: 1em;
-}
-
-.text-boxes {
+  border: 1px solid #eee;
+  border-radius: 0.3em;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   flex-direction: column;
-  border-bottom: 1px solid rgb(209, 209, 209);
+  margin-bottom: 1.5em;
+  padding: 0.5em 1em;
+}
+
+.sidebar-box {
+  border-bottom: 1px solid #eee;
+  padding: 0.3em;
 }
 
-.text-box {
-  border: 1px solid rgb(209, 209, 209);
+.sidebar-box:last-child {
   border-bottom: none;
-  padding: 5px;
 }
diff --git a/client/src/pages/LocationPage/RightColumnDetails.tsx b/client/src/pages/LocationPage/RightColumnDetails.tsx
index fa3c3a5..3921738 100644
--- a/client/src/pages/LocationPage/RightColumnDetails.tsx
+++ b/client/src/pages/LocationPage/RightColumnDetails.tsx
@@ -1,27 +1,37 @@
+import type { LocationType } from '../../types/LocationType';
 import './RightColumnDetails.scss';
 
-function LeftColumnDetais() {
+function LeftColumnDetais({
+  locationInfo,
+}: {
+  locationInfo: LocationType | null;
+}) {
   return (
     <div id="location-page-right-column">
       <div id="sticky-sidebar">
-        {/* <div className="building-info align-text-left"> */}
-        <div className="text-boxes">
-          <div className="text-box">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-            accumsan, purus at eleifend ornare, libero metus tincidunt velit,
-            quis tincidunt nisl eros non tellus. Nunc ullamcorper porttitor
-            risus, eu luctus justo auctor sed. Vestibulum ornare eros est, in
-            tempus massa congue ut. Duis eu fringilla nulla, nec mattis ex.
-            Quisque viverra justo a luctus feugiat. Aliquam erat volutpat.
-            Nullam varius odio ex, non aliquet eros tristique ullamcorper. Donec
-            dignissim nisl dui, in sollicitudin magna faucibus eu. Duis porta
-            ornare erat, ut lacinia lacus volutpat id. Suspendisse potenti.
-            Suspendisse et iaculis velit.
-          </div>
-          <div className="text-box">dummy text</div>
-          <div className="text-box">dummy text</div>
-          <div className="text-box">dummy text</div>
-          <div className="text-box">dummy text</div>
+        <div className="sidebar-box">{locationInfo?.name}</div>
+        <div className="sidebar-box">{locationInfo?.type}</div>
+        <div className="sidebar-box">
+          {locationInfo?.rooms.length.toString()} rooms
+        </div>
+        {locationInfo?.address1 && (
+          <div className="sidebar-box">{locationInfo.address1}</div>
+        )}
+        {locationInfo?.address2 && (
+          <div className="sidebar-box">{locationInfo.address2}</div>
+        )}
+        {locationInfo?.zip_code && (
+          <div className="sidebar-box">{locationInfo.zip_code}</div>
+        )}
+        {locationInfo?.city && (
+          <div className="sidebar-box">{locationInfo.city}</div>
+        )}
+        {locationInfo?.state && locationInfo.state !== '' && (
+          <div className="sidebar-box">{locationInfo.state}</div>
+        )}
+        <div className="sidebar-box">
+          Consider contributing to Campus Maps by editing this location's
+          information.
         </div>
       </div>
     </div>