From 1b1a8f0de8d1e03c5e0321ba24ad0138db58aef7 Mon Sep 17 00:00:00 2001
From: "alec.schmidt" <alec.schmidt@etu.hesge.ch>
Date: Wed, 7 Jun 2023 23:03:25 +0200
Subject: [PATCH] styling start
---
frontend/src/app/app-routing.module.ts | 4 +--
frontend/src/app/app.component.css | 12 -------
frontend/src/app/app.component.html | 34 +++++++++++++------
frontend/src/app/app.module.ts | 8 ++---
.../login/login-routing.module.ts | 0
.../login/login.component.css} | 0
.../app/login-shit/login/login.component.html | 12 +++++++
.../login/login.component.spec.ts | 0
.../{ => login-shit}/login/login.component.ts | 2 +-
.../{ => login-shit}/login/login.module.ts | 0
.../signup/signup.component.css | 0
.../login-shit/signup/signup.component.html | 12 +++++++
.../signup/signup.component.spec.ts | 0
.../signup/signup.component.ts | 6 ++--
frontend/src/app/login/login.component.css | 26 --------------
frontend/src/app/login/login.component.html | 8 -----
frontend/src/app/signup/signup.component.html | 8 -----
.../create-user/create-user.component.css} | 0
.../create-user/create-user.component.html | 0
.../create-user/create-user.component.spec.ts | 0
.../create-user/create-user.component.ts | 4 +--
.../update-user/update-user.component.css | 0
.../update-user/update-user.component.html | 0
.../update-user/update-user.component.spec.ts | 0
.../update-user/update-user.component.ts | 4 +--
frontend/src/index.html | 4 +--
frontend/src/styles.css | 4 ++-
frontend/tailwind.config.js | 3 ++
28 files changed, 69 insertions(+), 82 deletions(-)
rename frontend/src/app/{ => login-shit}/login/login-routing.module.ts (100%)
rename frontend/src/app/{create-user/create-user.component.css => login-shit/login/login.component.css} (100%)
create mode 100644 frontend/src/app/login-shit/login/login.component.html
rename frontend/src/app/{ => login-shit}/login/login.component.spec.ts (100%)
rename frontend/src/app/{ => login-shit}/login/login.component.ts (91%)
rename frontend/src/app/{ => login-shit}/login/login.module.ts (100%)
rename frontend/src/app/{ => login-shit}/signup/signup.component.css (100%)
create mode 100644 frontend/src/app/login-shit/signup/signup.component.html
rename frontend/src/app/{ => login-shit}/signup/signup.component.spec.ts (100%)
rename frontend/src/app/{ => login-shit}/signup/signup.component.ts (83%)
delete mode 100644 frontend/src/app/login/login.component.css
delete mode 100644 frontend/src/app/login/login.component.html
delete mode 100644 frontend/src/app/signup/signup.component.html
rename frontend/src/app/{update-user/update-user.component.css => user-shit/create-user/create-user.component.css} (100%)
rename frontend/src/app/{ => user-shit}/create-user/create-user.component.html (100%)
rename frontend/src/app/{ => user-shit}/create-user/create-user.component.spec.ts (100%)
rename frontend/src/app/{ => user-shit}/create-user/create-user.component.ts (91%)
create mode 100644 frontend/src/app/user-shit/update-user/update-user.component.css
rename frontend/src/app/{ => user-shit}/update-user/update-user.component.html (100%)
rename frontend/src/app/{ => user-shit}/update-user/update-user.component.spec.ts (100%)
rename frontend/src/app/{ => user-shit}/update-user/update-user.component.ts (91%)
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index f5a7872..33fb3c8 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -1,8 +1,8 @@
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 = [
{
diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css
index b32cb71..e69de29 100644
--- a/frontend/src/app/app.component.css
+++ b/frontend/src/app/app.component.css
@@ -1,12 +0,0 @@
-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
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 7e215bd..ae3f9f4 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,11 +1,23 @@
-<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>
-</nav>
-<router-outlet>
-</router-outlet>
\ No newline at end of file
+<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
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index e32444d..b5ae650 100644
--- a/frontend/src/app/app.module.ts
+++ b/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: [
diff --git a/frontend/src/app/login/login-routing.module.ts b/frontend/src/app/login-shit/login/login-routing.module.ts
similarity index 100%
rename from frontend/src/app/login/login-routing.module.ts
rename to frontend/src/app/login-shit/login/login-routing.module.ts
diff --git a/frontend/src/app/create-user/create-user.component.css b/frontend/src/app/login-shit/login/login.component.css
similarity index 100%
rename from frontend/src/app/create-user/create-user.component.css
rename to frontend/src/app/login-shit/login/login.component.css
diff --git a/frontend/src/app/login-shit/login/login.component.html b/frontend/src/app/login-shit/login/login.component.html
new file mode 100644
index 0000000..c6df74e
--- /dev/null
+++ b/frontend/src/app/login-shit/login/login.component.html
@@ -0,0 +1,12 @@
+<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
diff --git a/frontend/src/app/login/login.component.spec.ts b/frontend/src/app/login-shit/login/login.component.spec.ts
similarity index 100%
rename from frontend/src/app/login/login.component.spec.ts
rename to frontend/src/app/login-shit/login/login.component.spec.ts
diff --git a/frontend/src/app/login/login.component.ts b/frontend/src/app/login-shit/login/login.component.ts
similarity index 91%
rename from frontend/src/app/login/login.component.ts
rename to frontend/src/app/login-shit/login/login.component.ts
index 64e2754..7107c9e 100644
--- a/frontend/src/app/login/login.component.ts
+++ b/frontend/src/app/login-shit/login/login.component.ts
@@ -1,7 +1,7 @@
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',
diff --git a/frontend/src/app/login/login.module.ts b/frontend/src/app/login-shit/login/login.module.ts
similarity index 100%
rename from frontend/src/app/login/login.module.ts
rename to frontend/src/app/login-shit/login/login.module.ts
diff --git a/frontend/src/app/signup/signup.component.css b/frontend/src/app/login-shit/signup/signup.component.css
similarity index 100%
rename from frontend/src/app/signup/signup.component.css
rename to frontend/src/app/login-shit/signup/signup.component.css
diff --git a/frontend/src/app/login-shit/signup/signup.component.html b/frontend/src/app/login-shit/signup/signup.component.html
new file mode 100644
index 0000000..702b528
--- /dev/null
+++ b/frontend/src/app/login-shit/signup/signup.component.html
@@ -0,0 +1,12 @@
+<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>
diff --git a/frontend/src/app/signup/signup.component.spec.ts b/frontend/src/app/login-shit/signup/signup.component.spec.ts
similarity index 100%
rename from frontend/src/app/signup/signup.component.spec.ts
rename to frontend/src/app/login-shit/signup/signup.component.spec.ts
diff --git a/frontend/src/app/signup/signup.component.ts b/frontend/src/app/login-shit/signup/signup.component.ts
similarity index 83%
rename from frontend/src/app/signup/signup.component.ts
rename to frontend/src/app/login-shit/signup/signup.component.ts
index 7927424..ef685e7 100644
--- a/frontend/src/app/signup/signup.component.ts
+++ b/frontend/src/app/login-shit/signup/signup.component.ts
@@ -1,9 +1,9 @@
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',
diff --git a/frontend/src/app/login/login.component.css b/frontend/src/app/login/login.component.css
deleted file mode 100644
index f283317..0000000
--- a/frontend/src/app/login/login.component.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.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
diff --git a/frontend/src/app/login/login.component.html b/frontend/src/app/login/login.component.html
deleted file mode 100644
index 6441cff..0000000
--- a/frontend/src/app/login/login.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<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
diff --git a/frontend/src/app/signup/signup.component.html b/frontend/src/app/signup/signup.component.html
deleted file mode 100644
index 099f630..0000000
--- a/frontend/src/app/signup/signup.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<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
diff --git a/frontend/src/app/update-user/update-user.component.css b/frontend/src/app/user-shit/create-user/create-user.component.css
similarity index 100%
rename from frontend/src/app/update-user/update-user.component.css
rename to frontend/src/app/user-shit/create-user/create-user.component.css
diff --git a/frontend/src/app/create-user/create-user.component.html b/frontend/src/app/user-shit/create-user/create-user.component.html
similarity index 100%
rename from frontend/src/app/create-user/create-user.component.html
rename to frontend/src/app/user-shit/create-user/create-user.component.html
diff --git a/frontend/src/app/create-user/create-user.component.spec.ts b/frontend/src/app/user-shit/create-user/create-user.component.spec.ts
similarity index 100%
rename from frontend/src/app/create-user/create-user.component.spec.ts
rename to frontend/src/app/user-shit/create-user/create-user.component.spec.ts
diff --git a/frontend/src/app/create-user/create-user.component.ts b/frontend/src/app/user-shit/create-user/create-user.component.ts
similarity index 91%
rename from frontend/src/app/create-user/create-user.component.ts
rename to frontend/src/app/user-shit/create-user/create-user.component.ts
index 0433a87..984f2ec 100644
--- a/frontend/src/app/create-user/create-user.component.ts
+++ b/frontend/src/app/user-shit/create-user/create-user.component.ts
@@ -1,7 +1,7 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { User } from '../Types/types';
-import { UsersService } from '../services/users.service';
+import { User } from '../../Types/types';
+import { UsersService } from '../../services/users.service';
@Component({
selector: 'app-create-user',
diff --git a/frontend/src/app/user-shit/update-user/update-user.component.css b/frontend/src/app/user-shit/update-user/update-user.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/update-user/update-user.component.html b/frontend/src/app/user-shit/update-user/update-user.component.html
similarity index 100%
rename from frontend/src/app/update-user/update-user.component.html
rename to frontend/src/app/user-shit/update-user/update-user.component.html
diff --git a/frontend/src/app/update-user/update-user.component.spec.ts b/frontend/src/app/user-shit/update-user/update-user.component.spec.ts
similarity index 100%
rename from frontend/src/app/update-user/update-user.component.spec.ts
rename to frontend/src/app/user-shit/update-user/update-user.component.spec.ts
diff --git a/frontend/src/app/update-user/update-user.component.ts b/frontend/src/app/user-shit/update-user/update-user.component.ts
similarity index 91%
rename from frontend/src/app/update-user/update-user.component.ts
rename to frontend/src/app/user-shit/update-user/update-user.component.ts
index 0409efe..749e53d 100644
--- a/frontend/src/app/update-user/update-user.component.ts
+++ b/frontend/src/app/user-shit/update-user/update-user.component.ts
@@ -1,7 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { User } from '../Types/types';
-import { UsersService } from '../services/users.service';
+import { User } from '../../Types/types';
+import { UsersService } from '../../services/users.service';
@Component({
selector: 'app-update-user',
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 3af61ec..200b066 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
-<body>
- <app-root></app-root>
+<body class="bg-violet-100 h-screen">
+ <app-root style="display: block; height: 100%;"></app-root>
</body>
</html>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 5dbc40a..2d07941 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,4 +1,6 @@
/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 7586753..3ccc1a8 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -5,6 +5,9 @@ module.exports = {
],
theme: {
extend: {},
+ fontFamily: {
+ 'sans': ["'Roboto'"]
+ }
},
plugins: [],
}
--
GitLab