add donate modal

package.json

@@ -1,7 +1,7 @@
 {
   "name": "instagram-live-streamer",
   "description": "Create streaming links to instagram live",
-  "version": "0.1.9",
+  "version": "0.1.9-beta",
   "private": true,
   "copyright": "Copyright © 2020 Musthaq Ahamad",
   "licence": "MIT",

src/components/DonateModal/index.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import styles from "./styles.module.scss";
+import open from "open";
+
+export default function UpdateModal({
+  title,
+  message,
+  cta,
+  link,
+  onClickClose,
+}) {
+  return (
+    <div className={styles.modalWrapper}>
+      <div className={styles.updateModal}>
+        <h1 className={styles.title}>{title}</h1>
+        <p className={styles.description}>{message}</p>
+        <div className={styles.buttonArea}>
+            <button onClick={() => onClickClose()}>Remind me later</button>
+            <button onClick={() => open(link)} className={styles.primary} autoFocus>Download Now</button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/DonateModal/styles.module.scss

@@ -0,0 +1,72 @@
+.modalWrapper {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 999;
+  background-color: var(--color-secondary-transparent);
+}
+
+.updateModal {
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+  border-radius: 10px 10px 0 0;
+  background-color: var(--color-secondary);
+  padding: 15px;
+
+  .title {
+    font-size: 1rem;
+    font-weight: bold;
+  }
+
+  .description {
+    font-size: 1rem;
+    margin: 5px 0 0 0;
+    opacity: 0.7;
+  }
+
+  .buttonArea {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 10px 0;
+
+    button {
+      margin: 0;
+      padding: 15px;
+      background-color: var(--color-secondary-light);
+      color: var(--font-color);
+      border: 0;
+      border-radius: 5px;
+      outline: none;
+      opacity: 0.8;
+
+      &:first-child {
+        margin-right: 10px;
+      }
+
+      &.primary {
+        background-color: var(--color-primary);
+        color: var(--color-secondary);
+      }
+
+      &:focus {
+        opacity: 1;
+      }
+
+      &:hover {
+        cursor: pointer;
+        opacity: 1;
+      }
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+  }
+}