New landlord info sidebar on apartment page

frontend/src/components/Apartment/AptInfo.tsx

@@ -1,29 +1,33 @@
 import React, { ReactElement } from 'react';
 import Info from './Info';
-import { Card, CardContent, Grid } from '@material-ui/core';
+import { Box, Divider } from '@material-ui/core';
 import PropertyInfo from '../Review/PropertyInfo';
 import { CardData } from '../../App';
 
 type Props = {
+ readonly landlordId: string | null;
  readonly landlord: string;
  readonly contact: string | null;
  readonly address: string | null;
  readonly buildings: CardData[];
 };
 
-export default function AptInfo({ landlord, contact, address, buildings }: Props): ReactElement {
+export default function AptInfo({
+ landlordId,
+ landlord,
+ contact,
+ address,
+ buildings,
+}: Props): ReactElement {
  return (
- <Grid container>
- <Grid item xs={12}>
- <Card variant="outlined">
- <CardContent>
- <Info landlord={landlord} contact={contact!} address={address!} />
- </CardContent>
- </Card>
- </Grid>
- <Grid item xs={12}>
- <PropertyInfo title="Other Properties Owned" info={buildings} />
- </Grid>
- </Grid>
+ <Box border={1} borderColor="grey.300" borderRadius={10}>
+ <Box mx={2} mt={1}>
+ <Info landlordId={landlordId} landlord={landlord} contact={contact!} address={address!} />
+ </Box>
+ <Divider variant="middle" />
+ <Box mx={2} mb={1} mt={2}>
+ <PropertyInfo title="Other Properties Owned by This Landlord" info={buildings} />
+ </Box>
+ </Box>
  );
 }

frontend/src/components/Apartment/Info.tsx

@@ -1,6 +1,16 @@
-import { Box, List, ListItem, ListItemText, Typography } from '@material-ui/core';
+import {
+ Box,
+ Button,
+ Grid,
+ Link,
+ List,
+ ListItem,
+ ListItemText,
+ Typography,
+} from '@material-ui/core';
 import React, { ReactElement } from 'react';
 import { makeStyles } from '@material-ui/styles';
+import { Link as RouterLink } from 'react-router-dom';
 
 const useStyles = makeStyles(() => ({
  title: {
@@ -9,6 +19,7 @@ const useStyles = makeStyles(() => ({
 }));
 
 type Props = {
+ readonly landlordId: string | null;
  readonly landlord: string | null;
  readonly contact: string | null;
  readonly address: string | null;
@@ -20,23 +31,51 @@ const InfoItem = ({ text }: { text: string }) => (
  </ListItem>
 );
 
-export default function Info({ landlord, contact, address }: Props): ReactElement {
+export default function Info({ landlordId, landlord, contact, address }: Props): ReactElement {
  const { title } = useStyles();
 
  return (
- <Box mt={1}>
- <Typography variant="h5" className={title}>
- Info
+ <Box mt={1} mb={3}>
+ <Typography variant="h6" className={title} style={{ fontWeight: 400 }}>
+ Information
  </Typography>
  <List dense>
  {landlord && <InfoItem text={`Landlord/Renting Company: ${landlord}`} />}
- {contact && (
- <a href={contact} target="_blank" rel="noreferrer">
- <InfoItem text={`Contact: ${contact}`} />
- </a>
- )}
  {address && <InfoItem text={`Address: ${address}`} />}
  </List>
+ <Grid container justifyContent="center" spacing={2}>
+ <Grid item xs={6} sm={12} md={6}>
+ {landlord && (
+ <Link
+ {...{
+ to: `/landlord/${landlordId}`,
+ style: { textDecoration: 'none', display: 'inline-block', width: '100%' },
+ component: RouterLink,
+ }}
+ >
+ <Button color="primary" variant="outlined" fullWidth disableElevation>
+ Visit Landlord
+ </Button>
+ </Link>
+ )}
+ </Grid>
+ <Grid item xs={6} sm={12} md={6}>
+ {contact && (
+ <Link
+ href={contact}
+ target="_blank"
+ rel="noreferrer"
+ {...{
+ style: { textDecoration: 'none', display: 'inline-block', width: '100%' },
+ }}
+ >
+ <Button color="primary" variant="contained" fullWidth disableElevation>
+ Contact
+ </Button>
+ </Link>
+ )}
+ </Grid>
+ </Grid>
  </Box>
  );
 }

frontend/src/components/Review/PropertyInfo.tsx

@@ -8,6 +8,7 @@ import { colors } from '../../colors';
 import HeartRating from '../utils/HeartRating';
 import { ReviewWithId, ApartmentWithId } from '../../../../common/types/db-types';
 import { getAverageRating } from '../../utils/average';
+import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
 
 type Props = {
  readonly info: CardData[];
@@ -35,7 +36,7 @@ const useStyles = makeStyles({
  },
 });
 
-const PropertyCard = ({ buildingData, numReviews, company }: CardProps): ReactElement => {
+const PropertyCard = ({ buildingData, numReviews }: CardProps): ReactElement => {
  const { aptNameTxt, card, reviewNum } = useStyles();
  const { id, name, address } = buildingData;
  const [reviewData, setReviewData] = useState<ReviewWithId[]>([]);
@@ -61,20 +62,22 @@ const PropertyCard = ({ buildingData, numReviews, company }: CardProps): ReactEl
  return (
  <Card className={card} onClick={handleCardClick}>
  <CardContent>
- <Grid container direction="row" alignItems="center">
- <Grid item>
+ <Grid container direction="row" alignItems="center" justifyContent="space-between">
+ <Grid md={12} lg={6} item>
  <Typography className={aptNameTxt}>{name}</Typography>
+ <Typography variant="subtitle1">{address}</Typography>
  </Grid>
- <Grid container item justifyContent="space-between">
- <Grid>
- <Typography variant="subtitle1">{address}</Typography>
- </Grid>
- </Grid>
- <Grid container direction="row" alignItems="center">
- <HeartRating value={getAverageRating(reviewData)} precision={0.5} readOnly />
- <Typography className={reviewNum}>
- {numReviews + (numReviews !== 1 ? ' Reviews' : ' Review')}
- </Typography>
+ <Grid md={12} lg={6} item direction="row" alignItems="center" spacing={1}>
+ <Box display="flex" alignItems="center">
+ <HeartRating
+ value={getAverageRating(reviewData)}
+ precision={0.5}
+ readOnly
+ size="small"
+ />
+ <Typography className={reviewNum}>{numReviews}</Typography>
+ <KeyboardArrowRightIcon style={{ fontSize: 40 }} color="primary" />
+ </Box>
  </Grid>
  </Grid>
  </CardContent>
@@ -85,7 +88,9 @@ const PropertyCard = ({ buildingData, numReviews, company }: CardProps): ReactEl
 const PropertyInfo = ({ info, title }: Props): ReactElement => {
  return (
  <Box mt={2} mb={1}>
- <Typography variant="h6">{title}</Typography>
+ <Typography variant="h6" style={{ fontWeight: 400, fontSize: '17px', marginBottom: '10px' }}>
+ {title}
+ </Typography>
  <List dense component="ul">
  <Grid container spacing={0} direction="row">
  {info.length === 0 && <Typography variant="body1">No information available.</Typography>}

frontend/src/components/utils/HeartRating.tsx

@@ -8,8 +8,11 @@ import { colors } from '../../colors';
 type Props = React.ComponentProps<typeof Rating>;
 
 const StyledRating = withStyles({
+ iconEmpty: {
+ color: colors.red1,
+ },
  iconFilled: {
- color: colors.red2,
+ color: colors.red1,
  },
 })(Rating);
 
@@ -18,8 +21,8 @@ const HeartRating = (props: Props) => {
  <StyledRating
  {...props}
  defaultValue={0}
- icon={<FavoriteIcon />}
- emptyIcon={<FavoriteBorderIcon />}
+ icon={<FavoriteIcon fontSize={props.size} />}
+ emptyIcon={<FavoriteBorderIcon fontSize={props.size} />}
  />
  );
 };

frontend/src/pages/ApartmentPage.tsx

@@ -563,7 +563,11 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
 
  const InfoSection = landlordData && (
  <Grid item xs={12} sm={4}>
+ <Typography variant="h3" style={{ fontSize: '30px', fontWeight: 600, marginBottom: '14px' }}>
+ Landlord
+ </Typography>
  <AptInfo
+ landlordId={apt!.landlordId}
  landlord={landlordData.name}
  contact={landlordData.contact}
  address={apt!.address}