design updates

frontend/src/components/header-komponens.vue

@@ -14,28 +14,15 @@ defineProps({
 <template>
   <div class="greetings">
     <img alt="NoteStore logo" class="logo" src="../assets/book-shelf.svg" width="100" height="100" />
-    <h1 class="title">NoteStore</h1>
+    <h1 class="title">TechnoCool NoteStore</h1>
     <div class="login">
       <h3 v-if="(fullName)" class="subtitle">Üdvözöllek, {{ fullName }}!</h3>
-      <button @click="$emit('toggle-login-form')">{{ isLoggedIn ? 'Kijelentkezés' : 'Bejelentkezés' }}</button>
+      <button class="grow" @click="$emit('toggle-login-form')">{{ isLoggedIn ? 'Kijelentkezés' : 'Bejelentkezés' }}</button>
     </div>
   </div>
 </template>
 
 <style scoped>
-.login button {
-  padding: 10px 20px;
-  background-color: lightseagreen;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  font-size: 1rem;
-  cursor: pointer;
-}
-
-.login button:hover {
-  background-color: darkcyan;
-}
 
 .login {
   position: fixed;
@@ -43,7 +30,8 @@ defineProps({
 }
 
 .title {
-  color: lightseagreen;
+  color: var(--lightest);
+  text-shadow: 0 0 10px var(--light);
 }
 
 .title:after{
@@ -80,22 +68,18 @@ h3 {
   }
 
   .greetings {
-    display: flex;
+    display: grid;
     padding: 1em;
-    place-items: center flex-start;
-    flex-wrap: wrap;
-  }
-
-  .space {
-    width: 40%;
+    grid-template-columns: 1fr 4fr 2fr;
+    align-items: center;
   }
 
   .logo {
     margin: 0 2rem 0 0;
   }
-}
 
   .subtitle {
-  margin-bottom: 16px;
+    color: var(--lightest);
+  }
 }
 </style>
\ No newline at end of file

frontend/src/components/loginform-komponens.vue

@@ -31,7 +31,7 @@ function submitForm() {
 </script>
 
 <template>
-  <div>
+  <div class="window">
     <h2>Jelentkezz be!</h2>
     <form @submit.prevent="submitForm">
       <div>
@@ -49,6 +49,14 @@ function submitForm() {
 </template>
 
 <style scoped>
+
+.window {
+  border: 1px solid var(--lightest);
+  box-shadow: 0 0 6px var(--light);
+  padding: 20px 50px 20px 50px;
+  width: fit-content;
+}
+
 h4 {
   margin-top: 20px;
   color: red;
@@ -57,7 +65,7 @@ h4 {
 button {
   margin-top: 20px;
   padding: 10px 20px;
-  background-color: lightseagreen;
+  background-color: var(--light);
   color: white;
   border: none;
   border-radius: 5px;
@@ -65,17 +73,22 @@ button {
   cursor: pointer;
 }
 
+button:hover {
+  background-color: var(--dark);
+  color: var(--lightest)
+}
+
 input[type="text"],
 input[type="password"] {
   padding: 8px;
-  border: 1px solid lightgray;
+  border: 1px solid var(--lighttext);
   border-radius: 5px;
   font-size: 1rem;
 }
 
 label {
   display: block;
-  margin-bottom: 5px;
+  margin: 8px 0 8px 0;
   font-size: 1rem;
 }