Skip to content

Commit

Permalink
ui/HeartView: add a confirmation before accessing opencollective #106
Browse files Browse the repository at this point in the history
  • Loading branch information
@kanreisa
kanreisa committed Sep 1, 2021
1 parent 4248e19 commit 3931a19
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 39 deletions.
5 changes: 5 additions & 0 deletions src/ui/components/HeartView.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
108 changes: 69 additions & 39 deletions src/ui/components/HeartView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<boolean>(false);

return (
<Stack tokens={{ childrenGap: "16 0" }} style={{ margin: "16px 0 8px" }} className="heart-view">
<Stack>
<Separator alignContent="start">Contributors</Separator>
<Text>
This project exists thanks to all the people who contribute.
</Text>
<Text>
<Link href="https://github.com/Chinachu/Mirakurun/graphs/contributors" target="_blank"><img src="https://opencollective.com/Mirakurun/contributors.svg?width=890&button=false" /></Link>
</Text>
</Stack>
{consented === false && <>
<Separator alignContent="start">Confirmation</Separator>

<div className="consent">
<b>We sincerely thank you for your continued support.</b><br />
<br />
This page is attempting to retrieve images from your browser
by going directly to
&nbsp;<Link href="https://opencollective.com/" target="_blank">opencollective.com</Link>&nbsp;
in order to display a list of contributors.<br />
<br />
To view this page, click the "Continue" button.
</div>

<div className="consent">
<PrimaryButton
text="Continue"
onClick={() => {
setConsented(true);
}}
/>
</div>
</>}

{consented === true && <>
<Stack>
<Separator alignContent="start">Contributors</Separator>
<Text>
This project exists thanks to all the people who contribute.
</Text>
<Text>
<Link href="https://github.com/Chinachu/Mirakurun/graphs/contributors" target="_blank"><img src="https://opencollective.com/Mirakurun/contributors.svg?width=890&button=false" /></Link>
</Text>
</Stack>

<Stack>
<Separator alignContent="start">Backers</Separator>
<Text>
Thank you to all our backers! 🙏
[<Link href="https://opencollective.com/Mirakurun#backer" target="_blank">Become a backer</Link>]
</Text>
<Text>
<Link href="https://opencollective.com/Mirakurun#backers" target="_blank"><img src="https://opencollective.com/Mirakurun/backers.svg?width=890" /></Link>
</Text>
</Stack>
<Stack>
<Separator alignContent="start">Backers</Separator>
<Text>
Thank you to all our backers! 🙏
[<Link href="https://opencollective.com/Mirakurun#backer" target="_blank">Become a backer</Link>]
</Text>
<Text>
<Link href="https://opencollective.com/Mirakurun#backers" target="_blank"><img src="https://opencollective.com/Mirakurun/backers.svg?width=890" /></Link>
</Text>
</Stack>

<Stack>
<Separator alignContent="start">Sponsors</Separator>
<Text>
Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
[<Link href="https://opencollective.com/Mirakurun#sponsor" target="_blank">Become a sponsor</Link>]
</Text>
<Text>
<Link href="https://opencollective.com/Mirakurun/sponsor/0/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/0/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/1/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/1/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/2/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/2/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/3/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/3/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/4/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/4/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/5/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/5/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/6/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/6/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/7/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/7/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/8/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/8/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/9/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/9/avatar.svg" /></Link>
</Text>
</Stack>
<Stack>
<Separator alignContent="start">Sponsors</Separator>
<Text>
Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
[<Link href="https://opencollective.com/Mirakurun#sponsor" target="_blank">Become a sponsor</Link>]
</Text>
<Text>
<Link href="https://opencollective.com/Mirakurun/sponsor/0/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/0/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/1/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/1/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/2/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/2/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/3/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/3/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/4/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/4/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/5/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/5/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/6/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/6/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/7/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/7/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/8/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/8/avatar.svg" /></Link>
<Link href="https://opencollective.com/Mirakurun/sponsor/9/website" target="_blank"><img src="https://opencollective.com/Mirakurun/sponsor/9/avatar.svg" /></Link>
</Text>
</Stack>
</>}
</Stack>
);
};
Expand Down

0 comments on commit 3931a19

Please sign in to comment.