feat(style): header structure and style

src/components/Form-style.ts → 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%;
 
     }
 `;

src/components/Form.tsx → 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"/>

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;
+
+    }
+`;

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>
+    );
+}

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;
 

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>