Merge pull request #13 from smartSenseSolutions/style-improvements

style: style improvements
smartSenseSolutions · Nov 29, 2024 · 81e66ad · 81e66ad
2 parents 9e6e8c5 + 4a5b18f
commit 81e66ad
Show file tree

Hide file tree

Showing 8 changed files with 223 additions and 41 deletions.
diff --git a/edc-chat-app-ui/public/edclogo.svg b/edc-chat-app-ui/public/edclogo.svg
diff --git a/edc-chat-app-ui/public/index.html b/edc-chat-app-ui/public/index.html
@@ -7,6 +7,12 @@
     <head>
         <meta charset="utf-8" />
         <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk:wght@300..700&display=swap"
+            rel="stylesheet"
+        />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
         <meta name="description" content="Web site created using create-react-app" />
@@ -31,14 +37,13 @@
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
         <!--
-  This HTML file is a template.
-  If you open it directly in the browser, you will see an empty page.
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
 
   You can add webfonts, meta tags, or analytics to this file.
   The build step will place the bundled scripts into the <body> tag.
 
-  To begin the development, run `npm start` or `yarn start`.
-  To create a production bundle, use `npm run build` or `yarn build`.
--->
-    </body>
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    --></body>
 </html>
diff --git a/edc-chat-app-ui/public/smartSense-logo.svg b/edc-chat-app-ui/public/smartSense-logo.svg
diff --git a/edc-chat-app-ui/src/App.js b/edc-chat-app-ui/src/App.js
@@ -3,19 +3,37 @@
  */
 
 import React from "react";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
 import Home from "./component/home";
 import Chat from "./component/chat";
 import AddBpn from "./component/add-bpn";
 
 function App() {
     return (
         <Router>
-            <Routes>
-                <Route path="/" element={<Home />} />
-                <Route path="/chat" element={<Chat />} />
-                <Route path="/add-business-partner" element={<AddBpn />} />
-            </Routes>
+            <div className="main-container">
+                <div className="header">
+                    <Link to={"/"} className="edcLogo">
+                        <img src={"/edclogo.svg"} width={"44"} height={"42"} />
+                        <span>Eclipse Tractus-X</span>
+                    </Link>
+                </div>
+                <h1 className="text-center">Chat Application using EDC</h1>
+
+                <div className="content">
+                    <Routes>
+                        <Route path="/" element={<Home />} />
+                        <Route path="/chat" element={<Chat />} />
+                        <Route path="/add-business-partner" element={<AddBpn />} />
+                    </Routes>
+                </div>
+                <div className="footer">
+                    <span>Developed By:</span>{" "}
+                    <a href="https://smartsensesolutions.com/" target="_blank">
+                        <img src={"/smartSense-logo.svg"} width={"300"} height={"100"} />
+                    </a>
+                </div>
+            </div>
         </Router>
     );
 }

diff --git a/edc-chat-app-ui/src/component/add-bpn.js b/edc-chat-app-ui/src/component/add-bpn.js
@@ -4,7 +4,8 @@
 
 import axios from "axios";
 import React, { useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 const AddBpn = () => {
     const location = useLocation();
@@ -82,25 +83,29 @@ const AddBpn = () => {
         }
     };
     return (
-        <div className="container mt-5">
-            <h1 className="text-center">Add New Business Partner</h1>
+        <div className="form-container  mt-5">
+            <Link to="/" className="backBtn">
+                &lt;&nbsp;Back
+            </Link>
+            <h2 className="text-center">Add New Business Partner</h2>
 
             {selfBpn && (
-                <div className="alert alert-info">
+                <div className="bpnInfo">
                     <strong>Your BPN: {selfBpn}</strong>
                 </div>
             )}
 
             {success && <div className="alert alert-success">{success}</div>}
             {error && <div className="alert alert-danger">{error}</div>}
 
-            <div className="card p-3">
+            <div className="custom-form">
                 <div className="mb-3">
                     <label>Name</label>
                     <input
                         type="text"
                         name="name"
-                        className="form-control"
+                        placeholder="Your company name"
+                        className="form-control custom-form-contol "
                         value={formData.name}
                         onChange={handleInputChange}
                         style={{
@@ -114,7 +119,8 @@ const AddBpn = () => {
                         type="text"
                         name="bpn"
                         value={formData.bpn}
-                        className="form-control"
+                        className="form-control custom-form-contol "
+                        placeholder="BPNL000000000000"
                         onChange={handleInputChange}
                         style={{
                             borderColor: validationErrors.bpn ? "red" : "",
@@ -126,15 +132,16 @@ const AddBpn = () => {
                     <input
                         type="text"
                         name="edcUrl"
-                        className="form-control"
+                        placeholder="http://your-controlplane-host/api/v1/dsp"
+                        className="form-control custom-form-contol"
                         value={formData.edcUrl}
                         onChange={handleInputChange}
                         style={{
                             borderColor: validationErrors.edcUrl ? "red" : "",
                         }}
                     />
                 </div>
-                <button className="btn btn-primary w-100" onClick={handleSave}>
+                <button className="btn btn-primary primary-btn w-100" onClick={handleSave}>
                     Save
                 </button>
             </div>