From 3931a19370a47fdcd93a9dccb735afcff6f59510 Mon Sep 17 00:00:00 2001 From: kanreisa Date: Thu, 2 Sep 2021 05:03:40 +0900 Subject: [PATCH] ui/HeartView: add a confirmation before accessing opencollective #106 --- src/ui/components/HeartView.css | 5 ++ src/ui/components/HeartView.tsx | 108 ++++++++++++++++++++------------ 2 files changed, 74 insertions(+), 39 deletions(-) diff --git a/src/ui/components/HeartView.css b/src/ui/components/HeartView.css index a75f07e1..2e60374b 100644 --- a/src/ui/components/HeartView.css +++ b/src/ui/components/HeartView.css @@ -13,6 +13,11 @@ See the License for the specific language governing permissions and limitations under the License. */ +.heart-view > div.consent { + margin: 16px 32px; + max-width: 450px; +} + .heart-view > .ms-Stack > span, .heart-view > .ms-Stack img { margin: 8px 16px; diff --git a/src/ui/components/HeartView.tsx b/src/ui/components/HeartView.tsx index c4853f0a..9b7118cf 100644 --- a/src/ui/components/HeartView.tsx +++ b/src/ui/components/HeartView.tsx @@ -14,58 +14,88 @@ limitations under the License. */ import * as React from "react"; +import { useState } from "react"; import { Stack, Separator, Text, - Link + Link, + PrimaryButton } from "@fluentui/react"; import "./HeartView.css"; const HeartView: React.FC = () => { + const [consented, setConsented] = useState(false); + return ( - - Contributors - - This project exists thanks to all the people who contribute. - - - - - + {consented === false && <> + Confirmation + +
+ We sincerely thank you for your continued support.
+
+ This page is attempting to retrieve images from your browser + by going directly to +  opencollective.com  + in order to display a list of contributors.
+
+ To view this page, click the "Continue" button. +
+ +
+ { + setConsented(true); + }} + /> +
+ } + + {consented === true && <> + + Contributors + + This project exists thanks to all the people who contribute. + + + + + - - Backers - - Thank you to all our backers! 🙏 - [Become a backer] - - - - - + + Backers + + Thank you to all our backers! 🙏 + [Become a backer] + + + + + - - Sponsors - - Support this project by becoming a sponsor. Your logo will show up here with a link to your website. - [Become a sponsor] - - - - - - - - - - - - - - + + Sponsors + + Support this project by becoming a sponsor. Your logo will show up here with a link to your website. + [Become a sponsor] + + + + + + + + + + + + + + + } ); };