Merge pull request #31 from DiProjOrcestra/18-TelaDeCriacaoDeProjetos

#4 - Edited image upload.
OrcestraGamificacao · Apr 9, 2020 · b76ef15 · b76ef15
2 parents e25296c + 1cd8984
commit b76ef15
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 32 deletions.
diff --git a/frontend/src/pages/NewProject/index.js b/frontend/src/pages/NewProject/index.js
@@ -1,12 +1,16 @@
-import React, { useState } from 'react';
-import { FiUpload } from 'react-icons/fi'
+import React, { useState, useMemo } from 'react';
+import { FiUpload } from 'react-icons/fi';
 
 import './styles.css';
 
 import logoImg from '../../assets/logo.png';
 
 export default function NewProject() {
-  const [image, setImage] = useState('');
+  const [image, setImage] = useState(null);
+
+  const preview = useMemo(() => {
+    return image ? URL.createObjectURL(image) : null;
+  }, [image]);
 
   return (
     <div className="new-project-content">
@@ -35,18 +39,19 @@ export default function NewProject() {
           />
 
           <div className="upload-group">
-            <label for="upload">
-              <FiUpload size={16} color="#7AC14E" />
-              Imagem do Projeto
-            </label>
-            <input
+            <label
               id="upload"
-              type="file"
-              accept="image/*"
-              value={image}
-              onChange={(e) => setImage(e.target.value)}
-            />
-            <span>{image}</span>
+              style={{ backgroundImage: `url(${preview})` }}
+              className={image ? 'has-image' : ''}
+            >
+              <input
+                type="file"
+                accept="image/*"
+                onChange={(e) => setImage(e.target.files[0])}
+              />
+              { image ? '' : <FiUpload size={30} color="#7AC14E" /> }
+              { image ? '' : 'Imagem do Projeto'}
+            </label>
           </div>
 
           <button className="button" type="submit">

diff --git a/frontend/src/pages/NewProject/styles.css b/frontend/src/pages/NewProject/styles.css
@@ -56,34 +56,35 @@
   padding: 0 24px;
 }
 
-.new-project-content .content form label {
+.new-project-content .content form .upload-group {
+  margin-top: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+label#upload {
+  border: 1px dashed #ddd;
+  background-size: cover;
+  cursor: pointer;
   width: 100%;
-  max-width: 170px;
-  background: #fff;
-  border-radius: 5px;
-  border: 1px solid #dcdce6;
+  max-width: 190px;
+  height: 140px;
   color: #7AC14E;
-  cursor: pointer;
-  padding: 10px 20px;
+  background-color: #fff;
+  padding: 6px 10px;
 
   display: flex;
   justify-content: space-around;
   align-items: center;
 }
 
-input[type=file] {
-  display: none;
-}
-
-.new-project-content .content form .upload-group {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-top: 32px;
+label#upload.has-image {
+  border: 0;
 }
 
-.new-project-content .content form .upload-group span {
-  margin-left: 10px;
+input[type=file] {
+  display: none;
 }
 
 .new-project-content .content form textarea {