From 579c8a615ee86d0e528ddde6e62136cd88f8e851 Mon Sep 17 00:00:00 2001 From: drgoodcat <60068941+drgoodcat@users.noreply.github.com> Date: Sat, 2 Oct 2021 23:10:59 +0200 Subject: [PATCH 1/4] Added popup component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit jak coś --- .../{ => Starter}/AnimatedHand/Hand.js | 58 +++++++++---------- .../{ => Starter}/AnimatedHand/reka.svg | 0 src/components/Starter/Popup.css | 52 +++++++++++++++++ src/components/Starter/Popup.js | 32 ++++++++++ src/components/Starter/Popupv2.js | 30 ++++++++++ src/index.js | 10 ++-- 6 files changed, 148 insertions(+), 34 deletions(-) rename src/components/{ => Starter}/AnimatedHand/Hand.js (96%) rename src/components/{ => Starter}/AnimatedHand/reka.svg (100%) create mode 100644 src/components/Starter/Popup.css create mode 100644 src/components/Starter/Popup.js create mode 100644 src/components/Starter/Popupv2.js diff --git a/src/components/AnimatedHand/Hand.js b/src/components/Starter/AnimatedHand/Hand.js similarity index 96% rename from src/components/AnimatedHand/Hand.js rename to src/components/Starter/AnimatedHand/Hand.js index aad6175..778524b 100644 --- a/src/components/AnimatedHand/Hand.js +++ b/src/components/Starter/AnimatedHand/Hand.js @@ -1,29 +1,29 @@ -import React, { useRef, useEffect } from "react"; -import { ReactComponent as Scene } from "./reka.svg"; -import gsap from "gsap"; - -function HoldingPlant() { - const wrapper = useRef(null); - - useEffect(() => { - const [elements] = wrapper.current.children; - - const plant = elements.getElementById("plant"); - const hand = elements.getElementById("hand"); - - gsap.set([plant, hand], { autoAlpha: 0 }); - - const tl = gsap.timeline({ defaults: { ease: "power3.inOut" } }); - - tl.fromTo(hand, { x: "-=300" }, { duration: 1, x: "+=300", autoAlpha: 1 }); - tl.fromTo(plant, { y: "+=10" }, { duration: 1, y: "-=10", autoAlpha: 1 }); - }); - - return ( -
- -
- ); -} - -export default HoldingPlant; +import React, { useRef, useEffect } from "react"; +import { ReactComponent as Scene } from "./reka.svg"; +import gsap from "gsap"; + +function HoldingPlant() { + const wrapper = useRef(null); + + useEffect(() => { + const [elements] = wrapper.current.children; + + const plant = elements.getElementById("plant"); + const hand = elements.getElementById("hand"); + + gsap.set([plant, hand], { autoAlpha: 0 }); + + const tl = gsap.timeline({ defaults: { ease: "power3.inOut" } }); + + tl.fromTo(hand, { x: "-=300" }, { duration: 1, x: "+=300", autoAlpha: 1 }); + tl.fromTo(plant, { y: "+=10" }, { duration: 1, y: "-=10", autoAlpha: 1 }); + }); + + return ( +
+ +
+ ); +} + +export default HoldingPlant; diff --git a/src/components/AnimatedHand/reka.svg b/src/components/Starter/AnimatedHand/reka.svg similarity index 100% rename from src/components/AnimatedHand/reka.svg rename to src/components/Starter/AnimatedHand/reka.svg diff --git a/src/components/Starter/Popup.css b/src/components/Starter/Popup.css new file mode 100644 index 0000000..997e727 --- /dev/null +++ b/src/components/Starter/Popup.css @@ -0,0 +1,52 @@ +/* * { + 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 { +}*/ + +.popup-inner .Animation { + text-align: left; + padding-bottom: 32px; +} diff --git a/src/components/Starter/Popup.js b/src/components/Starter/Popup.js new file mode 100644 index 0000000..9d40caa --- /dev/null +++ b/src/components/Starter/Popup.js @@ -0,0 +1,32 @@ +import React from "react"; +import "./Popup.css"; +import Hand from "./AnimatedHand/Hand"; + +function Popup(props) { + return props.trigger ? ( +
+
+
+ {props.children} +
+
+
+
+
+ +
+
+
+
+ +
+
+
+ ) : ( + "" + ); +} + +export default Popup; diff --git a/src/components/Starter/Popupv2.js b/src/components/Starter/Popupv2.js new file mode 100644 index 0000000..5efc280 --- /dev/null +++ b/src/components/Starter/Popupv2.js @@ -0,0 +1,30 @@ +import Popup from "./Popup.js"; +import { useState, useEffect } from "react"; + +function Popupv2() { + const [timedPopup, setTimedPopup] = useState(false); + + useEffect(() => { + setTimeout(() => { + setTimedPopup(true); + }, 3000); + }, []); + + return ( +
+ +

+ 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. +

+ +
+ ); +} + +export default Popupv2; diff --git a/src/index.js b/src/index.js index fb6f005..62f08a9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,12 @@ 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( - - - , - document.getElementById("root") + + + , + document.getElementById("root") ); From 0b73bd1befde3b92fae9b38962fd7ff45cde5d1f Mon Sep 17 00:00:00 2001 From: drgoodcat <60068941+drgoodcat@users.noreply.github.com> Date: Sat, 2 Oct 2021 23:13:06 +0200 Subject: [PATCH 2/4] fix --- src/App.js | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/src/App.js b/src/App.js index 5a1a56c..cb4a5c2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,8 @@ -import { BrowserRouter as Router, Switch, Route /*Link*/ } 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"; @@ -6,15 +10,17 @@ import { NotFound } from "./pages/NotFound"; import Logo from "./components/Logo"; export const App = () => { - return ( - - - - - - - - - - ); + return ( + + + + + + + + + + ); }; + +export default App; From bb93c95b9638e817207bc5a89f406b4d4c43ddbf Mon Sep 17 00:00:00 2001 From: drgoodcat <60068941+drgoodcat@users.noreply.github.com> Date: Sun, 3 Oct 2021 00:29:43 +0200 Subject: [PATCH 3/4] popup tweaks --- src/App.js | 2 ++ src/components/Starter/AnimatedHand/reka.svg | 14 +++----------- src/components/Starter/Popup.css | 12 ++++++++++-- src/components/Starter/Popup.js | 2 +- 4 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/App.js b/src/App.js index cb4a5c2..a36efa7 100644 --- a/src/App.js +++ b/src/App.js @@ -8,12 +8,14 @@ import { About } from "./pages/About"; import { Users } from "./pages/Users"; import { NotFound } from "./pages/NotFound"; import Logo from "./components/Logo"; +import Popupv2 from "./components/Starter/Popupv2"; export const App = () => { return ( + diff --git a/src/components/Starter/AnimatedHand/reka.svg b/src/components/Starter/AnimatedHand/reka.svg index 7a75072..0036c12 100644 --- a/src/components/Starter/AnimatedHand/reka.svg +++ b/src/components/Starter/AnimatedHand/reka.svg @@ -10,9 +10,12 @@ + + + @@ -49,17 +52,6 @@ - - - - - - - - - - - diff --git a/src/components/Starter/Popup.css b/src/components/Starter/Popup.css index 997e727..39f04cd 100644 --- a/src/components/Starter/Popup.css +++ b/src/components/Starter/Popup.css @@ -43,8 +43,16 @@ main { background-color: white; } -/*.close-btn { -}*/ +.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; diff --git a/src/components/Starter/Popup.js b/src/components/Starter/Popup.js index 9d40caa..9c2c7ee 100644 --- a/src/components/Starter/Popup.js +++ b/src/components/Starter/Popup.js @@ -12,12 +12,12 @@ function Popup(props) {


-


+
From de836b415c83d5ce2714a94b06275e8017b10ebe Mon Sep 17 00:00:00 2001 From: drgoodcat <60068941+drgoodcat@users.noreply.github.com> Date: Sun, 3 Oct 2021 00:35:05 +0200 Subject: [PATCH 4/4] Cleaning --- src/App.js | 2 -- src/components/{Starter => Pop-up}/AnimatedHand/Hand.js | 0 src/components/{Starter => Pop-up}/AnimatedHand/reka.svg | 0 src/components/{Starter => Pop-up}/Popup.css | 0 src/components/{Starter => Pop-up}/Popup.js | 0 src/components/{Starter/Popupv2.js => Pop-up/ShowPopup.js} | 4 ++-- 6 files changed, 2 insertions(+), 4 deletions(-) rename src/components/{Starter => Pop-up}/AnimatedHand/Hand.js (100%) rename src/components/{Starter => Pop-up}/AnimatedHand/reka.svg (100%) rename src/components/{Starter => Pop-up}/Popup.css (100%) rename src/components/{Starter => Pop-up}/Popup.js (100%) rename src/components/{Starter/Popupv2.js => Pop-up/ShowPopup.js} (94%) diff --git a/src/App.js b/src/App.js index a36efa7..cb4a5c2 100644 --- a/src/App.js +++ b/src/App.js @@ -8,14 +8,12 @@ import { About } from "./pages/About"; import { Users } from "./pages/Users"; import { NotFound } from "./pages/NotFound"; import Logo from "./components/Logo"; -import Popupv2 from "./components/Starter/Popupv2"; export const App = () => { return ( - diff --git a/src/components/Starter/AnimatedHand/Hand.js b/src/components/Pop-up/AnimatedHand/Hand.js similarity index 100% rename from src/components/Starter/AnimatedHand/Hand.js rename to src/components/Pop-up/AnimatedHand/Hand.js diff --git a/src/components/Starter/AnimatedHand/reka.svg b/src/components/Pop-up/AnimatedHand/reka.svg similarity index 100% rename from src/components/Starter/AnimatedHand/reka.svg rename to src/components/Pop-up/AnimatedHand/reka.svg diff --git a/src/components/Starter/Popup.css b/src/components/Pop-up/Popup.css similarity index 100% rename from src/components/Starter/Popup.css rename to src/components/Pop-up/Popup.css diff --git a/src/components/Starter/Popup.js b/src/components/Pop-up/Popup.js similarity index 100% rename from src/components/Starter/Popup.js rename to src/components/Pop-up/Popup.js diff --git a/src/components/Starter/Popupv2.js b/src/components/Pop-up/ShowPopup.js similarity index 94% rename from src/components/Starter/Popupv2.js rename to src/components/Pop-up/ShowPopup.js index 5efc280..bd83031 100644 --- a/src/components/Starter/Popupv2.js +++ b/src/components/Pop-up/ShowPopup.js @@ -1,7 +1,7 @@ import Popup from "./Popup.js"; import { useState, useEffect } from "react"; -function Popupv2() { +function ShowPopup() { const [timedPopup, setTimedPopup] = useState(false); useEffect(() => { @@ -27,4 +27,4 @@ function Popupv2() { ); } -export default Popupv2; +export default ShowPopup;