UI improvements (#461)

* add public certificates route

* move state history into button, add disclaimer

* some minor UI adjustments

* fix state tree link

* add import

* adjust footer

* remove login button

src/app.html

@@ -13,16 +13,17 @@
 </body>
 
 <footer class="text-center text-lg-start bg-light text-muted">
-	<!--
-	<div>
-		The Website and its services are in a Beta version and are provided for research purposes, experimentations and scientific publication without any for-profit purposes in the interest of the scientific and technological community.
+	<div class="logos-content">
+		<a href="https://www.aisec.fraunhofer.de"
+		  ><img src="/aiseclogo.png" height="75px" class="float-start"
+		/></a>
+		<img src="/eu-flag.jpg" height="85px" class="float-end" />
 	</div>
-	-->
-
+
 	<div class="text-center p-4" style="color: white; background-color: #0099a0; max_height: 90px; text-decoration-color: white;">
-	  Copyright Fraunhofer AISEC 2023
+		THE WEBSITE AND ITS SERVICES ARE IN BETA VERSION AND ARE PROVIDED FOR RESEARCH PURPOSES, EXPERIMENTATION, AND SCIENTIFIC PUBLICATION. 
+	<br> Copyright Fraunhofer AISEC 2023
 	</div>
-
 </footer>
 
 </html>

src/lib/CertificateCard.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
-import { Card, CardBody, CardHeader, CardText, ListGroup, ListGroupItem, Table } from 'sveltestrap';
+import { Card, CardBody, CardHeader, CardText, ListGroup, ListGroupItem, Table, Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'sveltestrap';
 import type { Certificate } from '$lib/orchestrator';
 
 export let certificate: Certificate;
+
+let open = false;
+let openScrollable = false;
+const toggle = () => (open = !open);
+const toggleScrollable = () => (openScrollable = !openScrollable);
+
 </script>
 
 <Card class="mb-3 me-3">
@@ -31,7 +37,14 @@ export let certificate: Certificate;
 			</p>
 			<hr />
 		</CardText>
-		<b>State History</b>
+		<!-- <b>State History</b> -->
+		<Button color="primary" on:click={toggleScrollable}>See State History</Button>
+	</CardBody>
+</Card>
+
+<Modal isOpen={openScrollable} toggle={toggleScrollable} scrollable>
+	<ModalHeader toggle={toggleScrollable}>Modal title</ModalHeader>
+	<ModalBody>
 		<Table>
 			<thead>
 				<tr>
@@ -42,23 +55,22 @@ export let certificate: Certificate;
 				</tr>
 			</thead>
 			<tbody>
-				{#each certificate.states as state}
-					<tr>
-						<td>{state.state}</td>
-						<td>
-							{#if state.state == 'continued'}minor{/if}
-							{#if state.state == 'suspended'}major{/if}
-						</td>
-						<td>{state.timestamp}</td>
-						<!-- When it is a new certificate, there is no tree yet -->
-						<!-- svelte-ignore empty-block -->
-						{#if state.state == 'new'}
-						{:else}
-							<td><a href="https://cce-test.k8s.medina.esilab.org/#/?treeStateId={state.treeId}">{state.treeId}</a></td>
-						{/if}
-					</tr>
-				{/each}
+			{#each certificate.states as state}
+				<tr>
+					<td>{state.state}</td>
+					<td>
+						{#if state.state == 'continued'}minor{/if}
+						{#if state.state == 'suspended'}major{/if}
+					</td>
+					<td>{state.timestamp}</td>
+					<!-- When it is a new certificate, there is no tree yet -->
+					{#if state.state == 'new'}
+					{:else}
+						<td><a href="https://cce-test.k8s.medina.esilab.org/evaluation-tree?treeStateId={state.treeId}">{state.treeId}</a></td>
+					{/if}
+				</tr>
+			{/each}
 			</tbody>
 		</Table>
-	</CardBody>
-</Card>
+	</ModalBody>
+</Modal>

src/lib/EmptyCloudService.svelte

@@ -31,7 +31,7 @@ function discard() {
 		<CardBody>
 			<CardText>
 				<div class="sign">
-					<Button on:click={() => editing.set(true)} class="mt-2">
+					<Button on:click={() => editing.set(true)} class="mt-2" color="primary">
 						<div>Add service</div></Button
 					>
 				</div>

src/lib/Navigation.svelte

@@ -88,12 +88,6 @@ let loggedIn = localStorage.token ? true : false;
 				</NavLink>
 			</NavItem>
 			{/if}
-			<!--TODO: if logged in, don't show-->
-			{#if !loggedIn}
-			<NavItem>
-				<NavLink href="{base}/login">Login</NavLink>
-			</NavItem>
-			{/if}
 			<NavItem>
 				<NavLink href="https://medina-project.eu/wp-content/uploads/MEDINA_User_Manuals/MEDINA_Orchestrator_UserManual.pdf" target="_blank">
 					<Fa icon={faQuestion} /> Help
@@ -116,6 +110,8 @@ let loggedIn = localStorage.token ? true : false;
 
 <style>
 	:global(.medina) {
-		background-color:#343a40;
+		height: 46px;
+		background:#212529;
+		color: #212529;
 	}
 </style>

src/routes/+layout.svelte

@@ -55,7 +55,7 @@ function getVersionMessage(): string {
     <slot />
 </main>
 
-<Button color="secondary" on:click={() => toggle()}>
+<Button color="primary" on:click={() => toggle()}>
     Debug/Version Info
 </Button>
 

src/routes/public/certificates/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Col, Container, Row } from 'sveltestrap';
+	import { Col, Container, Row, Alert } from 'sveltestrap';
 	import PublicCertificateCard from '$lib/PublicCertificateCard.svelte';
 	import type { PageData } from './$types';
 
@@ -8,8 +8,12 @@
 </script>
 
 <h3>Certificates</h3>
+<Alert color=warning>
+	<h4 class="alert-heading">Disclaimer: This site only shows example certificates that are used for research purposes. 
+		They do not represent valid certifications.</h4>
+</Alert>
 
-{#if certificates.length > 0}
+{#if certificates}
 	<Container class="mt-4 ms-0 me-0">
 		<Row cols={2} noGutters>
 			{#each certificates as certificate, i}