Merge branch 'master' of https://github.com/makoteq/eco-hack

src/App.js

@@ -1,4 +1,5 @@
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route /*Link*/ } from "react-router-dom";
 import { Home } from "./pages/Home";
 import { About } from "./pages/About";
 import { Users } from "./pages/Users";
@@ -20,3 +21,5 @@ export const App = () => {
         </Router>
     );
 };
+
+export default App;

src/components/Pop-up/AnimatedHand/reka.svg

@@ -10,9 +10,12 @@
 <path id="Vector_7" d="M123.947 144.892C123.947 144.892 140.239 143.861 139.509 149.702C138.778 155.543 138.048 200.81 133.665 201.905C129.283 203 94.5883 203 80.3453 203H0V133.015C0 133.015 56.9721 129.624 85.4582 143.861C85.4582 143.861 119.706 143.367 123.947 144.892Z" fill="#53D188"/>
 </g>
 <g id="plant">
+<g id="plant_2">
 <path id="Vector_8" d="M200.272 35.4247C198.715 35.5125 197.214 36.0322 195.936 36.9253C194.658 37.8184 193.654 39.0496 193.037 40.481C191.228 44.8521 193.557 49.9866 197.054 53.174C200.551 56.3615 205.042 58.1834 209.123 60.5782C214.605 63.7948 219.531 68.26 222.273 73.9917C225.016 79.7234 225.308 86.8234 222.084 92.2991C219.092 97.3815 213.65 100.423 208.461 103.229" stroke="#3F3D56" stroke-miterlimit="10"/>
 <path id="Vector_9" d="M214.88 8.7757C213.323 8.86359 211.822 9.38322 210.544 10.2763C209.266 11.1694 208.262 12.4007 207.645 13.832C205.836 18.2031 208.166 23.3376 211.662 26.5251C215.159 29.7125 219.651 31.5344 223.732 33.9292C229.213 37.1458 234.139 41.611 236.882 47.3427C239.624 53.0744 239.916 60.1744 236.692 65.6501C233.7 70.7326 228.259 73.7744 223.069 76.5797" stroke="#3F3D56" stroke-miterlimit="10"/>
 <path id="Vector_10" d="M262.911 14.9048C261.626 14.0217 260.12 13.5138 258.563 13.438C257.006 13.3623 255.458 13.7217 254.093 14.4759C249.986 16.8252 248.683 22.3105 249.496 26.9706C250.309 31.6306 252.745 35.8198 254.505 40.2107C256.87 46.1085 258.03 52.6533 256.688 58.8638C255.347 65.0743 251.229 70.8669 245.326 73.2239C239.848 75.4116 233.682 74.4873 227.861 73.53" stroke="#3F3D56" stroke-miterlimit="10"/>
+</g>
+<g id="leaves">
 <path id="Vector_11" d="M220.584 69.9952C225.425 69.9952 229.349 68.0899 229.349 65.7397C229.349 63.3894 225.425 61.4842 220.584 61.4842C215.744 61.4842 211.819 63.3894 211.819 65.7397C211.819 68.0899 215.744 69.9952 220.584 69.9952Z" fill="#57B894"/>
 <path id="Vector_12" d="M219.489 69.2651C224.33 69.2651 228.254 67.3598 228.254 65.0096C228.254 62.6593 224.33 60.7541 219.489 60.7541C214.648 60.7541 210.724 62.6593 210.724 65.0096C210.724 67.3598 214.648 69.2651 219.489 69.2651Z" stroke="#3F3D56" stroke-miterlimit="10"/>
 <path id="Vector_13" d="M239.575 66.3446C244.416 66.3446 248.34 64.4394 248.34 62.0891C248.34 59.7389 244.416 57.8336 239.575 57.8336C234.734 57.8336 230.81 59.7389 230.81 62.0891C230.81 64.4394 234.734 66.3446 239.575 66.3446Z" fill="#57B894"/>
@@ -49,17 +52,6 @@
 <path id="Vector_44" d="M196.846 41.1559C201.687 41.1559 205.611 39.2507 205.611 36.9004C205.611 34.5502 201.687 32.6449 196.846 32.6449C192.005 32.6449 188.081 34.5502 188.081 36.9004C188.081 39.2507 192.005 41.1559 196.846 41.1559Z" stroke="#3F3D56" stroke-miterlimit="10"/>
 <path id="Vector_45" d="M203.055 58.3135C207.895 58.3135 211.819 56.4082 211.819 54.058C211.819 51.7077 207.895 49.8025 203.055 49.8025C198.214 49.8025 194.29 51.7077 194.29 54.058C194.29 56.4082 198.214 58.3135 203.055 58.3135Z" fill="#57B894"/>
 <path id="Vector_46" d="M201.959 57.5833C206.8 57.5833 210.724 55.6781 210.724 53.3278C210.724 50.9776 206.8 49.0724 201.959 49.0724C197.118 49.0724 193.194 50.9776 193.194 53.3278C193.194 55.6781 197.118 57.5833 201.959 57.5833Z" stroke="#3F3D56" stroke-miterlimit="10"/>
-<g id="Group" opacity="0.3">
-<path id="Vector_47" opacity="0.3" d="M203.258 83.1145C204.496 80.9017 204.721 78.6737 203.763 78.1381C202.804 77.6025 201.024 78.9622 199.787 81.175C198.549 83.3878 198.324 85.6158 199.282 86.1514C200.241 86.687 202.021 85.3274 203.258 83.1145Z" fill="#57B894"/>
-<path id="Vector_48" opacity="0.3" d="M202.681 83.449C203.918 81.2361 204.144 79.0081 203.185 78.4725C202.226 77.937 200.446 79.2966 199.209 81.5094C197.972 83.7223 197.746 85.9503 198.704 86.4859C199.663 87.0215 201.443 85.6618 202.681 83.449Z" stroke="#3F3D56" stroke-miterlimit="10"/>
-</g>
-<g id="Group_2" opacity="0.3">
-<path id="Vector_49" opacity="0.3" d="M248.945 93.7226C249.678 92.9046 248.739 90.871 246.85 89.1804C244.96 87.4898 242.834 86.7825 242.102 87.6006C241.369 88.4186 242.308 90.4522 244.197 92.1428C246.087 93.8333 248.213 94.5406 248.945 93.7226Z" fill="#57B894"/>
-<path id="Vector_50" opacity="0.3" d="M248.745 93.0858C249.477 92.2678 248.539 90.2342 246.649 88.5436C244.76 86.8531 242.634 86.1458 241.902 86.9638C241.169 87.7818 242.107 89.8154 243.997 91.506C245.887 93.1966 248.013 93.9039 248.745 93.0858Z" stroke="#3F3D56" stroke-miterlimit="10"/>
-</g>
-<g id="Group_3" opacity="0.3">
-<path id="Vector_51" opacity="0.3" d="M208.042 70.7242C208.775 69.9062 207.836 67.8726 205.947 66.182C204.057 64.4914 201.931 63.7841 201.199 64.6022C200.466 65.4202 201.405 67.4538 203.294 69.1444C205.184 70.8349 207.31 71.5422 208.042 70.7242Z" fill="#57B894"/>
-<path id="Vector_52" opacity="0.3" d="M207.842 70.0875C208.574 69.2694 207.636 67.2358 205.747 65.5453C203.857 63.8547 201.731 63.1474 200.999 63.9654C200.266 64.7834 201.204 66.8171 203.094 68.5076C204.984 70.1982 207.11 70.9055 207.842 70.0875Z" stroke="#3F3D56" stroke-miterlimit="10"/>
 </g>
 </g>
 </g>

src/components/Pop-up/Popup.css

@@ -0,0 +1,60 @@
+/* * {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
+  font-family: "Fira Sans", sans-serif;
+}
+
+main {
+  padding: 32;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+*/
+
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.2);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.popup-inner {
+  position: relative;
+  padding-top: 64px;
+  width: 100%;
+  max-width: 440px;
+  background-color: white;
+}
+.popup-text {
+  text-align: center;
+  padding: 32px;
+  width: 100%;
+  background-color: white;
+}
+
+.close-btn {
+  border-radius: 12px;
+  padding: 10px 24px;
+  border: none;
+  background-color: #cecece;
+  transition-duration: 0.4s;
+}
+.close-btn:hover {
+  background-color: hsl(122, 58%, 71%); /* Green */
+}
+
+.popup-inner .Animation {
+  text-align: left;
+  padding-bottom: 32px;
+}

src/components/Pop-up/Popup.js

@@ -0,0 +1,32 @@
+import React from "react";
+import "./Popup.css";
+import Hand from "./AnimatedHand/Hand";
+
+function Popup(props) {
+  return props.trigger ? (
+    <div className="popup">
+      <div className="popup-inner">
+        <div className="popup-text">
+          {props.children}
+          <br />
+          <br />
+          <br />
+          <br />
+          <button className="close-btn" onClick={() => props.setTrigger(false)}>
+            Zaczynamy!
+          </button>
+          <br />
+          <br />
+          <br />
+        </div>
+        <div className="Animation">
+          <Hand></Hand>
+        </div>
+      </div>
+    </div>
+  ) : (
+    ""
+  );
+}
+
+export default Popup;

src/components/Pop-up/ShowPopup.js

@@ -0,0 +1,30 @@
+import Popup from "./Popup.js";
+import { useState, useEffect } from "react";
+
+function ShowPopup() {
+  const [timedPopup, setTimedPopup] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setTimedPopup(true);
+    }, 3000);
+  }, []);
+
+  return (
+    <div className="App">
+      <Popup trigger={timedPopup} setTrigger={setTimedPopup}>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+      </Popup>
+    </div>
+  );
+}
+
+export default ShowPopup;

src/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.scss";
-import { App } from "./App.js";
+import App from "./App.js";
 import "bootstrap/dist/css/bootstrap.min.css";
 
 ReactDOM.render(