Lab Bulma Components done. Pull Request

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",

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 (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Navbar />
+      <FormField label="Name" type="text" placeholder="e.g Alex Smith" />
+      <FormField label="Email" type="email" placeholder="e.g. [email protected]" />
+      <SignupForm />
+      <CoolButton isSmall isDanger isRounded>Button 1</CoolButton>
+      <CoolButton isSmall isSuccess>Button 2</CoolButton>
+      <Message isInfo title="Hello World">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>.
+      </Message>
     </div>
   );
 }
 
-export default App;
+export default App;

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;
+  }

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 (
+    <button className={classNames.join(' ')}>
+      {props.children}
+    </button>
+  );
+};
+
+export default CoolButton;

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;
+  }

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 (
+    <div className="field">
+      <label className="label">{label}</label>
+      <div className="control">
+        <input className="input" type={type} placeholder={placeholder} />
+      </div>
+    </div>
+  );
+}
+
+export default FormField;

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);
+  }

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 (
+    <article className={messageClass.join(' ')}>
+      <div className="message-header">
+        <p>{props.title}</p>
+        <button className="delete" aria-label="delete"></button>
+      </div>
+      <div className="message-body">
+        {props.children}
+      </div>
+    </article>
+  );
+};
+
+export default Message;

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;
+  }