Merge branch 'first-impression-ui' into 'main'

First impression ui

See merge request !24

FullstackProsjekt/src/frontend/src/assets/main.css

 body {
     font-family: monospace;
-    margin: 0 0 0 48px;
+    margin: 0 0 0 28px;
     background-color: #F2F2F2;
 }
+
+
 input {
     padding: 5px;
     border-radius: 5px;
@@ -12,16 +14,15 @@ input {
     margin: 10px;
     font-family: monospace;
 }
-
 input::placeholder {
     color: #b0b0b0;
 }
+
 label {
     display: inline-block;
     font-weight: bold;
 }
 
-
 .space{
     margin: 90px;
 }
@@ -53,7 +54,6 @@ label {
     margin-bottom: 20px;
 }
 
-
 .play-btn{
     padding: 10px;
     text-decoration: none;
@@ -70,7 +70,6 @@ label {
     color: #242F40;
     border-radius: 10px;
     cursor: pointer;
-
 }
 .delete-btn{
     padding: 8px;
@@ -109,7 +108,6 @@ label {
     border-color: transparent;
     margin-top: 10px;
     cursor: pointer;
-
 }
 
 .close-btn{
@@ -119,7 +117,6 @@ label {
     border-color: transparent;
     margin-left: 10px;
     cursor: pointer;
-
 }
 
 .submit-btn{

FullstackProsjekt/src/frontend/src/components/TheWelcome.vue

@@ -48,6 +48,16 @@ export default {
 		<router-link to="/about" class="hero-btn"> About us</router-link>
 	</section>
 
+	<footer class="footer">
+		<div class="footer-content">
+			<p>&copy; 2024 BrainStormer. All rights reserved.</p>
+			<ul>
+				<li><router-link to="/about">About us</router-link></li>
+				<li><router-link to="/feedback">Contact Us</router-link></li>
+			</ul>
+		</div>
+	</footer>
+
 	</body>
 </template>
 
@@ -64,6 +74,7 @@ export default {
 }
 #logo{
 	height: 150px;
+	width: 150px;
 	padding: 10px;
 }
 
@@ -103,6 +114,7 @@ export default {
 	color: #242F40;
 }
 
+/* Info section */
 .info{
 	width: 80%;
 	margin: auto;
@@ -127,6 +139,7 @@ h3{
 	margin: 10px 0;
 }
 
+/* CTA */
 .cta{
 	margin: 100px auto;
 	width: 80%;
@@ -143,6 +156,40 @@ h3{
 	padding: 0;
 }
 
+/* Footer */
+.footer {
+	background-color: #242F40;
+	padding: 10px 0;
+	text-align: center;
+}
+.footer-content {
+	max-width: 1200px;
+	margin: 0 auto;
+}
+.footer p {
+	margin-bottom: 10px;
+}
+.footer ul {
+	list-style: none;
+	padding: 0;
+}
+.footer ul li {
+	display: inline-block;
+	margin-right: 20px;
+}
+.footer ul li:last-child {
+	margin-right: 0;
+}
+.footer ul li a {
+	color: #fff;
+	text-decoration: none;
+}
+.footer ul li a:hover {
+	text-decoration: underline;
+}
+
+
+/* Media for other devices */
 @media (max-width: 700px){
 	.text-box h1{
 		font-size: 42px;

FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue

@@ -28,15 +28,6 @@ export default {
 
 <template>
 	<div class="sidebar" :style="{width: sidebarWidth}">
-		<h1>
-			<span v-if="collapsed">
-				<div> B </div>
-				<div> S </div>
-			</span>
-			<span v-else>
-				Brain Stormer
-			</span>
-		</h1>
 
 		<SidebarLink to="/" icon="home-icon">Home</SidebarLink>
 		<SidebarLink to="/dashboard" icon="dashboard-icon">Dashboard</SidebarLink>
@@ -48,6 +39,7 @@ export default {
 			<Svg name="sidebar-arrow.png" class="icon"/>
 			<button class="iconButton"> <img id="icon" src="../../icons/sidebar-arrow.png"/> </button>
 		</span>
+
 	</div>
 </template>
 
@@ -77,17 +69,19 @@ export default {
 
 	display: flex;
 	flex-direction: column;
+	margin-left: -38px;
 }
 
 .collapse-icon{
 	position: absolute;
 	bottom: 0;
-	padding: 4px;
+	right: 0px;
+	padding: 5px;
 	transition: 0.2s linear;
-
 }
 #icon{
 	height: 18px;
+	cursor: pointer;
 }
 .iconButton{
 	background-color: transparent;

FullstackProsjekt/src/frontend/src/components/shared/sidebar/SidebarLink.vue

@@ -23,25 +23,35 @@ export default {
 		<div class="icon-wrapper" v-if="collapsed">
 			<Svg :name="icon" class="icon" />
 		</div>
-		<transition name="fade">
+		<Transition name="fade">
       <span v-if="!collapsed" class="link-content">
         <Svg :name="icon" class="icon" />
         <slot />
       </span>
-		</transition>
+		</Transition>
 	</router-link>
 </template>
 
 <style scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.1ms ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+	transform: translateX(20px);
+	opacity: 0;
+}
+
 .link {
-	position: relative;
 	font-weight: 400;
-	margin: 0.1em 0;
-	padding: 0.4em;
+	padding: 0.2em;
 	border-radius: 0.25em;
 	height: 2.4em;
 	color: white;
 	text-decoration: none;
+	margin: 1px;
 }
 
 .link:hover {