Just to merge

backend/build.gradle.kts

@@ -25,7 +25,7 @@ dependencies {
 	implementation("com.kohlschutter.junixsocket:junixsocket-core:2.9.0")
 	// implementation("org.springframework.session:spring-session-jdbc")
 	developmentOnly("org.springframework.boot:spring-boot-devtools")
-	developmentOnly("org.springframework.boot:spring-boot-docker-compose")
+	// developmentOnly("org.springframework.boot:spring-boot-docker-compose")
 	runtimeOnly("org.postgresql:postgresql")
 	testImplementation("org.springframework.boot:spring-boot-starter-test")
 	testImplementation("org.springframework.boot:spring-boot-testcontainers")

frontend/src/App.vue

@@ -52,7 +52,7 @@ window.addEventListener('hashchange', () => {
             <a class="icon" href="#Notifications">
                 <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
-        <li @click="active=!active"  class="option"style="float: right;" title=settings>
+        <li @click="active=!active" class="option"style="float: right;" title=settings>
             <a class="icon" >
                 <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div>
                 <div v-if="active" class="dropdown">
@@ -86,12 +86,9 @@ window.addEventListener('hashchange', () => {
     </ul>
     </div>
     <div class="page">
-      <div style=" margin:50px;">
         <Suspense>
-        
-		<component :is="currentView" />
+				<component :is="currentView" />
         </Suspense>
-      </div>
     </div>
   </div>
 </template>
@@ -99,6 +96,8 @@ window.addEventListener('hashchange', () => {
 <style scoped>
   
   .container{
+			height: 100%;
+			width: 100%;
     display:grid;
     grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol];
     grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow];
@@ -111,6 +110,8 @@ window.addEventListener('hashchange', () => {
 
   .page {
     grid-area:page;
+		height: 100%;
+		width: 100%;
     place-self:center;
   }
 

frontend/src/Apps/Login.vue

@@ -55,11 +55,11 @@
 </script>
 
 
-<template>
+<template style="background-color:rgba(255,255,255,0.05); border-radius:50px" >
       <div class='loginBox'>
 
         <div v-if="loginPage">
-          <form @submit.prevent=" login(outputs.email,outputs.password);goBackHome();"class="form">
+          <form @submit.prevent="login(outputs.email,outputs.password);goBackHome();"class="form">
             <h1 style="color:rgb(239,60,168); font-family: sans-serif;">
               {{i18n("login.guest.signin")}}
             </h1>
@@ -80,7 +80,7 @@
           </form>
         </div>
 
-        <div v-else>
+        <div  v-else>
           <form class="form">
             <h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;">
               {{i18n("login.guest.welcome")}}
@@ -157,31 +157,14 @@
 </template>
 
 <style scoped>
-.Home{
-  position:absolute;
- 	display: flex;
-  z-index: 100;
-	padding: 8px 16px;
-	color:rgb(255, 255, 255);
-	text-decoration: none;
-}
-
-.Home:hover{
-  width:40px;
-  background-color: black;
-	border-radius:6px;
-	color:white;
-  transform: translate(0px ,1px);
-}
-
 
 .loginBox {
   background-color: rgb(24,24,24);
-  width: 400px;
-  display:flex;
+  width: 100%;
+  height:100%;
   justify-content: center;
-  padding: 40px;
-  border-radius: 20px;
+  padding: 10%;
+  border-radius: 5%;
   box-shadow:0 5px 25px #000000;
   
 }
@@ -190,9 +173,8 @@
   width:100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items:center;
-  gap: 15px;
+  gap: 3%;
 }
 
 
@@ -200,12 +182,12 @@
   
   width:100%;
   border: none;
-  margin-right: 50px;
-  padding-left: 10px;
-  padding-top:10px;
-  padding-bottom:10px;
+  margin-right: 12.5%;
+  padding-left: 2.5%;
+  padding-top:2.5%;
+  padding-bottom:2.5%;
   outline:none;
-  border-radius: 4px;
+  border-radius: 10px;
   font-size:1.35em;
 }
 

frontend/src/assets/main.css

@@ -1,4 +1,11 @@
 body {
    background-color: rgb(53, 25, 60);
    margin:0;
+   width: 100vw;
+   height: 100vh;
+}
+
+#app {
+   width: 100%;
+   height: 100%;
 }