From 9a5f91685ef5c5ee39e868a7e6fdf10e7ac1fc9e Mon Sep 17 00:00:00 2001 From: AdamBtech <60339324+AdamBtech@users.noreply.github.com> Date: Tue, 20 May 2025 13:40:59 +0200 Subject: [PATCH] Removed Primeng in favor of custom made components for easier styling (Too many Tailwind conflicts) --- package-lock.json | 48 +------------- package.json | 2 - src/app/app.config.ts | 18 +----- .../header-nav-links.component.html | 20 ++---- .../header-nav-links.component.ts | 9 ++- .../hero-display/hero-display.component.html | 6 +- .../main-layout/main-layout.component.html | 2 +- src/app/shared/ui/button/button.component.css | 0 .../shared/ui/button/button.component.html | 2 + src/app/shared/ui/button/button.component.ts | 31 ++++++++++ src/styles.css | 62 +++++++++++++++++-- 11 files changed, 105 insertions(+), 95 deletions(-) create mode 100644 src/app/shared/ui/button/button.component.css create mode 100644 src/app/shared/ui/button/button.component.html create mode 100644 src/app/shared/ui/button/button.component.ts diff --git a/package-lock.json b/package-lock.json index 0934be1..67a548f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,8 +17,6 @@ "@angular/router": "^19.2.0", "@primeng/themes": "^19.1.3", "prettier": "^3.5.3", - "primeicons": "^7.0.0", - "primeng": "^19.1.3", "rxjs": "~7.8.0", "tailwindcss-primeui": "^0.6.1", "tslib": "^2.3.0", @@ -405,6 +403,7 @@ "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-19.2.11.tgz", "integrity": "sha512-NR33bZVho7EgTc1fmCnmkwc2/U266n311Wfvk7VVtz+0Q9WliNdDLBon654V8IWSKvlqKXyU3W+fp0VjH/FvSw==", "license": "MIT", + "optional": true, "peer": true, "dependencies": { "tslib": "^2.3.0" @@ -503,22 +502,6 @@ } } }, - "node_modules/@angular/cdk": { - "version": "19.2.16", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.2.16.tgz", - "integrity": "sha512-67nbWqoiZIBc8nEaCn7GHd02bM5T9qAbJ5w+Zq4V19CL3oCtrCrS4CV3Lsoi5HETSmn4iZcYS/Dph8omCvNkew==", - "license": "MIT", - "peer": true, - "dependencies": { - "parse5": "^7.1.2", - "tslib": "^2.3.0" - }, - "peerDependencies": { - "@angular/common": "^19.0.0 || ^20.0.0", - "@angular/core": "^19.0.0 || ^20.0.0", - "rxjs": "^6.5.3 || ^7.4.0" - } - }, "node_modules/@angular/cli": { "version": "19.2.12", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.12.tgz", @@ -14669,6 +14652,7 @@ "version": "7.3.0", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz", "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==", + "dev": true, "license": "MIT", "dependencies": { "entities": "^6.0.0" @@ -14709,6 +14693,7 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.0.tgz", "integrity": "sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==", + "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=0.12" @@ -15168,33 +15153,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/primeicons": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz", - "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==", - "license": "MIT" - }, - "node_modules/primeng": { - "version": "19.1.3", - "resolved": "https://registry.npmjs.org/primeng/-/primeng-19.1.3.tgz", - "integrity": "sha512-KsrvJFblKg28kA6d4npnnABjKClmJv0CgDT/kOxFq5onQNBy4547DJzRGMba4+CMLKjHWWkYWuC+XSkPMNFrZg==", - "license": "SEE LICENSE IN LICENSE.md", - "dependencies": { - "@primeuix/styled": "^0.3.2", - "@primeuix/utils": "^0.3.2", - "tslib": "^2.3.0" - }, - "peerDependencies": { - "@angular/animations": "^19.0.0", - "@angular/cdk": "^19.0.0", - "@angular/common": "^19.0.0", - "@angular/core": "^19.0.0", - "@angular/forms": "^19.0.0", - "@angular/platform-browser": "^19.0.0", - "@angular/router": "^19.0.0", - "rxjs": "^6.0.0 || ^7.8.1" - } - }, "node_modules/proc-log": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz", diff --git a/package.json b/package.json index 9a843e8..79115b9 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,6 @@ "@angular/router": "^19.2.0", "@primeng/themes": "^19.1.3", "prettier": "^3.5.3", - "primeicons": "^7.0.0", - "primeng": "^19.1.3", "rxjs": "~7.8.0", "tailwindcss-primeui": "^0.6.1", "tslib": "^2.3.0", diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 9318617..43074b8 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -2,23 +2,7 @@ import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; -import { providePrimeNG } from 'primeng/config'; -import Aura from '@primeng/themes/aura'; // Choisissez votre thème export const appConfig: ApplicationConfig = { - providers: [ - provideRouter(routes), - provideAnimationsAsync(), - providePrimeNG({ - theme: { - preset: Aura, - options: { - cssLayer: { - name: 'primeng', - order: 'tailwind-base, primeng, tailwind-utilities' - } - } - } - }) - ] + providers: [provideRouter(routes), provideAnimationsAsync()], }; diff --git a/src/app/features/header-display/header-nav-links/header-nav-links.component.html b/src/app/features/header-display/header-nav-links/header-nav-links.component.html index 5d4e383..a98c7a8 100644 --- a/src/app/features/header-display/header-nav-links/header-nav-links.component.html +++ b/src/app/features/header-display/header-nav-links/header-nav-links.component.html @@ -1,20 +1,8 @@ diff --git a/src/app/features/header-display/header-nav-links/header-nav-links.component.ts b/src/app/features/header-display/header-nav-links/header-nav-links.component.ts index eaa394b..908e585 100644 --- a/src/app/features/header-display/header-nav-links/header-nav-links.component.ts +++ b/src/app/features/header-display/header-nav-links/header-nav-links.component.ts @@ -1,16 +1,15 @@ import { Component } from '@angular/core'; - -import { ButtonModule } from 'primeng/button'; +import { ButtonComponent } from '../../../shared/ui/button/button.component'; @Component({ selector: 'app-header-nav-links', - imports: [ButtonModule], + imports: [ButtonComponent], templateUrl: './header-nav-links.component.html', - styleUrl: './header-nav-links.component.css' + styleUrl: './header-nav-links.component.css', }) export class HeaderNavLinksComponent { - onClick(){ + onClick() { console.log('click'); } } diff --git a/src/app/features/hero-display/hero-display.component.html b/src/app/features/hero-display/hero-display.component.html index 1b37e88..d32e204 100644 --- a/src/app/features/hero-display/hero-display.component.html +++ b/src/app/features/hero-display/hero-display.component.html @@ -1,4 +1,4 @@ -
-

HERO SECTION

-

CREATIVE DEVELOPER

+
+

HERO SECTION

+

CREATIVE DEVELOPER

diff --git a/src/app/layout/components/main-layout/main-layout.component.html b/src/app/layout/components/main-layout/main-layout.component.html index a644189..3c75ac3 100644 --- a/src/app/layout/components/main-layout/main-layout.component.html +++ b/src/app/layout/components/main-layout/main-layout.component.html @@ -1,8 +1,8 @@
- +
diff --git a/src/app/shared/ui/button/button.component.css b/src/app/shared/ui/button/button.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/ui/button/button.component.html b/src/app/shared/ui/button/button.component.html new file mode 100644 index 0000000..d17bd4b --- /dev/null +++ b/src/app/shared/ui/button/button.component.html @@ -0,0 +1,2 @@ + diff --git a/src/app/shared/ui/button/button.component.ts b/src/app/shared/ui/button/button.component.ts new file mode 100644 index 0000000..7da9b85 --- /dev/null +++ b/src/app/shared/ui/button/button.component.ts @@ -0,0 +1,31 @@ +import { Component, input, output } from '@angular/core'; + +@Component({ + selector: 'app-button', + imports: [], + templateUrl: './button.component.html', + styleUrl: './button.component.css', +}) +export class ButtonComponent { + label = input('label'); + selected = input(false); + isNav = input(false); + onClick = output(); + + getButtonClass() { + const baseClass = + 'font-terminal-retro uppercase transition-all duration-300'; + + if (this.isNav()) { + return `${baseClass} bg-transparent text-nier-text-dark border-0 hover:underline`; + } + + return this.selected() + ? `${baseClass} bg-nier-dark text-nier-text-light border border-nier-border rounded-none` + : `${baseClass} bg-nier-mid text-nier-text-dark border border-nier-border rounded-none hover:bg-nier-dark hover:text-nier-text-light`; + } + + handleClick() { + this.onClick.emit(); + } +} diff --git a/src/styles.css b/src/styles.css index 3904463..9f75f73 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,8 +1,6 @@ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Major+Mono+Display&family=VT323&display=swap'); -@layer theme, tailwind-base, primeng, tailwind-utilities; - -@import "tailwindcss-primeui"; +@layer theme, tailwind-base, tailwind-utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/preflight.css" layer(tailwind-base); @@ -27,7 +25,22 @@ --color-nier-highlight: #5a5a50; /* Highlight for selection */ } } + @layer tailwind-utilities { + /* Font utilities */ + .font-terminal { + font-family: var(--font-terminal); + } + + .font-terminal-retro { + font-family: var(--font-terminal-retro); + } + + .font-terminal-nier { + font-family: var(--font-terminal-nier); + } + + /* Background utilities */ .bg-nier-bg { background-color: var(--color-nier-bg); } @@ -40,6 +53,7 @@ background-color: var(--color-nier-mid); } + /* Text utilities */ .text-nier-dark { color: var(--color-nier-text-dark); } @@ -48,10 +62,15 @@ color: var(--color-nier-text-light); } + /* Border utilities */ .border-nier-border { border-color: var(--color-nier-border); } + .border-nier-accent { + border-color: var(--color-nier-accent); + } + /* Grid background utility */ .bg-nier-grid { background-color: var(--color-nier-bg); @@ -59,8 +78,39 @@ linear-gradient(90deg, var(--color-nier-grid) 1px, transparent 1px); background-size: 20px 20px; } -} -@layer primeng { - /* Your PrimeNG customizations here */ + /* Button utilities */ + .nier-button { + background-color: var(--color-nier-mid); + color: var(--color-nier-text-dark); + border: 1px solid var(--color-nier-border); + font-family: var(--font-terminal-retro); + text-transform: uppercase; + padding: 0.5rem 1rem; + transition: all 0.3s; + } + + .nier-button:hover { + background-color: var(--color-nier-dark); + color: var(--color-nier-text-light); + } + + .nier-button-active { + background-color: var(--color-nier-dark); + color: var(--color-nier-text-light); + border: 1px solid var(--color-nier-border); + font-family: var(--font-terminal-retro); + text-transform: uppercase; + padding: 0.5rem 1rem; + } + + /* Interactive element focus styles */ + .nier-focus-ring { + outline: none; + } + + .nier-focus-ring:focus-visible { + outline: 2px solid var(--color-nier-dark); + outline-offset: 1px; + } }