diff --git a/BulmaButtonScreenshots.png b/BulmaButtonScreenshots.png new file mode 100644 index 0000000..0f90243 Binary files /dev/null and b/BulmaButtonScreenshots.png differ diff --git a/package-lock.json b/package-lock.json index 0c8890d..70388a7 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.2", "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.2", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.2.tgz", + "integrity": "sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A==", + "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.2", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.2.tgz", + "integrity": "sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A==" + }, "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..2029f52 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.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/src/App.js b/src/App.js index 3784575..62958b8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,26 @@ -import logo from './logo.svg'; -import './App.css'; +import React from 'react'; +import Navbar from './components/Navbar.js'; +import "bulma/css/bulma.css"; +import './components/Navbar.css' +import FormField from './components/FormField'; +import SignupForm from './components/SignupForm'; +import CoolButton from './components/CoolButton'; +import Message from './components/Message'; function App() { return (
-
- logo -

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

- - Learn React - -
+ + + + + Button 1 + Button 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi. +
); } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/CoolButton.css b/src/components/CoolButton.css new file mode 100644 index 0000000..de2c4e1 --- /dev/null +++ b/src/components/CoolButton.css @@ -0,0 +1,16 @@ +/* src/components/CoolButton.css */ + .button { + border-radius: 4px; + padding: 8px 16px; + width: 150px; + height: 100px; + } + + .is-success { + background-color: #32d1b1; + color: white !important; + } + + .is-danger { + color: white !important; + } \ No newline at end of file diff --git a/src/components/CoolButton.js b/src/components/CoolButton.js new file mode 100644 index 0000000..83990d5 --- /dev/null +++ b/src/components/CoolButton.js @@ -0,0 +1,51 @@ +// src/components/CoolButton.js +import React from 'react'; +import './CoolButton.css'; + +const 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', + }; + + const classNames = ['button']; + + // Loop through the props and map them to Bulma classes + Object.keys(props).forEach((prop) => { + if (bulmaClasses[prop]) { + classNames.push(bulmaClasses[prop]); + } + }); + + return ( + + ); +}; + +export default CoolButton; \ No newline at end of file diff --git a/src/components/FormField.css b/src/components/FormField.css new file mode 100644 index 0000000..afc16ba --- /dev/null +++ b/src/components/FormField.css @@ -0,0 +1,26 @@ +/* src/components/FormField.css */ + +.field { + margin-bottom: 1.5rem; + } + + .label { + font-weight: bold; + margin-bottom: 0.5rem; + margin-left: 50px; + margin-top: 25px; + } + + .control { + display: flex; + align-items: center; + } + + .input { + width: 500px; + padding: 0.5rem; + border: 1px solid #dbdbdb; + border-radius: 4px; + margin-left: 50px; + font-size: 1rem; + } \ No newline at end of file diff --git a/src/components/FormField.js b/src/components/FormField.js new file mode 100644 index 0000000..8141f0d --- /dev/null +++ b/src/components/FormField.js @@ -0,0 +1,16 @@ +// src/components/FormField.js +import React from 'react'; +import './FormField.css'; + +function FormField({ label, type, placeholder }) { + return ( +
+ +
+ +
+
+ ); +} + +export default FormField; \ No newline at end of file diff --git a/src/components/Message.css b/src/components/Message.css new file mode 100644 index 0000000..8318745 --- /dev/null +++ b/src/components/Message.css @@ -0,0 +1,67 @@ +.message { + width: 340px; + margin: 3rem auto; + } + + .message-header { + background-color: #f5f5f5; + border-bottom: 1px solid #dbdbdb; + padding: 0.75em 1em; + font-weight: 500; + } + + .message-body { + padding: 1.25em 1.5em; + border-top: 0; + border-radius: 0 0 4px 4px; + background-color: #f5f5f5; + color: #369cee; + } + + .message .delete { + background: none; + border: none; + font-size: 1rem; + cursor: pointer; + margin-left: auto; + } + + .message.is-info { + border: 1px solid #209cee; + } + + .message.is-info .message-header { + background-color: #209cee; + color: white; + } + + .message.is-info .message-body { + background-color: #edf6fc; + } + + .delete { + position: relative; + width: 20px; + height: 20px; + background-color: #337bb1 /* Circle color */ !important; + border-radius: 50%; /* Makes it a circle */ + cursor: pointer; + margin-left: auto; + } + + .delete::before, + .delete::after { + content: ""; + position: absolute; + width: 2px; + height: 10px; + background-color: var(--bulma-delete-color); + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(45deg); + transform-origin: center center; + } + + .delete::after { + transform: translate(-50%, -50%) rotate(-45deg); + } \ No newline at end of file diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..448cf95 --- /dev/null +++ b/src/components/Message.js @@ -0,0 +1,35 @@ +import React from 'react'; +import './Message.css'; // Optional: if you have additional styling + +const Message = (props) => { + const bulmaClasses = { + isInfo: 'is-info', + isPrimary: 'is-primary', + isSuccess: 'is-success', + isWarning: 'is-warning', + isDanger: 'is-danger', + // Add more classes as needed + }; + + // Determine the message class based on the props + const messageClass = ['message']; + Object.keys(props).forEach((prop) => { + if (bulmaClasses[prop]) { + messageClass.push(bulmaClasses[prop]); + } + }); + + return ( +
+
+

{props.title}

+ +
+
+ {props.children} +
+
+ ); +}; + +export default Message; \ No newline at end of file diff --git a/src/components/Navbar.css b/src/components/Navbar.css new file mode 100644 index 0000000..c062f80 --- /dev/null +++ b/src/components/Navbar.css @@ -0,0 +1,69 @@ +svg { + width: 150px; + height: 80px; +} + +nav { + margin-top: 25px; + margin-left: 50px; + margin-right: 130px; + padding-left: 20px; + display: flex; + align-items: center; + height:65px; +} + +.navbar-brand { + display: flex; + align-items: center; +} + +.navbar-menu { + margin-left: 30px; /* Add space between SVG and "Home" text */ + display: flex; + align-items: center; + justify-content: flex-start; + } + +.navbar { + display: flex; + align-items: center; + background-color: #f5f5f5; +} + +.navbar-end { + display: flex; + align-items: center; + margin-left: 1300px; +} + +.button.log-in { + background-color: #54adf0; + color: white; + border: none; + border-radius: 5px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + .button.log-in:hover { + background-color: #4791cc; + } + + .button.sign-up { + background-color: #32d1b1; + color: white; + border: none; + border-radius: 5px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + margin-left: 10px; + } + + .button.sign-up:hover { + background-color: #28b89a; + } diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..37324ad --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,32 @@ +import React from 'react'; +import CoolButton from './CoolButton'; + +function Navbar() { + return ( + + ); +} + +export default Navbar; \ No newline at end of file diff --git a/src/components/SignupForm.css b/src/components/SignupForm.css new file mode 100644 index 0000000..5a44e96 --- /dev/null +++ b/src/components/SignupForm.css @@ -0,0 +1,34 @@ +/* src/components/SignupForm.css */ + +.signup-form { + max-width: 700px; + margin: 50px auto; + padding: 2rem; + border: 1px solid #dbdbdb; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + .signup-form-title { + margin-left: 50px; + font-size: larger; + } + + .control { + margin-top: 1.5rem; + text-align: center; + } + + .button.is-primary { + background-color: #54adf0; + border-color: transparent; + margin-left: 50px; + color: white; + padding: 0.75rem 1.5rem; + font-size: 1rem; + border-radius: 4px; + } + + .navbar-brand { + font-weight: bold; + } \ No newline at end of file diff --git a/src/components/SignupForm.js b/src/components/SignupForm.js new file mode 100644 index 0000000..39b69b0 --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,30 @@ +// src/components/SignupForm.js +import React from 'react'; +import FormField from './FormField'; +import './SignupForm.css'; + +function SignupForm() { + return ( +
+ + +
+
Sign Up Form:
+ + + +
+ +
+ +
+ ); +} + +export default SignupForm; \ No newline at end of file