diff --git a/assets/Logo.png b/assets/Logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..53ece66d76a7111060f5149e0f3d07e782ea33b7
Binary files /dev/null and b/assets/Logo.png differ
diff --git a/src/functions/codeEditor.js b/src/functions/codeEditor.js
index 645603d78cf4a5aa0b558d02bba5f629364807c3..564e6bc01d484660d1af36e72be820a24150d174 100644
--- a/src/functions/codeEditor.js
+++ b/src/functions/codeEditor.js
@@ -52,11 +52,13 @@ export const codeEditorElement = (instance) => {
containerHeading.style.marginTop = "6px";
containerHeading.style.marginBottom = "0px";
containerHeading.style.textAlign = "center";
+ containerHeading.style.fontWeight = "600";
editorContainer.appendChild(containerHeading);
const editorNameElement = document.createElement("h4");
editorNameElement.style.marginTop = "6px";
editorNameElement.style.marginBottom = "6px";
+ editorNameElement.style.fontWeight = "600";
editorNameElement.appendChild(
document.createTextNode(
`${filterToCode.type}: ${
@@ -74,6 +76,7 @@ export const codeEditorElement = (instance) => {
const incomingHeadingElement = document.createElement("h5");
incomingHeadingElement.style.margin = "0px";
incomingHeadingElement.style.marginBottom = "6px";
+ incomingHeadingElement.style.fontWeight = "600";
incomingHeadingElement.appendChild(
document.createTextNode("Incoming Pipes")
@@ -93,6 +96,8 @@ export const codeEditorElement = (instance) => {
const outgoingHeadingElement = document.createElement("h5");
outgoingHeadingElement.style.margin = "0px";
outgoingHeadingElement.style.marginBottom = "6px";
+ outgoingHeadingElement.style.fontWeight = "600";
+
outgoingHeadingElement.appendChild(
document.createTextNode("Outgoing Pipes")
);
@@ -151,7 +156,7 @@ export const codeEditorElement = (instance) => {
};
const handleCancel = (node) => {
- if (confirm("No changes will be saved! Need to submit!")) {
+ if (confirm("You are about to leave with no changes submitted!")) {
node.style.visibility = "hidden";
deleteWrittenCode(node.editor);
} else {
diff --git a/src/index.html b/src/index.html
index 60bffeb9e0c469ae45a60d653759dd048108248a..61b0d7cb3704df4e165f853eb95e15e469a7396d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -21,15 +21,15 @@
<div id="Toolbox">
<div id="logoContainer">
<img
- src="../assets/CC-Logo.png"
+ src="../assets/Logo.png"
alt="Logo der Website"
id="logo"
- width="144px"
+ width="60px"
/>
</div>
<hr />
<div>
- <h5>PIPES</h5>
+ <h5 style="font-weight: normal">PIPES</h5>
<div class="Pipe" data-type="Distributor" data-pipetype="Queue">
Queue
<br />
@@ -53,7 +53,7 @@
</div>
<hr />
<div>
- <h5>FILTERS</h5>
+ <h5 style="font-weight: normal">FILTERS</h5>
<div class="Filter" data-type="Start">
Sender
<br />
@@ -120,9 +120,9 @@
<i id="PauseIcon" class="fa-solid fa-xl fa-pause"></i>
</div>
</div>
- <hr />
- <div style="white-space: nowrap">
- <h5>Legend</h5>
+ <!-- <hr /> -->
+ <div class="legendContainer" style="white-space: nowrap">
+ <h5 style="font-size: 14px; font-weight: normal">Legend</h5>
<div class="elementsInLegend">
<i
style="color: red; margin-right: 6px"
@@ -154,7 +154,9 @@
</div>
</div>
<div id="Diagram">
- <h4>ARCHITECTURE</h4>
+ <h4 style="font-weight: normal; margin-top: 24px">
+ MESSAGING-BASED SOFTWARE ARCHITECTURE
+ </h4>
<div id="Loader"></div>
<i id="Success" class="far fa-check-circle"></i>
<i id="Error" class="far fa-times-circle"></i>
diff --git a/src/style.css b/src/style.css
index d75a4baf8e7600d5cb8ae4d72a9578eda69765eb..95024eca5280003f28805a9e31fd09dab6b93086 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,6 +1,6 @@
body {
background-color: rgb(249, 249, 249);
- font-family: "Times New Roman", Times, serif;
+ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.App {
@@ -9,28 +9,30 @@ body {
.Body {
display: flex;
- font-family: "Times New Roman", Times, serif;
+ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
#Diagram {
width: 100%;
height: 98vh;
margin: 6px;
- border: 1px solid black;
- border-radius: 4px;
+ margin-top: -12px;
position: relative;
}
#Toolbox {
- width: fit-content;
- height: 98vh;
- margin: 6px;
+ width: 120px;
+ height: 95vh;
padding: 0 24px;
- border: 1px solid black;
- border-radius: 4px;
+ border: 1px solid rgb(0, 0, 0);
+ border-radius: 24px;
overflow-y: auto;
overflow-x: auto;
+ box-shadow: 2px 4px 8px 0px #0000007d;
+ background: linear-gradient(45deg, #e5e5e5, white);
+ margin-top: 12px;
}
+
.Filter {
text-align: center;
align-content: center;
@@ -43,12 +45,14 @@ body {
padding: 3px 6px;
cursor: grab;
background-color: white;
- box-shadow: gray 0px 6px 6px -6px;
+ box-shadow: #0000007d 0px 6px 6px -6px;
+ font-size: 13px;
}
#Toolbox .Filter {
position: relative;
margin: 12px auto;
+ height: 24px;
}
.Filter:active {
@@ -66,7 +70,8 @@ body {
border-radius: 18px;
cursor: grab;
background-color: white;
- box-shadow: gray 0px 6px 6px -4px;
+ box-shadow: #0000007d 0px 6px 6px -4px;
+ font-size: 13px;
}
.Pipe:active {
@@ -81,7 +86,7 @@ body {
.custom-menu {
z-index: 1000;
position: absolute;
- background-color: lightgray;
+ background-color: rgb(235, 235, 235);
border-radius: 6px;
padding: 6px;
}
@@ -143,10 +148,12 @@ body {
width: 75%;
border-radius: 12px;
padding: 12px;
- box-shadow: 0px 0px 12px darkgray;
+ box-shadow: 0px 4px 8px 0px #0000007d;
z-index: 99;
background-color: white;
cursor: grab;
+ font-weight: lighter;
+ font-size: 12px;
}
.editorContainer:active {
@@ -184,8 +191,8 @@ body {
padding: 8px 12px;
cursor: pointer;
width: 120px;
- box-shadow: gray 0px 6px 6px -6px;
- font-family: "Times New Roman", Times, serif;
+ box-shadow: #0000007d 0px 6px 6px -6px;
+ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
#Deploy {
@@ -343,6 +350,14 @@ body {
justify-content: space-between;
}
+.legendContainer {
+ white-space: nowrap;
+ font-size: 10px;
+ position: absolute;
+ bottom: 30px;
+ text-align: left;
+}
+
.elementsInLegend {
text-align: left;
margin: 12px 0;