fix(ProductEdit): fixed input background color

Author: shoudaos

src/pages/maps/google/Google.js

@@ -1,10 +1,14 @@
 import React from 'react';
+import {
+  Breadcrumb, BreadcrumbItem
+} from 'reactstrap'
 import {
   withGoogleMap,
   withScriptjs,
   GoogleMap,
   Marker,
 } from 'react-google-maps';
+import Widget from '../../../components/Widget';
 
 import s from './Google.module.scss';
 
@@ -22,18 +26,26 @@ class Maps extends React.Component {
   render() {
     return (
       <div>
-        <h1 className={`${s.MapTitle} page-title`}>
+        <Breadcrumb>
+          <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
+          <BreadcrumbItem active>Google Maps</BreadcrumbItem>
+        </Breadcrumb>
+        <h1 className="page-title">
           Google <span className="fw-semi-bold">Maps</span>
         </h1>
-        <div className={s.MapContainer}>
-          <BasicMap
-            googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyB7OXmzfQYua_1LEhRdqsoYzyJOPh9hGLg"
-            loadingElement={<div style={{ height: 'inherit', width: 'inherit' }} />}
-            containerElement={<div style={{ height: 'inherit' }} />}
-            mapElement={<div style={{ height: 'inherit' }} />}
-          />
-        </div>
-
+        <Widget
+          title={<h4>Google Maps <small className="text-muted">Default and customized</small></h4>}
+          collapse close
+        >
+          <div className={s.MapContainer}>
+            <BasicMap
+              googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyB7OXmzfQYua_1LEhRdqsoYzyJOPh9hGLg"
+              loadingElement={<div style={{ height: 'inherit', width: 'inherit' }} />}
+              containerElement={<div style={{ height: 'inherit' }} />}
+              mapElement={<div style={{ height: 'inherit' }} />}
+            />
+          </div>
+        </Widget>
       </div>);
   }
 

src/pages/maps/google/Google.module.scss

@@ -1,15 +1,4 @@
-@import '../../../styles/app';
-
 .MapContainer {
-  position: absolute;
-  top: 0;
-  left: 15px;
-  bottom: 0;
-  right: 0;
-  height: 100%;
-}
-
-.MapTitle {
-  position: relative;
-  z-index: 2;
-}
+  width: 100%;
+  height: 60vh;
+}

src/pages/maps/vector/Vector.js

@@ -1,10 +1,15 @@
 import React from 'react';
 import $ from 'jquery';
+import {
+  Breadcrumb, BreadcrumbItem
+} from 'reactstrap'
 /* eslint-disable */
 import 'imports-loader?jQuery=jquery,this=>window!jvectormap/jquery-jvectormap.min.js';
 import 'imports-loader?jQuery=jquery,this=>window!./jvector-world.js';
 /* eslint-enable */
 
+import Widget from '../../../components/Widget';
+
 import s from './Vector.module.scss';
 
 const mapData = {
@@ -84,18 +89,24 @@ class VectorMap extends React.Component {
   render() {
     return (
       <div>
-        <div
-          className={`${s.contentMap} vector-map`} ref={(r) => {
-            this.vectorMap = r;
-          }}
-        />
+        <Breadcrumb>
+          <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
+          <BreadcrumbItem active>Vector Maps</BreadcrumbItem>
+        </Breadcrumb>
+
         <header className="page-title">
           <h1 className="m-0 mb-sm">Vector <span className="fw-semi-bold">Maps</span></h1>
-          <p className="page-title fs-sm m-0">
-            <span className="fw-semi-bold">1 656 843</span>
-            <span className="ml-xs circle bg-gray"><i className="text-gray-lighter fa fa-circle" /></span>
-          </p>
         </header>
+        <Widget
+          title={<h4>Vector Maps <small className="text-muted">Default and customized</small></h4>}
+          collapse close
+        >
+          <div
+            className={`${s.contentMap} vector-map`} ref={(r) => {
+            this.vectorMap = r;
+          }}
+          />
+        </Widget>
       </div>);
   }
 

src/pages/maps/vector/Vector.module.scss

@@ -1,14 +1,6 @@
 @import '../../../styles/app';
 
 .contentMap {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 15px;
-  right: 0;
-
-  + :global(.page-title) {
-    position: relative;
-    z-index: 2;
-  }
+  height: 60vh;
+  width: 100%;
 }