new images, tailwindcss 4

bizmatch-client/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+    "plugins": {
+        "@tailwindcss/postcss": {}
+    }
+}

bizmatch-client/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --host 0.0.0.0",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
@@ -29,6 +29,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@ng-select/ng-select": "^14.2.6",
     "@ngneat/until-destroy": "^10.0.0",
+    "@tailwindcss/postcss": "^4.1.3",
     "browser-bunyan": "^1.8.0",
     "dayjs": "^1.11.13",
     "express": "^4.18.2",
@@ -40,7 +41,9 @@
     "ngx-quill": "^27.0.1",
     "ngx-sharebuttons": "^17.0.0",
     "on-change": "^5.0.1",
+    "postcss": "^8.5.3",
     "rxjs": "~7.8.0",
+    "tailwindcss": "^4.1.3",
     "tslib": "^2.3.0",
     "urlcat": "^3.1.0",
     "zone.js": "~0.15.0"
@@ -52,15 +55,12 @@
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
-    "autoprefixer": "^10.4.21",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "postcss": "^8.5.3",
-    "tailwindcss": "^3.4.17",
     "typescript": "~5.7.2"
   }
-}
+}

bizmatch-client/src/app/components/footer/footer.component.ts

@@ -1,8 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { Router, RouterModule } from '@angular/router';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { initFlowbite } from 'flowbite';
 
 @Component({
   selector: 'app-footer',
@@ -17,5 +18,11 @@ export class FooterComponent {
   currentYear: number = new Date().getFullYear();
   isHomeRoute = false;
   constructor(private router: Router) {}
-  ngOnInit() {}
+  ngOnInit() {
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        initFlowbite();
+      }
+    });
+  }
 }

bizmatch-client/src/app/components/header/header.component.html

@@ -37,67 +37,79 @@
         </div>
       </div>
       }
-      <button
-        type="button"
-        class="flex text-sm bg-gray-400 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
-        id="user-menu-button"
-        aria-expanded="false"
-        [attr.data-dropdown-toggle]="user ? 'user-login' : 'user-unknown'"
-        data-dropdown-placement="bottom"
-      >
-        <span class="sr-only">Open user menu</span>
-        @if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
-        <img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}" alt="user photo" />
-        } @else {
-        <i class="flex justify-center items-center text-stone-50 w-8 h-8 rounded-full fa-solid fa-bars"></i>
-        }
-      </button>
-      <!-- Dropdown menu -->
-      @if(user){
-      <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-login">
-        <div class="px-4 py-3">
-          <span class="block text-sm text-gray-900 dark:text-white">Welcome, {{ user.firstname }} </span>
-          <span class="block text-sm text-gray-500 truncate dark:text-gray-400">{{ user.email }}</span>
-        </div>
-        <ul class="py-2" aria-labelledby="user-menu-button">
-          <li>
-            <a routerLink="/account" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Account</a>
-          </li>
+      <!-- Menu Button ohne Flowbite -->
+      <div class="relative">
+        <button type="button" class="relative inline-flex justify-center items-center w-8 h-8 rounded-full bg-gray-400 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600" id="user-menu-button" aria-expanded="false" (click)="toggleUserMenu()">
+          <span class="sr-only">Open user menu</span>
           @if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
-          <li>
-            <a routerLink="/createBusinessListing" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Create Listing</a>
-          </li>
+          <img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}" alt="user photo" />
+          } @else {
+          <div class="flex justify-center items-center w-full h-full">
+            <div class="w-4 h-3 flex flex-col justify-between">
+              <span class="block h-0.5 w-full bg-stone-50"></span>
+              <span class="block h-0.5 w-full bg-stone-50"></span>
+              <span class="block h-0.5 w-full bg-stone-50"></span>
+            </div>
+          </div>
           }
-          <li>
-            <a routerLink="/myListings" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Listings</a>
-          </li>
-          <li>
-            <a routerLink="/myFavorites" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Favorites</a>
-          </li>
-          <li>
-            <a routerLink="/logout" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Logout</a>
-          </li>
-        </ul>
-        @if(authService.isAdmin() | async){
-        <ul class="py-2">
-          <li>
-            <a routerLink="admin/users" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Users (Admin)</a>
-          </li>
-        </ul>
+        </button>
+
+        <!-- Dropdown menu für eingeloggte Benutzer -->
+        @if(user){
+        <div
+          class="drop-shadow-custom-bg z-10 size-max absolute right-0 top-full mt-1 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600"
+          id="user-menu-dropdown"
+          [ngClass]="{ hidden: !userMenuVisible }"
+        >
+          <div class="px-4 py-3">
+            <span class="block text-sm text-gray-900 dark:text-white">Welcome, {{ user.firstname }} </span>
+            <span class="block text-sm text-gray-500 truncate dark:text-gray-400">{{ user.email }}</span>
+          </div>
+          <ul class="py-2" aria-labelledby="user-menu-button">
+            <li>
+              <a routerLink="/account" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Account</a>
+            </li>
+            @if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
+            <li>
+              <a routerLink="/createBusinessListing" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Create Listing</a>
+            </li>
+            }
+            <li>
+              <a routerLink="/myListings" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Listings</a>
+            </li>
+            <li>
+              <a routerLink="/myFavorites" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Favorites</a>
+            </li>
+            <li>
+              <a routerLink="/logout" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Logout</a>
+            </li>
+          </ul>
+          @if(authService.isAdmin() | async){
+          <ul class="py-2">
+            <li>
+              <a routerLink="admin/users" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Users (Admin)</a>
+            </li>
+          </ul>
+          }
+        </div>
+        } @else {
+        <!-- Dropdown menu für nicht eingeloggte Benutzer -->
+        <div
+          class="drop-shadow-custom-bg z-10 size-max absolute right-0 top-full mt-1 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600"
+          id="user-menu-dropdown"
+          [ngClass]="{ hidden: !userMenuVisible }"
+        >
+          <ul class="py-2" aria-labelledby="user-menu-button">
+            <li>
+              <a routerLink="/login" [queryParams]="{ mode: 'login' }" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Log In</a>
+            </li>
+            <li>
+              <a routerLink="/login" [queryParams]="{ mode: 'register' }" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign Up</a>
+            </li>
+          </ul>
+        </div>
         }
       </div>
-      } @else {
-      <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-unknown">
-        <ul class="py-2" aria-labelledby="user-menu-button">
-          <li>
-            <a routerLink="/login" [queryParams]="{ mode: 'login' }" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Log In</a>
-          </li>
-          <li>
-            <a routerLink="/login" [queryParams]="{ mode: 'register' }" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign Up</a>
-          </li>
-        </ul>
-      </div>
-      }
     </div>
   </div>
   <!-- Mobile filter button -->

bizmatch-client/src/app/components/header/header.component.ts

@@ -49,6 +49,7 @@ export class HeaderComponent {
   sortByOptions: KeyValueAsSortBy[] = [];
   numberOfBroker$: Observable<number>;
   numberOfCommercial$: Observable<number>;
+  userMenuVisible: boolean = false;
   constructor(
     private router: Router,
     private userService: UserService,
@@ -68,7 +69,19 @@ export class HeaderComponent {
       this.sortDropdownVisible = false;
     }
   }
+  @HostListener('document:click', ['$event'])
+  handleOutsideClick(event: Event) {
+    const target = event.target as HTMLElement;
+    // Schließe das User-Menü, wenn außerhalb geklickt wird
+    if (this.userMenuVisible && !target.closest('#user-menu-button') && !target.closest('#user-menu-dropdown')) {
+      this.userMenuVisible = false;
+    }
+  }
   async ngOnInit() {
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+      }
+    });
     const token = await this.authService.getToken();
     this.keycloakUser = map2User(token);
     if (this.keycloakUser) {
@@ -194,6 +207,9 @@ export class HeaderComponent {
   toggleSortDropdown() {
     this.sortDropdownVisible = !this.sortDropdownVisible;
   }
+  toggleUserMenu() {
+    this.userMenuVisible = !this.userMenuVisible;
+  }
   get isProfessional() {
     return this.user?.customerType === 'professional';
   }

bizmatch-client/src/app/pages/business-listings/business-listings.component.html

@@ -6,10 +6,11 @@
     <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden hover:shadow-xl">
       <!-- Hover-Effekt hinzugefügt -->
       <div class="p-6 flex flex-col h-full relative z-[0]">
-        <div class="flex items-center mb-4">
-          <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2 text-xl"></i>
+        <div class="flex items-center justify-between mb-4">
+          <img src="assets/images/{{ listing.type }}.png" alt="Image" class="w-full h-18 object-contain object-left" />
+          <!-- <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2 text-xl"></i> -->
           <!-- Icon vergrößert -->
-          <span [class]="selectOptions.getTextColorType(listing.type)" class="font-bold text-lg">{{ selectOptions.getBusiness(listing.type) }}</span>
+          <span class="color-{{ listing.type }} w-full text-right font-bold text-2xl">{{ selectOptions.getBusiness(listing.type) }}</span>
           <!-- Schriftgröße erhöht -->
         </div>
         <h2 class="text-xl font-semibold mb-4">
@@ -40,7 +41,7 @@
         <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" alt="Company logo" class="absolute bottom-[80px] right-[20px] h-[45px] w-auto" />
         <!-- Position und Größe des Bildes angepasst -->
         <div class="flex-grow"></div>
-        <button class="bg-green-500 hover:bg-green-600 text-white px-5 py-3 rounded-full w-full flex items-center justify-center mt-4 transition-colors duration-200" [routerLink]="['/details-business-listing', listing.id]">
+        <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-5 py-3 rounded-full w-full flex items-center justify-center mt-4 transition-colors duration-200" [routerLink]="['/details-business-listing', listing.id]">
           <!-- Button-Größe und Hover-Effekt verbessert -->
           View Full Listing
           <i class="fas fa-arrow-right ml-2"></i>

bizmatch-client/src/app/pages/home/home.component.html

@@ -54,7 +54,7 @@
       </div>
     </div>
     <div class="flex justify-center mt-10">
-      <a routerLink="/businessListings" class="bg-green-500 hover:bg-green-700 md:text-2xl text-lg text-white font-semibold px-8 py-4 rounded-full shadow-lg transition duration-300"> View Available Businesses </a>
+      <a routerLink="/businessListings" class="bg-emerald-500 hover:bg-emerald-700 md:text-2xl text-lg text-white font-semibold px-8 py-4 rounded-full shadow-lg transition duration-300"> View Available Businesses </a>
     </div>
   </div>
 </section>

bizmatch-client/src/index.html

@@ -1,13 +1,32 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>BizmatchClient</title>
-  <base href="/">
-  <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>
+  <head>
+    <title>Bizmatch - Find Business for sale</title>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <meta name="description" content="Find or Sell Businesses and Restaurants" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="robots" content="index, follow" />
+    <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
+    <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="front-page - BizMatch" />
+    <meta property="og:description" content="We are dedicated to providing a simple to use way for people in business to get in contact with each other." />
+    <meta property="og:site_name" content="BizMatch" />
+    <meta property="article:modified_time" content="2016-11-17T15:57:10+00:00" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <base href="/" />
+    <link rel="icon" href="assets/cropped-Favicon-32x32.png" sizes="32x32" />
+    <!-- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" /> -->
+    <!-- <link rel="icon" href="cropped-Favicon-192x192.png" sizes="192x192"> -->
+    <!-- <link rel="apple-touch-icon" href="cropped-Favicon-180x180.png"> -->
+  </head>
+  <body class="flex flex-col min-h-screen">
+    <app-root></app-root>
+  </body>
 </html>

bizmatch-client/src/styles.scss

@@ -1,19 +1,34 @@
+@import '@ng-select/ng-select/themes/default.theme.css';
 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
 @import '@fortawesome/fontawesome-free/css/all.min.css';
 
-@import 'tailwindcss/base.css';
-@import 'tailwindcss/components.css';
-@import 'tailwindcss/utilities.css';
+@import 'tailwindcss';
 
 @import 'ngx-sharebuttons/themes/default';
 
+@config "../tailwind.config.js";
+.color-automotive {
+  color: #00bc7d;
+}
+.color-franchise {
+  color: #c27aff;
+}
+.color-service {
+  color: #16bdca;
+}
+.color-foodAndRestaurant {
+  color: #b45309;
+}
+.color-manufacturing {
+  color: #f98080;
+}
 :root {
   --text-color-secondary: rgba(255, 255, 255);
   --wrapper-width: 1491px;
   // --secondary-color: #ffffff; /* Setzt die secondary Farbe auf weiß */
 }
-.p-button.p-button-secondary.p-button-outlined {
-  color: #ffffff;
+button {
+  cursor: pointer;
 }
 html,
 body,

bizmatch-client/tailwind.config.js

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   safelist: [
     'text-red-400',

bizmatch/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --host 0.0.0.0 & http-server ../bizmatch-server",
+    "start": "ng serve --port=4300 --host 0.0.0.0 & http-server ../bizmatch-server",
     "prebuild": "node version.js",
     "build": "node version.js && ng build",
     "build.dev": "node version.js && ng build --configuration dev --output-hashing=all",
@@ -76,4 +76,4 @@
     "tailwindcss": "^3.4.4",
     "typescript": "~5.4.5"
   }
-}
+}