From b04c2cd514e3a860c8da56ea69d39dae5c2d7844 Mon Sep 17 00:00:00 2001
From: Thiago Dias <thiaguinhodias.15@gmail.com>
Date: Sun, 7 Jul 2024 19:16:52 -0300
Subject: [PATCH] feat(style): header structure and style

---
 src/components/{ => Form}/Form-style.ts |  4 ++--
 src/components/{ => Form}/Form.tsx      |  3 ++-
 src/components/Header/Header-style.ts   | 23 +++++++++++++++++++++++
 src/components/Header/Header.tsx        | 10 ++++++++++
 src/index.css                           |  3 +--
 src/pages/feed/Feed.tsx                 |  4 +++-
 6 files changed, 41 insertions(+), 6 deletions(-)
 rename src/components/{ => Form}/Form-style.ts (96%)
 rename src/components/{ => Form}/Form.tsx (91%)
 create mode 100644 src/components/Header/Header-style.ts
 create mode 100644 src/components/Header/Header.tsx

diff --git a/src/components/Form-style.ts b/src/components/Form/Form-style.ts
similarity index 96%
rename from src/components/Form-style.ts
rename to src/components/Form/Form-style.ts
index d10824cc..71d68c45 100644
--- a/src/components/Form-style.ts
+++ b/src/components/Form/Form-style.ts
@@ -5,7 +5,7 @@ export const Form = styled.form`
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 30px;
+    margin-top: 90px;
     padding: 15px 0;
 
     border-radius: 5px;
@@ -61,7 +61,7 @@ export const Form = styled.form`
         display: inline;
         
         color: #343434;
-        width: 20%;
+        width: 30%;
 
     }
 `;
\ No newline at end of file
diff --git a/src/components/Form.tsx b/src/components/Form/Form.tsx
similarity index 91%
rename from src/components/Form.tsx
rename to src/components/Form/Form.tsx
index a669e483..427b1cb1 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -1,10 +1,11 @@
 
-import slcImage from '../assets/images/slcImage.svg';
+import slcImage from '../../assets/images/slcImage.svg';
 import { Form as StyleForm } from './Form-style';
 
 export default function Form() {
     return (
         <div>
+            
             <StyleForm>
                 <label htmlFor="imgUpload">
                     <img id="test" src={slcImage} alt="Selecionar imagem"/>
diff --git a/src/components/Header/Header-style.ts b/src/components/Header/Header-style.ts
new file mode 100644
index 00000000..a3d5eb08
--- /dev/null
+++ b/src/components/Header/Header-style.ts
@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+export const Header = styled.header`
+    background-color: var(--bg-section-color);
+    text-align: center;
+
+    width: 100%;
+    position: fixed;
+    left: 0;
+    padding: 10px 0;
+
+
+    h1 {
+        color: #71BB00;
+        font-weight: 800;
+    }
+
+    p {
+        color: var(--light-grey);
+        text-transform: uppercase;
+        
+    }
+`;
\ No newline at end of file
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 00000000..cff04369
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,10 @@
+import { Header as StyleHeader } from './Header-style';
+
+export default function Header() {
+    return (
+        <StyleHeader>
+            <h1>builbox</h1>
+            <p>Web Challenge</p>
+        </StyleHeader>
+    );
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 8d30f47e..de9f4cb4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,9 +1,8 @@
 :root {
   --bg-main-color: #343434;
-  --bg-section-color: #313131;
+  --bg-section-color: #2B2B2B;
   --light-grey: #9F9F9F;
 
-
   /*Form*/
   --form-input-data: #494949;
 
diff --git a/src/pages/feed/Feed.tsx b/src/pages/feed/Feed.tsx
index 5be982f8..6dbc7655 100644
--- a/src/pages/feed/Feed.tsx
+++ b/src/pages/feed/Feed.tsx
@@ -1,9 +1,11 @@
-import Form from "../../components/Form"
+import Form from "../../components/Form/Form"
+import Header from "../../components/Header/Header"
 
 function App() {
 
   return (
     <main>
+      <Header />
       <Form />
 
     </main>