From 4fcabd1ab990c22ada2e7c03b07f2eafd32e901b Mon Sep 17 00:00:00 2001 From: Nazaret Date: Fri, 12 Sep 2025 14:25:21 +0200 Subject: [PATCH 1/2] firts iterations --- .env | 1 + package-lock.json | 12 +++++++ package.json | 1 + src/App.css | 3 ++ src/App.js | 26 ++++++-------- src/components/FormField.js | 17 +++++++++ src/components/Navbar.js | 70 ++++++++++++++++++++++++++++++++++++ src/components/formfield.css | 13 +++++++ src/components/navbar.css | 3 ++ src/index.css | 9 +++++ 10 files changed, 139 insertions(+), 16 deletions(-) create mode 100644 .env create mode 100644 src/components/FormField.js create mode 100644 src/components/Navbar.js create mode 100644 src/components/formfield.css create mode 100644 src/components/navbar.css diff --git a/.env b/.env new file mode 100644 index 0000000..b6f00b6 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +BROWSER="C:\Program Files\Google\Chrome\Application\chrome.exe" diff --git a/package-lock.json b/package-lock.json index 0c8890d..5d36f1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "bulma": "^1.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -5433,6 +5434,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bulma": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.4.tgz", + "integrity": "sha512-Ffb6YGXDiZYX3cqvSbHWqQ8+LkX6tVoTcZuVB3lm93sbAVXlO0D6QlOTMnV6g18gILpAXqkG2z9hf9z4hCjz2g==", + "license": "MIT" + }, "node_modules/bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -20600,6 +20607,11 @@ "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz", "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==" }, + "bulma": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.4.tgz", + "integrity": "sha512-Ffb6YGXDiZYX3cqvSbHWqQ8+LkX6tVoTcZuVB3lm93sbAVXlO0D6QlOTMnV6g18gILpAXqkG2z9hf9z4hCjz2g==" + }, "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", diff --git a/package.json b/package.json index cc266c4..860b6b4 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "bulma": "^1.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/src/App.css b/src/App.css index 74b5e05..15b2523 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,8 @@ + + .App { text-align: center; + height: 100%; } .App-logo { diff --git a/src/App.js b/src/App.js index 3784575..405b692 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,17 @@ -import logo from './logo.svg'; -import './App.css'; +import "./App.css"; +import Navbar from "./components/Navbar"; +import FormField from "./components/FormField"; +import "bulma/css/bulma.css"; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+ + + + + +
); } diff --git a/src/components/FormField.js b/src/components/FormField.js new file mode 100644 index 0000000..bc7b8cb --- /dev/null +++ b/src/components/FormField.js @@ -0,0 +1,17 @@ +import './formfield.css' + +function FormField({label, type, placeholder}) { + return ( + <> +
+ +
+ +
+
+ + + ); +} + +export default FormField; diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..099263d --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,70 @@ +import "./navbar.css"; + +function Navbar() { + return ( + <> + + + ); +} + +export default Navbar; diff --git a/src/components/formfield.css b/src/components/formfield.css new file mode 100644 index 0000000..025286a --- /dev/null +++ b/src/components/formfield.css @@ -0,0 +1,13 @@ +.label{ + font-size: 15px; + text-align: left; + display: block; +} + +.field{ + display: block; + margin-left: 30px; + width: 30%; + border-radius: 5px; + border-color: rgba(207, 208, 209, 0.507); +} \ No newline at end of file diff --git a/src/components/navbar.css b/src/components/navbar.css new file mode 100644 index 0000000..cb5879d --- /dev/null +++ b/src/components/navbar.css @@ -0,0 +1,3 @@ +.navbar { + margin-bottom: 40px; +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e..8dc4c21 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,7 @@ +html { + height: 100%; +} + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', @@ -5,9 +9,14 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + height: 100%; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +#root { + height: 100%; +} \ No newline at end of file From 3fc24b18de9f3596762373f134ad581ee791efd4 Mon Sep 17 00:00:00 2001 From: Nazaret Date: Mon, 15 Sep 2025 12:30:26 +0200 Subject: [PATCH 2/2] done --- src/App.js | 15 ++++++------- src/components/CoolButton.js | 43 ++++++++++++++++++++++++++++++++++++ src/components/Message.js | 34 ++++++++++++++++++++++++++++ src/components/Navbar.js | 20 +++-------------- src/components/SignupForm.js | 32 +++++++++++++++++++++++++++ src/components/message.css | 4 ++++ 6 files changed, 123 insertions(+), 25 deletions(-) create mode 100644 src/components/CoolButton.js create mode 100644 src/components/Message.js create mode 100644 src/components/SignupForm.js create mode 100644 src/components/message.css diff --git a/src/App.js b/src/App.js index 405b692..7e33543 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,16 @@ +import SignupForm from "./components/SignupForm"; +import Message from "./components/Message"; import "./App.css"; -import Navbar from "./components/Navbar"; -import FormField from "./components/FormField"; import "bulma/css/bulma.css"; function App() { return (
- - - - - - + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "} + Pellentesque risus mi. +
); } diff --git a/src/components/CoolButton.js b/src/components/CoolButton.js new file mode 100644 index 0000000..3bcd021 --- /dev/null +++ b/src/components/CoolButton.js @@ -0,0 +1,43 @@ +function CoolButton(props) { + const bulmaClasses = { + isCentered: "is-centered", + isActive: "is-active", + isBlack: "is-black", + isDanger: "is-danger", + isDark: "is-dark", + isFocused: "is-focused", + isGrouped: "is-grouped", + isHovered: "is-hovered", + isInfo: "is-info", + isInverted: "is-inverted", + isLarge: "is-large", + isLight: "is-light", + isLink: "is-link", + isLoading: "is-loading", + isMedium: "is-medium", + isOutlined: "is-outlined", + isPrimary: "is-primary", + isRight: "is-right", + isRounded: "is-rounded", + isSelected: "is-selected", + isSmall: "is-small", + isStatic: "is-static", + isSuccess: "is-success", + isText: "is-text", + isWarning: "is-warning", + isWhite: "is-white", + }; + + let classes = "button"; // clase base + + classes += + " " + + Object.keys(props) + .filter((key) => bulmaClasses[key]) + .map((key) => bulmaClasses[key]) + .join(" "); + + return ; +} + +export default CoolButton; diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..e99f503 --- /dev/null +++ b/src/components/Message.js @@ -0,0 +1,34 @@ +import './message.css' + +function Message(props) { + const bulmaClasses = { + isInfo: "is-info", + isSuccess: "is-success", + isWarning: "is-warning", + isDanger: "is-danger", + }; + + let classes = "message"; + + classes += + " " + + Object.keys(props) + .filter((key) => bulmaClasses[key]) + .map((key) => bulmaClasses[key]) + .join(" "); + return ( + <> +
+
+

{props.title}

+ +
+
+ {props.children} +
+
+ + ); +} + +export default Message; diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 099263d..0cfa0ae 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,3 +1,4 @@ +import CoolButton from "./CoolButton"; import "./navbar.css"; function Navbar() { @@ -42,23 +43,8 @@ function Navbar() {
-

- - Login - -

-

- - Signup - -

+ Login + Signup
diff --git a/src/components/SignupForm.js b/src/components/SignupForm.js new file mode 100644 index 0000000..b56dae2 --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,32 @@ +import Navbar from "./Navbar"; +import FormField from "./FormField"; + +function SignupForm() { + return ( + <> + + +
+ + + + + + + + + + ); +} + +export default SignupForm; diff --git a/src/components/message.css b/src/components/message.css new file mode 100644 index 0000000..230894e --- /dev/null +++ b/src/components/message.css @@ -0,0 +1,4 @@ +.message { + margin: 40px 0 0 30px; + width: 400px; +} \ No newline at end of file