From 07a1da6c36d0bc85339278e853f87417c7a2fd70 Mon Sep 17 00:00:00 2001 From: Thiago Dias Date: Sun, 7 Jul 2024 19:01:35 -0300 Subject: [PATCH] feat(style): form style with styled-components --- package-lock.json | 105 +++++++++++++++++++++++++++++++++-- package.json | 3 +- src/components/Form-style.ts | 67 ++++++++++++++++++++++ src/components/Form.tsx | 13 +++-- src/index.css | 29 ++++++++-- src/pages/feed/Feed.tsx | 1 + 6 files changed, 202 insertions(+), 16 deletions(-) create mode 100644 src/components/Form-style.ts diff --git a/package-lock.json b/package-lock.json index c2aa5508..d53c93a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,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", @@ -146,6 +147,24 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -1398,6 +1417,11 @@ "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==", "dev": true }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==" + }, "node_modules/@types/yargs": { "version": "17.0.32", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz", @@ -1878,6 +1902,14 @@ "node": ">=6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/chai": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz", @@ -1992,6 +2024,24 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", @@ -2019,8 +2069,7 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/data-urls": { "version": "5.0.0", @@ -3257,7 +3306,6 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, "funding": [ { "type": "github", @@ -3488,7 +3536,6 @@ "version": "8.4.38", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", - "dev": true, "funding": [ { "type": "opencollective", @@ -3512,6 +3559,11 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -3778,6 +3830,11 @@ "node": ">=10" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -3830,7 +3887,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3934,6 +3990,38 @@ "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==", "dev": true }, + "node_modules/styled-components": { + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.11.tgz", + "integrity": "sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -4032,6 +4120,11 @@ "typescript": ">=4.2.0" } }, + "node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index a663dd0e..8933e052 100644 --- a/package.json +++ b/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", diff --git a/src/components/Form-style.ts b/src/components/Form-style.ts new file mode 100644 index 00000000..d10824cc --- /dev/null +++ b/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%; + + } +`; \ No newline at end of file diff --git a/src/components/Form.tsx b/src/components/Form.tsx index 217ac301..a669e483 100644 --- a/src/components/Form.tsx +++ b/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 (
-
- + @@ -14,9 +15,11 @@ export default function Form() { - Descartar - - +
+ Descartar + +
+
); } \ No newline at end of file diff --git a/src/index.css b/src/index.css index 5ed31f67..8d30f47e 100644 --- a/src/index.css +++ b/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; + } } \ No newline at end of file diff --git a/src/pages/feed/Feed.tsx b/src/pages/feed/Feed.tsx index 342cb89f..5be982f8 100644 --- a/src/pages/feed/Feed.tsx +++ b/src/pages/feed/Feed.tsx @@ -5,6 +5,7 @@ function App() { return (
+
) }