add border to map and a right margin

GideonBrasil · Apr 4, 2019 · f0ec6d1 · f0ec6d1
1 parent a6b0d99
commit f0ec6d1
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/src/Autocomplete.jsx b/src/Autocomplete.jsx
@@ -144,7 +144,7 @@ class Autocomplete extends Component {
           onChange={onChange}
           onKeyDown={onKeyDown}
           value={userInput}
-          placeholder={this.props.community}
+          placeholder={this.props.community ? this.props.community : "Select your community..."}
         />
         {suggestionsListComponent}
       </Fragment>

diff --git a/src/Middle.jsx b/src/Middle.jsx
@@ -57,7 +57,7 @@ class Middle extends Component {
     console.log(this.props.data.topic)
     if (this.props.data.topic === "crime"){
       return (
-          <div className="col">
+          <div className="col mapCol">
             <Crime data={this.props.data}/>
           <div>
             <GoogleApiWrapper
@@ -69,7 +69,7 @@ class Middle extends Component {
       )
     } else if (this.props.data.topic === "garbage"){
       return (
-        <div style={{position:'relative'}} className="col">
+        <div style={{position:'relative'}} className="mapCol col">
           <Garbage data={this.props.data}/>
         <div>
           <GoogleApiWrapper
@@ -81,7 +81,7 @@ class Middle extends Component {
       )
     } else if (this.props.data.topic === "property"){
       return (
-        <div className="col">
+        <div className="col mapCol">
           <Property data={this.props.data}/>
         <div>
           <GoogleApiWrapper
@@ -93,7 +93,7 @@ class Middle extends Component {
       )
     } else {
       return (
-        <div className="col">
+        <div className="col mapCol">
           <div>
             <GoogleApiWrapper
               communityCenterLatLong={this.props.data.communityCenterLatLong}

diff --git a/styles/main.scss b/styles/main.scss
@@ -62,7 +62,7 @@ body {
       margin-left: 70px;
       ul {
         position: absolute;
-        top: 43px;
+        top: 70px;
         width: 300px;
         background: white;
       }

diff --git a/styles/map.scss b/styles/map.scss
@@ -1,5 +1,12 @@
+$color1: #2B2D42;
+$color2: #8D99AE;
+$color3: #EDF2F4;
+$color4: #EF233C;
+$color5: #D90429;
+
 #map {
   height: 425px;
+  margin-right: 10px;
 }
 
 /* Optional: Makes the sample page fill the window. */
@@ -10,9 +17,18 @@ body {
 }
 
 .col {
-  height: 100vh;
+  height: 100%;
+}
+
+.mapCol {
+  margin: 0 15px;
+  border: $color2 solid 0.8px;
+  padding: 0;
+  overflow: hidden;
 }
 
 .row {
+  padding: 0;
   margin: 0;
+  height: 100%;
 }