feat: Added Modal

lloydrichards · Jul 6, 2020 · 432d1bd · 432d1bd
1 parent 7112d27
commit 432d1bd
Show file tree

Hide file tree

Showing 5 changed files with 227 additions and 1 deletion.
diff --git a/components/LifePlastic/UI/TutorialModal.tsx b/components/LifePlastic/UI/TutorialModal.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import TutorialIcon from "./icons/tutorial";
+import CloseIcon from "./icons/close";
+import { Modal } from "../styles/PlasticStyles";
+
+const TutorialModal: React.FC = ({ children }) => {
+  return (
+    <Modal>
+      <div style={{ width: "100%"}}>
+        <TutorialIcon />
+        <CloseIcon onClick={() => console.log("Close!")} />
+      </div>
+
+      {children}
+      <button>`{`>`}` Continue</button>
+    </Modal>
+  );
+};
+
+export default TutorialModal;
diff --git a/components/LifePlastic/UI/icons/close.tsx b/components/LifePlastic/UI/icons/close.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+
+interface Props {
+  onClick: () => void;
+}
+
+const CloseIcon: React.FC<Props> = ({ onClick }) => {
+  return (
+    <div style={{ float: "right", cursor: "pointer", padding: "15px"  }} onClick={onClick}>
+      <svg
+        width="17"
+        height="17"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M2.232 15.01l6.385-6.384M15 2.242L8.617 8.626m0 0L15 15.011M8.617 8.626L2.232 2.242"
+          stroke="#666"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default CloseIcon;
diff --git a/components/LifePlastic/UI/icons/tutorial.tsx b/components/LifePlastic/UI/icons/tutorial.tsx
@@ -0,0 +1,151 @@
+import * as React from "react";
+
+const TutorialIcon: React.FC = () => {
+  return (
+    <div style={{ float: "left", padding: "10px" }}>
+      <svg
+        width="33"
+        height="33"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clipTutorial)">
+          <g filter="url(#filter0_tutorial)">
+            <path
+              d="M16.142 3.482c7.364 0 13.333 5.97 13.333 13.333 0 7.364-5.97 13.333-13.333 13.333-7.364 0-13.333-5.97-13.333-13.333 0-7.364 5.97-13.333 13.333-13.333z"
+              stroke="#666"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </g>
+          <g filter="url(#filter1_tutorial)">
+            <path
+              d="M16.283 18.82v-2.44c5.023 0 4.937-5.739 0-5.739-1.339-.095-4.017.316-4.017 2.727"
+              stroke="#666"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </g>
+          <g filter="url(#filter2_tutorial)">
+            <path
+              d="M16.203 23.004h.014"
+              stroke="#666"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </g>
+        </g>
+        <defs>
+          <filter
+            id="filter0_tutorial"
+            x="-1.191"
+            y="-.52"
+            width="34.667"
+            height="34.667"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset dx="-1" dy="-1" />
+            <feGaussianBlur stdDeviation="1" />
+            <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
+            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+            <feColorMatrix
+              in="SourceAlpha"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset dx="1" dy="1" />
+            <feGaussianBlur stdDeviation="1" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+            <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+            <feBlend
+              in="SourceGraphic"
+              in2="effect2_dropShadow"
+              result="shape"
+            />
+          </filter>
+          <filter
+            id="filter1_tutorial"
+            x="8.266"
+            y="6.629"
+            width="15.753"
+            height="16.192"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset dx="-1" dy="-1" />
+            <feGaussianBlur stdDeviation="1" />
+            <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
+            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+            <feColorMatrix
+              in="SourceAlpha"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset dx="1" dy="1" />
+            <feGaussianBlur stdDeviation="1" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+            <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+            <feBlend
+              in="SourceGraphic"
+              in2="effect2_dropShadow"
+              result="shape"
+            />
+          </filter>
+          <filter
+            id="filter2_tutorial"
+            x="12.203"
+            y="19.004"
+            width="8.013"
+            height="8"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset dx="-1" dy="-1" />
+            <feGaussianBlur stdDeviation="1" />
+            <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
+            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+            <feColorMatrix
+              in="SourceAlpha"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset dx="1" dy="1" />
+            <feGaussianBlur stdDeviation="1" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+            <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+            <feBlend
+              in="SourceGraphic"
+              in2="effect2_dropShadow"
+              result="shape"
+            />
+          </filter>
+          <clipPath id="clipTutorial">
+            <path
+              fill="#fff"
+              transform="matrix(1 0 0 -1 .143 32.816)"
+              d="M0 0h32v32H0z"
+            />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+};
+
+export default TutorialIcon;
diff --git a/components/LifePlastic/styles/PlasticStyles.tsx b/components/LifePlastic/styles/PlasticStyles.tsx
@@ -45,7 +45,7 @@ export const NavBar = styled.div({
     letterSpacing: "3px",
     fontFamily: "Muli,sans-serif",
     fontWeight: 200,
-    fontSize: "20px"
+    fontSize: "20px",
   },
 });
 export const TopNavBar = styled.div({
@@ -63,6 +63,26 @@ export const TopNavBar = styled.div({
   },
 });
 
+export const Modal = styled.div({
+  minHeight: "190px",
+  width: "475px",
+  margin: "0 auto",
+  zIndex: 9,
+  borderRadius: "12px",
+  boxShadow: "4px 4px 8px rgba(20,20,20,0.12)",
+  background: `${SKYBACKGROUND}`,
+  "&>p": {
+    fontSize: "16px",
+    textAlign: "justify",
+    align: "left",
+    lineHeight: "150%",
+    fontFamily: "Josefin Slab,sans-serif",
+    margin: "0px auto",
+    padding: "60px 0px 0px",
+    width: "400px",
+  },
+});
+
 export const Toggle = styled.button({
   background: `${NAVBARFILL}`,
   overflow: "visible",

diff --git a/pages/experiment/017.tsx b/pages/experiment/017.tsx
@@ -41,6 +41,7 @@ import { GarbageBackground } from "../../components/LifePlastic/Garbage";
 import { GarbagePile } from "../../components/LifePlastic/Plastic/GarbagePile";
 import { AddLabels } from "../../components/LifePlastic/AddLabels";
 import { Processes } from "../../components/LifePlastic/Processes";
+import TutorialModal from "../../components/LifePlastic/UI/TutorialModal";
 
 export const plasticColourPicker = (type: keyof FormType) => {
   switch (type) {
@@ -220,6 +221,13 @@ const Experiment017: React.FC = () => {
         and a way to focus the users attention onto the process at hand and give
         a little bit of information on what is happening.
       </p>
+      <TutorialModal>
+        <p>
+          Sometimes a municipality won’t have a certain system or they might be
+          temporarily unavilable. Click on the factory to see what happens to
+          the plastic in the system.
+        </p>
+      </TutorialModal>
       <Diagram>
         <GarbagePile GarbagePile={garbagePile} />
         <AddLabels />