From 098680358379f26788dedfa0c038b10c618bc1d1 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.de>
Date: Tue, 7 Jan 2025 09:59:47 +0100
Subject: [PATCH] style update

---
 src/app/HotelItem/HotelItem.component.html     |  6 +++---
 .../hotel-details/hotel-details.component.html |  4 ++--
 src/app/hotel-form/hotel-form.component.html   | 12 ++++++------
 src/app/hotel-list/hotel-list.component.html   |  2 +-
 src/app/new-hotel/new-hotel.component.html     | 18 +++++++++---------
 src/index.html                                 |  2 +-
 src/styles.css                                 | 16 ++++++++++++++++
 tailwind.config.js                             | 12 +++++++++++-
 8 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/src/app/HotelItem/HotelItem.component.html b/src/app/HotelItem/HotelItem.component.html
index 5f2a078..cb2a46b 100644
--- a/src/app/HotelItem/HotelItem.component.html
+++ b/src/app/HotelItem/HotelItem.component.html
@@ -1,8 +1,8 @@
 <p class="text-2xl font-bold text-gray-800 mb-2">Name: {{hotel.hotelName}}</p>
 <p class="text-base text-gray-600 mb-4">Description: {{hotel.description}}</p>
 <p class="text-lg font-medium text-green-600 mb-4">Price: {{hotel.price | currency : getCurrencyCode(selectedLanguage) : "symbol" : "2.2-2" : selectedLanguage}}</p>
-<select [ngModel]="selectedLanguage" (ngModelChange)="languageChange($event)" class="block w-full p-2 border border-gray-300 rounded-md mb-4 focus:border-blue-500 focus:ring focus:ring-blue-200">
+<select [ngModel]="selectedLanguage" (ngModelChange)="languageChange($event)" class="input-field block w-full p-2 border border-gray-300 rounded-md mb-4 focus:border-blue-500 focus:ring focus:ring-blue-200">
   <option *ngFor="let lang of langs" [value]="lang.code" [selected]="lang.lang == 'de'">{{lang.lang}}</option>
 </select>
-<img src="{{hotel.imageUrl}}" alt="Hotel" class="w-full h-auto rounded-lg shadow-lg mb-4">
-<a *ngIf="!isDetail" routerLink="/hotels/{{hotel.id}}" class="text-blue-600 hover:text-blue-800 hover:underline mb-4 block">Details</a>
+<img src="{{hotel.imageUrl}}" alt="Hotel" class="w-full rounded-full h-auto animate-shake shadow-lg mb-4">
+<a *ngIf="!isDetail" routerLink="/hotels/{{hotel.id}}" class="submit-button text-blue-600 hover:text-blue-800 hover:underline mb-4 block">Details</a>
diff --git a/src/app/hotel-details/hotel-details.component.html b/src/app/hotel-details/hotel-details.component.html
index 4ceeab2..44ae281 100644
--- a/src/app/hotel-details/hotel-details.component.html
+++ b/src/app/hotel-details/hotel-details.component.html
@@ -1,5 +1,5 @@
-@if (hotel != null) {
+@if (hotel) {
   <app-hotel-item [hotel]="hotel" [isDetail]="true"></app-hotel-item>
   <app-hotel-form [hotel]="hotel"></app-hotel-form>
-  <button (click)="delete()">DELETE</button>
+  <button class="delete-button" (click)="delete()">DELETE</button>
 }
diff --git a/src/app/hotel-form/hotel-form.component.html b/src/app/hotel-form/hotel-form.component.html
index ed7a0bc..ae7700c 100644
--- a/src/app/hotel-form/hotel-form.component.html
+++ b/src/app/hotel-form/hotel-form.component.html
@@ -2,17 +2,17 @@
 <h1>{{errorMsg}}</h1>
 <form [formGroup]="hotelForm">
   <label for="name">Name</label>
-  <div class="text-red" *ngIf="errorMessages['name']">{{ errorMessages['name'] }}</div>
-  <input type="text" class="border-red-500" id="name" formControlName="name">
+  <div class="text-red-500 text-5xl font-bold" *ngIf="errorMessages['name']">{{ errorMessages['name'] }}</div>
+  <input type="text" class="border-red-500 text-3xl border-3 rounded-full bg-gray-500 font-bold p-3 m-3 border-8" id="name" formControlName="name">
   <label for="description">Description</label>
   <div class="text-red" *ngIf="errorMessages['description']">{{ errorMessages['description'] }}</div>
-  <input type="text" class="border-red-500" [class.border-8]='hotelForm.get("description")?.invalid' id="description"
+  <input type="text" class="input-field" [class.border-8]='hotelForm.get("description")?.invalid' id="description"
     formControlName="description">
   <label for="price">Price</label>
   <div class="text-red" *ngIf="errorMessages['price']">{{ errorMessages['price'] }}</div>
-  <input type="number" class="border-red-500"
+  <input type="number" class="input-field"
     [class.border-8]='hotelForm.get("price")?.invalid && hotelForm.get("price")?.touched' id="price"
     formControlName="price">
-  <button (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Submit</button>
-  <a routerLink="/">Cancel</a>
+  <button class="submit-button" (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Submit</button>
+  <a class="back-button" routerLink="/">Cancel</a>
 </form>
diff --git a/src/app/hotel-list/hotel-list.component.html b/src/app/hotel-list/hotel-list.component.html
index d1d3a7f..8d727a9 100644
--- a/src/app/hotel-list/hotel-list.component.html
+++ b/src/app/hotel-list/hotel-list.component.html
@@ -1,6 +1,6 @@
 <div class="container p-4 mx-auto max-w-4xl">
   <h1>{{'hello' | uppercase | text}}</h1>
-  <a routerLink="/new">CREATE NEW HOTEL</a>
+  <a class="submit-button" routerLink="/new">CREATE NEW HOTEL</a>
   <app-search [(input)]="search"></app-search>
   @if (hotels[0].hotelName) {
     <div *ngFor="let hotel of hotels">
diff --git a/src/app/new-hotel/new-hotel.component.html b/src/app/new-hotel/new-hotel.component.html
index 382fdde..43f0369 100644
--- a/src/app/new-hotel/new-hotel.component.html
+++ b/src/app/new-hotel/new-hotel.component.html
@@ -2,25 +2,25 @@
 
 <form [formGroup]="hotelForm">
   <label for="name">Name</label>
-  <div class="text-red" *ngIf="errorMessages['name']">{{ errorMessages['name'] }}</div>
+  <div class="text-red-500" *ngIf="errorMessages['name']">{{ errorMessages['name'] }}</div>
   <input type="text" class="border-red-500" [class.border-8]='hotelForm.get("name")?.invalid && hotelForm.get("name")?.touched' id="name" formControlName="name">
   <label for="description">Description</label>
-  <div class="text-red" *ngIf="errorMessages['description']">{{ errorMessages['description'] }}</div>
+  <div class="text-red-500" *ngIf="errorMessages['description']">{{ errorMessages['description'] }}</div>
   <input type="text" class="border-red-500" [class.border-8]='hotelForm.get("description")?.invalid && hotelForm.get("description")?.touched' id="description" formControlName="description">
   <label for="imageUrl">Image</label>
-  <div class="text-red" *ngIf="errorMessages['imageUrl']">{{ errorMessages['imageUrl'] }}</div>
+  <div class="text-red-500" *ngIf="errorMessages['imageUrl']">{{ errorMessages['imageUrl'] }}</div>
   <input type="url" class="border-red-500" [class.border-8]='hotelForm.get("imageUel")?.invalid && hotelForm.get("imageUrl")?.touched' id="imageUrl" formControlName="imageUrl">
   <label for="price">Price</label>
-  <div class="text-red" *ngIf="errorMessages['price']">{{ errorMessages['price'] }}</div>
+  <div class="text-red-500" *ngIf="errorMessages['price']">{{ errorMessages['price'] }}</div>
   <input type="number" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid' id="price" formControlName="price">
   <label for="rating">Rating</label>
-  <div class="text-red" *ngIf="errorMessages['rating']">{{ errorMessages['rating'] }}</div>
+  <div class="text-red-500" *ngIf="errorMessages['rating']">{{ errorMessages['rating'] }}</div>
   <input type="rating" class="border-red-500" [class.border-8]='hotelForm.get("rating")?.invalid' id="rating" formControlName="rating">
-  <button (click)="addTag()">Add Tag</button>
+  <button class="submit-button" (click)="addTag()">Add Tag</button>
   @for (tag of getTags().controls; track null) {
     <input type="tag" class="border-red-500" [class.border-8]='hotelForm.get("tag")?.invalid' id="tag" formControlName="tag">
-    <button (click)="deleteTag(tag)">delete</button>
+    <button (click)="deleteTag(tag)" class="delete-button">delete</button>
   }
-  <button (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Submit</button>
-  <a routerLink="/">Cancel</a>
+  <button class="submit-button" (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Submit</button>
+  <a routerLink="/" class="delete-button">Cancel</a>
 </form>
diff --git a/src/index.html b/src/index.html
index 3d91cf2..639aa9b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,7 +8,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="./styles.css">
 </head>
-<body class="bg-pink-600">
+<body class="bg-pink-600 p-32">
   <app-root></app-root>
 </body>
 </html>
diff --git a/src/styles.css b/src/styles.css
index 2adbbf3..cea93df 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -6,3 +6,19 @@
 .button {
   @apply border-black rounded px-3 py-1 border-[3px];
 }
+
+.input-field {
+  @apply border-red-500 text-3xl rounded-full bg-gray-500 font-bold p-3 m-3 border-8
+}
+
+.back-button {
+  @apply border-black rounded bg-blue-500 border-[30px] m-3 text-3xl font-bold p-3
+}
+
+.submit-button {
+  @apply border-black rounded-full bg-green-500 border-[30px] m-3 text-3xl font-bold p-3
+}
+
+.delete-button {
+  @apply border-black rounded bg-red-500 border-[30px] m-3 text-3xl font-bold p-3
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 068e770..53ccdac 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,17 @@ module.exports = {
     extend: {
       colors: {
         ...colors,
-      }
+      },
+      keyframes: {
+        shake: {
+          '0%, 100%': { transform: 'translateX(0)' },
+          '25%': { transform: 'translateX(-30px)' },
+          '75%': { transform: 'translateX(30px)' },
+        },
+      },
+      animation: {
+        shake: 'shake 0.2s ease-in-out infinite',
+      },
     },
   },
   plugins: [],