Kanak-internship

package.json

@@ -6,6 +6,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bulma": "^1.0.2",
+    "new-bulma": "file:",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,23 +1,16 @@
-import logo from './logo.svg';
-import './App.css';
+import  "bulma/css/bulma.css";
+import './App.css'; 
+import SignupForm from "./components/SignupForm";
+import CoolButton from "./components/CoolButton";
 
 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>
+    <SignupForm/>
+    <div style= {{display: "flex", marginLeft: "40%"}}>
+      <CoolButton class="button is-success" name="Button 1" color="#47cdb0"/>
+      <CoolButton class="button is-white" name="Button 1" color="#FFF" text="#000"/>
+    </div>
     </div>
   );
 }

src/components/CoolButton.js

@@ -0,0 +1,11 @@
+
+
+function CoolButton(prop){
+    return(
+        <div>
+            <button class={prop.class} style={{ backgroundColor: prop.color, color: prop.text, margin: "20px"}}>{prop.name}</button>
+        </div>
+    );
+}
+
+export default CoolButton;

src/components/FormField.css

@@ -0,0 +1,23 @@
+.label{
+    font-size: 15px;
+    text-align: left;
+    display: block;
+    margin-bottom: 10px;
+    margin-left: 20px;
+}
+
+.field{
+    display: block;
+    padding: 15px;
+    margin-top: 10px;
+    width: 30%;
+    height: 1px;
+    border-radius: 5px;
+    border-color: rgba(207, 208, 209, 0.507);
+}
+
+::placeholder {
+    color: rgb(137, 131, 131);
+    opacity: 0.5; /* Firefox */
+  }
+

src/components/FormField.js

@@ -0,0 +1,17 @@
+import "./FormField.css";
+
+
+function FormField(props) {
+
+    return (
+
+        <form>
+            <label className="label">{props.label}
+                <input className="field" type={props.type}  placeholder={props.placeholder}/>
+            </label>
+        </form>
+    );
+
+}
+
+export default FormField;

src/components/Navbar.css

@@ -0,0 +1,23 @@
+.bd-tw-button {
+    background-color: #31aed7; /* Light Blue */
+    color: white; 
+    font-weight: bold;
+    border: none;
+    border-radius: 5px; 
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block; 
+}
+
+#td-td-button {
+  background-color: #47cdb0;
+  color: white; 
+  font-weight: bold;
+  border: none;
+  border-radius: 5px; 
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block; 
+}

src/components/SignupForm.css

@@ -0,0 +1,4 @@
+.button{
+    background-color: blue;
+    color: aliceblue;
+}

src/components/SignupForm.js

@@ -0,0 +1,16 @@
+import Navbar from "./Navbar";
+import FormField from "./FormField";
+import "./SignupForm.css"
+function SignupForm(){
+    return(
+        <div>
+            <Navbar/>
+            <FormField type="name" placeholder="Alex Smith" label="Name"/>
+            <FormField type="email" placeholder="alexsmith@gmail.com" label="E-Mail"/>
+            <FormField type="password" placeholder="******" label="Password"/>
+            <button className="button">Submit</button>
+        </div>
+    );
+}
+
+export default SignupForm;

src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -11,7 +10,3 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();