styling start

frontend/src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { LoginComponent } from './login/login.component';
+import { LoginComponent } from './login-shit/login/login.component';
 import { AdminComponent } from './admin/admin.component';
-import { SignupComponent } from './signup/signup.component';
+import { SignupComponent } from './login-shit/signup/signup.component';
 
 const routes: Routes = [
   {

frontend/src/app/app.component.css

-nav {
-    position: sticky;
-    top: 0;
-    width: 100%;
-    background-color: #3f51b5;
-    color: #fff;
-    display: flex;
-    padding: 0 16px;
-    align-items: center;
-    height: 56px;
-    font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
-  }
\ No newline at end of file

frontend/src/app/app.component.html

-<nav>
-    NAVBAR
-    <button (click)="router.navigateByUrl('/');">Home</button>
-    <button *ngIf="auth.isAdmin()" (click)="router.navigateByUrl('/admin')">Dashboard</button>
-    <button *ngIf="!auth.isLoggedIn()" (click)="router.navigateByUrl('/login')">Login</button>
-    <button *ngIf="auth.isLoggedIn()" (click)="auth.logout()">Logout</button>
-    <button *ngIf="!auth.isLoggedIn()" (click)="router.navigateByUrl('/signup')">Sign Up</button>
-    <label >{{auth.getUsername()}}</label>
+<div class="flex h-screen flex-col">
+    <nav class="bg-violet-900 px-6 py-4 flex flex-row justify-between text-white items-center">
+    <div class="flex flex-row">
+            <h2 class="mr-6 border-2 border-transparent font-bold">Navbar</h2>
+            <div>
+                <button class="mr-4 border-2 border-transparent hover:border-solid hover:border-white hover:border-2 hover:rounded-lg px-2" (click)="router.navigateByUrl('/');">Home</button>
+                <button class="border-2 border-transparent hover:border-solid hover:border-white hover:border-2 hover:rounded-lg px-2" *ngIf="auth.isAdmin()" (click)="router.navigateByUrl('/admin')">Dashboard</button>
+            </div>
+        </div>
+        <div class="flex flex-row">
+            <button class="mr-4 border-2 border-transparent hover:border-solid hover:border-white hover:border-2 hover:rounded-lg px-2" *ngIf="!auth.isLoggedIn()" (click)="router.navigateByUrl('/login')">Login</button>
+            <button class="mr-4 border-2 border-transparent hover:border-solid hover:border-white hover:border-2 hover:rounded-lg px-2" *ngIf="auth.isLoggedIn()" (click)="auth.logout()">Logout</button>
+            <button class="mr-4 border-2 border-transparent hover:border-solid hover:border-white hover:border-2 hover:rounded-lg px-2" *ngIf="!auth.isLoggedIn()" (click)="router.navigateByUrl('/signup')">Sign Up</button>
+    
+            <div class="border-2 border-transparent bg-violet-950 h-8 w-8 rounded-full flex justify-center items-center">{{auth.getUsername().split('')[0].toUpperCase()}}</div>
+        </div>
     </nav>
+
+    <main class="w-full h-full">
         <router-outlet>
         </router-outlet>
+    </main>
+</div>
\ No newline at end of file

frontend/src/app/app.module.ts

@@ -5,12 +5,12 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
 import { AdminComponent } from './admin/admin.component'; 
-import { LoginComponent } from './login/login.component';
+import { LoginComponent } from './login-shit/login/login.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TokenInterceptor } from './interceptors/token-interceptor';
-import { SignupComponent } from './signup/signup.component';
-import { CreateUserComponent } from './create-user/create-user.component';
-import { UpdateUserComponent } from './update-user/update-user.component';
+import { SignupComponent } from './login-shit/signup/signup.component';
+import { CreateUserComponent } from './user-shit/create-user/create-user.component';
+import { UpdateUserComponent } from './user-shit/update-user/update-user.component';
 
 @NgModule({
   declarations: [

frontend/src/app/login-shit/login/login.component.html

+<div class="h-full w-full flex justify-center">
+    <div class="bg-white border-2 border-neutral-800 rounded-lg p-5 flex flex-col items-center mt-80 h-fit">
+        <h1>Login</h1>
+        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+            <input class="border-b-4 mt-2" type="text" placeholder="Username" formControlName="username">
+            <br>
+            <input class="border-b-4 mt-2" type="password" placeholder="Password" formControlName="password">
+            <br>
+            <button class="border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2" type="submit">Log In</button>
+        </form>
+    </div>
+</div>
\ No newline at end of file

frontend/src/app/login/login.component.ts → frontend/src/app/login-shit/login/login.component.ts

 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
-import { AuthenticationService } from '../services/authentication.service';
+import { AuthenticationService } from '../../services/authentication.service';
 
 @Component({
   selector: 'app-login',

frontend/src/app/login-shit/signup/signup.component.html

+<div class="h-full w-full flex justify-center">
+    <div class="bg-white border-2 border-neutral-800 rounded-lg p-5 flex flex-col items-center mt-80 h-fit">
+        <h1>Sign Up</h1>
+        <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
+            <input class="border-b-4 mt-2" type="text" placeholder="Username" formControlName="username">
+            <br>
+            <input class="border-b-4 mt-2" type="password" placeholder="Password" formControlName="password">
+            <br>
+            <button class="border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2" type="submit">Sign Up</button>
+        </form>
+    </div>
+</div>

frontend/src/app/signup/signup.component.ts → frontend/src/app/login-shit/signup/signup.component.ts

 import { Component } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
-import { UsersService } from '../services/users.service';
-import { AuthenticationService } from '../services/authentication.service';
-import { User } from '../Types/types';
+import { UsersService } from '../../services/users.service';
+import { AuthenticationService } from '../../services/authentication.service';
+import { User } from '../../Types/types';
 
 @Component({
   selector: 'app-signup',

frontend/src/app/login/login.component.css

-.form-signin {
-    width: 100%;
-    max-width: 330px;
-    padding: 15px;
-    margin: auto;
-}
-
-.form-signin .checkbox {
-    font-weight: 400;
-}
-
-.form-signin .form-floating:focus-within {
-    z-index: 2;
-}
-
-.form-signin input[type="email"] {
-    margin-bottom: -1px;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.form-signin input[type="password"] {
-    margin-bottom: 10px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-}
\ No newline at end of file

frontend/src/app/login/login.component.html

-<h1>Login</h1>
-<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
-    <input type="text" placeholder="Username" formControlName="username">
-    <br>
-    <input type="password" placeholder="Password" formControlName="password">
-    <br>
-    <button type="submit">Log In</button>
-</form>
\ No newline at end of file

frontend/src/app/signup/signup.component.html

-<h1>Sign Up</h1>
-<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
-    <input type="text" placeholder="Username" formControlName="username">
-    <br>
-    <input type="password" placeholder="Password" formControlName="password">
-    <br>
-    <button type="submit">Sign Up</button>
-</form>
\ No newline at end of file