Added custom fonts and did minor adjustments

Frontend/src/App.vue

@@ -6,7 +6,7 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 </script>
 
 <template>
-  <div id="layout" class="flex h-screen bg-gradient-to-r from-white to-sky-200 dark:from-slate-800 dark:to-indigo-950">
+  <div id="layout" class="font-sans flex h-screen bg-gradient-to-r from-white to-sky-200 dark:from-slate-800 dark:to-indigo-950">
     <SidebarComponent />
     <div class="relative p-4 w-full m-4 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
       <RouterView></RouterView>

Frontend/src/components/mock/HistoryRecords.vue

@@ -46,11 +46,11 @@ function refreshHistory(){
 
 <template>
     <div>
-        <table class="h-28 w-full text-center dark:text-grey-900">
+        <table class="h-28 w-full text-center text-grey-900 dark:text-white">
             <tr>
                 <th>Time</th>
                 <th>HTTP Method</th>
-                <th>HTTP Headers</th>
+                <th>Headers</th>
                 <th>Request Body</th>
                 <th class="text-2xl"><button @click="refreshHistory()">⟳</button></th>
             </tr>

Frontend/src/components/sidebar/SidebarComponent.vue

@@ -29,7 +29,7 @@ onMounted( () => {
             <a href="https://release11.com/">
                 <img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
             </a>
-            <div class="flex basis-full flex-col font-medium items-center">
+            <div class="flex basis-full flex-col font-normal items-center">
                 <sidebar-menu-element-component category-name="Parser">
                     <SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
                     <SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />

Frontend/src/components/sidebar/SidebarMenuElementComponent.vue

@@ -18,10 +18,10 @@ const props = defineProps(
 
 <template>
     <div class="w-full mb-4 p-2 rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
-        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
+        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-normal text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-        <div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
+        <div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-extralight overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
             <slot></slot>
         </div>
     </div>

Frontend/src/style.css

@@ -2,6 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+    font-family: "Raleway";
+    src: url("fonts/Raleway-Variable.ttf");
+}
+
+@font-face {
+    font-family: "Sono";
+    src: url("fonts/Sono-Variable.ttf");
+}
+
 .inactive-button {
     @apply py-2 px-4 h-fit text-slate-400 border border-slate-400 rounded-full
 }

Frontend/tailwind.config.js

@@ -6,6 +6,10 @@ export default {
   ],
   theme: {
     extend: {},
+    fontFamily: {
+      'sans': ['Raleway'],
+      'mono': ["Sono"],
+    }
   },
   plugins: [],
 }