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">
|
||||
<Link to="/proposals">Browse proposals</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="/create">
|
||||
<Link to="/create">Start a proposal</Link>
|
||||
</Menu.Item>
|
||||
{/*<Menu.Item key="/create">*/}
|
||||
{/* <Link to="/create">Start a proposal</Link>*/}
|
||||
{/*</Menu.Item>*/}
|
||||
</Menu.ItemGroup>
|
||||
<Menu.ItemGroup title="Requests">
|
||||
<Menu.Item key="/requests">
|
||||
|
|
|
@ -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<Props, State> {
|
||||
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 (
|
||||
<div
|
||||
className={classnames({
|
||||
Header: true,
|
||||
['is-transparent']: isTransparent,
|
||||
})}
|
||||
>
|
||||
<div className="Header-inner">
|
||||
<div className="Header-links is-left is-desktop">
|
||||
<Link to="/proposals" className="Header-links-link">
|
||||
Proposals
|
||||
</Link>
|
||||
<Link to="/requests" className="Header-links-link">
|
||||
Requests
|
||||
</Link>
|
||||
<Link to="/guide" className="Header-links-link">
|
||||
Guide
|
||||
</Link>
|
||||
</div>
|
||||
return (
|
||||
<div>
|
||||
<Banner badgeName={"NOTE"}
|
||||
body={
|
||||
<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
|
||||
more information, please email <a
|
||||
href={"mailto:contact@zfnd.org"}>contact@zfnd.org</a></p>}/>
|
||||
<div
|
||||
className={classnames({
|
||||
Header: true,
|
||||
['is-transparent']: isTransparent,
|
||||
})}
|
||||
>
|
||||
<div className="Header-inner">
|
||||
<div className="Header-links is-left is-desktop">
|
||||
<Link to="/proposals" className="Header-links-link">
|
||||
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">
|
||||
<button className="Header-links-link is-menu" onClick={this.openDrawer}>
|
||||
<MenuIcon className="Header-links-link-icon" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="Header-links is-left is-mobile">
|
||||
<button className="Header-links-link is-menu" onClick={this.openDrawer}>
|
||||
<MenuIcon className="Header-links-link-icon"/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Link className="Header-title" to="/">
|
||||
<Logo className="Header-title-logo" />
|
||||
</Link>
|
||||
<Link className="Header-title" to="/">
|
||||
<Logo className="Header-title-logo"/>
|
||||
</Link>
|
||||
|
||||
{!hasCheckedUser && (ccrDrafts === null || proposalDrafts === null) ? null : (
|
||||
<div className="Header-links is-right">
|
||||
<div className="Header-links-button is-desktop">
|
||||
<Link to="/create">
|
||||
{Array.isArray(proposalDrafts) && proposalDrafts.length > 0 ? (
|
||||
<Button>My Proposals</Button>
|
||||
) : (
|
||||
<Button>Start a Proposal</Button>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="Header-links-button is-desktop">
|
||||
<Link to="/create-request">
|
||||
{Array.isArray(ccrDrafts) && ccrDrafts.length > 0 ? (
|
||||
<Button type={'primary'}>My Requests</Button>
|
||||
) : (
|
||||
<Button type={'primary'}>Create a Request</Button>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
{!hasCheckedUser && (ccrDrafts === null || proposalDrafts === null) ? null : (
|
||||
<div className="Header-links is-right">
|
||||
<div className="Header-links-button is-desktop">
|
||||
<Link to="/create">
|
||||
{Array.isArray(proposalDrafts) && proposalDrafts.length > 0 ? (
|
||||
<Button>My Proposals</Button>
|
||||
) : (
|
||||
null // <Button>Start a Proposal</Button>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="Header-links-button is-desktop">
|
||||
<Link to="/create-request">
|
||||
{Array.isArray(ccrDrafts) && ccrDrafts.length > 0 ? (
|
||||
<Button type={'primary'}>My Requests</Button>
|
||||
) : (
|
||||
<Button type={'primary'}>Create a Request</Button>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<HeaderAuth />
|
||||
<HeaderAuth/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<HeaderDrawer isOpen={isDrawerOpen} onClose={this.closeDrawer}/>
|
||||
|
||||
{process.env.TESTNET && (
|
||||
<div className="Header-testnet">
|
||||
<span>Testnet</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
);
|
||||
}
|
||||
|
||||
<HeaderDrawer isOpen={isDrawerOpen} onClose={this.closeDrawer} />
|
||||
|
||||
{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 });
|
||||
private openDrawer = () => this.setState({isDrawerOpen: true});
|
||||
private closeDrawer = () => this.setState({isDrawerOpen: false});
|
||||
}
|
||||
|
||||
const withConnect = connect<StateProps, {}, {}, AppState>(
|
||||
(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<Props, {}>(
|
||||
withRouter,
|
||||
withConnect,
|
||||
withRouter,
|
||||
withConnect,
|
||||
)(Header);
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
transition: box-shadow @header-transition ease;
|
||||
|
||||
&.is-transparent {
|
||||
position: absolute;
|
||||
//position: absolute;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
@ -155,23 +155,24 @@ export class RFPDetail extends React.Component<Props> {
|
|||
)}
|
||||
|
||||
{isLive && (
|
||||
<div className="RFPDetail-submit">
|
||||
<Affix offsetBottom={0}>
|
||||
<div className="RFPDetail-submit-inner">
|
||||
<span>Ready to take on this request?</span>{' '}
|
||||
<Link to={`/create?rfp=${rfp.id}`}>
|
||||
<Button
|
||||
className="RFPDetail-submit-inner-button"
|
||||
type="primary"
|
||||
size="large"
|
||||
>
|
||||
Start a Proposal
|
||||
<Icon type="right-circle" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Affix>
|
||||
</div>
|
||||
null
|
||||
// <div className="RFPDetail-submit">
|
||||
// <Affix offsetBottom={0}>
|
||||
// <div className="RFPDetail-submit-inner">
|
||||
// <span>Ready to take on this request?</span>{' '}
|
||||
// <Link to={`/create?rfp=${rfp.id}`}>
|
||||
// <Button
|
||||
// className="RFPDetail-submit-inner-button"
|
||||
// type="primary"
|
||||
// size="large"
|
||||
// >
|
||||
// Start a Proposal
|
||||
// <Icon type="right-circle" />
|
||||
// </Button>
|
||||
// </Link>
|
||||
// </div>
|
||||
// </Affix>
|
||||
// </div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -51,11 +51,11 @@ class VerifyEmail extends React.Component<RouteComponentProps, State> {
|
|||
|
||||
const actions = (
|
||||
<div>
|
||||
<Link to="/create">
|
||||
<Button size="large" type="primary">
|
||||
Start a proposal
|
||||
</Button>
|
||||
</Link>
|
||||
{/*<Link to="/create">*/}
|
||||
{/* <Button size="large" type="primary">*/}
|
||||
{/* Start a proposal*/}
|
||||
{/* </Button>*/}
|
||||
{/*</Link>*/}
|
||||
<Link to="/create-request">
|
||||
<Button size="large" style={{ marginLeft: '0.5rem' }}>
|
||||
Create a request
|
||||
|
|
Loading…
Reference in New Issue