feat: add styling

Signed-off-by: Alex Walker <alex.walker@indicio.tech>

oid4vci/demo/frontend/Dockerfile

@@ -12,6 +12,7 @@ RUN npm install
 
 # Copy the entire project directory into the container
 COPY frontend .
+RUN ls
 
 # Build the React app for production
 RUN npm run build

oid4vci/demo/frontend/src/AdminPage.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import "./InputForm.css"
 
 const RegistrationPage = () => {
   const navigate = useNavigate();
@@ -105,14 +106,19 @@ const RegistrationPage = () => {
       console.error("Error during registration:", error);
     }
   };
-
   return (
-    <div>
-      <h1>Admin Credential Issuance Preparation</h1>
+  <div class="container" style={{ padding: "3px" }}>
+    <div class="row">
+      <h1 class="input-h1">Admin Credential Issuance Preparation</h1>
       {/* registration form */}
-      <button onClick={handleRegistration}>Register</button>
+      <div class="input-form-group">
+        <button class="btn btn-warning btn-lg input-form-button" onClick={handleRegistration}>
+          Register
+        </button>
+      </div>
     </div>
-  );
+  </div>
+);
 };
 
 export default RegistrationPage;

oid4vci/demo/frontend/src/App.css

@@ -1,6 +1,6 @@
 .App {
   text-align: center;
-}
+ }
 
 .App-logo {
   height: 40vmin;
@@ -36,3 +36,13 @@
     transform: rotate(360deg);
   }
 }
+
+@font-face {
+  font-family: open-sans;
+  src: url(../public/OpenSans-Regular.ttf);
+}
+
+.open-sans {
+  font-family: open-sans; 
+}
+

oid4vci/demo/frontend/src/App.js

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import InputForm from './InputForm';
 import RegistrationPage from './AdminPage'
 import QRCodePage from './QRCodePage';
+import "bootstrap/dist/css/bootstrap.min.css"
 
 function App() {
   return (

oid4vci/demo/frontend/src/InputForm.js

@@ -1,16 +1,17 @@
 import React, { useState } from "react";
 import axios from "axios";
 import { useNavigate, useLocation } from "react-router-dom";
+import "./InputForm.css"
 
 const InputForm = () => {
   const navigate = useNavigate();
   const { state } = useLocation();
   const { supportedCredId, did } = state;
   console.log(supportedCredId);
   console.log(did);
-  const [firstName, setFirstName] = useState("");
-  const [lastName, setLastName] = useState("");
-  const [email, setEmail] = useState("");
+  const [firstName, setFirstName] = useState("Sally");
+  const [lastName, setLastName] = useState("Sparrow");
+  const [email, setEmail] = useState("SallySparrow@email.com");
   const API_BASE_URL = "http://localhost:3001";
 
   const exchangeCreateUrl = `${API_BASE_URL}/oid4vci/exchange/create`;
@@ -69,39 +70,53 @@ const InputForm = () => {
   };
 
   return (
-    <div>
-      <h2>Input Form</h2>
-
-      <form onSubmit={handleSubmit}>
-        <div>
-          <label htmlFor="firstName">First Name:</label>
+    <div class="container" style={{padding: "3px"}}>
+      <div class="row">
+      <div class="col-md-3"></div>
+      <div class="col-md-6 input-wrapper">
+      <h1 class="input-h1">Input Form</h1>
+
+      <hr />
+
+      <div>
+      <form class="input-form" onSubmit={handleSubmit}>
+        <div class="input-form-group">
+          <label htmlFor="firstName" class="input-label">First Name</label>
           <input
             type="text"
             id="firstName"
             value={firstName}
             onChange={handleFirstNameChange}
+	    class="input-form-control"
           />
         </div>
-        <div>
-          <label htmlFor="lastName">Last Name:</label>
+        <div class="input-form-group">
+          <label htmlFor="lastName" class="input-label">Last Name</label>
           <input
             type="text"
             id="lastName"
             value={lastName}
             onChange={handleLastNameChange}
+	    class="input-form-control"
           />
         </div>
-        <div>
-          <label htmlFor="email">Email:</label>
+        <div class="input-form-group">
+          <label htmlFor="email" class="input-label">Email</label>
           <input
             type="email"
             id="email"
             value={email}
             onChange={handleEmailChange}
+	    class="input-form-control"
           />
         </div>
-        <button type="submit">Share</button>
+	<div class="input-form-group">
+        <button type="submit" class="btn btn-warning btn-lg input-form-button">Share</button>
+	</div>
       </form>
+      </div>
+      </div>
+      </div>
     </div>
   );
 };

oid4vci/demo/frontend/src/QRCodePage.js

@@ -3,6 +3,7 @@ import axios from "axios";
 import { useLocation, useNavigate } from "react-router-dom";
 import QRCode from "qrcode.react";
 import { useInterval } from "./useInterval";
+import "./InputForm.css"
 
 const QRCodePage = () => {
   const navigate = useNavigate();
@@ -48,11 +49,26 @@ const QRCodePage = () => {
   }, [urlOffer]);
 
   return (
-    <div>
-      <h2>QR Code Page</h2>
-      <QRCode value={qrData} />
+  <div class="container" style={{ padding: "3px" }}>
+    <div class="row">
+      <div class="col-md-3"></div>
+      <div class="col-md-6 input-wrapper">
+        <h1 class="input-h1">QR Code Page</h1>
+        <hr />
+	<div class="container" style={{ padding: "3px"}}>
+	<div class="row">
+	<div class="col-md"></div>
+        <div class="col-md input-form" style={{ backgroundColor: "white", padding: "3px 5px" }}>
+          <QRCode value={qrData} />
+        </div>
+	<div class="col-md"></div>
+	</div>
+	</div>
+      </div>
+      <div class="col-md-3"></div>
     </div>
-  );
+  </div>
+);
 };
 
 export default QRCodePage;