From e9c98a326d43cdf9cc51c47581ab9e201d9b65c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Batuhan=20Berk=20Ba=C5=9Fo=C4=9Flu?= Date: Wed, 31 Mar 2021 16:30:37 -0400 Subject: [PATCH] Added some css and fixed some alignment. --- src/agent-page/AgentPage.js | 52 ++--- src/agent-page/Agents.js | 4 +- src/agent-page/agent-page.css | 6 +- src/homePage/homePage.css | 7 + src/listings-page/ListingsPage.js | 188 +++++++++--------- .../navbar-component/Navbar.css | 4 +- 6 files changed, 141 insertions(+), 120 deletions(-) diff --git a/src/agent-page/AgentPage.js b/src/agent-page/AgentPage.js index 0d90622..954cdee 100644 --- a/src/agent-page/AgentPage.js +++ b/src/agent-page/AgentPage.js @@ -8,32 +8,36 @@ import Agent3 from "../images/Agent3.jpg"; import Agent4 from "../images/Agent4.jpg"; import Agent5 from "../images/Agent5.jpg"; import Agent6 from "../images/Agent6.jpg"; - class AgentPage extends Component { - state={ - agents: [ - - {title:'head sales assistant',name: 'Michael', src: Agent1,word:'Michael has a genuine passion for helping others and for giving back to the community.',id:1}, - {title:'sales assistant',name: 'Jin', src: Agent2,word:'I have a passion for assisting clients with various real estate needs.',id:2}, - {title:'sales assistant',name: 'Anita', src: Agent3,word:'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.',id:3}, - {title:'sales assistant',name: 'Alex', src: Agent4,word:'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA',id:4}, - {title:'sales assistant',name: 'Xuan', src: Agent5,word:'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ',id:5}, - {title:'sales assistant',name: 'Walter', src: Agent6,word:'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.',id:6}, +class AgentPage extends Component { + state = { + agents: [ - - ] - } - render(){ - return( -
-
-

Meet the team

-
- - -
- ) + { title: 'head sales assistant', name: 'Michael', src: Agent1, word: 'Michael has a genuine passion for helping others and for giving back to the community.', id: 1 }, + { title: 'sales assistant', name: 'Jin', src: Agent2, word: 'I have a passion for assisting clients with various real estate needs.', id: 2 }, + { title: 'sales assistant', name: 'Anita', src: Agent3, word: 'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.', id: 3 }, + { title: 'sales assistant', name: 'Alex', src: Agent4, word: 'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA', id: 4 }, + { title: 'sales assistant', name: 'Xuan', src: Agent5, word: 'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ', id: 5 }, + { title: 'sales assistant', name: 'Walter', src: Agent6, word: 'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.', id: 6 }, + + + ] } - displayAgents= (agent) => { + render() { + return ( +
+
+

Meet the Team

+
+ +
+ +
+ + +
+ ) + } + displayAgents = (agent) => { console.log(agent); } diff --git a/src/agent-page/Agents.js b/src/agent-page/Agents.js index ef8b34e..ca1e070 100644 --- a/src/agent-page/Agents.js +++ b/src/agent-page/Agents.js @@ -9,8 +9,8 @@ const Agents = ({ agents }) => { return (
{} - - + + {agent.title} {agent.name} diff --git a/src/agent-page/agent-page.css b/src/agent-page/agent-page.css index 6e07d46..7789a78 100644 --- a/src/agent-page/agent-page.css +++ b/src/agent-page/agent-page.css @@ -12,8 +12,12 @@ } .center{ height: 25vh; /* Magic here */ - background-color: yellow; + background-color: #ffe609; display: flex; justify-content: center; align-items: center; + } + + .agent{ + padding-left: 16%; } \ No newline at end of file diff --git a/src/homePage/homePage.css b/src/homePage/homePage.css index 2d082b7..c79fd1f 100644 --- a/src/homePage/homePage.css +++ b/src/homePage/homePage.css @@ -14,6 +14,13 @@ font-family: "Georgia"; } +#features .container-fluid { + padding: 2% 48% 2%; + text-align: left; + font-family: "Georgia"; +} + + .housesIntro{ padding: 4% 5%; } diff --git a/src/listings-page/ListingsPage.js b/src/listings-page/ListingsPage.js index 3aa80cf..defcf47 100644 --- a/src/listings-page/ListingsPage.js +++ b/src/listings-page/ListingsPage.js @@ -1,16 +1,16 @@ import React, { useState, useEffect, Component } from "react"; import { - GoogleMap, - withScriptjs, + GoogleMap, + withScriptjs, withGoogleMap, Marker, InfoWindow - } from "react-google-maps"; - import * as listingData from "./data/property-data.json"; - import mapStyles from "./mapStyles"; - import "./ListingsPage.css"; +} from "react-google-maps"; +import * as listingData from "./data/property-data.json"; +import mapStyles from "./mapStyles"; +import "./ListingsPage.css"; -function Map(){ +function Map() { const [selectedProperty, setSelectedProperty] = useState(null); @@ -19,89 +19,89 @@ function Map(){ return ( - {listingData.Properties.map(house => ( + {listingData.Properties.map(house => ( - { - setSelectedProperty(house) - }} + }} - icon={{ - url:"homes-3.svg", - scaledSize: new window.google.maps.Size(50,50) - }} - + onClick={() => { + setSelectedProperty(house) + }} - - /> - - - - ))} + icon={{ + url: "homes-3.svg", + scaledSize: new window.google.maps.Size(50, 50) + }} - {selectedProperty && ( - - { - setSelectedProperty(null); - }} - > -
-

{selectedProperty.ADDRESS}

-

{selectedProperty.DESC}

-
-
-
+ /> + + + + ))} + + + {selectedProperty && ( + + { + setSelectedProperty(null); + }} + > +
+

{selectedProperty.ADDRESS}

+

{selectedProperty.DESC}

+
+
+ +
1 2 - -
-
+
+ +
-
-
-
- - + +
- - )} - +
+ + + )} + + - - + + ); } @@ -113,12 +113,12 @@ class ListingsPage extends Component { render() { return ( -
+
-
+
- {/* + {/* @@ -153,41 +153,45 @@ class ListingsPage extends Component {
*/} - -
-
+
-

Map

- -
- + +
+
+

Map

+
+
+ +
+ } - containerElement={
} - mapElement={
} - /> + loadingElement={
} + containerElement={
} + mapElement={
} + /> +
+ + + +
- - -
- -
- - - - - - - -
- - ); + + + + + +
+ + + + ); } } diff --git a/src/shared-components/navbar-component/Navbar.css b/src/shared-components/navbar-component/Navbar.css index d7f8dda..f6e5f64 100644 --- a/src/shared-components/navbar-component/Navbar.css +++ b/src/shared-components/navbar-component/Navbar.css @@ -1,3 +1,5 @@ .Navbar{ - background-color: pink; + background-color: rgb(56, 55, 55); + padding-top: 20px; + padding-bottom: 24px; } \ No newline at end of file