styled popup

BloomTech-Labs · Mar 26, 2020 · e533825 · e533825
1 parent 1987a5a
commit e533825
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "react-dom": "^16.12.0",
     "react-hook-form": "^5.1.3",
     "react-map-gl": "^5.2.3",
+    "react-popper": "^1.3.7",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.0",

diff --git a/src/components/dashboard.js b/src/components/dashboard.js
@@ -15,6 +15,7 @@ const GemContainer= styled.div`
 display: flex;
 justify-content: center;
 align-items: center;
+flex-wrap: wrap;
 `
 
 const CompletedGems= styled.div`
@@ -32,7 +33,86 @@ const Card = styled.div`
     border-radius: 5px;
     background-color:#30364a;
     box-shadow: 0 0px 6px 4px #FF69B4;
-  } 
+    .Popup{
+        background-color: #3E4958;
+    }
+    .button{
+        width: 350px;
+  height: 50px;
+  border-radius: 15px;
+  outline: none;
+
+  background-color: #ff69b4;
+  border: none;
+  color: white;
+  text-align: center;
+  font-size: 20px;
+  margin: 15px auto;
+  transition: 0.3s;
+  text-decoration: none;
+  cursor: pointer;
+  transition: opacity 0.55s ease-in-out;
+  -moz-transition: opacity 0.55s ease-in-out;
+  -webkit-transition: opacity 0.55s ease-in-out;
+  :hover {
+    opacity: 1;
+    transition: opacity 0.55s ease-in-out;
+    -moz-transition: opacity 0.55s ease-in-out;
+    -webkit-transition: opacity 0.55s ease-in-out;
+    background-color: #c66db2;
+  }
+
+  `
+
+  const StyledPopup = styled(Popup)`
+  background-color: #3E4958;
+    .form{
+       display:flex; 
+       flex-direction: column;
+       justify-content: space-evenly;
+       
+       background-color: #30364A;
+    }
+    .input{
+        width: 300px;
+    padding-left: 10px;
+    font-size: 0.9rem;
+    border: none;
+    height: 44px;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    margin: 15px auto;
+    background-color: #3e4958;
+    outline: none;
+    color: white;
+    }
+    .button{
+        width: 350px;
+  height: 50px;
+  border-radius: 15px;
+  outline: none;
+
+  background-color: #ff69b4;
+  border: none;
+  color: white;
+  text-align: center;
+  font-size: 20px;
+  margin: 15px auto;
+  transition: 0.3s;
+  text-decoration: none;
+  cursor: pointer;
+  transition: opacity 0.55s ease-in-out;
+  -moz-transition: opacity 0.55s ease-in-out;
+  -webkit-transition: opacity 0.55s ease-in-out;
+  :hover {
+    opacity: 1;
+    transition: opacity 0.55s ease-in-out;
+    -moz-transition: opacity 0.55s ease-in-out;
+    -webkit-transition: opacity 0.55s ease-in-out;
+    background-color: #c66db2;
+  }
+    }
   `
 
 function UserDashboard(props){
@@ -122,8 +202,8 @@ function UserDashboard(props){
                         <Card>
                             <h1>Title: {gem.title}</h1>
                             <h2>id: {gem.id}</h2>
-                            <Popup modal trigger={<button>Edit Gem</button>}>
-                                <form onSubmit={e => {
+                            <StyledPopup modal trigger={<button className='button' >Edit Gem</button>} className = 'Popup'>
+                                <form className = 'form' onSubmit={e => {
                                     e.preventDefault();
                                     console.log(form)
                                     axios
@@ -136,40 +216,45 @@ function UserDashboard(props){
                                             console.log(err);
                                         });
                                 }}>
-                                    <h1>editing {gem.title}</h1>
-                                    <lable>title</lable>
+                                    <h1>Editing: {gem.title}</h1>
+                                    <lable>Title</lable>
                                     <input
                                         name='title'
                                         placeholder='title'
                                         onChange={handleChange}
+                                        className = 'input'
                                     />
-                                    <lable>longitude</lable>
+                                    <lable>Longitude</lable>
                                     <input
                                         name='longitidue'
                                         placeholder='longitude'
                                         onChange={handleChange}
+                                        className = 'input'
                                     />
-                                    <lable>latitude</lable>
+                                    <lable>Latitude</lable>
                                     <input
                                         name='latitude'
                                         placeholder='latitude'
                                         onChange={handleChange}
+                                        className = 'input'
                                     />
-                                    <lable>difficulty</lable>
+                                    <lable>Difficulty</lable>
                                     <input
                                         name='difficulty'
                                         placeholder='difficulty'
                                         onChange={handleChange}
+                                        className = 'input'
                                     />
-                                    <lable>description</lable>
+                                    <lable>Description</lable>
                                     <input
                                         name='description'
                                         placeholder='description'
                                         onChange={handleChange}
+                                        className = 'input'
                                     />
-                                    <button type='submit'>Submit Changes</button>
+                                    <button type='submit' className = 'button'>Submit Changes</button>
                                 </form>
-                            </Popup>
+                            </StyledPopup>
                         </Card>
                     )
                 })}

diff --git a/src/components/navbar.js b/src/components/navbar.js
@@ -11,7 +11,7 @@ display: flex;
 align-items: center;
 justify-content: space-between;
 height: 100px;
-@media(max-width: 1090px){
+@media(max-width: 1190px){
   height: 250px;
   display: flex;
   flex-direction: column;
@@ -69,7 +69,7 @@ height: 100px;
   }
   `
 const ButonContainer = styled.div`
-@media(max-width: 700px){
+@media(max-width: 900px){
   height:300px;
   display: flex;
   flex-direction: column;

diff --git a/yarn.lock b/yarn.lock
@@ -915,7 +915,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
   integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
@@ -7016,6 +7016,16 @@ lodash.isequal@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
 
+lodash.isfunction@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"
+  integrity sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==
+
+lodash.isobject@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-3.0.2.tgz#3c8fb8d5b5bf4bf90ae06e14f2a530a4ed935e1d"
+  integrity sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -7046,6 +7056,11 @@ lodash.throttle@^4.0.0:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
 
+lodash.tonumber@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.tonumber/-/lodash.tonumber-4.0.3.tgz#0b96b31b35672793eb7f5a63ee791f1b9e9025d9"
+  integrity sha1-C5azGzVnJ5Prf1pj7nkfG56QJdk=
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -8304,7 +8319,7 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
-popper.js@^1.14.4:
+popper.js@^1.14.1, popper.js@^1.14.4:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
@@ -9796,7 +9811,15 @@ react-map-gl@^5.2.3:
     react-virtualized-auto-sizer "^1.0.2"
     viewport-mercator-project "^6.2.3 || ^7.0.1"
 
-react-popper@^1.3.6:
+react-popper@^0.10.4:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.10.4.tgz#af2a415ea22291edd504678d7afda8a6ee3295aa"
+  integrity sha1-rypBXqIike3VBGeNev2opu4ylao=
+  dependencies:
+    popper.js "^1.14.1"
+    prop-types "^15.6.1"
+
+react-popper@^1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
   integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
@@ -9969,16 +9992,23 @@ react@^16.12.0:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
-reactstrap@^8.4.1:
-  version "8.4.1"
-  resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.4.1.tgz#c7f63b9057f58b52833061711ebe235b9ec4e3e5"
-  integrity sha512-oAjp9PYYUGKl7SLXwrQ1oRIrYw0MqfO2mUqYgGapFKHG2uwjEtLip5rYxtMujkGx3COjH5FX1WtcfNU4oqpH0Q==
+reactjs-popup@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/reactjs-popup/-/reactjs-popup-1.5.0.tgz#09ef15daf9bf932e9adbf595f3976851c24913cf"
+  integrity sha512-9uoxUAcUomnNoBtdYXBmgsF4w46llsogE3tOvLb5IkR5MMrD6UZJK20ip9kDKXCYubSxNkdfQKqSb/c95rf/qA==
+
+reactstrap@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-6.5.0.tgz#ba655e32646e2621829f61faa033e607ec6624e5"
+  integrity sha512-dWb3fB/wBAiQloteKlf+j9Nl2VLe6BMZgTEt6hpeTt0t9TwtkeU+2v2NBYONZaF4FZATfMiIKozhWpc2HmLW1g==
   dependencies:
-    "@babel/runtime" "^7.2.0"
     classnames "^2.2.3"
+    lodash.isfunction "^3.0.9"
+    lodash.isobject "^3.0.2"
+    lodash.tonumber "^4.0.3"
     prop-types "^15.5.8"
     react-lifecycles-compat "^3.0.4"
-    react-popper "^1.3.6"
+    react-popper "^0.10.4"
     react-transition-group "^2.3.1"
 
 read-pkg-up@^2.0.0: