Skip to content

Commit

Permalink
Merge pull request PotLock#58 from PotLock/feat/register-project
Browse files Browse the repository at this point in the history
Feat/register project
  • Loading branch information
lachlanglen authored Oct 17, 2023
2 parents 7807f51 + 882e664 commit d9b18a4
Show file tree
Hide file tree
Showing 22 changed files with 1,672 additions and 812 deletions.
60 changes: 60 additions & 0 deletions apps/potlock/widget/Buttons/ActionButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
const getButtonBackground = () => {
if (props.type === "primary") {
if (props.disabled) {
return "#e5e5e5";
}
return "#dd3345";
} else if (props.type === "secondary") {
// TODO: handle disabled
return "#FCE9D5";
}
};

const getButtonColor = () => {
if (props.type === "primary") {
if (props.disabled) {
return "darkgrey";
}
return "white";
}
return "#2E2E2E";
};

const Button = styled.button`
// width: 100%;
height: 100%;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px 24px 12px 24px;
background: ${getButtonBackground()};
overflow: hidden;
box-shadow: 0px -2.700000047683716px 0px #4a4a4a inset;
border-radius: 6px;
border: 1px solid #4a4a4a;
gap: 8px;
display: inline-flex;
text-align: center;
color: ${getButtonColor()};
font-size: 14px;
font-weight: 600;
&:hover {
text-decoration: none;
cursor: ${props.disabled ? "not-allowed" : "pointer"};
}
`;

console.log("rendering action button");

return (
<Button
onClick={(e) => {
e.preventDefault();
props.onClick(e);
}}
disabled={props.disabled}
>
{props.text}
</Button>
);
29 changes: 0 additions & 29 deletions apps/potlock/widget/Buttons/Button.jsx

This file was deleted.

52 changes: 52 additions & 0 deletions apps/potlock/widget/Buttons/NavigationButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
const getButtonBackground = () => {
if (props.type === "primary") {
if (props.disabled) {
return "#e5e5e5";
}
return "#dd3345";
} else if (props.type === "secondary") {
// TODO: handle disabled
return "#FCE9D5";
}
};

const getButtonColor = () => {
if (props.type === "primary") {
if (props.disabled) {
return "darkgrey";
}
return "white";
}
return "#2E2E2E";
};

const Button = styled.a`
// width: 100%;
height: 100%;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px 24px 12px 24px;
background: ${getButtonBackground()};
overflow: hidden;
box-shadow: 0px -2.700000047683716px 0px #4a4a4a inset;
border-radius: 6px;
border: 1px solid #4a4a4a;
gap: 8px;
display: inline-flex;
text-align: center;
color: ${getButtonColor()};
font-size: 14px;
font-weight: 600;
&:hover {
text-decoration: none;
cursor: ${props.disabled ? "not-allowed" : "pointer"};
}
`;

return (
<Button href={props.href} onClick={props.onClick} disabled={props.disabled}>
{props.text}
</Button>
);
38 changes: 33 additions & 5 deletions apps/potlock/widget/Components/Header.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
const ownerId = "potlock.near";

const headerTitleFontSizePx = 88;

const HeaderContainer = styled.div`
width: 100%;
// background: #fffaf4;
padding: 80px 64px 80px 64px;
background: #fffaf4;
padding: 80px 64px;
`;

const HeaderContent = styled.div`
Expand All @@ -14,9 +16,10 @@ const HeaderContent = styled.div`

const HeaderTitle = styled.div`
color: #2e2e2e;
font-size: 88px;
font-size: ${headerTitleFontSizePx}px;
font-weight: 600;
word-wrap: break-word;
position: relative;
`;

const HeaderDescription = styled.div`
Expand All @@ -27,7 +30,7 @@ const HeaderDescription = styled.div`
word-wrap: break-word;
max-width: 866px;
text-align: ${props.centered ? "center" : "flex-start"};
margin: 32px 0;
margin-top: 32px;
`;

const ButtonsContainer = styled.div`
Expand All @@ -36,12 +39,37 @@ const ButtonsContainer = styled.div`
align-items: center;
justify-content: center;
gap: 32px;
margin-top: 32px;
`;

return (
<HeaderContainer>
<HeaderContent>
<HeaderTitle>{props.title1}</HeaderTitle>
<HeaderTitle>
{props.title1}
<div style={{ position: "absolute", top: headerTitleFontSizePx - 40, left: -40 }}>
<svg
width="340"
height="42"
viewBox="0 0 340 42"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.29967 39C-14.0566 35.9491 49.9788 32.436 71.4774 30.6444C151.734 23.9564 232.915 20.5161 312.9 15"
stroke="#DD3345"
stroke-width="5"
stroke-linecap="round"
/>
<path
d="M31.2997 27C9.94337 23.9491 73.9788 20.436 95.4774 18.6444C175.734 11.9564 256.915 8.51608 336.9 3"
stroke="#DD3345"
stroke-width="5"
stroke-linecap="round"
/>
</svg>
</div>
</HeaderTitle>
{props.title2 && <HeaderTitle>{props.title2}</HeaderTitle>}
<HeaderDescription>{props.description}</HeaderDescription>
</HeaderContent>
Expand Down
19 changes: 15 additions & 4 deletions apps/potlock/widget/Index.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
const ownerId = "potlock.near";

const CREATE_PROJECT_TAB = "createproject";

State.init({
tnc: true,
tncIsFetched: false,
Expand Down Expand Up @@ -38,7 +40,7 @@ const tabContentWidget = {
// vendor: "Vendor.Page",
// backer: "Investor.Page",
// contribution: "Contribution.Page",
createproject: "Project.Form",
createproject: "Project.Create",
// createrequest: "Request.Form",
// createvendor: "Vendor.Form",
// createbacker: "Investor.Form",
Expand Down Expand Up @@ -73,16 +75,25 @@ const getTabWidget = (tab) => {
return "Project.ListPage";
};

console.log("Index props: ", props);

const successfulRegistration = props.tab == CREATE_PROJECT_TAB && props.transactionHashes;

const tabContent = (
<Widget
src={`${ownerId}/widget/${getTabWidget(props.tab)}`}
src={`${ownerId}/widget/${
successfulRegistration ? tabContentWidget.projects : getTabWidget(props.tab)
}`}
props={{
...props,
urlProps: props,
successfulRegistration,
}}
/>
);

console.log("tab content: ", tabContent);

// const Page = styled.div`
// width: 100%;
// border-radius: 0.5rem;
Expand All @@ -92,7 +103,7 @@ const tabContent = (
const Content = styled.div`
width: 100%;
background: #ffffff;
padding: 3em;
// padding: 3em;
border-radius: 0rem 0rem 1.5rem 1.5rem;
border-top: 1px solid var(--ui-elements-light, #eceef0);
background: var(--base-white, #fff);
Expand All @@ -117,7 +128,7 @@ const Content = styled.div`
// "legal",
// ].includes(props.tab);
const isForm = [
"createproject",
CREATE_PROJECT_TAB,
// "createrequest",
// "createvendor",
// "createbacker",
Expand Down
3 changes: 2 additions & 1 deletion apps/potlock/widget/Inputs/Select.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@ const Input = styled.div`
gap: 0.5em;
background: #ffffff;
border: 1px solid #d0d5dd;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
// box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
boxshadow: 0px -2px 0px rgba(93, 93, 93, 0.24) inset;
border-radius: 4px;
color: #101828;
width: 100%;
Expand Down
52 changes: 40 additions & 12 deletions apps/potlock/widget/Inputs/Text.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,31 +39,59 @@ const Error = styled.span`
}
`;

const Input = styled.input`
box-sizing: border-box;
const InputContainer = styled.div`
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5em 0.75em;
gap: 0.5em;
width: 100%;
background: #ffffff;
border: 1px solid #d0d5dd;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 4px;
`;

const InputPrefix = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding: 14px 16px;
border-right: 1px #f0f0f0 solid;
color: #7b7b7b;
font-size: 16px;
font-weight: 400;
`;

const Input = styled.input`
// box-sizing: border-box;
border: none;
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5em 0.75em;
gap: 0.5em;
// background: #ffffff;
// border: 1px solid #d0d5dd;
// box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
// border-radius: 4px;
color: #101828;
width: 100%;
border-radius: 4px;
`;

return (
<Container>
<Label>{label}</Label>
<Input
type="text"
placeholder={placeholder}
value={value}
onChange={({ target: { value } }) => onChange(value)}
onBlur={() => validate()}
/>
<InputContainer>
{props.prefix && <InputPrefix>{props.prefix}</InputPrefix>}
<Input
type="text"
placeholder={placeholder}
value={value}
onChange={({ target: { value } }) => onChange(value)}
onBlur={() => validate()}
/>
</InputContainer>
<Error className={error ? "show" : ""}>{error}</Error>
</Container>
);
17 changes: 16 additions & 1 deletion apps/potlock/widget/Project/Create.jsx
Original file line number Diff line number Diff line change
@@ -1 +1,16 @@
const Container = styled.div``;
const ownerId = "potlock.near";

return (
<>
<Widget
src={`${ownerId}/widget/Components.Header`}
props={{
title1: "Create new project",
description:
"Lorem ipsum dolor sit amet consectetur. Vel sit nunc in nunc. Viverra arcu eu sed consequat.",
centered: false,
}}
/>
<Widget src={`${ownerId}/widget/Project.CreateForm`} />
</>
);
Loading

0 comments on commit d9b18a4

Please sign in to comment.