From 2150fc4b9e637cae1bda3c4242efd4c98be94272 Mon Sep 17 00:00:00 2001
From: bartosz-lipinski <264380+bartosz-lipinski@users.noreply.github.com>
Date: Mon, 5 Apr 2021 08:46:35 -0500
Subject: [PATCH] feat: upload

---
 .../metavinci/src/views/artCreate/index.tsx   | 49 ++++++++++++-------
 .../metavinci/src/views/artCreate/styles.less | 41 ++++++++++++++++
 2 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/packages/metavinci/src/views/artCreate/index.tsx b/packages/metavinci/src/views/artCreate/index.tsx
index 26b644a..b086384 100644
--- a/packages/metavinci/src/views/artCreate/index.tsx
+++ b/packages/metavinci/src/views/artCreate/index.tsx
@@ -14,6 +14,7 @@ export const ArtCreateView = () => {
   const { wallet, connected } = useWallet();
   const [step, setStep] = useState(0);
   const [attributes, setAttributes] = useState({
+    type: 'image',
     files: [],
   });
 
@@ -37,8 +38,14 @@ export const ArtCreateView = () => {
             <Step title="Add metadata" />
           </Steps>
         </Col>
-        <Col xl={19}>
-          {step === 0 && <CategoryStep confirm={() => setStep(1)} />}
+        <Col xl={16}>
+          {step === 0 && <CategoryStep confirm={(type) => {
+              setAttributes({
+                ...attributes,
+                type
+              })
+              setStep(1);
+            }} />}
           {step === 1 && <UploadStep attributes setAttributes={setAttributes} confirm={() => setStep(2)} />}
           {step === 2 && <MintStep confirm={() => mint()} />}
         </Col>
@@ -47,21 +54,23 @@ export const ArtCreateView = () => {
   );
 };
 
-const CategoryStep = (props: { confirm: () => void }) => {
+const CategoryStep = (props: { confirm: (type: string) => void }) => {
   return (
     <>
       <Row className="call-to-action">
-        <h2>What type of artwork are you creating?</h2>
+        <h2>Create your NFT artwork on Meta</h2>
+        <p>Creating NFT on Solana is not only low cost for artists but supports environment with 20% of the fees form the platform donated to charities.</p>
       </Row>
       <Row>
-        <Button size="large">Image</Button>
-        <Button size="large">Movie</Button>
-        <Button size="large">Audio</Button>
-      </Row>
-      <Row>
-        <Button type="primary" size="large" onClick={props.confirm}>
-          Continue to Upload
-        </Button>
+        <Col xl={6}>
+          <Button className="type-btn" size="large" onClick={() => props.confirm('image')}>Image</Button>
+        </Col>
+        <Col xl={6}>
+          <Button className="type-btn" size="large" onClick={() => props.confirm('video')}>Video</Button>
+        </Col>
+        <Col xl={6}>
+          <Button className="type-btn" size="large" onClick={() => props.confirm('audio')}>Audio</Button>
+        </Col>
       </Row>
     </>
   );
@@ -74,8 +83,9 @@ const UploadStep = (props: { attributes: any, setAttributes: (attr: any) => void
     <>
       <Row className="call-to-action">
         <h2>Now, let's upload your creation</h2>
+        <p>Your file will be uploaded to the decentralized web via Arweave. Depending on file type, can take up to 1 minute. Arweave is a new type of storage that backs data with sustainable and perpetual endowments, allowing users and developers to truly store data forever – for the very first time.</p>
       </Row>
-      <Row>
+      <Row className="content-action">
         <Dragger multiple={false}
           customRequest={(info) => {
             // dont upload files here, handled outside of the control
@@ -85,7 +95,7 @@ const UploadStep = (props: { attributes: any, setAttributes: (attr: any) => void
           props.setAttributes({
             ...props.attributes,
             files: [
-              info.file,
+              info.file.originFileObj,
             ],
           });
         }}>
@@ -110,9 +120,13 @@ const MintStep = (props: { confirm: () => void }) => {
   return (
     <>
       <Row className="call-to-action">
-        <h2>Add details about your artwork</h2>
+        <h2>Describe your creation</h2>
+        <p>Provide detailed description of your creative process to engage with your audience.</p>
       </Row>
-      <Row>
+      <Row className="content-action">
+        <Col xl={12}>
+          <ArtCard />
+        </Col>
         <Col className="section" xl={12}>
           <Input className="input" placeholder="Title" />
           <Input.TextArea
@@ -120,9 +134,6 @@ const MintStep = (props: { confirm: () => void }) => {
             placeholder="Description"
           />
         </Col>
-        <Col xl={12}>
-          <ArtCard />
-        </Col>
       </Row>
       <Row>
         <Button type="primary" size="large" onClick={props.confirm}>
diff --git a/packages/metavinci/src/views/artCreate/styles.less b/packages/metavinci/src/views/artCreate/styles.less
index f4231bc..115fbc2 100644
--- a/packages/metavinci/src/views/artCreate/styles.less
+++ b/packages/metavinci/src/views/artCreate/styles.less
@@ -3,6 +3,38 @@
   padding: 1px;
 }
 
+.call-to-action {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+
+  h2 {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 36px;
+    line-height: 40px;
+    display: flex;
+    align-items: center;
+
+    color: #FFFFFF;
+  }
+
+  p {
+    color: #6d6d6d;
+  }
+
+  margin-bottom: 50px;
+}
+
+.content-action {
+  margin-bottom: 50px;
+
+  :first-child{
+    width: 100%;
+  }
+}
+
 .input {
   background: #F7F7F7;
   border-radius: 8px;
@@ -14,3 +46,12 @@
 .textarea {
   height: 230px !important;
 }
+
+.type-btn {
+  height: 300px;
+  width: calc(100% - 20px);
+  border-radius: 8px;
+  background-color: #1d1d1d;
+  border-width: 0px;
+  margin-right: 20px;
+}