From 7a499f8336d6051bf3b5d6dc3ab45a2d85f99917 Mon Sep 17 00:00:00 2001 From: mstfash Date: Mon, 18 Jan 2021 18:21:17 +0200 Subject: [PATCH] adding description --- src/pages/bug-bounty.js | 281 ---------------------------------------- 1 file changed, 281 deletions(-) delete mode 100644 src/pages/bug-bounty.js diff --git a/src/pages/bug-bounty.js b/src/pages/bug-bounty.js deleted file mode 100644 index 5752b4e..0000000 --- a/src/pages/bug-bounty.js +++ /dev/null @@ -1,281 +0,0 @@ -import React from "react" -import moment from "moment" -import Layout from "../components/Layout" -import styled from "styled-components" -import { ExternalLinkArrow } from "../styles/GlobalStyle" -import { documentToReactComponents } from "@contentful/rich-text-react-renderer" -import useBugBounty from "../hooks/useBugBounty" -import { INLINES, BLOCKS } from "@contentful/rich-text-types" - -const BugBounty = () => { - const bugBounty = useBugBounty()[0].node - const returnRewardTable = () => { - return ( - - Likelihood - Severity - - - - - Almost certain - Likely - Possible - Unlikely - Almost possible - - - {Object.keys(bugBounty.rewardTable).map((key, index) => { - return ( - - {bugBounty.rewardTable[key].map((item, i) => ( - - {item.value} - - ))} - {key.split("_").join(" ")} - - ) - })} - - - - ) - } - - const handleContent = content => { - return documentToReactComponents(content, { - renderNode: { - [BLOCKS.QUOTE]: () => { - return returnRewardTable() - }, - [INLINES.HYPERLINK]: node => { - return ( - - {node.content[0].value} - - ) - }, - }, - }) - } - - return ( - - - {bugBounty.title} - - Updated {moment(bugBounty.updatedAt).format("MMMM Do YYYY")} - - {handleContent(bugBounty.content.json)} - - - ) -} - -export default BugBounty - -const Title = styled.h1` - font-family: "Inter-Medium"; - font-weight: 600; - text-align: center; - max-width: 450px; - margin: 0 auto 60px auto; - font-size: 50px; - font-weight: 600; - font-family: "Inter-Medium"; - color: ${props => props.theme.colors.primary}; - ${({ theme }) => theme.mediaWidth.upToSmall` - font-size:35px; - `} -` - -const InnterContent = styled.div` - max-width: 1024px; - margin: 0 auto 80px auto; - padding-top: 180px; - padding-right: 20px; - padding-left: 20px; - - p { - line-height: 1.8 !important; - margin-bottom: 0 !important; - > b { - font-size: calc(0.44vw + 0.44vh + 0.5vmin); - line-height: 2; - margin: 0; - color: ${props => props.theme.colors.primary}; - a { - ${ExternalLinkArrow} - display:inline; - font-size: calc(0.44vw + 0.44vh + 0.5vmin); - word-break: break-all; - } - ${({ theme }) => theme.mediaWidth.upToSmall` - font-size: 16px; - a{ - font-size: 16px; - } - `} - } - } - p, - li { - color: ${props => props.theme.colors.secondary}; - font-weight: bold; - font-size: calc(0.42vw + 0.42vh + 0.5vmin); - ${({ theme }) => theme.mediaWidth.upToSmall` - font-size:15px; - `} - a { - ${ExternalLinkArrow} - display:inline; - - word-break: break-all; - } - } - - h3 { - font-size: calc(0.8vw + 0.8vh + 0.5vmin); - font-family: "Inter-Medium"; - color: ${props => props.theme.colors.primary}; - margin-top: 60px; - margin-bottom: 20px; - ${({ theme }) => theme.mediaWidth.upToSmall` - font-size:20px; - margin-bottom:20px; - `} - } - - h5 { - font-size: calc(0.55vw + 0.55vh + 0.5vmin); - line-height: 2; - margin: 20px 0 0 0; - color: ${props => props.theme.colors.primary}; - font-family: "Inter-Medium"; - font-weight: bold; - a { - ${ExternalLinkArrow} - display:inline; - font-size: calc(0.44vw + 0.44vh + 0.5vmin); - word-break: break-all; - } - ${({ theme }) => theme.mediaWidth.upToSmall` - font-size: 17px; - a{ - font-size: 17px; - } - `} - } - - h6 { - font-size: calc(0.44vw + 0.44vh + 0.5vmin); - line-height: 2; - margin: 0; - - a { - ${ExternalLinkArrow} - display:inline; - font-size: calc(0.44vw + 0.44vh + 0.5vmin); - word-break: break-all; - } - ${({ theme }) => theme.mediaWidth.upToSmall` - font-size: 16px; - a{ - font-size: 16px; - } - `} - } -` - -const Date = styled.div` - color: ${props => props.theme.colors.secondary}; - text-align: center; - margin: 30px 0 80px 0; - font-weight: bold; -` - -const TableContainer = styled.div` - margin: 30px 0 100px 0; - position: relative; - padding-left: 30px; - max-width: 650px; -` - -const InnerContainer = styled.div` - overflow-x: auto; -` -const Content = styled.div` - display: flex; - margin-top: 20px; - align-items: center; - border: 1px solid rgba(0, 0, 0, 0.1); - width: 610px; -` - -const Item = styled.div` - height: 3rem; - display: flex; - align-items: center; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - justify-content: center; - font-weight: bold; - font-size: 14px; - &:last-child { - border-bottom: 0; - } - &.foot { - font-weight: normal; - text-transform: capitalize; - color: rgba(0, 0, 0, 0.6); - } -` - -const Col = styled.div` - flex: 1; - border-right: 1px solid rgba(0, 0, 0, 0.1); - &:last-child { - border-right: 0; - } - &.heads { - flex: 0 0 150px; - ${Item} { - font-weight: normal !important; - justify-content: flex-start; - padding-left: 20px; - color: rgba(0, 0, 0, 0.6); - } - } -` - -const Likelihood = styled.div` - position: absolute; - color: #383d51; - font-size: 20px; - left: -40px; - top: calc(50%); - -webkit-transform: translateY(-50%) rotate(90deg); - transform: translateY(-50%) rotate(90deg); -` - -const Severity = styled.div` - position: absolute; - color: #383d51; - font-size: 20px; - left: calc(50%); - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - bottom: -40px; -`