Mailing buttons

Plant-for-the-Planet-org · May 10, 2021 · 3beaf6b · 3beaf6b
1 parent d9f8837
commit 3beaf6b
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 15 deletions.
diff --git a/public/assets/icons/AppleMailIcon.tsx b/public/assets/icons/AppleMailIcon.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+
+function AppleMailIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0"
+      y="0"
+      version="1.1"
+      height="100%"
+      viewBox="0 0 95 95"
+    >
+      <g>
+        <g>
+          <g>
+            <linearGradient
+              id="Background_13_"
+              x1="-67.017"
+              x2="-67.017"
+              y1="748.266"
+              y2="746.767"
+              gradientTransform="matrix(60 0 0 -60 4071 44901)"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0" stopColor="#1E51EE"></stop>
+              <stop offset="1" stopColor="#19E6FF"></stop>
+            </linearGradient>
+            <path
+              fill="url(#Background_13_)"
+              d="M63.6 5c9 0 13.5 0 18.4 1.5 5.3 1.9 9.5 6.1 11.4 11.4C95 22.8 95 27.4 95 36.4v27.2c0 9 0 13.5-1.5 18.4-1.9 5.3-6.1 9.5-11.4 11.4C77.2 95 72.6 95 63.6 95H36.4c-9 0-13.5 0-18.4-1.5-5.3-2-9.5-6.1-11.4-11.5C5 77.2 5 72.7 5 63.6V36.4c0-9 0-13.5 1.5-18.4 2-5.3 6.2-9.5 11.5-11.4C22.8 5 27.4 5 36.4 5h27.2z"
+            ></path>
+            <path
+              fill="#fff"
+              d="M78.9 69.5c-.1 0-.3.1-.4.1h-57c-.1 0-.3 0-.4-.1l17.8-17.8 3.8 3.9c4.1 4.2 10.6 4.2 14.7 0l3.8-3.9 17.7 17.8zm1.1-1.9V32.3c0-.2 0-.4-.1-.5-.1.2-17.7 18.4-17.7 18.4L80 68v-.4zm-60 .1V32.5c0-.2 0-.4.1-.5.1.2 17.7 18.4 17.7 18.4L20.1 68.1c-.1-.1-.1-.3-.1-.4zm59-37.1L56.3 53.8c-3.5 3.5-9.1 3.5-12.5 0L21.1 30.6c-.1-.1 57.9 0 57.9 0z"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default AppleMailIcon;
diff --git a/public/assets/icons/GmailIcon.tsx b/public/assets/icons/GmailIcon.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+function GmailIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="52 42 88 66">
+      <path fill="#4285f4" d="M58 108h14V74L52 59v43c0 3.32 2.69 6 6 6"></path>
+      <path fill="#34a853" d="M120 108h14c3.32 0 6-2.69 6-6V59l-20 15"></path>
+      <path
+        fill="#fbbc04"
+        d="M120 48v26l20-15v-8c0-7.42-8.47-11.65-14.4-7.2"
+      ></path>
+      <path fill="#ea4335" d="M72 74V48l24 18 24-18v26L96 92"></path>
+      <path
+        fill="#c5221f"
+        d="M52 51v8l20 15V48l-5.6-4.2C60.46 39.35 52 43.58 52 51"
+      ></path>
+    </svg>
+  );
+}
+
+export default GmailIcon;
diff --git a/public/assets/icons/OutlookIcon.tsx b/public/assets/icons/OutlookIcon.tsx
@@ -0,0 +1,124 @@
+import React from "react";
+
+function OutlookIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0"
+      y="0"
+      version="1.1"
+      viewBox="0 0 1831.085 1703.335"
+      xmlSpace="preserve"
+    >
+      <path
+        fill="#0A2767"
+        d="M1831.083 894.25a40.879 40.879 0 00-19.503-35.131h-.213l-.767-.426-634.492-375.585a86.175 86.175 0 00-8.517-5.067 85.17 85.17 0 00-78.098 0 86.37 86.37 0 00-8.517 5.067l-634.49 375.585-.766.426c-19.392 12.059-25.337 37.556-13.278 56.948a41.346 41.346 0 0014.257 13.868l634.492 375.585a95.617 95.617 0 008.517 5.068 85.17 85.17 0 0078.098 0 95.52 95.52 0 008.517-5.068l634.492-375.585a40.84 40.84 0 0020.268-35.685z"
+      ></path>
+      <path
+        fill="#0364B8"
+        d="M520.453 643.477h416.38v381.674h-416.38V643.477zM1745.917 255.5V80.908c1-43.652-33.552-79.862-77.203-80.908H588.204C544.552 1.046 510 37.256 511 80.908V255.5l638.75 170.333L1745.917 255.5z"
+      ></path>
+      <path fill="#0078D4" d="M511 255.5h425.833v383.25H511V255.5z"></path>
+      <path
+        fill="#28A8EA"
+        d="M1362.667 255.5H936.833v383.25L1362.667 1022h383.25V638.75l-383.25-383.25z"
+      ></path>
+      <path
+        fill="#0078D4"
+        d="M936.833 638.75h425.833V1022H936.833V638.75z"
+      ></path>
+      <path
+        fill="#0364B8"
+        d="M936.833 1022h425.833v383.25H936.833V1022z"
+      ></path>
+      <path
+        fill="#14447D"
+        d="M520.453 1025.151h416.38v346.969h-416.38v-346.969z"
+      ></path>
+      <path
+        fill="#0078D4"
+        d="M1362.667 1022h383.25v383.25h-383.25V1022z"
+      ></path>
+      <linearGradient
+        id="SVGID_1_"
+        x1="1128.458"
+        x2="1128.458"
+        y1="811.083"
+        y2="1.998"
+        gradientTransform="matrix(1 0 0 -1 0 1705.333)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stopColor="#35B8F1"></stop>
+        <stop offset="1" stopColor="#28A8EA"></stop>
+      </linearGradient>
+      <path
+        fill="url(#SVGID_1_)"
+        d="M1811.58 927.593l-.809.426-634.492 356.848c-2.768 1.703-5.578 3.321-8.517 4.769a88.437 88.437 0 01-34.407 8.517l-34.663-20.27a86.706 86.706 0 01-8.517-4.897L447.167 906.003h-.298l-21.036-11.753v722.384c.328 48.196 39.653 87.006 87.849 86.7h1230.914c.724 0 1.363-.341 2.129-.341a107.79 107.79 0 0029.808-6.217 86.066 86.066 0 0011.966-6.217c2.853-1.618 7.75-5.152 7.75-5.152a85.974 85.974 0 0034.833-68.772V894.25a38.323 38.323 0 01-19.502 33.343z"
+      ></path>
+      <path
+        fill="#0A2767"
+        d="M1797.017 891.397v44.287l-663.448 456.791-686.87-486.174a.426.426 0 00-.426-.426l-63.023-37.899v-31.938l25.976-.426 54.932 31.512 1.277.426 4.684 2.981s645.563 368.346 647.267 369.197l24.698 14.478c2.129-.852 4.258-1.703 6.813-2.555 1.278-.852 640.879-360.681 640.879-360.681l7.241.427z"
+        opacity="0.5"
+      ></path>
+      <path
+        fill="#1490DF"
+        d="M1811.58 927.593l-.809.468-634.492 356.848c-2.768 1.703-5.578 3.321-8.517 4.769a88.96 88.96 0 01-78.098 0 96.578 96.578 0 01-8.517-4.769l-634.49-356.848-.766-.468a38.326 38.326 0 01-20.057-33.343v722.384c.305 48.188 39.616 87.004 87.803 86.7H1743.277c48.188.307 87.5-38.509 87.807-86.696V894.25a38.33 38.33 0 01-19.504 33.343z"
+      ></path>
+      <path
+        d="M1185.52 1279.629l-9.496 5.323a92.806 92.806 0 01-8.517 4.812 88.173 88.173 0 01-33.47 8.857l241.405 285.479 421.107 101.476a86.785 86.785 0 0026.7-33.343l-637.729-372.604z"
+        opacity="0.1"
+      ></path>
+      <path
+        d="M1228.529 1255.442l-52.505 29.51a92.806 92.806 0 01-8.517 4.812 88.173 88.173 0 01-33.47 8.857l113.101 311.838 549.538 74.989a86.104 86.104 0 0034.407-68.815v-9.326l-602.554-351.865z"
+        opacity="0.05"
+      ></path>
+      <path
+        fill="#28A8EA"
+        d="M514.833 1703.333h1228.316a88.316 88.316 0 0052.59-17.033l-697.089-408.331a86.706 86.706 0 01-8.517-4.897L447.125 906.088h-.298l-20.993-11.838v719.914c-.048 49.2 39.798 89.122 88.999 89.169-.001 0-.001 0 0 0z"
+      ></path>
+      <path
+        d="M1022 418.722v908.303c-.076 31.846-19.44 60.471-48.971 72.392a73.382 73.382 0 01-28.957 5.962H425.833V383.25H511v-42.583h433.073c43.019.163 77.834 35.035 77.927 78.055z"
+        opacity="0.1"
+      ></path>
+      <path
+        d="M979.417 461.305v908.302a69.36 69.36 0 01-6.388 29.808c-11.826 29.149-40.083 48.273-71.54 48.417H425.833V383.25h475.656a71.493 71.493 0 0135.344 8.943c26.104 13.151 42.574 39.883 42.584 69.112z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M979.417 461.305v823.136c-.208 43-34.928 77.853-77.927 78.225H425.833V383.25h475.656a71.493 71.493 0 0135.344 8.943c26.104 13.151 42.574 39.883 42.584 69.112z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M936.833 461.305v823.136c-.046 43.067-34.861 78.015-77.927 78.225H425.833V383.25h433.072c43.062.023 77.951 34.951 77.927 78.013a.589.589 0 01.001.042z"
+        opacity="0.2"
+      ></path>
+      <linearGradient
+        id="SVGID_2_"
+        x1="162.747"
+        x2="774.086"
+        y1="1383.074"
+        y2="324.259"
+        gradientTransform="matrix(1 0 0 -1 0 1705.333)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stopColor="#1784D9"></stop>
+        <stop offset="0.5" stopColor="#107AD5"></stop>
+        <stop offset="1" stopColor="#0A63C9"></stop>
+      </linearGradient>
+      <path
+        fill="url(#SVGID_2_)"
+        d="M78.055 383.25h780.723c43.109 0 78.055 34.947 78.055 78.055v780.723c0 43.109-34.946 78.055-78.055 78.055H78.055c-43.109 0-78.055-34.947-78.055-78.055V461.305c0-43.108 34.947-78.055 78.055-78.055z"
+      ></path>
+      <path
+        fill="#FFF"
+        d="M243.96 710.631a227.05 227.05 0 0189.17-98.495 269.56 269.56 0 01141.675-35.515 250.91 250.91 0 01131.114 33.683 225.014 225.014 0 0186.742 94.109 303.751 303.751 0 0130.405 138.396 320.567 320.567 0 01-31.299 144.783 230.37 230.37 0 01-89.425 97.388 260.864 260.864 0 01-136.011 34.578 256.355 256.355 0 01-134.01-34.067 228.497 228.497 0 01-87.892-94.28 296.507 296.507 0 01-30.745-136.735 329.29 329.29 0 0130.276-143.845zm95.046 231.227a147.386 147.386 0 0050.163 64.812 131.028 131.028 0 0078.353 23.591 137.244 137.244 0 0083.634-24.358 141.156 141.156 0 0048.715-64.812 251.594 251.594 0 0015.543-90.404 275.198 275.198 0 00-14.649-91.554 144.775 144.775 0 00-47.182-67.537 129.58 129.58 0 00-82.91-25.55 135.202 135.202 0 00-80.184 23.804 148.626 148.626 0 00-51.1 65.365 259.759 259.759 0 00-.341 186.728l-.042-.085z"
+      ></path>
+      <path
+        fill="#50D9FF"
+        d="M1362.667 255.5h383.25v383.25h-383.25V255.5z"
+      ></path>
+    </svg>
+  );
+}
+
+export default OutlookIcon;
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -70,5 +70,5 @@
   "verifyEmailHeader": "Please confirm your email",
   "verifyEmailText": "To secure your account, we need to verify your email. Please check your inbox or spam/junk folder for a confirmation email and then continue to login.",
   "verifyEmailInfo": "If you didn’t receive an email please try logging in again and we’ll send you another email.",
-  "skipLogout":"Skip and Logout"
+  "skipLogout":"Continue as guest"
 }
diff --git a/src/Donations/Micros/Authentication.tsx b/src/Donations/Micros/Authentication.tsx
@@ -6,6 +6,9 @@ import { useTranslation } from "react-i18next";
 import { ThemeContext } from "../../../styles/themeContext";
 import { Backdrop, Fade, Modal } from "@material-ui/core";
 import VerifyEmailIcon from "../../../public/assets/icons/VerifyEmailIcon";
+import GmailIcon from "../../../public/assets/icons/GmailIcon";
+import OutlookIcon from "../../../public/assets/icons/OutlookIcon";
+import AppleMailIcon from "../../../public/assets/icons/AppleMailIcon";
 
 interface Props {}
 
@@ -125,28 +128,34 @@ function VerifyEmailModal({ openModal, handleModalClose, logout }) {
     >
       <Fade in={openModal}>
         <div className={"modal p-20"}>
-          <p className={"select-language-title mb-20"}>{t("verifyEmailHeader")}</p>
-          <VerifyEmailIcon/>
+          <p className={"select-language-title mb-20"}>
+            {t("verifyEmailHeader")}
+          </p>
+          <VerifyEmailIcon />
           <p className="text-center mt-30">{t("verifyEmailText")}</p>
           <p className="text-center mt-20">{t("verifyEmailInfo")}</p>
-          <div className={"mt-20 d-flex row justify-content-between"}>
+          <div className={"mt-30 d-flex column"}>
+            <div className={"d-flex row w-100 justify-content-center align-items-center mailing-buttons"}>
+              <a href="https://mail.google.com/" target="_blank" rel="noopener">
+                <GmailIcon />
+              </a>
+              <a href="https://www.icloud.com/mail" target="_blank" rel="noopener">
+                <AppleMailIcon />
+              </a>
+              <a href="https://outlook.office.com/mail/" target="_blank" rel="noopener">
+                <OutlookIcon />
+              </a>
+            </div>
             <button
               id={"VerifyEmailModalCan"}
-              className={"secondary-button"}
+              className={"secondary-button mt-20"}
               style={{ minWidth: "130px" }}
-              onClick={() => logout({ returnTo: `${process.env.NEXTAUTH_URL}/` })}
+              onClick={() =>
+                logout({ returnTo: `${process.env.NEXTAUTH_URL}/` })
+              }
             >
               <p>{t("skipLogout")}</p>
             </button>
-            <div style={{width:'20px'}}></div>
-            <button
-              id={"VerifyEmailModalOk"}
-              className={"primary-button"}
-              style={{ minWidth: "130px" }}
-              onClick={() => console.log("verify email")}
-            >
-              <p>{t("verifyEmail")}</p>
-            </button>
           </div>
         </div>
       </Fade>

diff --git a/styles/common.scss b/styles/common.scss
@@ -18,6 +18,9 @@
 .justify-content-between{
   justify-content: space-between;
 }
+.align-items-center{
+  justify-content: center;
+}
 .flex-1{
   flex: 1;
 }

diff --git a/styles/donations.scss b/styles/donations.scss
@@ -560,4 +560,19 @@
 }
 .donate-now{
   background-image: linear-gradient(103deg, #383461 5%, #684889 116%);
+}
+
+.mailing-buttons{
+  a{
+    margin-left: 12px;
+    margin-right: 12px;
+    svg{
+      height: 30px;
+      filter: grayscale(100%);
+      &:hover{
+        cursor: pointer;
+        filter: grayscale(0%);
+      }
+    }
+  }
 }