From e689d3dc77fbad786309b881feeacf51cf16f124 Mon Sep 17 00:00:00 2001 From: VijayaAdamane <95336658+VijayaAdamane@users.noreply.github.com> Date: Wed, 14 Feb 2024 21:51:20 +0530 Subject: [PATCH 1/4] Add files via upload --- package-lock.json | 11 +++++++++++ package.json | 1 + 2 files changed, 12 insertions(+) diff --git a/package-lock.json b/package-lock.json index 0c8890d..a6e201c 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": "^0.9.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -5433,6 +5434,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bulma": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", + "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + }, "node_modules/bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -20600,6 +20606,11 @@ "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz", "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==" }, + "bulma": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", + "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + }, "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..ad6c4d5 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": "^0.9.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", From 2f52760c0ee1762e5b338eb86a7f9d08db42e99a Mon Sep 17 00:00:00 2001 From: VijayaAdamane <95336658+VijayaAdamane@users.noreply.github.com> Date: Wed, 14 Feb 2024 21:52:09 +0530 Subject: [PATCH 2/4] Add files via upload --- src/App.css | 41 +++-------------------------------------- src/App.js | 36 +++++++++++++++++++----------------- 2 files changed, 22 insertions(+), 55 deletions(-) diff --git a/src/App.css b/src/App.css index 74b5e05..530c91e 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,3 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} +.message{ + width:400px; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..da16b0d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,27 @@ -import logo from './logo.svg'; -import './App.css'; +import "./App.css"; +import "bulma/css/bulma.css"; + + +import SignupForm from "./components/SignupForm.js"; +import CoolButton from "./components/CoolButton.js"; +import Message from "./components/Message.js"; function App() { return (
-
- logo -

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

- - Learn React - -
+ +

+ Button 1     + Button 2     + 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 From d31b5e9a8ebddb008ea7773c7af03fc034eeef00 Mon Sep 17 00:00:00 2001 From: VijayaAdamane <95336658+VijayaAdamane@users.noreply.github.com> Date: Wed, 14 Feb 2024 21:55:35 +0530 Subject: [PATCH 3/4] Create ABABA --- src/Components/ABABA | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/Components/ABABA diff --git a/src/Components/ABABA b/src/Components/ABABA new file mode 100644 index 0000000..441bc56 --- /dev/null +++ b/src/Components/ABABA @@ -0,0 +1 @@ +ABABAB From a101d40e42130e9d20722f0ac637ecb46881c178 Mon Sep 17 00:00:00 2001 From: VijayaAdamane <95336658+VijayaAdamane@users.noreply.github.com> Date: Wed, 14 Feb 2024 21:56:07 +0530 Subject: [PATCH 4/4] Add files via upload --- src/Components/CoolButton.js | 43 ++++++++++++++++++++++++++++++++++++ src/Components/FormField.css | 3 +++ src/Components/FormField.js | 13 +++++++++++ src/Components/Message.js | 13 +++++++++++ src/Components/Navbar.css | 18 +++++++++++++++ src/Components/Navbar.js | 26 ++++++++++++++++++++++ src/Components/SignupForm.js | 20 +++++++++++++++++ 7 files changed, 136 insertions(+) create mode 100644 src/Components/CoolButton.js create mode 100644 src/Components/FormField.css create mode 100644 src/Components/FormField.js create mode 100644 src/Components/Message.js create mode 100644 src/Components/Navbar.css create mode 100644 src/Components/Navbar.js create mode 100644 src/Components/SignupForm.js diff --git a/src/Components/CoolButton.js b/src/Components/CoolButton.js new file mode 100644 index 0000000..7f975b3 --- /dev/null +++ b/src/Components/CoolButton.js @@ -0,0 +1,43 @@ +const classMap = { + // prop name: bulma class name + 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' + }; + + function CoolButton(props) + { + const classkeys = Object.keys(props).filter((prop) => classMap[prop]) + const classNames=classkeys.map((prop) => classMap[prop]).join(' '); + + 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..abea28a --- /dev/null +++ b/src/Components/FormField.css @@ -0,0 +1,3 @@ +.field{ + padding:10px; +} \ No newline at end of file diff --git a/src/Components/FormField.js b/src/Components/FormField.js new file mode 100644 index 0000000..1c3fcc7 --- /dev/null +++ b/src/Components/FormField.js @@ -0,0 +1,13 @@ +import './FormField.css' +function FormField(props) +{ + return ( +
+ +
+ +
+
+ ); +} +export default FormField \ No newline at end of file diff --git a/src/Components/Message.js b/src/Components/Message.js new file mode 100644 index 0000000..c8fee4f --- /dev/null +++ b/src/Components/Message.js @@ -0,0 +1,13 @@ +function Message(props) +{ + return
+
+

{props.title}

+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi +
+
+} +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..1b4c3ad --- /dev/null +++ b/src/Components/Navbar.css @@ -0,0 +1,18 @@ +.links a +{ + text-decoration: none; + color:black; +} +.nav{ + display: flex; + width:100%; + justify-content: space-between; + padding:10px; +} +.left{ + display:flex; + align-items: center; +} +.right button{ + margin:0 8px; +} \ No newline at end of file diff --git a/src/Components/Navbar.js b/src/Components/Navbar.js new file mode 100644 index 0000000..7dcde6a --- /dev/null +++ b/src/Components/Navbar.js @@ -0,0 +1,26 @@ +import './Navbar.css' +import CoolButton from './CoolButton'; +function Navbar() +{ + return ( + +
+
+
+ + Bulma: a modern CSS framework based on Flexbox + +
+
+ Home +
+
+ +
+ Log In + Sign Up +
+
+ ); +} +export default Navbar; \ No newline at end of file diff --git a/src/Components/SignupForm.js b/src/Components/SignupForm.js new file mode 100644 index 0000000..c0b8942 --- /dev/null +++ b/src/Components/SignupForm.js @@ -0,0 +1,20 @@ +import Navbar from "./Navbar" +import FormField from "./FormField" +import CoolButton from "./CoolButton" +function SignupForm() +{ + return( +
+ +
+ + + + Submit + + +
+ ) +} + +export default SignupForm \ No newline at end of file