Add CreateProject modal and modified filter state variables (#233)

* Add CreateProject modal and modified filter state variables * Update modal background color * Add InputField component and style Button component in ImageUploader.jsx * Completed create project UI with values on useState * Add location input field to CreateProject modal * Removed logs * Loaded followed accounts rather than all accounts * made text editor default to empty string * Refactor input field styles and add validation for website URL * Add styling for form check input
NEARBuilders · Apr 2, 2024 · 7c50685 · 7c50685
1 parent 3497cdf
commit 7c50685
Show file tree

Hide file tree

Showing 5 changed files with 395 additions and 31 deletions.
diff --git a/apps/builddao/widget/components/ImageUploader.jsx b/apps/builddao/widget/components/ImageUploader.jsx
@@ -1,5 +1,8 @@
 const image = props.image;
 const onChange = props.onChange;
+const { InputField } = VM.require("buildhub.near/widget/components") || {
+  InputField: () => <></>,
+};
 
 const Tab = {
   Upload: "Upload",
@@ -93,6 +96,30 @@ const onImageChange = debounce((e) => {
   });
 });
 
+const Button = styled.div`
+  .btn {
+    all: unset;
+    display: inline-flex;
+    padding: 10px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: normal;
+    font-family: "Poppins", sans-serif;
+    transition: all 300ms;
+    background: var(--button-outline-bg, transparent);
+    color: var(--button-outline-color, #fff);
+    border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));
+    &:hover:not(:disabled) {
+      background: var(--button-outline-hover-bg, rgba(255, 255, 255, 0.2));
+      cursor: pointer;
+    }
+  }
+`;
+
 return (
   <div>
     <ul className={`nav nav-tabs`}>
@@ -124,32 +151,51 @@ return (
         </button>
       </li>
     </ul>
-    <div className="p-2">
-      <div className={`${state.tab === Tab.Upload ? "" : "visually-hidden"}`}>
+    <div
+      className="p-2"
+      style={{
+        border: "solid 1px #FFFFFF33",
+        borderTop: 0,
+        borderBottomLeftRadius: ".375rem",
+        borderBottomRightRadius: ".375rem",
+        minHeight: "9em",
+      }}
+    >
+      <Button
+        className={`${state.tab === Tab.Upload ? "" : "visually-hidden"}`}
+      >
         <IpfsImageUpload image={state.img} />
-      </div>
-      <div className={`${state.tab === Tab.NFT ? "" : "visually-hidden"}`}>
-        NFT contract
-        <input
-          type="text"
-          id="contractId"
-          defaultValue={state.nft.contractId}
+      </Button>
+      <div
+        className={`${
+          state.tab === Tab.NFT ? "d-flex flex-column gap-2" : "visually-hidden"
+        }`}
+      >
+        <InputField
+          key={"contractId"}
+          label={"NFT contract"}
+          placeholder={"nft contract id"}
+          value={state.nft.contractId}
           onChange={onNFTChange}
         />
-        NFT token id
-        <input
-          type="text"
-          id="tokenId"
-          defaultValue={state.nft.tokenId}
+        <InputField
+          key={"tokenId"}
+          label={"NFT token id"}
+          placeholder={"nft token id"}
+          value={state.nft.tokenId}
           onChange={onNFTChange}
         />
       </div>
-      <div className={`${state.tab === Tab.URL ? "" : "visually-hidden"}`}>
-        Image URL
-        <input
-          type="text"
-          id="url"
-          defaultValue={state.url}
+      <div
+        className={`${
+          state.tab === Tab.URL ? "d-flex flex-column gap-2" : "visually-hidden"
+        }`}
+      >
+        <InputField
+          key={"url"}
+          label={"Image URL"}
+          placeholder={"image url"}
+          value={state.url}
           onChange={onImageChange}
         />
       </div>

diff --git a/apps/builddao/widget/components/InputField.jsx b/apps/builddao/widget/components/InputField.jsx
@@ -23,18 +23,25 @@ const Input = styled.input`
   gap: 10px;
 
   border-radius: 8px;
-  border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));
+  border-width: 1px;
+  border-style: solid;
   background: var(--bg-1, #000000);
-
+  border-color: var(--stroke-color, rgba(255, 255, 255, 0.2));
   flex: 1 0 0;
-
+  outline: none;
   color: var(--font-muted-color, #cdd0d5);
 
   /* Body/16px */
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 170%; /* 27.2px */
+  &.invalid {
+    border-color: #ed5a5a;
+    :focus-within {
+      border: 1px solid #ed5a5a;
+    }
+  }
 `;
 
 function InputField({
@@ -44,6 +51,7 @@ function InputField({
   placeholder,
   value,
   onChange,
+  error,
   maxWidth,
 }) {
   return (
@@ -55,6 +63,7 @@ function InputField({
       <Input
         key={`input-field-${key}`}
         value={value}
+        className={error ? "invalid" : ""}
         onChange={onChange}
         placeholder={placeholder}
         type={type ?? "text"}

diff --git a/apps/builddao/widget/components/Modal.jsx b/apps/builddao/widget/components/Modal.jsx
@@ -24,7 +24,7 @@ const Content = styled.div`
   max-width: 1000px;
   padding: 24px;
   outline: none !important;
-  background: var(--modal-background-color, #23242b);
+  background: var(--modal-background-color, #000);
   border-radius: 16px;
   color: var(--modal-text-color, #fff);