From 15fbdc17b8c03c7e85fad16d2f8770f5ffb990f9 Mon Sep 17 00:00:00 2001 From: Daniel Ternyak Date: Fri, 24 Jul 2020 14:17:07 -0500 Subject: [PATCH] add banner and removal create a proposal buttons --- frontend/client/components/Header/Banner.less | 99 ++++++++ frontend/client/components/Header/Banner.tsx | 18 ++ frontend/client/components/Header/Drawer.tsx | 6 +- frontend/client/components/Header/index.tsx | 212 +++++++++--------- frontend/client/components/Header/style.less | 2 +- frontend/client/components/RFP/index.tsx | 35 +-- frontend/client/pages/email-verify.tsx | 10 +- 7 files changed, 255 insertions(+), 127 deletions(-) create mode 100644 frontend/client/components/Header/Banner.less create mode 100644 frontend/client/components/Header/Banner.tsx diff --git a/frontend/client/components/Header/Banner.less b/frontend/client/components/Header/Banner.less new file mode 100644 index 00000000..10745961 --- /dev/null +++ b/frontend/client/components/Header/Banner.less @@ -0,0 +1,99 @@ +.Banner { + padding-left: 10px; + padding-right: 10px; + background-color: #2D2A26; + color: #fff; + overflow-x: hidden; + align-content: center; + justify-content: center; + display: flex; + + @media (max-width: 1000px) { + padding-top: 10px; + padding-bottom: 10px; + flex-direction: column; + } + + &__inner { + display: flex; + padding: .65rem 0; + align-items: center; + justify-content: center; + flex-direction: row; + max-width: 1000px; + align-content: center; + overflow-x: hidden; + margin-bottom: 0.25rem; + + @media (max-width: 1100px) { + max-width: 900px; + margin: 0 auto; + } + + @media (max-width: 1000px) { + max-width: 750px; + text-align: center; + padding: 0px 10px; + } + + @media(max-width: 600px) { + flex-wrap: wrap; + } + } + + &__badge { + padding: 6px 16px; + border-radius: 100px; + font-size: 14px; + line-height: 20px; + background-color: #CF8A00; + font-weight: 700; + text-transform: uppercase; + margin-right: 12px; + margin-top: auto; + margin-bottom: auto; + + @media (max-width: 1000px) { + padding: 6px 16px; + border-radius: 100px; + } + } + + &__link { + color: #fff; + text-decoration: none; + } + + &__body { + display: flex; + align-content: center; + justify-content: center; + padding: 0rem 0.5rem; + max-width: 1000px; + } + + &__body-text { + font-size: 14px; + font-weight: 500; + margin-bottom: 0; + + > * { + margin: 0; + } + + @media (max-width: 800px) { + line-height: 22px; + } + + @media(max-width: 600px) { + font-size: 12px; + line-height: 20px; + margin: 1rem 0; + } + } + + &__body-link { + color: #CF8A00; + text-decoration: none; + } +} diff --git a/frontend/client/components/Header/Banner.tsx b/frontend/client/components/Header/Banner.tsx new file mode 100644 index 00000000..aff37a59 --- /dev/null +++ b/frontend/client/components/Header/Banner.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import './Banner.less' + +const Banner = (props: any) => ( +
+
+
+ {props.badgeName} +
+
+

{props.body}

+
+
+
+) + + +export default Banner \ No newline at end of file diff --git a/frontend/client/components/Header/Drawer.tsx b/frontend/client/components/Header/Drawer.tsx index 836b5764..435a03e1 100644 --- a/frontend/client/components/Header/Drawer.tsx +++ b/frontend/client/components/Header/Drawer.tsx @@ -80,9 +80,9 @@ class HeaderDrawer extends React.Component { Browse proposals - - Start a proposal - + {/**/} + {/* Start a proposal*/} + {/**/} diff --git a/frontend/client/components/Header/index.tsx b/frontend/client/components/Header/index.tsx index 122575c0..e5282dbd 100644 --- a/frontend/client/components/Header/index.tsx +++ b/frontend/client/components/Header/index.tsx @@ -1,141 +1,151 @@ import React from 'react'; -import { Link } from 'react-router-dom'; +import {Link} from 'react-router-dom'; import classnames from 'classnames'; import HeaderAuth from './Auth'; import HeaderDrawer from './Drawer'; import MenuIcon from 'static/images/menu.svg'; import Logo from 'static/images/logo-name.svg'; import './style.less'; -import { Button } from 'antd'; -import { connect } from 'react-redux'; -import { AppState } from 'store/reducers'; -import { ccrActions } from 'modules/ccr'; -import { createActions } from 'modules/create'; +import Banner from "components/Header/Banner"; +import {Button} from 'antd'; +import {connect} from 'react-redux'; +import {AppState} from 'store/reducers'; +import {ccrActions} from 'modules/ccr'; +import {createActions} from 'modules/create'; -import { compose } from 'recompose'; -import { withRouter } from 'react-router'; -import { fetchCCRDrafts } from 'modules/ccr/actions'; -import { fetchDrafts } from 'modules/create/actions'; +import {compose} from 'recompose'; +import {withRouter} from 'react-router'; +import {fetchCCRDrafts} from 'modules/ccr/actions'; +import {fetchDrafts} from 'modules/create/actions'; interface StateProps { - hasCheckedUser: AppState['auth']['hasCheckedUser']; - ccrDrafts: AppState['ccr']['drafts']; - proposalDrafts: AppState['create']['drafts']; + hasCheckedUser: AppState['auth']['hasCheckedUser']; + ccrDrafts: AppState['ccr']['drafts']; + proposalDrafts: AppState['create']['drafts']; } interface OwnProps { - isTransparent?: boolean; + isTransparent?: boolean; } interface State { - isDrawerOpen: boolean; + isDrawerOpen: boolean; } interface DispatchProps { - fetchCCRDrafts: typeof fetchCCRDrafts; - fetchDrafts: typeof fetchDrafts; + fetchCCRDrafts: typeof fetchCCRDrafts; + fetchDrafts: typeof fetchDrafts; } type Props = StateProps & OwnProps & DispatchProps; class Header extends React.Component { - state: State = { - isDrawerOpen: false, - }; + state: State = { + isDrawerOpen: false, + }; - componentDidMount = () => { - this.props.fetchCCRDrafts(); - this.props.fetchDrafts(); - }; + componentDidMount = () => { + this.props.fetchCCRDrafts(); + this.props.fetchDrafts(); + }; - render() { - const { isTransparent, ccrDrafts, proposalDrafts, hasCheckedUser } = this.props; - const { isDrawerOpen } = this.state; + render() { + const {isTransparent, ccrDrafts, proposalDrafts, hasCheckedUser} = this.props; + const {isDrawerOpen} = this.state; - return ( -
-
-
- - Proposals - - - Requests - - - Guide - -
+ return ( +
+ The Zcash Foundation is not currently accepting any new grants; we are awaiting the + formation of the Major Grant Review Committee to help guide our future grant strategy. + For + more information, please email contact@zfnd.org

}/> +
+
+
+ + Proposals + + + Requests + + + Guide + +
-
- -
+
+ +
- - - + + + - {!hasCheckedUser && (ccrDrafts === null || proposalDrafts === null) ? null : ( -
-
- - {Array.isArray(proposalDrafts) && proposalDrafts.length > 0 ? ( - - ) : ( - - )} - -
-
- - {Array.isArray(ccrDrafts) && ccrDrafts.length > 0 ? ( - - ) : ( - - )} - -
+ {!hasCheckedUser && (ccrDrafts === null || proposalDrafts === null) ? null : ( +
+
+ + {Array.isArray(proposalDrafts) && proposalDrafts.length > 0 ? ( + + ) : ( + null // + )} + +
+
+ + {Array.isArray(ccrDrafts) && ccrDrafts.length > 0 ? ( + + ) : ( + + )} + +
- + +
+ )} + + + + {process.env.TESTNET && ( +
+ Testnet +
+ )} +
+
- )} + ); + } - - - {process.env.TESTNET && ( -
- Testnet -
- )} -
-
- ); - } - - private openDrawer = () => this.setState({ isDrawerOpen: true }); - private closeDrawer = () => this.setState({ isDrawerOpen: false }); + private openDrawer = () => this.setState({isDrawerOpen: true}); + private closeDrawer = () => this.setState({isDrawerOpen: false}); } const withConnect = connect( - (state: AppState) => ({ - hasCheckedUser: state.auth.hasCheckedUser, - ccrDrafts: state.ccr.drafts, - proposalDrafts: state.create.drafts, - }), - { - fetchCCRDrafts: ccrActions.fetchCCRDrafts, - fetchDrafts: createActions.fetchDrafts, - }, + (state: AppState) => ({ + hasCheckedUser: state.auth.hasCheckedUser, + ccrDrafts: state.ccr.drafts, + proposalDrafts: state.create.drafts, + }), + { + fetchCCRDrafts: ccrActions.fetchCCRDrafts, + fetchDrafts: createActions.fetchDrafts, + }, ); export default compose( - withRouter, - withConnect, + withRouter, + withConnect, )(Header); diff --git a/frontend/client/components/Header/style.less b/frontend/client/components/Header/style.less index 68cd3351..a618c080 100644 --- a/frontend/client/components/Header/style.less +++ b/frontend/client/components/Header/style.less @@ -25,7 +25,7 @@ transition: box-shadow @header-transition ease; &.is-transparent { - position: absolute; + //position: absolute; background: transparent; box-shadow: none; } diff --git a/frontend/client/components/RFP/index.tsx b/frontend/client/components/RFP/index.tsx index 4207c11f..a04407a6 100644 --- a/frontend/client/components/RFP/index.tsx +++ b/frontend/client/components/RFP/index.tsx @@ -155,23 +155,24 @@ export class RFPDetail extends React.Component { )} {isLive && ( -
- -
- Ready to take on this request?{' '} - - - -
- -
+ null + //
+ // + //
+ // Ready to take on this request?{' '} + // + // + // + //
+ // + //
)}
); diff --git a/frontend/client/pages/email-verify.tsx b/frontend/client/pages/email-verify.tsx index f9d41cb8..971edddf 100644 --- a/frontend/client/pages/email-verify.tsx +++ b/frontend/client/pages/email-verify.tsx @@ -51,11 +51,11 @@ class VerifyEmail extends React.Component { const actions = (
- - - + {/**/} + {/* */} + {/**/}