add banner and removal create a proposal buttons
This commit is contained in:
parent
42be278348
commit
15fbdc17b8
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,18 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './Banner.less'
|
||||||
|
|
||||||
|
const Banner = (props: any) => (
|
||||||
|
<div className="Banner">
|
||||||
|
<div className="Banner__inner">
|
||||||
|
<div className="Banner__badge">
|
||||||
|
<a href="#" className="Banner__link">{props.badgeName}</a>
|
||||||
|
</div>
|
||||||
|
<div className="Banner__body">
|
||||||
|
<p className="Banner__body-text">{props.body}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
export default Banner
|
|
@ -80,9 +80,9 @@ class HeaderDrawer extends React.Component<Props> {
|
||||||
<Menu.Item key="/proposals">
|
<Menu.Item key="/proposals">
|
||||||
<Link to="/proposals">Browse proposals</Link>
|
<Link to="/proposals">Browse proposals</Link>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item key="/create">
|
{/*<Menu.Item key="/create">*/}
|
||||||
<Link to="/create">Start a proposal</Link>
|
{/* <Link to="/create">Start a proposal</Link>*/}
|
||||||
</Menu.Item>
|
{/*</Menu.Item>*/}
|
||||||
</Menu.ItemGroup>
|
</Menu.ItemGroup>
|
||||||
<Menu.ItemGroup title="Requests">
|
<Menu.ItemGroup title="Requests">
|
||||||
<Menu.Item key="/requests">
|
<Menu.Item key="/requests">
|
||||||
|
|
|
@ -1,141 +1,151 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import {Link} from 'react-router-dom';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import HeaderAuth from './Auth';
|
import HeaderAuth from './Auth';
|
||||||
import HeaderDrawer from './Drawer';
|
import HeaderDrawer from './Drawer';
|
||||||
import MenuIcon from 'static/images/menu.svg';
|
import MenuIcon from 'static/images/menu.svg';
|
||||||
import Logo from 'static/images/logo-name.svg';
|
import Logo from 'static/images/logo-name.svg';
|
||||||
import './style.less';
|
import './style.less';
|
||||||
import { Button } from 'antd';
|
import Banner from "components/Header/Banner";
|
||||||
import { connect } from 'react-redux';
|
import {Button} from 'antd';
|
||||||
import { AppState } from 'store/reducers';
|
import {connect} from 'react-redux';
|
||||||
import { ccrActions } from 'modules/ccr';
|
import {AppState} from 'store/reducers';
|
||||||
import { createActions } from 'modules/create';
|
import {ccrActions} from 'modules/ccr';
|
||||||
|
import {createActions} from 'modules/create';
|
||||||
|
|
||||||
import { compose } from 'recompose';
|
import {compose} from 'recompose';
|
||||||
import { withRouter } from 'react-router';
|
import {withRouter} from 'react-router';
|
||||||
import { fetchCCRDrafts } from 'modules/ccr/actions';
|
import {fetchCCRDrafts} from 'modules/ccr/actions';
|
||||||
import { fetchDrafts } from 'modules/create/actions';
|
import {fetchDrafts} from 'modules/create/actions';
|
||||||
|
|
||||||
interface StateProps {
|
interface StateProps {
|
||||||
hasCheckedUser: AppState['auth']['hasCheckedUser'];
|
hasCheckedUser: AppState['auth']['hasCheckedUser'];
|
||||||
ccrDrafts: AppState['ccr']['drafts'];
|
ccrDrafts: AppState['ccr']['drafts'];
|
||||||
proposalDrafts: AppState['create']['drafts'];
|
proposalDrafts: AppState['create']['drafts'];
|
||||||
}
|
}
|
||||||
|
|
||||||
interface OwnProps {
|
interface OwnProps {
|
||||||
isTransparent?: boolean;
|
isTransparent?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
isDrawerOpen: boolean;
|
isDrawerOpen: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface DispatchProps {
|
interface DispatchProps {
|
||||||
fetchCCRDrafts: typeof fetchCCRDrafts;
|
fetchCCRDrafts: typeof fetchCCRDrafts;
|
||||||
fetchDrafts: typeof fetchDrafts;
|
fetchDrafts: typeof fetchDrafts;
|
||||||
}
|
}
|
||||||
|
|
||||||
type Props = StateProps & OwnProps & DispatchProps;
|
type Props = StateProps & OwnProps & DispatchProps;
|
||||||
|
|
||||||
class Header extends React.Component<Props, State> {
|
class Header extends React.Component<Props, State> {
|
||||||
state: State = {
|
state: State = {
|
||||||
isDrawerOpen: false,
|
isDrawerOpen: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount = () => {
|
componentDidMount = () => {
|
||||||
this.props.fetchCCRDrafts();
|
this.props.fetchCCRDrafts();
|
||||||
this.props.fetchDrafts();
|
this.props.fetchDrafts();
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { isTransparent, ccrDrafts, proposalDrafts, hasCheckedUser } = this.props;
|
const {isTransparent, ccrDrafts, proposalDrafts, hasCheckedUser} = this.props;
|
||||||
const { isDrawerOpen } = this.state;
|
const {isDrawerOpen} = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div>
|
||||||
className={classnames({
|
<Banner badgeName={"NOTE"}
|
||||||
Header: true,
|
body={
|
||||||
['is-transparent']: isTransparent,
|
<p>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
|
||||||
<div className="Header-inner">
|
more information, please email <a
|
||||||
<div className="Header-links is-left is-desktop">
|
href={"mailto:contact@zfnd.org"}>contact@zfnd.org</a></p>}/>
|
||||||
<Link to="/proposals" className="Header-links-link">
|
<div
|
||||||
Proposals
|
className={classnames({
|
||||||
</Link>
|
Header: true,
|
||||||
<Link to="/requests" className="Header-links-link">
|
['is-transparent']: isTransparent,
|
||||||
Requests
|
})}
|
||||||
</Link>
|
>
|
||||||
<Link to="/guide" className="Header-links-link">
|
<div className="Header-inner">
|
||||||
Guide
|
<div className="Header-links is-left is-desktop">
|
||||||
</Link>
|
<Link to="/proposals" className="Header-links-link">
|
||||||
</div>
|
Proposals
|
||||||
|
</Link>
|
||||||
|
<Link to="/requests" className="Header-links-link">
|
||||||
|
Requests
|
||||||
|
</Link>
|
||||||
|
<Link to="/guide" className="Header-links-link">
|
||||||
|
Guide
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="Header-links is-left is-mobile">
|
<div className="Header-links is-left is-mobile">
|
||||||
<button className="Header-links-link is-menu" onClick={this.openDrawer}>
|
<button className="Header-links-link is-menu" onClick={this.openDrawer}>
|
||||||
<MenuIcon className="Header-links-link-icon" />
|
<MenuIcon className="Header-links-link-icon"/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Link className="Header-title" to="/">
|
<Link className="Header-title" to="/">
|
||||||
<Logo className="Header-title-logo" />
|
<Logo className="Header-title-logo"/>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{!hasCheckedUser && (ccrDrafts === null || proposalDrafts === null) ? null : (
|
{!hasCheckedUser && (ccrDrafts === null || proposalDrafts === null) ? null : (
|
||||||
<div className="Header-links is-right">
|
<div className="Header-links is-right">
|
||||||
<div className="Header-links-button is-desktop">
|
<div className="Header-links-button is-desktop">
|
||||||
<Link to="/create">
|
<Link to="/create">
|
||||||
{Array.isArray(proposalDrafts) && proposalDrafts.length > 0 ? (
|
{Array.isArray(proposalDrafts) && proposalDrafts.length > 0 ? (
|
||||||
<Button>My Proposals</Button>
|
<Button>My Proposals</Button>
|
||||||
) : (
|
) : (
|
||||||
<Button>Start a Proposal</Button>
|
null // <Button>Start a Proposal</Button>
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="Header-links-button is-desktop">
|
<div className="Header-links-button is-desktop">
|
||||||
<Link to="/create-request">
|
<Link to="/create-request">
|
||||||
{Array.isArray(ccrDrafts) && ccrDrafts.length > 0 ? (
|
{Array.isArray(ccrDrafts) && ccrDrafts.length > 0 ? (
|
||||||
<Button type={'primary'}>My Requests</Button>
|
<Button type={'primary'}>My Requests</Button>
|
||||||
) : (
|
) : (
|
||||||
<Button type={'primary'}>Create a Request</Button>
|
<Button type={'primary'}>Create a Request</Button>
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<HeaderAuth />
|
<HeaderAuth/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<HeaderDrawer isOpen={isDrawerOpen} onClose={this.closeDrawer}/>
|
||||||
|
|
||||||
|
{process.env.TESTNET && (
|
||||||
|
<div className="Header-testnet">
|
||||||
|
<span>Testnet</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
);
|
||||||
|
}
|
||||||
|
|
||||||
<HeaderDrawer isOpen={isDrawerOpen} onClose={this.closeDrawer} />
|
private openDrawer = () => this.setState({isDrawerOpen: true});
|
||||||
|
private closeDrawer = () => this.setState({isDrawerOpen: false});
|
||||||
{process.env.TESTNET && (
|
|
||||||
<div className="Header-testnet">
|
|
||||||
<span>Testnet</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private openDrawer = () => this.setState({ isDrawerOpen: true });
|
|
||||||
private closeDrawer = () => this.setState({ isDrawerOpen: false });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const withConnect = connect<StateProps, {}, {}, AppState>(
|
const withConnect = connect<StateProps, {}, {}, AppState>(
|
||||||
(state: AppState) => ({
|
(state: AppState) => ({
|
||||||
hasCheckedUser: state.auth.hasCheckedUser,
|
hasCheckedUser: state.auth.hasCheckedUser,
|
||||||
ccrDrafts: state.ccr.drafts,
|
ccrDrafts: state.ccr.drafts,
|
||||||
proposalDrafts: state.create.drafts,
|
proposalDrafts: state.create.drafts,
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
fetchCCRDrafts: ccrActions.fetchCCRDrafts,
|
fetchCCRDrafts: ccrActions.fetchCCRDrafts,
|
||||||
fetchDrafts: createActions.fetchDrafts,
|
fetchDrafts: createActions.fetchDrafts,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
export default compose<Props, {}>(
|
export default compose<Props, {}>(
|
||||||
withRouter,
|
withRouter,
|
||||||
withConnect,
|
withConnect,
|
||||||
)(Header);
|
)(Header);
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
transition: box-shadow @header-transition ease;
|
transition: box-shadow @header-transition ease;
|
||||||
|
|
||||||
&.is-transparent {
|
&.is-transparent {
|
||||||
position: absolute;
|
//position: absolute;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -155,23 +155,24 @@ export class RFPDetail extends React.Component<Props> {
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{isLive && (
|
{isLive && (
|
||||||
<div className="RFPDetail-submit">
|
null
|
||||||
<Affix offsetBottom={0}>
|
// <div className="RFPDetail-submit">
|
||||||
<div className="RFPDetail-submit-inner">
|
// <Affix offsetBottom={0}>
|
||||||
<span>Ready to take on this request?</span>{' '}
|
// <div className="RFPDetail-submit-inner">
|
||||||
<Link to={`/create?rfp=${rfp.id}`}>
|
// <span>Ready to take on this request?</span>{' '}
|
||||||
<Button
|
// <Link to={`/create?rfp=${rfp.id}`}>
|
||||||
className="RFPDetail-submit-inner-button"
|
// <Button
|
||||||
type="primary"
|
// className="RFPDetail-submit-inner-button"
|
||||||
size="large"
|
// type="primary"
|
||||||
>
|
// size="large"
|
||||||
Start a Proposal
|
// >
|
||||||
<Icon type="right-circle" />
|
// Start a Proposal
|
||||||
</Button>
|
// <Icon type="right-circle" />
|
||||||
</Link>
|
// </Button>
|
||||||
</div>
|
// </Link>
|
||||||
</Affix>
|
// </div>
|
||||||
</div>
|
// </Affix>
|
||||||
|
// </div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -51,11 +51,11 @@ class VerifyEmail extends React.Component<RouteComponentProps, State> {
|
||||||
|
|
||||||
const actions = (
|
const actions = (
|
||||||
<div>
|
<div>
|
||||||
<Link to="/create">
|
{/*<Link to="/create">*/}
|
||||||
<Button size="large" type="primary">
|
{/* <Button size="large" type="primary">*/}
|
||||||
Start a proposal
|
{/* Start a proposal*/}
|
||||||
</Button>
|
{/* </Button>*/}
|
||||||
</Link>
|
{/*</Link>*/}
|
||||||
<Link to="/create-request">
|
<Link to="/create-request">
|
||||||
<Button size="large" style={{ marginLeft: '0.5rem' }}>
|
<Button size="large" style={{ marginLeft: '0.5rem' }}>
|
||||||
Create a request
|
Create a request
|
||||||
|
|
Loading…
Reference in New Issue