feat(style): form style with styled-components

package.json

@@ -13,7 +13,8 @@
   "dependencies": {
     "@testing-library/user-event": "^14.5.2",
     "react": "^18.2.0",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.11"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.6",

src/components/Form-style.ts

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+
+export const Form = styled.form`
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 30px;
+    padding: 15px 0;
+
+    border-radius: 5px;
+    border: 1px solid #353535;
+    background-color: var(--bg-section-color);
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+
+    input, textarea {
+        padding: 10px;
+        width: 90%;
+        color: #fff;
+        background-color: var(--form-input-data);
+
+        border-radius: 10px;
+        margin-bottom: 10px;
+        border: none;
+    }
+
+    textarea {
+        min-width: 90%;
+        max-width: 90%;
+        min-height: 60px;
+        max-height: 150px;
+    }
+
+    input::placeholder, textarea::placeholder {
+        color: #9F9F9F;
+    }
+
+    input:focus, textarea:focus {
+        outline: none;
+    }
+
+    .buttons-wrapper {
+        width: 90%;
+        display: flex;
+        align-items: center;
+        justify-content: end;
+
+        margin-top: 35px;
+    }
+
+    a {
+        color: #494949;
+        margin-right: 10px;
+    }
+
+    button {
+        background-color: #5F5F5F;
+        border: none;
+        border-radius: 8px;
+        padding: 12px;
+        display: inline;
+
+        color: #343434;
+        width: 20%;
+
+    }
+`;

src/components/Form.tsx

@@ -1,10 +1,11 @@
 
 import slcImage from '../assets/images/slcImage.svg';
+import { Form as StyleForm } from './Form-style';
+
 export default function Form() {
     return (
         <div>
-            <form>
-
+            <StyleForm>
                 <label htmlFor="imgUpload">
                     <img id="test" src={slcImage} alt="Selecionar imagem"/>
                 </label>
@@ -14,9 +15,11 @@ export default function Form() {
                 <input type="text" placeholder="Digite seu nome" />
                 <textarea placeholder="Mensagem"></textarea>
 
-                <a href="#">Descartar</a>
-                <button type="submit">Publicar</button>
-            </form>
+                <div className="buttons-wrapper">
+                    <a href="#">Descartar</a>
+                    <button type="submit">Publicar</button>
+                </div>
+            </StyleForm>
         </div>
     );
 }

src/index.css

@@ -1,8 +1,12 @@
 :root {
-  --primary-color: #7001FD;
-  --secondary-color: #1E2772;
-  --light-grey: #C2C2C2;
-  --dark-grey: #555555;
+  --bg-main-color: #343434;
+  --bg-section-color: #313131;
+  --light-grey: #9F9F9F;
+
+
+  /*Form*/
+  --form-input-data: #494949;
+
 }
 
 * {
@@ -11,4 +15,21 @@
   box-sizing: border-box;
 
   font-family: 'Inter', 'Roboto', sans-serif;
+  color: #fff;
+}
+
+main {
+  background-color: var(--bg-main-color);
+  position: absolute;
+
+  padding: 0 20px;
+  width: 100vw;
+  height: 100vh;  
+}
+
+/* Larger screens */
+@media screen and (min-width: 768px) {
+  main {
+    padding: 0 30vw;
+  }
 }

src/pages/feed/Feed.tsx

@@ -5,6 +5,7 @@ function App() {
   return (
     <main>
       <Form />
+
     </main>
   )
 }